Cocos2d を用いたスプライトの表示と操作

1. エグゼクティブサマリー

本記事では，cocos2d を用いて Python でスプライトを表示する方法を扱う．画像ファイルをスプライトとしてウィンドウに表示する基本手順と，フェードインや移動といったアクション操作を解説する．

2. 前準備（必要ソフトウェアの入手）

ここでは、最低限の事前準備について説明する。機械学習や深層学習を行う場合は、NVIDIA CUDA、Visual Studio、Cursorなどを追加でインストールすると便利である。これらについては別ページ https://www.kkaneko.jp/cc/dev/aiassist.htmlで詳しく解説しているので、必要に応じて参照してください。

winget install --scope machine --id Python.Python.3.12 -e --silent --disable-interactivity --force --accept-source-agreements --accept-package-agreements --override "/quiet InstallAllUsers=1 PrependPath=1 Include_pip=1 Include_test=0 Include_launcher=1 InstallLauncherAllUsers=1"

python --version

winget install --scope machine --id Codeium.Windsurf -e --silent --disable-interactivity --force --accept-source-agreements --accept-package-agreements --custom "/SP- /SUPPRESSMSGBOXES /NORESTART /CLOSEAPPLICATIONS /DIR=""C:\Program Files\Windsurf"" /MERGETASKS=!runcode,addtopath,associatewithfiles,!desktopicon"
powershell -Command "$env:Path=[System.Environment]::GetEnvironmentVariable('Path','Machine')+';'+[System.Environment]::GetEnvironmentVariable('Path','User'); windsurf --install-extension MS-CEINTL.vscode-language-pack-ja --force; windsurf --install-extension ms-python.python --force; windsurf --install-extension Codeium.windsurfPyright --force"

pip install -U cocos2d

3. 実行のための準備とその確認手順（Windows 前提）

3.1 プログラムファイルと画像ファイルの準備

第5章のソースコードをテキストエディタ（メモ帳，Spyder 等）に貼り付け，main.py として保存する（文字コード：UTF-8）．

表示させたい PNG 形式の画像ファイルを，プログラムファイルと同じディレクトリに配置する．ファイル名に全角文字（漢字など）は使わないこと．

3.2 実行コマンド

コマンドプロンプトでファイルの保存先ディレクトリに移動し，以下を実行する．

python main.py

3.3 動作確認チェックリスト

4. 使い方・操作手順・演習問題

4.1 スプライト表示の操作手順

1. Spyder で第5章のスプライト表示プログラムを，エディタの画面にコピー＆ペーストして実行する．
   
2. Python コンソールで，カレントディレクトリを確認する．

   次を実行

   import os
   print(os.getcwd())
   

   

   関係する部分を拡大すると次のようになる．

   
3. Windows で，いま確認したディレクトリを開く．

   このとき「//」を「\」に読み替えること

   
4. 表示させたい画像を探す．PNG 形式（拡張子が「.png」）が望ましい．

   ファイル名に全角文字（漢字など）は使わないこと

5. 画像ファイルを，さきほど確認したディレクトリにコピーする．
   
6. Python プログラムの中のファイル名を，この画像ファイルのファイル名に設定する
   
7. 実行ボタンをクリックする．
   
8. 結果を確認したら，右上の「x」をクリックして終了する．

4.2 フェードイン・移動の操作手順

1. Spyder で第5章のフェードイン・移動プログラムを，エディタの画面にコピー＆ペーストして，実行ボタンをクリックする．
2. 結果を確認したら，右上の「x」をクリックして終了する．

4.3 演習問題

1. PNG 形式の画像ファイルを準備し，os.getcwd() で確認したディレクトリに置きなさい．
2. 上のプログラムを実行しなさい．画像ファイル名のところは正しく設定すること．

5. ソースコード

5.1 スプライト表示プログラム

cocos2d を用いてスプライトをウィンドウに表示するプログラムである．

import cocos
from cocos.sprite import Sprite
from cocos.layer import Layer
from cocos.director import director

class Actors(Layer):
    def __init__(self):
        super().__init__()
        self.actor = Sprite('lena_std.png')
        self.actor.position = 320, 240
        self.add(self.actor)

director.init()
director.run(cocos.scene.Scene(Actors()))

5.2 フェードイン・移動プログラム

フェードインとスプライトの移動を行うプログラムである．

import cocos
from cocos.layer import ColorLayer
from cocos.sprite import Sprite
from cocos.actions import FadeIn, MoveBy, Delay
from cocos.director import director

class Actions(ColorLayer):
    def __init__(self):
        super().__init__(52, 152, 219, 255)
        self.sprite = Sprite('lena_std.png')
        self.sprite.position = 320, 240
        self.sprite.opacity = 0
        self.add(self.sprite)
        self.sprite.do(FadeIn(2) + Delay(0.5) + MoveBy((-150, 0), 2))

director.init()
director.run(cocos.scene.Scene(Actions()))

6. まとめ

6.1 Sprite クラスによるスプライト表示

Sprite クラスに画像ファイルを指定し，position 属性で座標を設定することで，スプライトをウィンドウに表示できる．

6.2 Layer と ColorLayer

Layer を継承したクラスにスプライトを追加し，Scene に渡すことで描画が行われる．ColorLayer を用いると背景色を RGBA 値で指定できる．

6.3 アクションによるアニメーション

FadeIn や MoveBy などのアクションをスプライトに適用することで，アニメーションを実現できる．アクションは「+」演算子で連結し逐次実行する．

6.4 カレントディレクトリと画像ファイルの配置

os.getcwd() でカレントディレクトリを確認し，そこに PNG 形式の画像ファイルを配置する．ファイル名に全角文字は使わない．

6.5 director による初期化と実行

director.init() でウィンドウを初期化し，director.run() に Scene を渡して実行する．終了はウィンドウ右上の「x」をクリックする．