金子邦彦研究室プログラミングPythonCocos2d のイベント、キーコード、イベントハンドラ、アクション

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

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

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

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

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

関連する外部ページhttp://python.cocos2d.org/doc.html

謝辞

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

前準備

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

手順は,別ページ »で説明している.

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

cocos2d, pyglet のインストール

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

マウス操作

  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!", 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() ) )
    

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

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

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

    [image]

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

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

[image]

キーボード操作

  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!", 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() ) )
    

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

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

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

    [image]

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

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

[image]

[image]

アクション

移動

  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!", 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() ) )
    

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

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

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

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

    [image]

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

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

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

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

[image]

[image]

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

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

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

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

[image]

[image]

ジャンプ

  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!", 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() ) )
    

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

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

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

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

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

    [image]

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

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

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

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

[image]

[image]

[image]

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

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

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

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

[image]

[image]