MakeCode Arcade を使ったゲーム作り、第9弾です。
前回は、タイルマップの機能を使って、非常に小さな迷路を作成しました。
絵をタイルのように並べて使用できるため、迷路やRPGのフィールドのような場面に活用できます。
今回は、この機能をサイドビュータイプのアクションゲームに応用してみたいと思います。
なお、これまでに何度も登場しているブロックについての説明は、できるだけ省略して進めます。もし説明の内容が分かりづらいと感じた場合は、この講座を最初からやり直すことをおすすめします。
その際には、少し内容をアレンジしてみると、より楽しく学べるでしょう。
これから作るゲーム
カタツムリを操作して、ヘビを避けながらリンゴを取るゲームです。
昔は、カタツムリのことを「でんでん虫」と呼ぶ人もいました。
……懐かしいですね。

プレイヤー(カタツムリ)は左右に移動できます。
A ボタンを押すとジャンプします。
ヘビをうまく避けながら、リンゴを取りましょう。
なお、ヘビにぶつかったり、リンゴを取り損ねるとライフが減ってしまいます。
背景を入れよう
新しくプロジェクトを作成します。
プロジェクトの名前を入力して 作成 ボタンをクリックします。

最初だけの中に背景画像を○に設定を入れます。
絵は下図のものがいいと思います。森の中っぽいですよね。

タイルマップを使おう
さっそく、タイルマップの出番です。
シーン から タイルマップをタイルマップ○に設定する をドラッグします。

タイルマップエディタを開きます。

ページの左下にあるマップサイズを変更します。
横 10 縦 8 にします。
この値が実際の画面サイズとほぼ同じになります。

ぺんツールを使って草を描きます。
草の絵は Forest の3ページ目にあります。

当たり判定を付けます。
いま何をしているのか分からない人は ちょびっと迷路を作ろう をやり直しましょう。

タイルマップの下準備はここまでです。
実際の効果はプレイヤーを入れて初めて分かります。
プレイヤーを用意しよう
最初だけの中にプレイヤーのスプライトを用意します。

絵は次のものを選びました。

プレイヤーに重力(下に加速する力)を加えます。
スプライト から mySprite の x を 0 にする をドラッグします。

mySprite の ay(y方向の加速度)を 500 に設定します。
これが重力(下に加速する力)になります。

実行してみましょう。
プレイヤーは草の位置まで落ちていきます。
タイルマップで草の部分に当たり判定を設定しているため、そこで止まるようになっています。
この課題でいちばん伝えたかったのは「タイルマップを使って地面を作る方法」です。
こうした使い方は特別なものではなく、サイドビュー型のアクションゲームではよく使われています。
横スクロール型のゲームについても、いずれ記事にしてご紹介したいと思います。

移動できるようにします。
左右のみに動きを限定するため速度 vx 100 vy 0 にします。

左右に移動できるかテストしてみましょう。
画面の端まで移動してみてください。画面外へ出ないで止まります。

「どうして画面の外に出ないの?」
と思った方は鋭いですね。まだ mySprite を画面内にとどめるかどうかをオンにする という設定を使っていないので、通常であれば画面の外へ出てしまうはずです。
しかし、今回はタイルマップを使用しているため、マップで設定されたサイズの外には移動できなくなっています。
つまり、タイルマップの制限によって画面外への移動が防がれているのです。
ジャンプさせよう
Aボタンでジャンプできるようにします。
コントローラー から Aボタンが押された時 を用意します。

ジャンプ、つまり上に跳ね上がるための速度を加えます。
mySprite のay(y方向の加速度)を 500にする をコピーして Aボタンが押された時 に入れます。

mySprite の vy(y方向の速度)を -200 に設定します。
上方向にジャンプするためには、マイナスの値を指定する必要があります。
この -200 という数値は、実際にジャンプの挙動を何度か試して調整したものです。
重力は下方向に加速させる力ですが、ジャンプでは「初期速度」だけを与えれば十分です。そこで、y方向の速度(vy)を直接設定することで、ジャンプの動きを実現しています。
とはいえ、ジャンプしたあとは重力によって再び下に引っ張られ、最終的には落下します。この一連の流れがジャンプの動作となります。

ぜひ実際にテストしてみてください。
プレイヤーの動きを見ながら、
「Aボタンを押すと上向きの力がかかって上昇するけど、重力によって落下するんだな」
といったイメージが持てるようになると、今後のゲーム作りもぐっと理解しやすくなりますよ。
ジャンプは地面から
さて、実際にテストしてみましたか?
不具合などは見つかりましたか?
…実は、ちゃんと問題があります。ジャンプ中にさらにジャンプできてしまうのです。
これではジャンプし放題になってしまい、ゲームとして成立しません。

原因はとてもシンプルです。
Aボタンを押すたびに、上方向の力(y方向の速度)を与えているためです。
この問題を解決するには、「ジャンプできる条件」を追加すればよいのです。
具体的には、プレイヤーが地面にいるときだけジャンプできるように、条件判断を使って処理を行います。
論理 から もし 真 なら を持ってきます。

Aボタンが押された時 の中に入れます。

地面、つまり下方向に壁があるのかどうかを調べるためのブロックを用意します。
シーン から mySpriteが左の壁に当たった を持ってきます。

条件判断の中に入れます。
地面(下方向)を調べたいため 下 に変更します。
作業が終わったらテストしましょう。地面の上にいるときだけジャンプできます。

「壁って何のこと?」と思ったかもしれませんね。
条件判断に使っているブロックは、シーン のカテゴリから持ってきたものです。
タイルマップに関する機能は、すべて シーン の中に用意されています。
ここでいう「壁」とは、タイルマップエディタで当たり判定を設定した場所、あるいはタイルマップの外側の領域を指します。
プレイヤーの絵の向きを変えよう
プレイヤーの絵を、進行方向に合わせて変えたいと思います。
左右のボタンが押されたときに、表示される絵を切り替えるようにします。
まず 右ボタンが押された時 を用意します。
Aボタンが押された時 をコピーしてもいいし、コントローラー
から持ってきてもいいです。

スプライト から mySpriteの画像を○にする を持ってきます。
このブロックは、リストの下の方にあります。

右ボタンが押された時 の中に入れ、スプライトエディタを開きます。

まず、ギャラリーからカタツムリの絵を選びます。
そして上部にある 左右反転 のアイコンをクリックします。

右向きの絵になりました。

右向き、左向き、2つの処理を作ります。
左のときは反転させず、ギャラリーから選んだまま使います。
終わったらテストしましょう。

次回に続きます。