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


Arcadeとは？
------------
マイクロソフトが運営する[Makecode](https://www.microsoft.com/ja-jp/makecode)というプログラミング開発環境のひとつで
[Arcadeのページ](https://arcade.makecode.com/)にアクセスし、ブラウザ上でプログラミングを行うことができます。
命令はブロックになっていて、それを組み合わせてプログラムすることができます。また、ブロックからJavaScript（TypeScript)やPythonに切り替えることもできます。

Scratchとなにがちがうの？
------------
一番の特徴は、作ったゲームを市販されているゲーム機に入れて遊ぶことができるところです。
[スイッチサイエンス](https://www.switch-science.com/catalog/list/?keyword=makecode+arcade)などで対応機種を購入することができます。
また、ゲーム機は自作することもできます。

「ゲーム機」も作って遊ぼう！MakeCode Arcade
https://note.com/phillowcompiler/n/n797de5dfa44e

当初は英語でしたが、日本語にも対応されたので、小学生も遊ぶことができますね！

同じマイクロソフトなので「GitHub」とも連携でき、プロジェクトをArcadeから変更することも、GitHubから変更することもできるようになっています。他の人が作った拡張機能もGitHubのURLからArcadeに取り込むことができます。

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


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

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

ページを開いて「EditCode」をクリックすると、プログラム編集画面が開きます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/c04cd1ae-7658-fc99-cf27-fe7d7c6af490.png" width="480">


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

プログラム編集画面を開くと
「最初だけ・背景画像を設定」というブロックが配置されています。
これが背景を表示するプログラムです。
ここに、キャラクターを追加してみましょう。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/6aed6be1-df75-70a7-322f-a051b1da1381.png" width="480">

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


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/f5662039-03b5-4311-04b4-f91ca32381a3.png" width="480">
「スプライト□」の□をクリックすると絵が変更できます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/851998eb-7e17-6578-5ce5-133629f89caf.png" width="480">
「ギャラリー」からキャラクターを選びます。魔法使いの画像を用意しましたので、今回はこれを使います。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/5d1b4bd5-8930-9538-7ddc-312ff2b05bc8.png" width="480">
画面の中央にキャラクターが表示されました。


###マップを作ろう
Arcadeは「タイルマップ」を使って、ステージを作ることができます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/baf12010-8736-13be-9cee-6f0658063cc4.png" width="480">
「シーン」カテゴリから「タイルマップ□を設定する」を取り出し、組み合わせます。
□をクリックすると、タイルマップ編集画面が開きます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/d2267d87-b071-0f53-baa5-eb2c9d4d3a6f.png" width="480">
自分でタイルを作る「MyTiles」
ギャラリーからタイルを選ぶ「Gallery」のどちらかを選択し、ペンツールでタイルを並べていきます。
今回はMyTilesにあらかじめタイルを入れてあります。
左下の数字を変更するとステージのサイズを変更できます。

左のツールボックスをクリックでもツール変更できますが、ショートカットにも対応しています。

 - B：ペンツール
 - G：バケツツール
 - E：消しゴムツール
 - H：ハンドツール
 - Alt：スポイト
 
などです。
できたら完了をクリックします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/ef81a860-42db-e24e-ddbc-987c4f2552b1.png" width="480">
タイルを使ったステージが表示されました。

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

「コントローラー」カテゴリの「mySpriteをボタンで動かす」を組み合わせます
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/82991737-7253-ee4b-4feb-9d8a48033bbf.png" width="480">
キャラクターが十字キーで動くようになりました。
でも空中でウロウロしてしまいます。

###キャラクターに重力をつけよう
キャラクターのパラメータを変えるには
「スプライト」カテゴリの「set mySprite x to 〇」ブロックを使います。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/4a5f4ad2-fcd6-452d-95db-69ad46770e16.png" width="480">
組み合わせて「set mySprite ay to 300」となるように変更します。
キャラクターが下に落ちていくことを確認できます。

###タイルマップに壁を設定しよう
キャラがタイルマップの壁や床にぶつかるようにします。
さっき設定したタイルマップを開きます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/b19240a6-2581-dd6a-3993-603b1e4155a5.png" width="480">
「壁アイコン」をクリックして壁編集モードにします。
壁モードになったら、ペンツールで、壁や床に設定したいところを赤く塗ります。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/d7efd54f-f885-b0a3-6fb6-5a2683701e67.png" width="480">
キャラが地面に立てるようになりました。

###キャラがジャンプできるようにしよう
今のままでは、上キーを押すとフワフワ浮かんでしまうので
左右キーで移動・Aキーでジャンプするようにしてみます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/2a073eee-e8ce-3818-6c3d-febe3b20f113.png" width="480">
さっき組み合わせた「mySpriteをボタンで動かす」の⊕ボタンをクリックすると
vxとvyを入力できるようになります。
上下を動かなくしたいので、vyを0に設定します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/fb308bd2-110c-6ddf-79d2-9b02c82a0c4a.png" width="480">
Aボタンでジャンプできるようにします。
「コントローラー」カテゴリの「Aボタンが押した時」と
「スプライト」カテゴリの「set mySprite x to 〇」のブロックを組み合わせます。
「set mySprite vy to -100」に変更します。
vyのパラメーターは、キャラクターに上下の力を加えます。上に行ってほしいのでマイナスの値をセットします。

これでキャラクターがジャンプできるようになりました。

####地面にいる時だけジャンプしてほしい
このままだと、連続でAボタンを押すと空中でもジャンプできてしまいます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/e6ca774c-298e-e4a1-238c-8f14759a43aa.png" width="480">
「論理」カテゴリの「もし○○なら」と
「シーン」カテゴリの＜mySpriteが○○の壁に当たった＞を組み合わせて、図のように配置します。

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

###キャラがステージからはみ出ないようにしたい
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/87a06242-416b-2108-aaa2-8ced14d82ae9.png" width="480">
「シーン」カテゴリの下の方にある
「カメラでスプライトを追う」を使うと、キャラの移動に合わせてステージがスクロールするようになります。

###キャラをアニメーションさせたい
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/106559c2-cdba-9f97-65f6-1449051039ab.png" width="480">
「高度なブロック」「拡張機能」をクリックすると、様々な拡張機能を追加することができます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/8583df65-3695-d227-1443-d48090594eea.png" width="480">
「animation」をクリックすると、アニメーションを使うためのブロックが追加されます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/03e8b1eb-38fc-dc95-d43f-422d90927229.png" width="480">
歩くアニメーションを追加してみます。
「コントローラー」カテゴリの「右ボタンが押した時」と
「アニメーション」カテゴリの「アニメート」を組み合わせます。
組み合わせたら「フレーム」の□をクリックします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/54c7584e-8196-9557-0b61-5d09781d3323.png" width="480">
アニメーションエディタが開きました。ここで歩くアニメーションを作ります。
+ボタンでフレームを追加し、ギャラリーから絵を選んだり自分で描いたりすることができます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/9a05d7a8-5efd-b97e-6cbe-425c55dda391.png" width="480">
「間隔」でアニメーションのスピードを変更できます。ここでは200としました。
「ループ」をオンにすると、ずっとアニメーションするようになります。
これで右キーを押すと、歩くアニメーションするようになりました。

####アニメーションを止めたい
歩いていない時には、アニメーションを止めておきます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/0b4f58cb-8b51-8c43-1eaf-078411c28347.png" width="480">
「右ボタンが**<font color="Red">離した</font>**時」と「アニメーションを終了」を組み合わせます。
このままだと、歩くモーションのまま止まってしまうので
「スプライト」カテゴリの「mySpriteの画像を□にする」ブロックで、止まっている画像にしておきます。

####動きにあわせてアニメーションを追加
上記の方法で、どのキーが押されたときに、どのアニメーションをするかを割り振ることができます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/f2314a5e-c57a-d3ae-d74b-19bed233f7c6.png" width="480">
また、しゃがみなどはアニメーションがいらないので「mySpriteの画像を□にする」で画像を変えるだけでOKです。
キーが離された時に、画像をリセットするのを忘れないようにします。

###ゲームオーバーとゲームクリア
####特定のタイルに触れるとゲームオーバーにする
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/cc85ba6d-f6ca-1f3f-0848-9e223ae2a35c.png" width="480">
タイルマップに「触れてはいけないタイル」を置きます。
GalleryでもMyTileでもなんでもいいですが、ここでは赤色タイルを作って置きました。（+ボタンでタイルを追加できます）

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/4980eb68-4232-f37b-12e5-5930b3d1c313.png" width="480">
「シーン」カテゴリの「spriteがタイルの□の位置に重なったとき」と
「ゲーム」カテゴリの「ゲームを終了する」を組み合わせます。
「…□の位置に重なったとき」の□をクリックして、触れた時にゲームオーバーになるタイルを設定します。

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

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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/72571470-df4c-26d7-7c1f-44e51cf4f393.png" width="480">
「ゴールのタイルに触れたら、ゲームを終了する」となるように組み合わせます。
＜負け＞をクリックして＜勝ち＞に変更すると
そのタイルに触れた時に「YOU WIN!」と表示されます。


###敵を追加しよう
####敵の出現場所を決める
まずは、敵が出てくる場所を決めましょう。これもタイルマップを使うとラクに設定できます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/78d1c8ba-780b-bf80-d0e3-22f6ca62b404.png" width="480">
敵が出現するタイルを決め、配置します。
ここでは草むらタイルを敵の出現タイルとしました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/418d5b3c-4b32-869f-5e1b-e6e3aada8e49.png" width="480">
敵が一匹の時は、このブロックを使って、
敵がランダムに出現するようにしてもOKです。
今回は敵を複数配置する方法を紹介します。

####敵をたくさん登場させる
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/14fa4248-237b-66de-1e0f-bf007d068422.png" width="480">
「ループ」カテゴリの「配列listの値をvalueに入れてくりかえす」ブロックに
「シーン」カテゴリの（すべての□位置の配列）を組み合わせます。
listに近づけると、配列が組み合わせられます。タイルは、草むらのタイルを選びます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/74193372-2e8f-4495-0f92-f8f2bee35152.png" width="480">
中に、スプライトを作るブロックを組み合わせます。
変数名を変えて、敵の画像も選びます。
タイプをEnemyタイプに変更します。これはあとでプレイヤーと敵を見分けるために使います。
この命令は、草むらの数だけ繰り返すようになるので、草むらの数だけ敵が生まれることになります。

####敵の場所を設定する

草むらタイルの場所はvalueに入ってきます。これを使って場所を設定します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/1d50e71c-e34e-5f39-1708-b0a6ebd99b66.png" width="480">
「シーン」カテゴリから「mySpriteをタイルマップ列行の上に配置」を組み合わせます。
変数名をmyEnemyに変更し、valueをドラッグして列行に組み合わせます。
これで、タイルの場所にmyEnemyが移動するようになりました。

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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686444/968117b6-a012-23e1-271c-0bdcaafc2354.png" width="480">
また、「速度をvx〇vy〇にする」を使い移動させたり
「壁で跳ね返るをオン」にすることで、いったりきたりさせることができます。
（壁で跳ね返るは、画面内でとどまるオプションの▼をクリックで出てきます）

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

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