Cocos2d で動くオブジェクトを作る

【概要】

本資料は、Python のゲーム・アニメーション用ライブラリ Cocos2d を用いて、画面上で動くオブジェクトを作る手順を、初めて学ぶ人向けにまとめたものである。文字のオブジェクトを自動で動かして画面の端で跳ね返らせる、矢印キーで速度を変える、画面の端を越えたオブジェクトを反対側へ出す（ラップアラウンド）といった題材を、実行して確かめる演習として扱う。

【目次】

1. 前準備
2. 必要なライブラリのインストール
3. 演習1：オブジェクトを自動で動かす
4. 演習2：キー操作で速度を変える
5. 演習3：画面の端で反対側に出す（ラップアラウンド）
6. 演習4：最初の位置をランダムにする
7. 演習5：オブジェクトの数を増やす

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：インストーラーによるインストール

Python公式サイト（https://www.python.org/downloads/）にアクセスし、「Download Python 3.x.x」ボタンからWindows用インストーラーをダウンロードする。
ダウンロードしたインストーラーを実行する。
初期画面の下部に表示される「Add python.exe to PATH」にチェックを入れてから「Customize installation」を選択する。このチェックを入れ忘れると、コマンドプロンプトから python コマンドを実行できない。
「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 プログラムを解釈・実行するソフトウェア）を選択する必要がある．

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

Python プログラム実行手順

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

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

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

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

続いて「フォルダを信用するか」を確認する画面（フォルダ内のコードを実行してよいか確認する VS Code の仕組み）が表示されるので，チェックして Yes を選択する
フォルダ名の右側に表示される「新しいファイル」アイコンをクリックする
ファイル名（例：aitask.py．ファイル名は何でも良い）を入力し Enter を押す．拡張子は .py（Python ファイルを示す拡張子）とする
実行したいコードを選択し，Ctrl+C でコピーする．VS Code のエディタ領域に Ctrl+V で貼り付ける
Ctrl+S で保存する

プログラムの実行

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

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

管理者権限でコマンドプロンプトを起動する（手順：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"

3. 演習1：オブジェクトを自動で動かす

ここでは、文字のオブジェクトを画面に5個置き、それぞれが一定の速度で動き、画面の端で跳ね返るプログラムを作る。オブジェクトの速度を覚えておくために、各オブジェクトに vx（横方向の速度）と vy（縦方向の速度）の2つの値を持たせる（vx, vy はそれぞれ x 方向、y 方向の1秒あたりの移動量）。

■ 演習1

テーマ：オブジェクトを自動で動かす

手順：

コードを実行
画面が現れるので確認する。
オブジェクトが自動的に動き、画面の端で跳ね返るので確認する。
結果を確認したら、右上の「x」をクリックして終了する。

ヒント：オブジェクトは vx, vy の値だけ毎秒動き、画面の端で速度の符号が反転して跳ね返る。

考察ポイント：5個のオブジェクトが別々の方向に動くのはなぜかを、各オブジェクトに与えた速度の決め方から考えなさい。

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):
            ball = MyActor("o", random.random() * 640, random.random() * 360 + 80, random.random() * 100 - 50, - random.random() * 50, 32, (255, 255, 255, 255))
            self.add(ball)
        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 ):
                node.vx = -node.vx
            if ( node.x < 0 ):
                node.vx = -node.vx
            if ( node.y >= 480 ):
                node.vy = -node.vy
            if ( node.y < 0 ):
                node.vy = -node.vy

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

4. 演習2：キー操作で速度を変える

ここでは、オブジェクトの速度を格納しておくために、2つの変数 self.vx, self.vy を作る。そして、キーが押されたときにこの速度を変える。

イベントとイベントハンドラを次のようにする。

イベント: on_key_press （キーが押された）
イベントハンドラ: オブジェクトの vx, vy 値を変える

■ 演習2

テーマ：キー操作で速度を変える

手順：

コードを実行
画面が現れるので確認する。
画面の中で1回マウスのボタンを押す（クリックする）。そのあとで、キーボードの矢印キー（上下左右の4つ）をいろいろ連打する。
速度が変化するので確認する。
結果を確認したら、右上の「x」をクリックして終了する。

ヒント：右キーで vx が増え、左キーで vx が減り、上キーで vy が増え、下キーで vy が減る。

考察ポイント：同じ矢印キーを何度も押すと動きがどう変わるかを、vx, vy の値の変化から読み取りなさい。

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

c = "A"

class Ball(cocos.actions.Move):
    def step(self, dt):
        super(Ball, self).step(dt)

class HelloWorld(Layer):
    is_event_handler = True

    def __init__(self):
        super(HelloWorld, self).__init__()
        self.vx = 0
        self.vy = 0
        self.label = cocos.text.Label(
            c,
            font_name = "Times New Roman",
            font_size = 32,
            anchor_x = 'center',
            anchor_y = 'center'
        )
        self.label.position = 320, 240
        self.label.velocity = self.vx, self.vy
        self.label.do(Ball())
        self.add(self.label)

    def on_key_press(self, symbol, modifiers):
        if symbol == key.RIGHT:
            self.vx += 10
            self.label.velocity = self.vx, self.vy
        elif symbol == key.LEFT:
            self.vx -= 10
            self.label.velocity = self.vx, self.vy
        elif symbol == key.UP:
            self.vy += 10
            self.label.velocity = self.vx, self.vy
        elif symbol == key.DOWN:
            self.vy -= 10
            self.label.velocity = self.vx, self.vy

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

5. 演習3：画面の端で反対側に出す（ラップアラウンド）

ここでは、オブジェクトが画面の右端を越えたら左端へ、上端を越えたら下端へ移動するように書き換える（画面の端から反対側に出ることを、ラップアラウンドという）。章末のプログラムの step メソッドが、その書き換えにあたる。

■ 演習3

テーマ：画面の端で反対側に出す

手順：

コードを実行
画面が現れるので確認する。
画面の中で1回マウスのボタンを押す（クリックする）。そのあとで、キーボードの矢印キー（上下左右の4つ）をいろいろ連打する。
オブジェクトが動き、画面の端を越えると反対側に出るので確認する。
結果を確認したら、右上の「x」をクリックして終了する。

ヒント：x が 639 を越えると 0 に、0 より小さくなると 639 に置き換えられる。y も同様である。

考察ポイント：オブジェクトが画面外に消えず動き続けるのはなぜかを、step メソッドの処理から考えなさい。

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

c = "A"

class Ball(cocos.actions.Move):
    def step(self, dt):
        if ( self.target.x > 639 ):
            self.target.x = 0
        if ( self.target.x < 0 ):
            self.target.x = 639
        if ( self.target.y > 479 ):
            self.target.y = 0
        if ( self.target.y < 0 ):
            self.target.y = 479
        super(Ball, self).step(dt)

class HelloWorld(Layer):
    is_event_handler = True

    def __init__(self):
        super(HelloWorld, self).__init__()
        self.vx = 0
        self.vy = 0
        self.label = cocos.text.Label(
            c,
            font_name = "Times New Roman",
            font_size = 32,
            anchor_x = 'center',
            anchor_y = 'center'
        )
        self.label.position = 320, 240
        self.label.velocity = self.vx, self.vy
        self.label.do(Ball())
        self.add(self.label)

    def on_key_press(self, symbol, modifiers):
        if symbol == key.RIGHT:
            self.vx += 10
            self.label.velocity = self.vx, self.vy
        elif symbol == key.LEFT:
            self.vx -= 10
            self.label.velocity = self.vx, self.vy
        elif symbol == key.UP:
            self.vy += 10
            self.label.velocity = self.vx, self.vy
        elif symbol == key.DOWN:
            self.vy -= 10
            self.label.velocity = self.vx, self.vy

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

6. 演習4：最初の位置をランダムにする

■ 演習4

テーマ：最初の位置をランダムにする

手順：演習3のプログラムの __init__ の中で位置を決める行を書き換えなさい。字下げにも注意すること。

        self.label.position = random.random() * 640, random.random() * 480

ヒント：random.random() は 0 以上 1 未満の値を返すので、640 や 480 を掛けると画面内の位置になる。

考察ポイント：実行のたびに開始位置が変わることを、 random.random() の働きから読み取りなさい。

7. 演習5：オブジェクトの数を増やす

■ 演習5

テーマ：オブジェクトの数を増やす

手順：演習3のプログラムの最後の部分を、書き換えなさい。字下げにも注意すること。

director.init(width=640, height=480)
s = scene.Scene( HelloWorld() )
s.add( HelloWorld() )
s.add( HelloWorld() )
s.add( HelloWorld() )
s.add( HelloWorld() )
director.run( s )

ヒント：HelloWorld を s.add で追加するたびに、オブジェクトが1個増える。

考察ポイント：画面に複数のオブジェクトが現れることを、追加した HelloWorld の数から確認しなさい。