Cocos2d で動きのシミュレーション

1. 前準備

Python 3.12 のインストール

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

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')}"

python --version

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

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

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 === セットアップ完了 ===

Python プログラム実行手順

2. 必要なライブラリのインストール

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

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

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

3. 実行手順

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

動作確認チェックリスト

4. 演習1：ゲームの登場物とレイヤ

手順：次のコードを実行し、画面に文字「o」が1つ表示されることを確認する。確認したら、右上の「x」をクリックして終了する。

• ゲームの登場物： ball（MyActorクラス） ※ Label クラスのサブクラス

  属性 vx, vy に値を設定している。これらはあとで使う。

• レイヤ: 名前無し（Layer00クラス） ※ Layer クラスのサブクラス

ヒント：MyActor クラス（Label クラスのサブクラス）のオブジェクト ball を作成し、レイヤ（Layer00 クラス）に追加して表示する。

考察ポイント：ball の位置はランダムに決まるため、実行のたびに表示位置が変わることを確かめる。位置がランダムなので、画面が真っ黒になることがある。その場合は一度終了して再実行する。

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

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

class Layer00(Layer):
    is_event_handler = True
    def __init__(self):
        super(Layer00, self).__init__()
        random.seed()
        self.ball = MyActor("o", random.random() * 640, random.random() * 360 + 80, random.random() * 100 - 50, - random.random() * 50, 32, (255, 255, 255, 255))
        self.add(self.ball)

director.init(width=640, height=480)
director.run( scene.Scene( Layer00() ) )

5. 演習2：位置と速度のシミュレーション

手順：次のコードを実行し、文字「o」が自動で動き、画面の境界で反射することを確認する。確認したら、右上の「x」をクリックして終了する。

• MyActor クラス: 速度の属性 vx, vy を持つ。これらはランダムに設定する。

  位置と速度： 速度が大きいと、位置が大きく動く。２次元の世界では、位置は２つの数値（x, y）で表す。速度も同様に２つの数値になる。

• ここでは MyActor クラスのオブジェクトが自動で動くようにする（位置と速度のシミュレーション）。

ヒント：Layer00 クラスに update メソッドを追加し、self.schedule(self.update) で毎フレーム呼び出すことで、MyActor オブジェクトを自動で動かす。画面の境界では速度を反転させて反射させる。

考察ポイント：速度 vx, vy の大小と、1フレームあたりの移動量の関係を読み取る。ボールの位置をランダムに設定しているので、画面が真っ黒になることがある。その場合は一度終了して再実行する。

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

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

class Layer00(Layer):
    is_event_handler = True
    def __init__(self):
        super(Layer00, self).__init__()
        random.seed()
        self.ball = MyActor("o", random.random() * 640, random.random() * 360 + 80, random.random() * 100 - 50, - random.random() * 50, 32, (255, 255, 255, 255))
        self.add(self.ball)
        self.schedule(self.update)
    def update(self, dt):
        self.ball.x += self.ball.vx * dt
        self.ball.y += self.ball.vy * dt
        if self.ball.x >= 640 or self.ball.x < 0:
            self.ball.vx = -self.ball.vx
        if self.ball.y >= 480 or self.ball.y < 0:
            self.ball.vy = -self.ball.vy

director.init(width=640, height=480)
director.run( scene.Scene( Layer00() ) )

6. 演習3：MyActor クラスの複数のオブジェクト

手順：次のコードを実行し、複数の文字「o」が同時に動くことを確認する。確認したら、右上の「x」をクリックして終了する。

• MyActor クラス: 速度の属性 vx, vy を持つ。これらはランダムに設定する。
• ここでは MyActor クラスのオブジェクトを増やす。

ヒント：MyActor オブジェクトを5つに増やし、for ループで子ノードを走査して全オブジェクトを更新する。

考察ポイント：オブジェクトごとに速度が異なるため、動き方がばらつくことを読み取る。

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

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

class Layer00(Layer):
    is_event_handler = True
    def __init__(self):
        super(Layer00, self).__init__()
        random.seed()
        for i in range(5):
            self.add(MyActor("o", random.random() * 640, random.random() * 360 + 80, random.random() * 100 - 50, - random.random() * 50, 32, (255, 255, 255, 255)))
        self.schedule(self.update)
    def update(self, dt):
        for _, node in self.children:
            node.x += node.vx * dt
            node.y += node.vy * dt
            if node.x >= 640 or node.x < 0:
                node.vx = -node.vx
            if node.y >= 480 or node.y < 0:
                node.vy = -node.vy

director.init(width=640, height=480)
director.run( scene.Scene( Layer00() ) )

7. 演習4：マウスクリックによるオブジェクトの追加

手順：次のコードを実行し、マウスをクリックするとオブジェクトが増えることを確認する。確認したら、右上の「x」をクリックして終了する。

ヒント：Layer00 クラスに on_mouse_press メソッドを追加する。マウスクリックでオブジェクトが増える。

考察ポイント：クリックのたびに追加されるオブジェクトが、既存のオブジェクトと同じ規則で動くことを読み取る。

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

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

class Layer00(Layer):
    is_event_handler = True
    def __init__(self):
        super(Layer00, self).__init__()
        random.seed()
        for i in range(5):
            self.add(MyActor("o", random.random() * 640, random.random() * 360 + 80, random.random() * 100 - 50, - random.random() * 50, 32, (255, 255, 255, 255)))
        self.schedule(self.update)
    def update(self, dt):
        for _, node in self.children:
            node.x += node.vx * dt
            node.y += node.vy * dt
            if node.x >= 640 or node.x < 0:
                node.vx = -node.vx
            if node.y >= 480 or node.y < 0:
                node.vy = -node.vy
    def on_mouse_press(self, x, y, buttons, modifiers):
        self.add( MyActor("o", random.random() * 640, random.random() * 360 + 80, random.random() * 100 - 50, - random.random() * 50, 32, (255, 255, 255, 255)) )

director.init(width=640, height=480)
director.run( scene.Scene( Layer00() ) )

8. 演習5：Player クラスと当たり判定・重力シミュレーション

手順：次のコードを実行し、矢印キーで Player（「+」）を動かせること、Player が MyActor に近づくと MyActor の色が赤に変わること、MyActor が重力で下向きに加速することを確認する。確認したら、右上の「x」をクリックして終了する。

• MyActor クラス: 速度の属性 vx, vy を持つ。これらはランダムに設定する。
• Player クラス: キーボードの矢印キーで動かす（速度の属性はない）。

ヒント：Player クラスを追加し、キーボードの矢印キーで操作する。クラスの判定は「if ( isinstance(node, MyActor) ):」のように行う。当たり判定は「if ( ( ( self.player.x - 4 ) < node.x ) and ( node.x < ( self.player.x + 4 ) ) and ( ( self.player.y - 4 ) < node.y ) and ( node.y < ( self.player.y + 4 ) ) ):」のように行う。重力は GRAVITY 定数を vy に加算して表す。

考察ポイント：重力の加算により、MyActor の縦方向の動きが放物運動になることを読み取る。また、isinstance による判定で Player が更新対象から外れていることを確かめる。

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

GRAVITY = -30

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

class Player(cocos.text.Label):
    def __init__(self, text, x, y, size, rgba):
        super(Player, self).__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(Layer00, self).__init__()
        random.seed()
        for i in range(5):
            self.add(MyActor("o", random.random() * 640, random.random() * 360 + 80, random.random() * 100 - 50, - random.random() * 50, 32, (255, 255, 255, 255)))
        self.player = Player("+", 320, 80, 40, (120, 200, 255, 255))
        self.add(self.player)
        self.schedule(self.update)
    def update(self, dt):
        for _, node in self.children:
            if ( isinstance(node, MyActor) ):
                node.vy += GRAVITY * dt
                node.x += node.vx * dt
                node.y += node.vy * dt
                if node.x >= 640 or node.x < 0:
                    node.vx = -node.vx
                if node.y >= 480 or node.y < 0:
                    node.vy = -node.vy
                if ( ( ( self.player.x - 4 ) < node.x ) and ( node.x < ( self.player.x + 4 ) ) and ( ( self.player.y - 4 ) < node.y ) and ( node.y < ( self.player.y + 4 ) ) ):
                    node.element.color = (255,10,10,255)
    def on_mouse_press(self, x, y, buttons, modifiers):
        self.add( MyActor("o", random.random() * 640, random.random() * 360 + 80, random.random() * 100 - 50, - random.random() * 50, 32, (255, 255, 255, 255)) )
    def on_key_press(self, symbol, modifiers):
        if symbol == key.RIGHT:
            self.player.x += 8
        elif symbol == key.LEFT:
            self.player.x -= 8
        elif symbol == key.UP:
            self.player.y += 8
        elif symbol == key.DOWN:
            self.player.y -= 8

director.init(width=640, height=480)
director.run( scene.Scene( Layer00() ) )

9. まとめ

• MyActor クラスとゲームの登場物：MyActor クラスは Label クラスのサブクラスで、ゲームの登場物を表す。属性 vx, vy にランダムな速度を設定する。
• 位置と速度のシミュレーション：速度が大きいと位置が大きく動く。update メソッドを self.schedule で毎フレーム呼び出すことで、オブジェクトが自動で動く。
• 画面境界での反射：オブジェクトが画面端（x: 0〜640、y: 0〜480）に到達すると、速度を反転させて反射する。
• 複数オブジェクトとマウスによる追加：MyActor オブジェクトを複数作成し、for ループで子ノードを走査して全オブジェクトを更新する。on_mouse_press によりマウスクリックでオブジェクトを追加できる。
• Player クラスと当たり判定・重力シミュレーション：Player クラスは矢印キーで動かす。isinstance によるクラス判定で MyActor のみを更新対象とし、Player との近接時に色を変化させる当たり判定を実装する。GRAVITY 定数による重力で MyActor が下方向に加速する放物運動を行う。