この記事のポイント
- スプライトをキーボードで動かす方法がわかります。
- スプライトをスマホタッチで動かす方法がわかります。
はじめに スプライトを操作できるようにしたい!
シューティングゲームを作ろうシリーズ第2回となります。
今回は、シューティングの主役スプライトであるろぼてくを操作できるようにします。
パソコンのキーボードと、スマホのタッチ操作の両方で動かせるようにプログラムを行っていきます。
前回の記事
前回は、横スクロールシューティングで最も重要な背景をずっと右から左へ繰り返して流すプログラムを作りました。以下の記事を参照してください。
スクラッチをイチから始めたい方はこちらの記事を参照してください。誰でも簡単にスクラッチを始めることができます。
完成作品
完成作品はこのようになります。緑色の旗をクリックするとプログラムが始まります。
キーボードの矢印キー(↑↓←→)で上下左右にろぼてくを動かすことができます。
さらに、画面左下の8方向矢印ボタンでもろぼてくを動かすことができます。
キーボードでは、例えば、上と右を同時に押すと斜め右上に移動ができます。
完成プログラム
新規追加スプライト
<上、下、右、左、右上、右下、左上、左下>
計8個の矢印ボタンを新規で追加します。
修正スプライト
<ろぼてく>
ろぼてくを操作できるプログラムを追加しています。
作るもの(仕様)を考える
はじめに今回作りたいものの動きをざっくり考えます。
- キーボードの矢印キーを押したら、押した矢印の方向にスプライトが動く
- 斜め移動もできるようにする
- 画面左下の矢印ボタンを押したら、押した矢印の方向にスプライトが動く
- 斜め移動もできるようにする。
シューティングゲームでは斜め移動も重要な要素ですので、操作できるように作ります。
事前準備(スプライトを用意する)
スマホタッチ操作でろぼてくを動かせるようにするために、矢印ボタンのスプライトを用意します。
このように上、下、右、左、右上、右下、左上、左下と合計8個用意してください。
このスプライトは、コスチュームのお絵かき機能で正方形と矢印スプライトを組み合わせれば簡単に作ることができます。1つ作ったボタンを複製して、矢印だけ45度ずつ回転させるだけです。
矢印ボタンの配置はステージ左下に配置しましょう。各矢印の並び順は画像のとおりにしてください。
プログラミング
では、プログラミングを始めていきます。
キーボードでスプライトを操作する
まずステージのxy座標を確認しておきましょう。
上方向 | 下方向 | 右方向 | 左方向 |
---|---|---|---|
y軸+方向 | y軸-方向 | x軸+方向 | x軸-方向 |
プログラムとしては以下を実現できるように組みます。
- 上向き矢印キーが押されたら ろぼてくのy座標を+方向に動かす
- 右向き矢印キーが押されたら ろぼてくのy座標を+方向に動かす
- 上向き矢印キーが押されたら ろぼてくのy座標を+方向に動かす
- 上向き矢印キーが押されたら ろぼてくのy座標を+方向に動かす
実際のプログラムはこのようになります。
動作確認
ここで一旦動作確認をしてみます。
ろぼてくが上下に動かせることは確認できましたが、スマホ用の矢印ボタンにまで侵入するようになってしまっています。
矢印ボタンにろぼてくが重ならないようにしたいので、矢印ボタンより下にろぼてくが侵入できないようにプログラムを修正します。
スプライトの移動に制限をする。
ろぼてくのy座標が矢印ボタンの位置に来たら、下向きキーによる移動をさせなくすれば問題は解決しそうです。
「下向き矢印キーが押された」の条件を以下のように変更してください。
これで下向き矢印キーを押し続けても、ろぼてくが矢印ボタンまで侵入しなくなります。※y座標>〇の値は皆さんのプログラムごとに調整が必要です。
矢印ボタンのタッチ操作でスプライトを操作する
矢印ボタンのタッチ操作でスプライトを操作するためのプログラムの考え方は、以下の記事を参照してください。
今回は斜め方向の動きも追加していることがポイントです。
代表して上矢印スプライトのプログラムを以下に示します。
他の矢印のプログラムは「メッセージ」の内容を変更するだけで流用できます。
次にメッセージを受け取る側の「ろぼてく」のプログラムをつくっていきます。
各方向のボタンを押されたときに送られるメッセージに合わせて、ボタンが押された方向にスプライトを移動させます。
斜めの移動は、x座標とy座標を同じ数だけ動かすことで実現できます。
y座標のー方向への移動がある下・右下・左下には、キー操作でも追加した条件「y座標>〇」を加えます。これにより、ろぼてくが矢印ボタンのエリアに侵入しないようにできます。
動作確認
ではさいごに動作確認を行います。
斜め移動ができており、矢印ボタンでも操作できていることが確認できました。
さいごに
今回は、矢印キーと画面に配置した矢印ボタンでろぼてくを操作できるようにプログラミングをしました。ろぼてくの動くスピードも簡単に変えることができるのでぜひチャレンジしてみてください。
次回
次回はろぼてくから弾を発射できるようにプログラミングします。お楽しみに!
コメント