Cocos2d サンプルプログラム

【概要】

Cocos2d は2次元ゲームのフレームワークである．Python で動作する．

このWebページでは，Cocos2d を用いたブロック崩しゲームのサンプルプログラムを掲載する．プレイヤーは左右キーでパドルを操作し，ボールを跳ね返してブロックを破壊する．スコア表示，ゲームオーバー画面，クリア画面を備える．

関連する資料：Cocos2d の概要 [PDF], [パワーポイント]

関連する資料：ゲームエンジン [PDF], [パワーポイント]

【目次】

【関連する外部ページ】 https://www.cocos.com/endoc.html
http://docplayer.net/62131747-Python-game-programming-by-example.html

【サイト内の関連情報】

1. 開発環境の準備

Python 3.12 のインストール

Pythonのインストールを行い、Pythonのプログラムを実行する環境を整える。扱う環境は、Windows搭載パソコンである。金子研究室では、Python 3.12.10を推奨する。

[Windows での Python 3.12 のインストール手順を見るには、ここをクリック]

Windows での Python 3.12 のインストール

以下のいずれかの方法でPython 3.12をインストールする。Pythonがインストール済みの場合、この手順は不要である。

方法 1：winget によるインストール

【インストールコマンドの実行方法】

管理者権限でコマンドプロンプトを起動する（手順：Windowsキーまたはスタートメニュー → cmd と入力 → 右クリック → 「管理者として実行」）。そして、コマンド全体をコマンドプロンプトにコピー＆ペーストする。

--scope machine を指定することで、システム全体（全ユーザー向け）にインストールされる。このオプションの実行には管理者権限が必要である。インストール完了後、コマンドプロンプトを再起動するとPATHが反映される。

REM Python 3.12 をシステム領域にインストール
winget install --id Python.Python.3.12 -e --scope machine --silent --accept-source-agreements --accept-package-agreements --override "/quiet InstallAllUsers=1 PrependPath=1 Include_test=0 Include_pip=1 Include_launcher=1 InstallLauncherAllUsers=1 TargetDir=\"C:\Program Files\Python312\""

REM Python と Scripts を PATH 先頭に追加
powershell -NoProfile -Command "$p='C:\Program Files\Python312'; $s=\"$p\Scripts\"; $c=[Environment]::GetEnvironmentVariable('Path','Machine'); if((Test-Path $p) -and (';'+$c+';' -notlike \"*;$p;*\") -and (';'+$c+';' -notlike \"*;$s;*\")){[Environment]::SetEnvironmentVariable('Path',\"$p;$s;$c\",'Machine')}"

方法 2：インストーラーによるインストール

  1. Python公式サイト（https://www.python.org/downloads/）にアクセスし、「Download Python 3.x.x」ボタンからWindows用インストーラーをダウンロードする。
  2. ダウンロードしたインストーラーを実行する。
  3. 初期画面の下部に表示される「Add python.exe to PATH」にチェックを入れてから「Customize installation」を選択する。このチェックを入れ忘れると、コマンドプロンプトから python コマンドを実行できない。
  4. 「Install Python 3.xx for all users」にチェックを入れ、「Install」をクリックする。

インストールの確認

コマンドプロンプトで以下を実行する。

python --version

バージョン番号（例：Python 3.12.x）が表示されればインストール成功である。「'python' は、内部コマンドまたは外部コマンドとして認識されていません。」と表示される場合は、インストールが正常に完了していない。

Python の開発環境 Visual Studio Code のインストールと Python 用の設定

Python の開発環境Visual Studio Code（プログラムを編集するソフトウェア。以下、VS Code）を整える。

[Windows での Visual Studio Code のインストールと Python 用の設定手順を見るには、ここをクリック]

Windows での Visual Studio Code のインストールと Python 用の設定手順

1. VS Code と拡張機能のインストール

以下のコマンドにより，既存の VS Code を削除し，全ユーザー共有の設定で再インストールしたうえで，拡張機能（VS Code に機能を追加するソフトウェア）をまとめて導入する．

【インストールコマンドの実行方法】

管理者権限でコマンドプロンプトを起動する（手順：Windows キーまたはスタートメニュー → cmd と入力 → 右クリック → 「管理者として実行」）。そして，コマンド全体をコマンドプロンプトにコピー＆ペーストする。

インストールコマンド


REM ============================================================
REM Microsoft Visual Studio Code
REM ============================================================
winget uninstall -e --id Microsoft.VisualStudioCode --silent --disable-interactivity --accept-source-agreements
rmdir /s /q C:\ProgramData\vscode-extensions 2>nul
rmdir /s /q "%APPDATA%\Code" 2>nul
rmdir /s /q "%USERPROFILE%\.vscode" 2>nul
rmdir /s /q "%LOCALAPPDATA%\Microsoft\vscode-update" 2>nul

REM VS Code をシステム領域に新規インストール
winget install --scope machine --id Microsoft.VisualStudioCode -e --silent --accept-source-agreements --accept-package-agreements

REM 全ユーザー共有の拡張機能フォルダ
mkdir C:\ProgramData\vscode-extensions 2>nul
icacls "C:\ProgramData\vscode-extensions" /grant "Everyone:(OI)(CI)M" /T

REM スタートメニューのショートカットを --extensions-dir 付きで再作成
rmdir /s /q "C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Visual Studio Code" 2>nul
del "C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Visual Studio Code.lnk" 2>nul
powershell -NoProfile -Command "$s=New-Object -ComObject WScript.Shell; $lnk=$s.CreateShortcut('C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Visual Studio Code.lnk'); $lnk.TargetPath='C:\Program Files\Microsoft VS Code\Code.exe'; $lnk.Arguments='--extensions-dir \"C:\ProgramData\vscode-extensions\"'; $lnk.Save()"
REM ショートカットの検証
powershell -NoProfile -Command "$s=New-Object -ComObject WScript.Shell; $lnk=$s.CreateShortcut('C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Visual Studio Code.lnk'); Write-Host 'TargetPath:' $lnk.TargetPath; Write-Host 'Arguments:' $lnk.Arguments"

REM ファイル / フォルダ右クリックの「Code で開く」を登録
reg add "HKLM\SOFTWARE\Classes\*\shell\VSCode\command" /ve /d "\"C:\Program Files\Microsoft VS Code\Code.exe\" --extensions-dir \"C:\ProgramData\vscode-extensions\" \"%1\"" /f
reg add "HKLM\SOFTWARE\Classes\Directory\shell\VSCode\command" /ve /d "\"C:\Program Files\Microsoft VS Code\Code.exe\" --extensions-dir \"C:\ProgramData\vscode-extensions\" \"%1\"" /f
reg add "HKLM\SOFTWARE\Classes\Directory\Background\shell\VSCode\command" /ve /d "\"C:\Program Files\Microsoft VS Code\Code.exe\" --extensions-dir \"C:\ProgramData\vscode-extensions\" \"%V\"" /f

REM --extensions-dir 付きで起動する code.cmd ラッパを作成
REM （%* を echo で書くと対話的 cmd で失われるため、PowerShell で [char]37+'*' を書き出す）
powershell -NoProfile -Command "$pct=[char]37; $q=[char]34; $c='@echo off'+[char]13+[char]10+$q+'C:\Program Files\Microsoft VS Code\bin\code.cmd'+$q+' --extensions-dir '+$q+'C:\ProgramData\vscode-extensions'+$q+' '+$pct+'*'+[char]13+[char]10; [IO.File]::WriteAllText('C:\ProgramData\vscode-extensions\vscode.cmd',$c,[Text.Encoding]::ASCII)"

REM 拡張機能のインストール
set "CODE=C:\Program Files\Microsoft VS Code\bin\code.cmd"
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --uninstall-extension GitHub.copilot
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --uninstall-extension GitHub.copilot-chat
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --install-extension ms-python.python
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --install-extension ms-python.vscode-pylance
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --install-extension ms-python.debugpy
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --install-extension MS-CEINTL.vscode-language-pack-ja
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --install-extension saoudrizwan.claude-dev
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --install-extension rust-lang.rust-analyzer
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --install-extension tamasfe.even-better-toml
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --install-extension anthropic.claude-code
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --install-extension almenon.arepl
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --list-extensions --show-versions
echo === セットアップ完了 ===

2. Python インタプリタの選択

同一マシンに複数の Python がインストールされている場合，VS Code で使用する Python 本体（インタプリタ：Python プログラムを解釈・実行するソフトウェア）を選択する必要がある．

  1. コマンドパレット（コマンド名で機能を呼び出す VS Code の入力欄）を開く（Ctrl+Shift+P）
  2. Python: Select Interpreter と入力する
  3. 表示される一覧から，使用する Python（例：C:\Program Files\Python312\python.exe）を選択する．

Python プログラム実行手順

[Windows での Python プログラム実行手順を見るには、ここをクリック]

Windows での Python 実行手順（Visual Studio Codeを使用）

プログラムファイルの作成と保存

  1. 左サイドバーの「エクスプローラー」アイコン（Ctrl+Shift+E）をクリックする
  2. 「NO FOLDER OPENED」（作業対象フォルダが未選択の状態）と表示される場合は，「Open Folder」をクリックし，プログラムを保存するフォルダを選択する

    続いて「フォルダを信用するか」を確認する画面（フォルダ内のコードを実行してよいか確認する VS Code の仕組み）が表示されるので，チェックして Yes を選択する

  3. フォルダ名の右側に表示される「新しいファイル」アイコンをクリックする
  4. ファイル名（例：aitask.py．ファイル名は何でも良い）を入力し Enter を押す．拡張子は .py（Python ファイルを示す拡張子）とする
  5. 実行したいコードを選択し，Ctrl+C でコピーする．VS Code のエディタ領域に Ctrl+V で貼り付ける
  6. Ctrl+S で保存する

プログラムの実行

  1. エディタ右上の三角形「▷」アイコン（Run Python File：現在開いている Python ファイルを実行するボタン）をクリックする．または，エディタ上で右クリックし「ターミナルで Python ファイルを実行」を選択する
  2. VS Code 下部のターミナル（コマンドの入出力を表示する画面）に，実行結果（print 関数の出力等）が表示される
  3. tkinter（Python 標準の GUI ライブラリ）のファイル選択ダイアログを使うプログラムを実行した場合は，ダイアログが開くので対象画像を選択する
  4. VS Code 下部のターミナルで実行結果を確認する．OpenCV ウィンドウ（OpenCV が画像を表示するために開く専用ウィンドウ）が開いた場合はそちらも確認する．OpenCV ウィンドウは，マウスクリックでウィンドウをアクティブ（操作対象の状態）にしてからキーを押すと終了する

cocos2d, pyglet のインストール [クリックして展開]

管理者権限でコマンドプロンプトを起動する （手順：Windowsキーまたはスタートメニュー → cmd と入力 → 右クリック → 「管理者として実行」）。

cocos2d は pyglet 1.4.10 以上 2.0 未満に依存する。次のコマンドで cocos2d, pyglet をインストールする

pip uninstall pyglet -y
pip install --no-user cocos2d "pyglet<2.0,>=1.4.10"

2. 実行手順

手順：コードを実行する（メモ帳を用いる場合は a.py のようなファイル名で保存して実行）。

動作確認チェックリスト

確認項目期待される結果
プログラム起動時640×480 のウィンドウが開き，ブロック（「□」），ボール（「?」），パドル（「ー」），スコア（「Score: 0」）が表示される
ボールの移動ボールが画面内を移動し，上壁・左壁・右壁で反射する
左右キーの操作パドルが左右に移動する．画面端を超えない
パドルとの衝突ボールがパドルに当たると上方向に反射する
ブロックとの衝突ブロックが消滅し，スコアが10点加算される
ボールが画面下端に到達赤い背景に「GAME OVER」と最終スコアが表示される
全ブロック破壊緑の背景に「CLEAR」と最終スコアが表示される
ゲームオーバー画面またはクリア画面でキーを押すゲームが最初から再開される
終了操作右上の「x」をクリックするとウィンドウが閉じる

3. 概要・使い方・実行上の注意

画面上部に3段×10列，合計30個のブロックが配置される．ボールは起動と同時に移動を開始し，壁およびパドルで反射する．プレイヤーは左右矢印キーでパドルを操作する．

ボールがブロックに衝突すると，衝突方向に応じてボールが反射し，当該ブロックが消滅する．ブロック1つにつきスコアが10点加算され，画面左上の表示が更新される．

ボールが画面下端に到達するとゲームオーバーとなり，赤い背景に「GAME OVER」と最終スコアが表示される．全ブロックを破壊するとクリアとなり，緑の背景に「CLEAR」と最終スコアが表示される．いずれの画面でもキーを押すとゲームが再開される．

結果を確認したら，右上の「x」をクリックして終了する．

4. 演習：ブロック崩しゲーム

テーマ：パドル操作・衝突判定・スコア表示・画面遷移を備えたブロック崩しゲームの実行と観察

手順：次のコードを実行（メモ帳を用いる場合は a.py のようなファイル名で保存して実行）し，左右矢印キーでパドルを操作してボールを跳ね返し，ブロックを破壊する．全ブロックを破壊するまで，またはボールが画面下端に落ちるまで続ける．ゲームオーバー画面またはクリア画面が出たら，キーを押して最初から再開する．

ヒント：パドルの移動は on_key_press で，ボールの移動と衝突判定は update で処理している．スコアは self.score に保持し，score_label.element.text で表示を更新している．

考察ポイント：ボールがブロック・壁・パドルに当たったときに，速度のどの成分（vx または vy）が反転するかを，衝突した面の向きと対応づけて確認する．

import cocos
from cocos import scene
from cocos.layer import Layer, ColorLayer
from cocos.director import director
import sys
import pyglet
setattr(sys.modules['pyglet'], 'mock_level', None)
from pyglet.window import key

WIDTH, HEIGHT = 640, 480
BALL_SPEED = 150

class MyActor(cocos.text.Label):
    def __init__(self, text, x, y, vx, vy, size, rgba):
        super().__init__(text, font_name="Times New Roman", font_size=size,
                         anchor_x='center', anchor_y='center', color=rgba)
        self.vx, self.vy = vx, vy
        self.position = cocos.euclid.Vector2(x, y)

class Player(cocos.text.Label):
    def __init__(self, text, x, y, size, rgba):
        super().__init__(text, font_name="Times New Roman", font_size=size,
                         anchor_x='center', anchor_y='center', color=rgba)
        self.position = cocos.euclid.Vector2(x, y)

class Layer00(Layer):
    is_event_handler = True

    def __init__(self):
        super().__init__()
        self.score = 0
        self.score_label = cocos.text.Label("Score: 0", font_name="Times New Roman",
                                            font_size=16, anchor_x='left', anchor_y='top',
                                            color=(255, 255, 255, 255))
        self.score_label.position = (10, HEIGHT - 10)
        self.add(self.score_label)
        self.kao = MyActor("?", 320, 240, -BALL_SPEED, -BALL_SPEED, 40, (255, 255, 255, 255))
        self.add(self.kao)
        self.balls = []
        for i in range(3):
            for j in range(10):
                b = MyActor("□", 50 * (j + 1) + 50, 480 - 47 * (i + 1), 0, 0, 70, (255, 255, 255, 255))
                self.balls.append(b)
                self.add(b)
        self.player = Player("ー", 200, 80, 100, (120, 200, 255, 255))
        self.add(self.player)
        self.schedule(self.update)

    def update(self, dt):
        kao = self.kao
        kao.x += kao.vx * dt
        kao.y += kao.vy * dt
        if kao.x >= WIDTH - 15 or kao.x < 15:
            kao.vx = -kao.vx
        if kao.y >= HEIGHT - 8:
            kao.vy = -kao.vy
        if kao.y < 22:
            kao.vy = -kao.vy
            director.replace(scene.Scene(Layer01(self.score)))
            return
        if (self.player.x - 50 < kao.x < self.player.x + 50 and
                self.player.y - 10 < kao.y < self.player.y + 25):
            kao.vy = -kao.vy
        a, b, c = 22, 22, 20
        for z in range(len(self.balls) - 1, -1, -1):
            bx, by = self.balls[z].x, self.balls[z].y
            if bx - b < kao.x + a < bx + b and by - c < kao.y < by + c:
                kao.vx = -kao.vx
            elif bx - b < kao.x - a < bx + b and by - c < kao.y < by + c:
                kao.vx = -kao.vx
            elif bx - b < kao.x < bx + b and by - c < kao.y + a < by + c:
                kao.vy = -kao.vy
            elif bx - b < kao.x < bx + b and by - c < kao.y - a < by + c:
                kao.vy = -kao.vy
            else:
                continue
            self.remove(self.balls[z])
            self.balls.pop(z)
            self.score += 10
            self.score_label.element.text = "Score: " + str(self.score)
            if not self.balls:
                director.replace(scene.Scene(LayerClear(self.score)))
            return

    def on_key_press(self, symbol, modifiers):
        if symbol == key.RIGHT:
            self.player.x = min(self.player.x + 20, WIDTH - 50)
        elif symbol == key.LEFT:
            self.player.x = max(self.player.x - 20, 50)

class Layer01(ColorLayer):
    is_event_handler = True
    def __init__(self, score=0):
        super().__init__(231, 76, 60, 255)
        label = cocos.text.Label("GAME OVER", font_name="Times New Roman", font_size=32,
                                 anchor_x='center', anchor_y='center', color=(0, 200, 255, 255))
        label.position = cocos.euclid.Vector2(WIDTH // 2, HEIGHT // 2 + 30)
        self.add(label)
        score_label = cocos.text.Label("Score: " + str(score), font_name="Times New Roman", font_size=20,
                                       anchor_x='center', anchor_y='center', color=(255, 255, 255, 255))
        score_label.position = cocos.euclid.Vector2(WIDTH // 2, HEIGHT // 2 - 30)
        self.add(score_label)
    def on_key_press(self, symbol, modifiers):
        director.replace(scene.Scene(Layer00()))

class LayerClear(ColorLayer):
    is_event_handler = True
    def __init__(self, score=0):
        super().__init__(46, 139, 87, 255)
        label = cocos.text.Label("CLEAR", font_name="Times New Roman", font_size=32,
                                 anchor_x='center', anchor_y='center', color=(255, 255, 255, 255))
        label.position = cocos.euclid.Vector2(WIDTH // 2, HEIGHT // 2 + 30)
        self.add(label)
        score_label = cocos.text.Label("Score: " + str(score), font_name="Times New Roman", font_size=20,
                                       anchor_x='center', anchor_y='center', color=(255, 255, 255, 255))
        score_label.position = cocos.euclid.Vector2(WIDTH // 2, HEIGHT // 2 - 30)
        self.add(score_label)
    def on_key_press(self, symbol, modifiers):
        director.replace(scene.Scene(Layer00()))

director.init(width=WIDTH, height=HEIGHT)
director.run(scene.Scene(Layer00()))

5. まとめ