[サイトマップへ]

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

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

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

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

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

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

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

謝辞

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

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

前準備として，cocos2d, pygame, pyglet のインストールが終わっていること．
このときに Anacoda のインストールも行う．

Spyder の起動

Python 処理系を使う．

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

spyderを起動する．
Windows のスタートメニュー「Anaconda3」の下にある．
spyder の画面が開くので確認．
左側がエディタになっている．上に実行ボタンがある

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

イベントは：　ユーザの入力（キーボード操作、マウス操作、ウインドウ操作など）によって発生するものや、プログラム作成者が独自に定義するイベントがある．
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, ... ファンクションキー
詳しくは http://pyglet.readthedocs.io/en/pyglet-1.3-maintenance/programming_guide/keyboard.html
イベントハンドラ：　イベントハンドラとは，特定のイベントが発生したときに動くプログラム
```
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

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

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

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

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

キーボード操作

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

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

画面が現れるので確認
画面の中で、１回、マウスのボタンを押す（クリック）したあとで、キーボードの矢印キーをいろいろ連打する．（矢印キーは４つある）
結果を確認したら，右上の「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
  参考 Web ページ: http://python.cocos2d.org/doc/api/cocos.actions.interval_actions.html

移動

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

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

画面が現れるので確認
プログラムの中に「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 でジャンプ

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

画面が現れるので確認
プログラムの中に「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) )