0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-03-12

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

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

ジャンプと着地判定〜前回の続き:土管(IN)から🚩までとりあえず行く〜

4508A82E-E2FD-410C-A04D-9ED7CB4A47A5.jpeg
当面の目標は、小マリオのままで🚩まで移動できるようにします。スタートは画像の位置とします。
【全ルート確認】
スタート→2マス右に移動→右上ジャンプ→土管IN→土管OUT→土管IN→土管OUT→右上ジャンプ
今回は🚩まで辿り着きます。

【ジャンプの着地と当たり判定(着地)プログラムの作り方】

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

前回の問題点

AAF7575A-CB65-4D82-84D1-F2B610757E2C.jpeg
45C5F358-8548-4A13-8879-D6FFBD6E28A9.jpeg
前回、小マリオがジャンプしたところまでできました。…が、空中でフリーズしてしまいました。
今回は着地の当たり判定にこだわって作っていきます。そうすることで、様々なステージの制作が可能になってきます。

落下の軌跡プログラムの作成

42DA363A-8B70-4E53-A2D0-775F99DC9F2B.jpeg
着地の当たり判定はひとまず置いておいて、小マリオの落下の軌跡の設定プログラムを作ります。
今回は、ジャンプ姿勢をとったジャンプ最高地点から左右に1マス下に落下する設定とします。

【プログラム解説】

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

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

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

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

ジャンプ(左上&右上)後の落下テスト

591055C9-28EE-4B6B-BB72-5BDF7CCA953A.jpeg
十字キー右上+Aボタン同時押しで右上ジャンプコマンド成立

6A1B3ECF-C9B3-42E1-B6D2-369D388DC671.jpeg
1マス右上の重力センサーと小マリオ位置関係の入れ替え&ジャンプ小マリオ(右)への書き換え成立

887FDDDA-0516-4B8D-952B-46DB83DC7C39.jpeg

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

04497F47-9D11-441B-92C7-F942BC26AEAF.jpeg
十字キー左上+Aボタン同時押しで右上ジャンプコマンド成立

AD96E7CE-C0E8-4358-B4F7-106CF7DD2D2F.jpeg
1マス左上の重力センサーと小マリオ位置関係の入れ替え&ジャンプ小マリオ(左)への書き換え成立

6D2F70D5-C90D-4BB9-A56B-3F6FE2F5CD5B.jpeg
1マス左下の重力センサーとジャンプ小マリオ(左)の位置関係の入れ換え&通常小マリオへの書き換え成立

【当たり判定(着地失敗時)】

ジャンプの着地失敗プログラムです。壁にぶつかってずり落ちるような動きになります。
今回のステージに作用しないものもありますが、どんなステージにも対応できるように作り込んでみます。
481B782E-AD84-490A-9E61-42C532EDC26B.jpeg
着地失敗位置(ステージブロック)
39CFD588-D7A3-4CBA-ACA0-51D42D6A24CF.jpeg
着地失敗位置(割れないブロック)
29EE5D90-300C-4AF9-9115-E543BB3F1BA0.jpeg
着地失敗位置(土管(IN))
7DB17484-F3D8-467D-957C-3B336570FF97.jpeg
着地失敗位置(土管(OUT))
43535F0E-3818-4631-8D7E-9A20CD0473AB.jpeg
着地失敗位置(ハテナブロック)

【当たり判定:着地失敗判定位置での十字キー(左右)の入力による着地成功】

「着地失敗判定の位置で十字キーで左右の入力をすると着地成功する」プログラムです。
マリオでもありますね。ジャンプしてギリギリ引っかかって落ちない…というような動きです。
C594D07D-652A-439C-95A3-5BB1FE1EDB71.jpeg
57744D56-753A-405F-A68D-165DDE3E6D30.jpeg
526A6390-2965-4D52-B4A8-26932B73A066.jpeg
C9E6E8E1-6868-4C6B-822C-08EAC72756DC.jpeg

【ジャンプ軌跡の途中で着地が成立するプログラム】

通常の左上(右上)ジャンプの移動総距離は、フラットな場合上下2マス左(右)2マスですが、この移動中に着地が成立するステージレイアウトが発生します。
こちらはそのためのプログラムです。
A401A772-6A57-4E61-8EF3-0A7DFE74F34C.jpeg
40EF412D-0740-4274-8413-A0C894AF6EC7.jpeg

【土管に入ったり土管から出たりするプログラム】

土管(上向き:IN)→土管(下向き:OUT)→土管(上向き:IN)→土管(下向き:OUT)というルート制覇を実現するプログラムです。
F878D544-E7A3-44A6-8070-621837A77C6A.jpeg

【🚩までの道のり制覇!】

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

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

おまけ

以下、プレイ動画をiMovieの編集画面のスクショでスクロールさせてコマ送りにしてみました。
CD4ADBA5-C78F-46B5-A34C-A1493D49F237.png
51D7B7BF-B6DE-4624-873F-D4D34675E653.png
D9FD2456-9087-4095-997C-9B6122005D7E.png
165266C8-EA10-4B13-8F09-18B5BAF45D98.png
A7D942A6-1E7D-493B-8CC7-D0A1B4034FDB.png
DBBF3975-5247-45B6-B7DE-89E503BB4E76.png
9704501C-E336-481E-B3DE-034D09E63377.png
AF1067C3-794A-41ED-8C9C-B3E31D852C5D.png
02E1E6AD-AF68-4B2E-BFB4-DF5AE9F29569.png
FE13318A-4089-4BD0-A719-6A7D61F9CE8B.png
017BD6A2-C893-4037-919E-D1876DA6927B.png
23F9A355-209A-42E6-9F5B-E9DAC0E6C6FA.png
8723BAFB-A272-4F14-B25A-60996487869F.png
EFB89348-B59B-417B-9663-D01A2E328B7E.png
927F6AED-CF4D-40FD-8CAA-DEA86DF05A87.png
FBF824CC-E98D-4B5C-8576-EC9C88709D66.png
6166EA6C-45ED-4AD8-992F-A9899053C871.png

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?