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

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

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

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

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

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

【関連する外部ページ】 https://www.cocos.com/endoc.html

謝辞

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

前準備

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

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

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

cocos2d, pyglet のインストール

Windows での cocos2d, pyglet のインストールは，別ページ »で説明

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

イベントは：　ユーザの入力（キーボード操作、マウス操作、ウインドウ操作など）によって発生するものや、プログラム作成者が独自に定義するイベントがある．
Cocos2d でのイベント
- on_key_press キーが押された
- on_key_release キーが離された
- on_mouse_motion マウスが動いた
- on_mouse_drag マウスのドラッグ
- on_mouse_press マウスのボタンが押された
- on_resize ウインドウのサイズ変更など
キーコード
キーコードとは、キーボードの各キーに付けられたコード（符号）のこと
pyglet でのキーコード
- Key.A, Key.B, Key.C, ... アルファベット
- Key.1, Key.2, Key.3, ... 数字
- Key.ENTER Enter キー
- Key.SPACE スペースキー
- Key.LEFT, Key.RIGHT, Key.UP, Key.DOWN 矢印キー
- Key.F1, Key.F2, Key.F3, ... ファンクションキー
詳しくは https://pyglet.readthedocs.io/en/latest/programming_guide/keyboard.html?highlight=keyboard
イベントハンドラ：　イベントハンドラとは，特定のイベントが発生したときに動くプログラム
```
def on_key_press(self, symbol, modifiers):
    if symbol == key.RIGHT:
        self.label.x += 10
```

マウス操作

イベント: on_mouse_press (マウスのボタンが押された)

イベントハンドラ: オブジェクトの x, y 値を変える

    def on_mouse_press(self, x, y, buttons, modifiers):
        self.label.x = x
        self.label.y = y

Python プログラムの実行

Python プログラムの実行

Windows では python （Python ランチャーは py）
Ubuntu では python3

【サイト内の関連ページ】 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() ) )

画面が現れるので確認
画面の中で、マウスのボタンを押す（クリック）。すると、オブジェクトが動くので確認．
結果を確認したら，右上の「x」をクリックして終了．

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

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

キーボード操作

イベント: on_key_press (キーが押された)
イベントハンドラ: オブジェクトの x, y 値を変える

Python プログラムの実行

Python プログラムの実行

Windows では python （Python ランチャーは py）
Ubuntu では python3

【サイト内の関連ページ】 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() ) )

画面が現れるので確認
画面の中で、１回、マウスのボタンを押す（クリック）したあとで、キーボードの矢印キーをいろいろ連打する．（矢印キーは４つある）
結果を確認したら，右上の「x」をクリックして終了．

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

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

アクション

アクション： アクションとは、オブジェクトの属性を変化させるための操作
Cocos2d でのオブジェクトの属性
位置，大きさ，見える／見えない，透明度など
Cocos2dのアクションの種類：
- 即時 (InstantAction) 　・・・　すぐに変化
- インターバル (IntervalAction)　・・・　一定の時間をかけて変化
- その他 (Action) ・・・時間をかけて変化するが、どれだけの時間がかかるか前もって分からない
- Cocos2d のアクションの例
  - 位置 (position): MoveBy, MoveTo, JumpBy, JumpTo, Bezier, Place
  - 大きさ (scale): ScaleBy, ScaleTo
  - 向き (rotation): RotateBy, RotateTo
  - 見える／見えない (visible): Show, Hide, Blink, ToggleVisibility
  - 透明 (opacity): FadeIn, FadeOut, FadeTo,
  - 待ち (time related: do nothing along a duration): Delay, RandomDelay
  - flow control: CallFunc, CallFuncS
  - grid helpers: StopGrid, ReuseGrid
  - カメラ関係 (camera related): OrbitCamera

【関連する外部ページ】 https://www.cocos.com/endoc/api/cocos.actions.interval_actions.html

移動

イベント: on_key_press (キーが押された)
イベントハンドラ: MoveBy や MoveTo で移動

Python プログラムの実行

Python プログラムの実行

Windows では python （Python ランチャーは py）
Ubuntu では python3

【サイト内の関連ページ】 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() ) )

画面が現れるので確認
プログラムの中に「key.SPACE:」と書いた．これは「スペースキー」のこと．
画面の中で、１回、マウスのボタンを押す（クリック）したあとで、スペースキーをゆっくり、何度か押しなさい。
結果を確認したら，右上の「x」をクリックして終了．

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

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

実行ボタンを押して確認すること。 スペースキーを押して、１度移動したら、何度スペースキーを押しても動かないことを確認．結果を確認したら，右上の「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 ) )

ジャンプ

イベント: on_key_press (キーが押された)
イベントハンドラ: JumpBy や JumpTo でジャンプ

Python プログラムの実行

Python プログラムの実行

Windows では python （Python ランチャーは py）
Ubuntu では python3

【サイト内の関連ページ】 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() ) )

画面が現れるので確認
プログラムの中に「key.SPACE:」と書いた．これは「スペースキー」のこと．
画面の中で、１回、マウスのボタンを押す（クリック）したあとで、スペースキーをゆっくり、何度か押しなさい。
JumpBy((300, 100), 100, 5, duration=5)　・・・ 5秒かけて、右に300画素, 上に100画素ジャンプする。ジャンプの階数は回で 100 画素分の高さ．
結果を確認したら，右上の「x」をクリックして終了．

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

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

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

* 演習問題：次を追加しなさい。

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

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