Arcadeでアクションゲームを作ろう

テスト用プロジェクトを開こう

背景やキャラクターはArcadeにもともと入っている素材を使うこともできますし 自分で描いたり取り込んだりすることもできます。 今回はテスト用に、背景・タイルマップ・キャラクターを用意してみました。
https://makecode.com/_6TpPVqcD8ec7
ページを開いて「EditCode」をクリックすると、プログラム編集画面が開きます。  

キャラクターを表示しよう

プログラム編集画面を開くと 「最初だけ・背景画像を設定」というブロックが配置されています。 これが背景を表示するプログラムです。 ここに、キャラクターを追加してみましょう。


「スプライト」をクリックすると、関連するブロックが現れます。 「mySpriteをスプライト□…にする」というブロックを図のように組み合わせます。

「スプライト□」の□をクリックすると絵が変更できます。



「ギャラリー」からキャラクターを選びます。
魔法使いの画像を用意しましたので、今回はこれを使います。



画面の中央にキャラクターが表示されました。

マップを作ろう

Arcadeは「タイルマップ」を使って、ステージを作ることができます。
「シーン」カテゴリから「タイルマップ□を設定する」を取り出し、組み合わせます。
□をクリックすると、タイルマップ編集画面が開きます。



自分でタイルを作る「MyTiles」
ギャラリーからタイルを選ぶ「Gallery」のどちらかを選択し
ペンツールでタイルを並べていきます。

今回はMyTilesにあらかじめタイルを入れてあります。 左下の数字を変更するとステージのサイズを変更できます。 左のツールボックスをクリックでもツール変更できますが、ショートカットにも対応しています。
B：ペンツール 
G：バケツツール
E：消しゴムツール
H：ハンドツール
Alt：スポイト などです。 できたら完了をクリックします。


タイルを使ったステージが表示されました。

キャラクターを十字キーで動かそう

 「コントローラー」カテゴリの「mySpriteをボタンで動かす」を組み合わせます

キャラクターが十字キーで動くようになりました。 でも空中でウロウロしてしまいます。

キャラクターに重力をつけよう

キャラクターのパラメータを変えるには
「スプライト」カテゴリの「set mySprite x to 〇」ブロックを使います。
組み合わせて「set mySprite ay to 300」となるように変更します。
キャラクターが下に落ちていくことを確認できます。

タイルマップに壁を設定しよう

キャラがタイルマップの壁や床にぶつかるようにします。 さっき設定したタイルマップを開きます。



「壁アイコン」をクリックして壁編集モードにします。
壁モードになったら、ペンツールで、壁や床に設定したいところを赤く塗ります。




キャラが地面に立てるようになりました。

キャラがジャンプできるようにしよう

 今のままでは、上キーを押すとフワフワ浮かんでしまうので
左右キーで移動・Aキーでジャンプするようにしてみます。



さっき組み合わせた「mySpriteをボタンで動かす」の⊕ボタンをクリックすると
vxとvyを入力できるようになります。
上下を動かなくしたいので、vyを0に設定します。




Aボタンでジャンプできるようにします。
「コントローラー」カテゴリの「Aボタンが押した時」と
「スプライト」カテゴリの「set mySprite x to 〇」のブロックを組み合わせます。
「set mySprite vy to -100」に変更します。

vyのパラメーターは、キャラクターに上下の力を加えます。上に行ってほしいのでマイナスの値をセットします。
これでキャラクターがジャンプできるようになりました。

地面にいるときだけジャンプしてほしい

 このままだと、連続でAボタンを押すと空中でもジャンプできてしまいます。



「論理」カテゴリの「もし○○なら」と
「シーン」カテゴリの＜mySpriteが○○の壁に当たった＞を組み合わせて
図のように配置します。

これでキャラが下の壁（地面）に当たったときだけ、ジャンプするようになりました。

キャラがステージからはみ出ないようにしたい

「シーン」カテゴリの下の方にある 「カメラでスプライトを追う」を使うと、キャラの移動に合わせてステージがスクロールするようになります。

キャラをアニメーションさせたい

「高度なブロック」「拡張機能」をクリックすると、様々な拡張機能を追加することができます。




「animation」をクリックすると、アニメーションを使うためのブロックが追加されます。




歩くアニメーションを追加してみます。
「コントローラー」カテゴリの「右ボタンが押した時」と
「アニメーション」カテゴリの「アニメート」を組み合わせます。
組み合わせたら「フレーム」の□をクリックします。




アニメーションエディタが開きました。ここで歩くアニメーションを作ります。
 +ボタンでフレームを追加し、ギャラリーから絵を選んだり自分で描いたりすることができます。




「間隔」でアニメーションのスピードを変更できます。ここでは200としました。
「ループ」をオンにすると、ずっとアニメーションするようになります。
これで右キーを押すと、歩くアニメーションするようになりました。

アニメーションを止めたい

 歩いていない時には、アニメーションを止めておきます。



「右ボタンが**離した**時」と「アニメーションを終了」を組み合わせます。
このままだと、歩くモーションのまま止まってしまうので
「スプライト」カテゴリの「mySpriteの画像を□にする」ブロックで、
止まっている画像にしておきます。

動きにあわせてアニメーションを追加

上記の方法で、どのキーが押されたときに、どのアニメーションをするかを割り振ることができます。



また、しゃがみなどはアニメーションがいらないので「mySpriteの画像を□にする」で画像を変えるだけでOKです。 キーが離された時に、画像をリセットするのを忘れないようにします。

ゲームオーバーとゲームクリア

特定のタイルに触れるとゲームオーバーにする

タイルマップに「触れてはいけないタイル」を置きます。 GalleryでもMyTileでもなんでもいいですが、ここでは赤色タイルを作って置きました。（+ボタンでタイルを追加できます）



「シーン」カテゴリの「spriteがタイルの□の位置に重なったとき」と 「ゲーム」カテゴリの「ゲームを終了する」を組み合わせます。 「…□の位置に重なったとき」の□をクリックして、触れた時にゲームオーバーになるタイルを設定します。

これで、赤いタイルに触れると、「YOU LOSE」と表示されるようになりました。

同じ方法でゲームクリアを作る

こんどは、ゴールに設定するタイルを、マップの上におき そのタイルに触れたらゲームクリアになるようにします。


「ゴールのタイルに触れたら、ゲームを終了する」となるように組み合わせます。
＜負け＞をクリックして＜勝ち＞に変更すると そのタイルに触れた時に「YOU WIN!」と表示されます。

敵を追加しよう

敵の出現場所を決める

まずは、敵が出てくる場所を決めましょう。これもタイルマップを使うとラクに設定できます。


敵が出現するタイルを決め、配置します。 ここでは草むらタイルを敵の出現タイルとしました。



敵が一匹の時は、このブロックを使って、 敵がランダムに出現するようにしてもOKです。

今回は敵を複数配置する方法を紹介します。

敵をたくさん登場させる

「ループ」カテゴリの「配列listの値をvalueに入れてくりかえす」ブロックに
「シーン」カテゴリの（すべての□位置の配列）を組み合わせます。
listに近づけると、配列が組み合わせられます。タイルは、草むらのタイルを選びます。



中に、スプライトを作るブロックを組み合わせます。
変数名を変えて、敵の画像も選びます。
タイプをEnemyタイプに変更します。
これはあとでプレイヤーと敵を見分けるために使います。

この命令は、草むらの数だけ繰り返すようになるので、草むらの数だけ敵が生まれることになります。

敵の場所を設定する

草むらタイルの場所はvalueに入ってきます。これを使って場所を設定します。



「シーン」カテゴリから「mySpriteをタイルマップ列行の上に配置」を組み合わせます。
変数名をmyEnemyに変更し、valueをドラッグして列行に組み合わせます。

これで、タイルの場所にmyEnemyが移動するようになりました。

敵の速度・跳ね返りなどを調整する

敵の画像サイズによって、出てくる位置が思っている場所と違うことがありますので
「change myEnemy y by 〇」のブロックなどを使って微調整します。



また、「速度をvx〇vy〇にする」を使い移動させたり 「壁で跳ね返るをオン」にすることで、
いったりきたりさせることができます。
（壁で跳ね返るは、画面内でとどまるオプションの▼をクリックで出てきます）

ここまでのサンプル

下記のURLからここまでのプログラムを確認できます。
https://makecode.com/_MkMLkTKmfTYp

ジャンプモーションやステージの切り替えなどは今回やっていませんが
ステージ番号を変数で管理すれば簡単に作れると思います。
ステージを増やしたり、色々な敵を追加したりして試してみて下さいね。

Arcadeのゲームの作り方が色々載っている本もありますので
興味がある方は見てみて下さい～