トップページ -> データベース研究スタート -> 2次元ゲームエンジン Cocos2d -> Cocos2d を使ってみる
[サイトマップへ]  

Cocos2d を使ってみる

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

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

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

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

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

参考Webページ: http://python.cocos2d.org/doc.html

謝辞

Cocos2d の作者に感謝します.


前もって準備しておくこと


Spyder の起動

Python 処理系を使う.

Anacondaに入っている開発環境 spyder を使うのが簡単.

  1. spyderを起動する.

    Windows のスタートメニュー「Anaconda3」のにある.

  2. spyder の画面が開くので確認.

    左側がエディタになっている.上に実行ボタンがある


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.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() ) )
    

  2. 結果を確認したら,右上の「x」をクリックして終了. 

■ 演習問題: 「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() ) )
    

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

  3. 結果を確認したら,右上の「x」をクリックして終了.

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


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() ) )
    

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

  3. 結果を確認したら,右上の「x」をクリックして終了.

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


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() ) )
    

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

  3. 結果を確認したら,右上の「x」をクリックして終了.

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