ここでは、「game01」というディレクトリ内で作業しているという前提で説明しています。
スマートフォンのタッチスクリーン
現在主流のスマートフォンにはキーボードが無いものが多いです。
なので、ユーザーが操作するための仕組みを作ってみます。
まずは、「gameControl.coffee」を開き、下記のコードを「when 1」の最後にある「@nextjob()」の直前に追記してください。
touchObj = addObject
image: 'ground'
motionObj: touchScreen
width: SCREEN_WIDTH
height: SCREEN_HEIGHT / 2
x: SCREEN_WIDTH / 2
y: SCREEN_HEIGHT - (SCREEN_HEIGHT / 4)
animlist: [
[100, [0]]
]
scene: TOPSCENE
これは、画面のタッチイベントを処理するオブジェクトを生成しています。
「image」には地面を作成した時に使った「ground」をそのまま使っています。
画像ファイルは「media/picture/controlpanel.png」になります。
この画像は透明のpng画像です。
動きは無いのですが、タッチイベントを処理するクラスとして「touchScreen」を指定しています。
サイズの横幅は画面と同じですが、高さは画面の半分にしています。
位置は、x座標は画面中央ですが、y座標は画像が画面の下半分になるようにしています。
アニメーションは特にさせないので、「0」を繰り返し表示させます。
そして、オブジェクトを追加するシーンを「TOPSCENE」にします。
これで、どのオブジェクトよりも上に配置されます。
次に、「touchScreen」クラスファイルを生成します。
ゲームのディレクトリトップ（game01直下）で、下記コマンドを実行します。
$ enforce derive touchScreen
コマンドが正常終了した後、「src/touchScreen.coffee」が生成されているか確認してください。
生成を確認しましたら、「touchScreen.coffee」を開き「constructor」に下記コードを追記してください。
@bearchara = GLOBAL['bearchara']
「GLOBAL」に保存してある自機キャラのオブジェクトを取り出します。
そして、次がスマートフォン対応のカギになる、クラスに標準で生成されるメソッド4つになります。
- touchesBegan
- touchesMoved
- touchesEnded
- touchesCanceled
この4つのメソッドは標準で生成されていますが、初期状態ではコメントアウトされています。
上から順に説明していきます。
- touchesBegan
これは、スプライトがクリック（タッチ）イベントを受け取った時に呼ばれます。
引数として、「pos」というオブジェクトが渡されます。
この「pos」は「x」と「y」というメンバーを持っており、これがタッチされた画面上の座標になります。
例）pos.x - touchesMoved
これは、クリック（タッチ）したまま、マウスや指を動かした場合に連続して呼ばれます。
このメソッドも呼ばれるたびに引数として「pos」が渡されます。
内容は「touchesBegan」と同じです。 - touchesEnded
これは、クリック（タッチ）操作が終了した場合に呼ばれます。
引数として、指を離した画面上の座標「pos」が渡されます。
これも内容は「touchesBegan」と同じです。 - touchesCanceled
これは、なにかしらの原因でアプリケーションがバックグラウンドに移ったりして処理が続行出来なくなった場合に呼ばれます。
これも引数として、「touchesBegan」と同じ内容の「pos」が渡されます。
それでは、「touchesBegan」と、次の行の「super(pos)」のコメントを外してください。
そして、下記のコードを追記してください。
@bearchara.ys = -12
「gameControl.coffee」と、「touchScreen.coffee」の修正が終わりましたら保存してコンパイルし、ブラウザをリロードしてください。
画面下半分をクリックすると自機キャラのクマがジャンプすれば成功です。
チュートリアル（１３） <--- ⬛︎ ---> チュートリアル（１５）