トップページ -> 最新情報技術の実習と研究ツール -> 2次元ゲームエンジン Cocos2d -> Cocos2d のイベント、キーコード、イベントハンドラ、アクション
[サイトマップへ]  

Cocos2d のイベント、キーコード、イベントハンドラ、アクション

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

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

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

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

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

謝辞

Cocos2d の作者に感謝します.https://github.com/liamrahav/cocos2d-python-tutorials/blob/master/basics/ で公開されているサンプルプログラムを参考にしました


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


Spyder の起動

Python 処理系を使う.

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

  1. spyderを起動する.

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

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

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


イベント,キーコード,イベントハンドラ

マウス操作

  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!", 0, 0, 32, (0, 200, 255, 255))
            self.add(self.myactor)
                
        def on_mouse_press(self, x, y, buttons, modifiers):
            self.myactor.x = x 
            self.myactor.y = y
    
    director.init(width=640, height=480)
    director.run( scene.Scene( Layer00() ) )
    

  2. 画面が現れるので確認

  3. 画面の中で、マウスのボタンを押す(クリック)。すると、オブジェクトが動くので確認.

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

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

■ 演習問題: 「Hello,World!」を別のものに変えて変化を見なさい。 実行ボタンを押して確認すること.そして、画面の中をクリックすること。 結果を確認したら,右上の「x」をクリックして終了すること. 


キーボード操作

  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!", 0, 0, 32, (0, 200, 255, 255))
            self.add(self.myactor)
                
        def on_key_press(self, symbol, modifiers):
            if symbol == key.RIGHT:
                self.myactor.x += 10
            elif symbol == key.LEFT:
                self.myactor.x -= 10
            elif symbol == key.UP:
                self.myactor.y += 10
            elif symbol == key.DOWN:
                self.myactor.y -= 10
    
    director.init(width=640, height=480)
    director.run( scene.Scene( Layer00() ) )
    

  2. 画面が現れるので確認

  3. 画面の中で、1回、マウスのボタンを押す(クリック)したあとで、キーボードの矢印キーをいろいろ連打する.(矢印キーは4つある)

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

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

■ 演習問題: 「+= 10」, 「-= 10」 の「10」を別の数値に変えて変化を見なさい。全部で4か所あります。 実行ボタンを押して確認すること 結果を確認したら,右上の「x」をクリックして終了すること. 



アクション

移動

  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!", 0, 0, 32, (0, 200, 255, 255))
            self.add(self.myactor)
                
        def on_key_press(self, symbol, modifiers):
            if symbol == key.RIGHT:
                self.myactor.x += 10
            elif symbol == key.LEFT:
                self.myactor.x -= 10
            elif symbol == key.UP:
                self.myactor.y += 10
            elif symbol == key.DOWN:
                self.myactor.y -= 10
            elif symbol == key.SPACE:
                self.myactor.do( cocos.actions.MoveBy((200, 100), 2 ) )
    
    director.init(width=640, height=480)
    director.run( scene.Scene( Layer00() ) )
    

  2. 画面が現れるので確認

  3. プログラムの中に「key.SPACE:」と書いた.これは「スペースキー」のこと.

    画面の中で、1回、マウスのボタンを押す(クリック)したあとで、スペースキーをゆっくり、何度か押しなさい。

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

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

■ 演習問題: 「MoveBy((200, 100), 2 )」のところを、下のように変えて変化を見なさい

実行ボタンを押して確認すること。 スペースキーを押して、1度移動したら、何度スペースキーを押しても動かないことを確認. 結果を確認したら,右上の「x」をクリックして終了すること. 

MoveTo((300, 400), duration=5) ・・・ 5秒かけて、(300, 400)の場所に動かす。

■ 演習問題: 次を追加しなさい。

字下げにも注意すること。下の図の通り、字下げしなさい。

実行ボタンを押して確認すること。 画面の中で、マウスのボタンを押す(クリック)。すると、オブジェクトが動くので確認すること. 結果を確認したら,右上の「x」をクリックして終了すること. 

    def on_mouse_press(self, x, y, buttons, modifiers):
        self.myactor.do( cocos.actions.MoveTo((x, y), 2 ) )

ジャンプ

  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!", 0, 0, 32, (0, 200, 255, 255))
            self.add(self.myactor)
                
        def on_key_press(self, symbol, modifiers):
            if symbol == key.RIGHT:
                self.myactor.x += 10
            elif symbol == key.LEFT:
                self.myactor.x -= 10
            elif symbol == key.UP:
                self.myactor.y += 10
            elif symbol == key.DOWN:
                self.myactor.y -= 10
            elif symbol == key.SPACE:
                self.myactor.do( cocos.actions.JumpBy((300, 100), 100, 5, duration=5) )
    
    director.init(width=640, height=480)
    director.run( scene.Scene( Layer00() ) )
    

  2. 画面が現れるので確認

  3. プログラムの中に「key.SPACE:」と書いた.これは「スペースキー」のこと.

    画面の中で、1回、マウスのボタンを押す(クリック)したあとで、スペースキーをゆっくり、何度か押しなさい。

    JumpBy((300, 100), 100, 5, duration=5) ・・・ 5秒かけて、右に300画素, 上に100画素ジャンプする。ジャンプの階数は 回で 100 画素分の高さ.

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

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

■ 演習問題: 「JumpBy((320,0), 100, 5, duration=5)」のところを、下のように変えて変化を見なさい

実行ボタンを押して確認すること。 スペースキーを押して、1度移動したら、何度スペースキーを押しても動かないことを確認. 結果を確認したら,右上の「x」をクリックして終了すること. 

JumpTo((100,100), 100, 5, duration=5) ・・・ 5秒かけて、(100,100)の場所にジャンプ。


■ 演習問題: 次を追加しなさい。

字下げにも注意すること。下の図の通り、字下げしなさい。

実行ボタンを押して確認すること。 画面の中で、マウスのボタンを押す(クリック)。すると、オブジェクトが動くので確認すること. 結果を確認したら,右上の「x」をクリックして終了すること. 

    def on_mouse_press(self, x, y, buttons, modifiers):
        self.myactor.do( cocos.actions.JumpTo((x, y), 100, 5, duration=5) )