金子邦彦研究室 ▶ プログラミング ▶ Python ▶ Cocos2d を使ってみる

サイトマップ サイト内検索 まとめ

サイトの全体構成

Cocos2d を使ってみる

全体構成 人工知能 ３次元，地図 プログラミング 情報工学全般 インストール 支援 連絡先，業績

Cocos2d は２次元ゲームのフレームワーク．Python で動く． （Cocos2d から派生した Cocos2d-x は iOS や Android でも動き、普及している.）

このWebページでは、次の基本的なことを、見本プログラムで演習する.

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

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

関連する資料：Cocos2d のイベントハンドラ、アクション

【外部ページへのリンク】 http://python.cocos2d.org/doc.html

謝辞

Cocos2d の作者に感謝します．

前準備

Python のインストール，pip と setuptools の更新，Python 開発環境のインストール

手順は，別ページ »で説明

インストールを行わず，Google Colaboratory を利用することもありえる． Google Colaboratory の使い方などは， 別ページ »で説明

cocos2d, pyglet のインストール

Cocos2d を用いて画面を開き，テキストを表示

  1. Python プログラムの実行

    Python プログラムの実行

    Python 開発環境（Jupyter Qt Console, Jupyter ノートブック (Jupyter Notebook), Jupyter Lab, Nteract, Spyder, PyCharm, PyScripterなど）も便利である．

    Python のまとめ: 別ページ »にまとめ 

    import random
import cocos
from cocos import scene
from cocos.layer import Layer, ColorLayer
from cocos.director import director
import pyglet
from pyglet.window import key
from time import sleep

class MyActor(cocos.text.Label):
    def __init__(self, text, x, y, size, rgba):
        super(MyActor, 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__()
        self.myactor = MyActor("Hello,World!", 400, 240, 32, (0, 200, 255, 255))
        self.add(self.myactor)

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

    [image]
  2. 結果を確認したら，右上の「x」をクリックして終了．　

    [image]

■ 演習問題： 「Hello World!」のところを書き換えて、表示されるテキストを変えてみなさい.実行ボタンを押して確認すること

■ 演習問題： 「font_size = 32」のところを書き換えて、フォントサイズを変えてみなさい.実行ボタンを押して確認すること

Cocos2d でのキーボードのイベント

キーボードのキーが押されたり、離されたりするというイベントが起きると、 self.keys_being_pressedに「いま押されているキー（複数可）」の情報を入れる

  1. spyder で次の Python プログラムを実行

    エディタの画面にコピー＆ペーストして，実行ボタンをクリック． 

    import random
import cocos
from cocos import scene
from cocos.layer import Layer, ColorLayer
from cocos.director import director
import pyglet
from pyglet.window import key
from time import sleep

class MyActor(cocos.text.Label):
    def __init__(self, text, x, y, size, rgba):
        super(MyActor, 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__()
        self.myactor = MyActor("Hello,World!", 400, 240, 32, (0, 200, 255, 255))
        self.keys_being_pressed = set()
        self.update_text()
        self.add(self.myactor)

    def update_text(self):
        key_names = [key.symbol_string(k) for k in self.keys_being_pressed]
        self.myactor.element.text = "Keys: " + ", ".join(key_names)

    def on_key_press(self, key, modifiers):
        self.keys_being_pressed.add(key)
        self.update_text()

    def on_key_release(self, key, modifiers):
        self.keys_being_pressed.remove(key)
        self.update_text()

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

    [image]
  2. キーボードを押したり、離したりしてみる．同時に複数のキーを押してみる．

    [image]
  3. 結果を確認したら，右上の「x」をクリックして終了．

    [image]

■ 演習問題： 上の手順を行いなさい

Cocos2d でのマウスのイベント

  1. spyder で次の Python プログラムを実行

    エディタの画面にコピー＆ペーストして，実行ボタンをクリック． 

    import random
import cocos
from cocos import scene
from cocos.layer import Layer, ColorLayer
from cocos.director import director
import pyglet
from pyglet.window import key
from time import sleep

class MyActor(cocos.text.Label):
    def __init__(self, text, x, y, size, rgba):
        super(MyActor, 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__()
        self.position_x = 0
        self.position_y = 0
        self.myactor = MyActor("Hello,World!", 0, 0, 32, (0, 200, 255, 255))
        self.add(self.myactor)

    def update_text(self, mouse_x_pos, mouse_y_pos):
        self.myactor.element.text = 'Mouse is at %d,%d' % (mouse_x_pos, mouse_y_pos)
        self.myactor.x = self.position_x
        self.myactor.y = self.position_y

    def on_mouse_motion(self, x, y, dx, dy):
        self.update_text(x, y)

    def on_mouse_drag(self, x, y, dx, dy, buttons, modifiers):
        self.update_text(x, y)

    def on_mouse_press(self, x, y, buttons, modifiers):
        self.position_x, self.position_y = director.get_virtual_coordinates(x, y)
        self.update_text(x, y)

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

    [image]
  2. マウスを動かしたり、ボタンを押したりしてみる

    [image]
  3. 結果を確認したら，右上の「x」をクリックして終了．

    [image]

■ 演習問題： 上の手順を行いなさい

Cocos2d での画面切り替え（画面のレイヤ分け）

  1. spyder で次の Python プログラムを実行

    エディタの画面にコピー＆ペーストして，実行ボタンをクリック． 

    import random
import cocos
from cocos import scene
from cocos.layer import Layer, ColorLayer
from cocos.director import director
import pyglet
from pyglet.window import key
from time import sleep

class MyActor(cocos.text.Label):
    def __init__(self, text, x, y, size, rgba):
        super(MyActor, 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(ColorLayer):
    is_event_handler = True
        
    def __init__(self):
        super(Layer00, self).__init__(155, 89, 182, 1000)
        self.myactor = MyActor("Layer00", 400, 240, 32, (0, 200, 255, 255))
        self.add(self.myactor)
            
    def on_key_press(self, key, modifiers):
        director.replace(scene.Scene(Layer01()))

class Layer01(ColorLayer):
    is_event_handler = True
        
    def __init__(self):
        super(Layer01, self).__init__(231, 76, 60, 1000)
        self.myactor = MyActor("Layer01", 400, 240, 32, (0, 200, 255, 255))
        self.add(self.myactor)
            
    def on_key_press(self, key, modifiers):
        director.replace(scene.Scene(Layer00()))

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

    [image]
  2. キーボードのキーを押すと画面が切り替わるので確認する

    [image]

    [image]
  3. 結果を確認したら，右上の「x」をクリックして終了．

    [image]

■ 演習問題： 上の手順を行いなさい

本サイトは金子邦彦研究室のWebページである．

資料等の公開では，原則，「クリエイティブコモンズ BY NC SA」として公開するようにしている． PDFファイル，パワーポイントファイルなどには， 「クリエイティブコモンズ BY NC SA」を明記するとともに，ロゴを記載するようにしている（作業が間に合っていない分もあるのでご容赦ください）．

公開している資料をご利用になる場合の，再配布の条件，剽窃の防止などについて，別ページ »で説明 再配布や資料改変の際には，そのページをご確認ください．

サイトマップは，サイトマップのページをご覧下さい． 本サイト内の検索は，サイト内検索のページをご利用下さい．

問い合わせ先： 金子邦彦（かねこ くにひこ） [image]