今回つくるゲーム
難易度
今回は前回の記事で作成したボンバーマン風ゲームをスマホ・タブレット対応させていきます。作ったゲームを家族や友達など遊んでもらうためには、キーボードがなくても、スマホやタブレットでタップするだけで遊べるようにすることが大切です。
以下が今回つくるゲームです。左右上下の矢印付近をタップすると移動し、中央付近をタップすると爆弾を設置します。是非スマホ・タブレットで開いてプレイしてみてください。
準備
まずは、こちらの記事を参考にしてパソコンで動かせるボンバーマン風ゲームを作成してください。
もしくは、以下をリミックスして初めてください。
以下のような状態からスマホ対応化を進めていきます。
コントローラーをつくる
PCゲームの場合は矢印キーで移動させてスペースキーで爆弾を設置していましたが、スマホ・タブレットの場合はそれをタップで置き換えていきます。
コントローラーイメージを設置する
まずはコンロトーラーのイメージを設置していきます。
スプライトを追加し、以下のようにコントローラーを描いていきます
これはコントローラーのイメージで、このスプライト自体はタップできるようなものではなく、あくまでもガイドと考えてください。実際にクリックできるエリアは別で設定します。
次にコントローラーイメージのコードを書いていきます。
スマホ・タブレットでのコントローラーはゲームの上に設置するので、なるべくゲームを邪魔しないように半透明にします。半透明にするには幽霊の効果を使います。以下のように幽霊の効果を５０にして表示します。
すると、下図のようにゲームを邪魔しないような感じでコントローラを設置できます。
タップできるエリアを設定する（左右上下移動）
先ほどのコントローラーはあくまでイメージで、ここから具体的にタップできるエリアを設定していきます。まず右移動のタップエリアから設定していきます。
新たに右移動というスプライトを作成します。コスチュームで右辺に白い四角を作りました。
このエリアのなかであればどこをタップしても右に移動するようにします。
コードは以下のように書いていきます。向きという変数を新たに作り、初期値を０にして、スプライトが押された（タップされた）時に１にして、タップが外れると０に戻ります。後ほど、向きが１の時は右に進むという指示をターゲットに書いていきます。
また幽霊効果を９９としています。このタップ可能エリアは完全に透明にしたいのですが、幽霊効果を100にしてしまうとタップできなくなってしまうので、９９にしています。
同様に左・上・下についても同様に作成していきます。
向きについては左＝２、上＝３、下＝４と定義します。
タップできるエリアを設定する（爆弾の設置）
次に爆弾を設置する時のタップの場所を設定します。
以下のように爆弾設置のスプライトを作成し、中央部分にタップエリアを作ります。
これですべてのタップエリアの設定が完了です。
爆弾設置スプライトのコードは以下の通りです。タップされたら爆弾設置というメッセージが送られるようにします。
ターゲットの動きを再規定する
次にターゲット（黄色い丸）の動きを再規定します。
ターゲットはおじさんキャラクターを動かすガイドの存在です。移動や当たり判定はすべてターゲットが担います。
PC版の場合だと、左右上下の矢印キーでターゲットを移動させていましたが、今回は先ほど設定した変数「向き」によって動きを制御します。つまり、以下のように矢印部分を書き換えていきます。
おじさんの動きを再規定する
次におじさんの動きを再規定していきます。ターゲットについていくだけなので、動き自体は問題ありませんが、向きによってコスチュームを変更していく部分を書き換えなければなりません。以下のように書き換えていきます。
爆弾の動きを再規定する
次に爆弾ですが、これまでスペースキーを押して爆弾が配置されていたところを、先ほど作ったメッセージ「爆弾配置」を受け取った時に変更します。
以上でスマホ・タブレット対応は完了です。
今回作成したコードは以下からも確認することができます。
