サッパリ系ビスケットプログラミング#7マリオ風ゲーム/当たり判定（着地）〜小マリオ編〜

SEの方の間でも評価が上昇傾向のビジュアルプログラミング言語、Viscuit（以下ビスケット）でマリオ風のゲームを作成していきます。#4で作ったステージに、割れたメガネを使ってジャンプのプログラムを追加します。割れたメガネについては#1をご参照ください。

※ビスケットのコーディングは全て描画で行います。こちらの記事はビスケットでのコーディングを簡潔に紹介するため、敢えてサッパリした描画のプログラムにしております。こちらをベースに、お好みの描画でオリジナリティーの高いプログラムに仕上げてくださいm(_ _)m


#ジャンプと着地判定〜前回の続き:土管（IN）から🚩までとりあえず行く〜
![4508A82E-E2FD-410C-A04D-9ED7CB4A47A5.jpeg](https://qiita-image-store.s3.amazonaws.com/0/373284/d8915928-e897-5f3d-2274-edeb515776ef.jpeg)
当面の目標は、小マリオのままで🚩まで移動できるようにします。スタートは画像の位置とします。
【全ルート確認】
スタート→2マス右に移動→右上ジャンプ→土管IN→土管OUT→土管IN→土管OUT→右上ジャンプ
今回は🚩まで辿り着きます。


#【ジャンプの着地と当たり判定（着地）プログラムの作り方】
ビスケットでキャラを動かしたり、動作によってキャラの絵柄を書き換えたりするとき、どんなステージでもコントロールできるようにするためには、様々な場面の想定が必要です。
前回、小マリオのジャンププログラムを作りましたが、空中でフリーズしてしまいました。
今回は、その解消と、ジャンプ後の様々なパターンの落下〜着地に対応していきます。


##前回の問題点
![AAF7575A-CB65-4D82-84D1-F2B610757E2C.jpeg](https://qiita-image-store.s3.amazonaws.com/0/373284/70b0b3e9-8e67-699f-ac0f-155a08e41e98.jpeg)
![45C5F358-8548-4A13-8879-D6FFBD6E28A9.jpeg](https://qiita-image-store.s3.amazonaws.com/0/373284/2c0f7c55-7ee5-aa0d-1441-60b373135971.jpeg)
前回、小マリオがジャンプしたところまでできました。…が、空中でフリーズしてしまいました。
今回は着地の当たり判定にこだわって作っていきます。そうすることで、様々なステージの制作が可能になってきます。


##落下の軌跡プログラムの作成
![42DA363A-8B70-4E53-A2D0-775F99DC9F2B.jpeg](https://qiita-image-store.s3.amazonaws.com/0/373284/decf15d6-7f4e-95e0-4eaa-3d3b128c9728.jpeg)
着地の当たり判定はひとまず置いておいて、小マリオの落下の軌跡の設定プログラムを作ります。
今回は、ジャンプ姿勢をとったジャンプ最高地点から左右に1マス下に落下する設定とします。

###【プログラム解説】
![C3A932B4-43E5-4A85-8545-1A96F4432332.jpeg](https://qiita-image-store.s3.amazonaws.com/0/373284/b7660edb-ef20-435e-4668-61f7318558c0.jpeg)
上の画像:右上ジャンプ後の小マリオの落下の軌跡プログラムです。
メガネ左側には、ジャンプ小マリオ（右上ジャンプ姿勢）を入れ、落下位置である1マス左下に重力センサーを入れます。
メガネ右側には、左側の位置関係を逆転させた配置でジャンプ小マリオと重力センサーを入れます。

下の画像:
左上ジャンプ後の小マリオの落下の軌跡プログラムです。
メガネ左側には、ジャンプ小マリオ（左上ジャンプ姿勢）を入れ、落下位置である1マス右下に重力センサーを入れます。
メガネ右側には、左側の位置関係を逆転させた配置でジャンプ小マリオと重力センサーを入れます。

一般的なプログラム風に訳すと
ジャンプ小マリオ左上（右上）の1マス左下に重力センサーが存在するとき、左下（右下）重力センサーの位置とポジションが入れ替わり、ジャンプ小マリオ左上（右上）は通常姿勢の小マリオに書き換わる
という意味です。

そうです。前回、ジャンプ姿勢のまま止まってしまった原因の１つは、「ジャンプ姿勢（左上&右上）での重力判定プログラムは作っていない」から重力センサーに反応しないからでした。

####ジャンプ（左上＆右上）後の落下テスト
![591055C9-28EE-4B6B-BB72-5BDF7CCA953A.jpeg](https://qiita-image-store.s3.amazonaws.com/0/373284/dadc28ac-6175-9d57-575a-2b01ce7a9ca4.jpeg)
十字キー右上＋Aボタン同時押しで右上ジャンプコマンド成立

![6A1B3ECF-C9B3-42E1-B6D2-369D388DC671.jpeg](https://qiita-image-store.s3.amazonaws.com/0/373284/2ca4db07-78c6-e9cc-f588-c4bd8778472b.jpeg)
1マス右上の重力センサーと小マリオ位置関係の入れ替え&ジャンプ小マリオ（右）への書き換え成立


![887FDDDA-0516-4B8D-952B-46DB83DC7C39.jpeg](https://qiita-image-store.s3.amazonaws.com/0/373284/5d84517f-f506-cd92-ec6f-54469845126f.jpeg)

1マス右下の重力センサーとジャンプ小マリオ（右）の位置関係の入れ換え&通常小マリオへの書き換え成立

![04497F47-9D11-441B-92C7-F942BC26AEAF.jpeg](https://qiita-image-store.s3.amazonaws.com/0/373284/d5bbd9e4-fa37-1ad8-9465-748921c5c803.jpeg)
十字キー左上＋Aボタン同時押しで右上ジャンプコマンド成立

![AD96E7CE-C0E8-4358-B4F7-106CF7DD2D2F.jpeg](https://qiita-image-store.s3.amazonaws.com/0/373284/04e1ef67-2072-0ee5-5cbb-43cf6ed1344e.jpeg)
1マス左上の重力センサーと小マリオ位置関係の入れ替え&ジャンプ小マリオ（左）への書き換え成立

![6D2F70D5-C90D-4BB9-A56B-3F6FE2F5CD5B.jpeg](https://qiita-image-store.s3.amazonaws.com/0/373284/4e15680d-9bea-3bc3-995c-bd0469696b7d.jpeg)
1マス左下の重力センサーとジャンプ小マリオ（左）の位置関係の入れ換え&通常小マリオへの書き換え成立


###【当たり判定（着地失敗時）】
ジャンプの着地失敗プログラムです。壁にぶつかってずり落ちるような動きになります。
今回のステージに作用しないものもありますが、どんなステージにも対応できるように作り込んでみます。
![481B782E-AD84-490A-9E61-42C532EDC26B.jpeg](https://qiita-image-store.s3.amazonaws.com/0/373284/00ef1021-9c3f-9d70-0e4b-aa025e02e3d4.jpeg)
着地失敗位置（ステージブロック）
![39CFD588-D7A3-4CBA-ACA0-51D42D6A24CF.jpeg](https://qiita-image-store.s3.amazonaws.com/0/373284/9ae43a09-9d93-e15c-440c-0eb6a85c21ce.jpeg)
着地失敗位置（割れないブロック）
![29EE5D90-300C-4AF9-9115-E543BB3F1BA0.jpeg](https://qiita-image-store.s3.amazonaws.com/0/373284/d049052a-70a4-1bab-2bb3-e44719d9a8c9.jpeg)
着地失敗位置（土管（IN））
![7DB17484-F3D8-467D-957C-3B336570FF97.jpeg](https://qiita-image-store.s3.amazonaws.com/0/373284/32f20727-a7eb-6fac-c143-ab36085718a6.jpeg)
着地失敗位置（土管（OUT））
![43535F0E-3818-4631-8D7E-9A20CD0473AB.jpeg](https://qiita-image-store.s3.amazonaws.com/0/373284/54a89b68-360c-b2d2-0508-7db2f38c0c68.jpeg)
着地失敗位置（ハテナブロック）

###【当たり判定:着地失敗判定位置での十字キー（左右）の入力による着地成功】
「着地失敗判定の位置で十字キーで左右の入力をすると着地成功する」プログラムです。
マリオでもありますね。ジャンプしてギリギリ引っかかって落ちない…というような動きです。
![C594D07D-652A-439C-95A3-5BB1FE1EDB71.jpeg](https://qiita-image-store.s3.amazonaws.com/0/373284/63cff315-ccc8-eed9-8b63-74fce68e6471.jpeg)
![57744D56-753A-405F-A68D-165DDE3E6D30.jpeg](https://qiita-image-store.s3.amazonaws.com/0/373284/3c4dec63-c515-e85f-5685-e9b383c35e04.jpeg)
![526A6390-2965-4D52-B4A8-26932B73A066.jpeg](https://qiita-image-store.s3.amazonaws.com/0/373284/0ea68b0c-75a8-ef95-a4a6-239b396326f2.jpeg)
![C9E6E8E1-6868-4C6B-822C-08EAC72756DC.jpeg](https://qiita-image-store.s3.amazonaws.com/0/373284/aa1d65f9-df37-87f4-9d49-bbf8a177e852.jpeg)


###【ジャンプ軌跡の途中で着地が成立するプログラム】
通常の左上（右上）ジャンプの移動総距離は、フラットな場合上下2マス左（右）2マスですが、この移動中に着地が成立するステージレイアウトが発生します。
こちらはそのためのプログラムです。
![A401A772-6A57-4E61-8EF3-0A7DFE74F34C.jpeg](https://qiita-image-store.s3.amazonaws.com/0/373284/e86240ce-fadc-f033-8003-e32b7f9c27f4.jpeg)
![40EF412D-0740-4274-8413-A0C894AF6EC7.jpeg](https://qiita-image-store.s3.amazonaws.com/0/373284/8e16b76b-45da-6aa1-7153-2c359fb23359.jpeg)


#【土管に入ったり土管から出たりするプログラム】
土管（上向き:IN）→土管（下向き:OUT）→土管（上向き:IN）→土管（下向き:OUT）というルート制覇を実現するプログラムです。
![F878D544-E7A3-44A6-8070-621837A77C6A.jpeg](https://qiita-image-store.s3.amazonaws.com/0/373284/0645699d-00a7-926e-763b-53206909e102.jpeg)


#【🚩までの道のり制覇！】
今回追加したプログラムにより、小マリオが🚩のところまでたどり着くことができるようになりました。今回は、これで終わりです。長丁場でした💦それ故に、若干説明を端折ってしまいました。分かりづらいところがありましたらお気軽にお問い合わせくださいm(_ _)m

引き続き、マリオ風ゲーム制作を進めて行きますが、ある程度記事がたまってからご紹介します。
なお、ここで紹介するジャンプのシステムや当たり判定、特に土管の出入りなど、2019/3/12現在、可能な限りあらゆる書籍、サイト見ましたが、どこにも載ってないです。（2013年くらいにマリオ作ってる方がいますね。naverまとめにありました。）割れたメガネでマリオ風ゲームを作る人がもし今後増えるようでしたら、一応このサイトが元祖!ということを覚えていてほしいな…というささやかな自己満足が今後の記事執筆の励みとなりますのでよろしくお願いします。m(_ _)m

###おまけ
以下、プレイ動画をiMovieの編集画面のスクショでスクロールさせてコマ送りにしてみました。
![CD4ADBA5-C78F-46B5-A34C-A1493D49F237.png](https://qiita-image-store.s3.amazonaws.com/0/373284/1361b9ff-7861-1b41-2e8b-38327e8be459.png)
![51D7B7BF-B6DE-4624-873F-D4D34675E653.png](https://qiita-image-store.s3.amazonaws.com/0/373284/0519362f-44e6-1baa-a706-23cfe950a395.png)
![D9FD2456-9087-4095-997C-9B6122005D7E.png](https://qiita-image-store.s3.amazonaws.com/0/373284/9ceb13f0-6169-5d6b-4936-acc308d2a9bc.png)
![165266C8-EA10-4B13-8F09-18B5BAF45D98.png](https://qiita-image-store.s3.amazonaws.com/0/373284/01cf5732-0f3f-3c15-9a15-76b01ba9505a.png)
![A7D942A6-1E7D-493B-8CC7-D0A1B4034FDB.png](https://qiita-image-store.s3.amazonaws.com/0/373284/008c0ce4-406e-80b3-1fb0-5b49e9eaa8ad.png)
![DBBF3975-5247-45B6-B7DE-89E503BB4E76.png](https://qiita-image-store.s3.amazonaws.com/0/373284/7f92914b-ab6f-f8b6-0f43-7885273b068a.png)
![9704501C-E336-481E-B3DE-034D09E63377.png](https://qiita-image-store.s3.amazonaws.com/0/373284/c45c6217-0bc2-d776-1fd3-85323fdfbf35.png)
![AF1067C3-794A-41ED-8C9C-B3E31D852C5D.png](https://qiita-image-store.s3.amazonaws.com/0/373284/c6ecbc1d-dc44-ba09-d8d7-82b1801f9e03.png)
![02E1E6AD-AF68-4B2E-BFB4-DF5AE9F29569.png](https://qiita-image-store.s3.amazonaws.com/0/373284/849e3e2b-5b15-f74b-9ada-cd335e3a004a.png)
![FE13318A-4089-4BD0-A719-6A7D61F9CE8B.png](https://qiita-image-store.s3.amazonaws.com/0/373284/42473dbd-de40-0ca1-ec4a-3b41b28763f7.png)
![017BD6A2-C893-4037-919E-D1876DA6927B.png](https://qiita-image-store.s3.amazonaws.com/0/373284/e93edb21-a6d9-3f3d-e8b5-e78ae5ac1492.png)
![23F9A355-209A-42E6-9F5B-E9DAC0E6C6FA.png](https://qiita-image-store.s3.amazonaws.com/0/373284/8d8d95d0-6af6-af34-6c28-1373d054dec9.png)
![8723BAFB-A272-4F14-B25A-60996487869F.png](https://qiita-image-store.s3.amazonaws.com/0/373284/c2980eb9-6668-711c-27db-63b4c192f475.png)
![EFB89348-B59B-417B-9663-D01A2E328B7E.png](https://qiita-image-store.s3.amazonaws.com/0/373284/74a17ce3-5019-b818-d657-1a33753d3ad9.png)
![927F6AED-CF4D-40FD-8CAA-DEA86DF05A87.png](https://qiita-image-store.s3.amazonaws.com/0/373284/93ca2ca2-af64-510d-1774-30230ecbb830.png)
![FBF824CC-E98D-4B5C-8576-EC9C88709D66.png](https://qiita-image-store.s3.amazonaws.com/0/373284/55af8ea3-18ef-ec0f-5e09-c55f273c3ae4.png)
![6166EA6C-45ED-4AD8-992F-A9899053C871.png](https://qiita-image-store.s3.amazonaws.com/0/373284/39ab3fef-843b-5048-4c85-daf53eba2bb8.png)