• シューティングゲームの作り方│レモン軍による宇宙の支配を防げ!②

シューティングゲームの作り方│レモン軍による宇宙の支配を防げ!②を作成した著者 グリフパッチ

この動画の和訳解説は、グリフパッチさんご本人から許可をいただいて掲載しております。
グリフパッチさんのYOUTUBEチャンネルはこちらからどうぞ。

スタータープロジェクト

なし

完成サンプル
サンプル
難易度

挑戦レベル

チャプター数
全13章

「シューティングゲームの作り方│レモン軍による宇宙の支配を防げ!② 」の解説

グリフパッチ(動画)
さいじゃく(字幕翻訳)
クローン同士のアタリ判定というスクラッチャー泣かせの問題に取り組みます!

今回のシューティングゲームチュートリアルの内容

反レモン軍の諸君!
こちらグリフパッチ!

いよいよレモン軍との戦闘予想エリアが近づいてきたぞ…

ってことで今回はレモンを実装に挑戦しよう!

中でもレーザーとレモンの「クローン同士の当たり判定」は手強いからな

そうそう 前回のレッスンは大好評だったよ!

ほら みんな作ってくれたよ!

動画の最後にまた紹介するから チャンネルはそのままってね!

いやぁ本当に嬉しい!

サウンド周り

よし!今回も行くぞ!

サンプルを更新しといたから リンクから見といてね

必須じゃないけど 今回使うサウンドもあるからさ

「All Audio」ってスプライトにまとめてあるぞ

バックパックに入れるだけでOK

君のプロジェクトを開いて ドラッグしてみて

中に何が入ってるかな?

最初はBGMだな

レーザーの音

あとは爆発音

じゃあさっそくBGM使うか

「ステージ」にドラッグするぞ

BGM実装したことある?

めっちゃカンタンだよ

「ステージ」に緑の旗ブロック置いて――

「ずっと」ブロックを置く

そこに「終わるまで○を鳴らす」ブロックを入れてっと

これで試そう

よしよし

レモン軍との熱いバトルが目に浮かぶようだ

っとその前にレーザーに音を付けよう

「All Audio」にある「Laser Shoot16」って音をスプライト「Laser」までドラッグだ

「Laser」に音を鳴らすブロックを加えよう

「クローンされたとき」の最初がいいな

ここは「終わるまで鳴らす」じゃないぞ

音が鳴ってから発射じゃダサいからな

テストしよう!

いい感じだな!

ちなみに音は加工して少し静かにした

大きい音は耳障りだからな

敵のコスチュームを描こう

お待たせ!

レモンの番だぞ!

スプライト「Lemon」を作ろう

レモンってちゃんと描こうとしたら 実はけっこう複雑な形してるって知ってた?

描いてみるから見てて

まず黄色を選ぶぞ

横11:縦7くらいの楕円を描く

選択ツールで しっかり中心に合わせることを忘れるな!

真ん中にマークが見えるだろ?

これでレモンが中央を軸に回転するぞ

さっき「Player」でもやったよな

次は変形ツールだ

楕円の端をドラッグして凹ませるっと

こだわりすぎると終わらないぞ(笑)

コスチューム名を「Lemon」にしとこう

次に「BIG」ってコスチュームを作るぞ

これ裏技ね

レモンが画面の外に出ていく動きをスムーズにできるぞ

ズームアウトして長方形ツールで塗りつぶせ!

画面からハミ出るくらいが ちょうどいいぞ

レモンを画面外に消す仕掛け完成だ

敵のコーディングをしよう

よし コーディングしようか

まずは初期設定だ

緑の旗が押されたら――

コスチュームを「Lemon」にして「最背面へ移動する」ブロックを置こう

これで機体とレーザーをレモンより前に表示できる

奥とか前とかは 他にも意味あるけど――

詳しくは別の動画で説明するぞ

大きさを300にしてチェックしよう

まぁいいね

ちなみに ここがオンじゃないと見えないぞ

じゃ レモンはクローンとして使う予定だから本体は隠そうか

レーザーのときと同じだな!

クローンだけ見えればOK

ゲーム開始直後は 少しレモンの登場を遅らせるぞ

「○秒待つ」ブロックを使おう

あとで調整するから とりまゼロ秒でいいよ

で クローンを作る「ずっと」ブロックを置いてっと

カスタムブロック「New Enemy」を作って――

「ずっと」の中に置こう

2秒ごとに敵レモンが増えるようにしようか

まだまだ途中だけど ちょくちょくテストしておくといいぞ

ここで敵の登場方法をイメージしてみよう

画面外から中央に向けて迫ってきて――

そのまま逆サイドに消える感じかな

これをコーディングするプランを話すぞ

レモンを中央に置いて

ランダムに回転させる

そのまま画面外まで後退

そこからゆっくり直進すれば中央を通って逆サイドに行くぞ

よし やってみよう!

まずコスチューム「BIG」にしよう

いったん画面外に移動させるために必要だぞ

次に「x座標を0、y座標を0にする」で中央に配置

ここで向きを管理する変数「dir」を作っておく

「このスプライトのみ」な

マイナス180からプラス180までの乱数をセットしよう

これで360度どこでも向くぞ

次に「○度に向ける」に変数「dir」をセット

あとは画面外に出すだけだから――

「マイナス350歩動かす」を置く

マイナスにしとけば後退してくれるぞ

これでいったん画面外に消えたはず

ここでコスチュームを「Lemon」に戻しておこう

仕上げる前にレモンのスピードも決めたいね

「このスプライトのみ」で変数「speed」を作ろうか

これでレモンごとにスピードを変えられるぞ

最初はゆっくりめの1でいいか

そしてお待たせ!

クローンを作っていきますか!

角度や速度の設定はクローンに引き継がれるから 完成したも同然だな

いやぁテストもせずに作り込んじゃったな!

バグが見つけにくくなるんだよな…

でもあとちょっとだけ

「クローンされたとき」を作らないとな

クローンされたらまず表示して――

すぐに「ずっと」ループだ

変数「speed」の歩数ずつ直進させよう

やっとテストできるぞ!

レモンが来たぞぉ…

ってノロいな(笑)

ランダムな場所から迫ってくるね

スピードアップしたらキツイかも

で 中央を通って…逆サイドへ抜け…

あれダメだ

ほら 枠線を赤くすると分かる

画面の端でハマってるでしょ?

こりゃ「BIG」の出番だな

前進する前にコスチューム「BIG」に変えて――

最後にまた「Lemon」に戻すだけ!

BIG様様だろ?

ほら スムーズに画面外に消えていくだろ?

敵をワープさせよう

超よくなった

でもこれじゃイマイチだな

画面外に消えた敵は――

ワープして逆側から出てくるのがお決まりだよな

そうすると敵がウジャウジャ増えるから 必死に撃ちまくるだろ

カスタムブロック「wrap around」を作ろう

この辺に置いといてっと

ループの最後じゃなくて 移動の直後で使うように組み込もう

中身を実装するぞ!

これ もっと洗練した作りにもできるけど理解のために愚直に作るぞ

つまり 長いけどシンプルな実装だな

「もし○なら、でなければ」ブロックを置いて――

x座標が350より大きければ画面右に消えたってことな

これを左側からワープさせたいわけだ

だからx座標にマイナス350をセットしよう

じゃ左に消えたときは?

x座標がマイナス350より小さければ 逆にプラス350をセットでいいよな!

これで左も解決!

y座標も同じだな

まるっとコピペするけど ぶっゃけ式は全然違うから同じでもないか(笑)

y座標が280より大きければyにマイナス280をセットして――

逆にマイナス280より小さければプラス280をセット

よし いい感じ

テストしよう

うわっと!

レモン多すぎてワープしてるか分かんないな!

スピードを8にして――

あとクローンを10秒ごとに変えようか

これで試そう

レモンが下に消えたらワープして上から再出現してるね

緑の旗を押せば別の角度でも試せるぞ

上から下…右から左…

左から右…もういいか(笑)

じゃ さっきの値を1秒に直しておこう

敵を回転させよう

どうよこれ!

レモンが襲いかかってくるようになったぞ!

でもまだまだ

ほら レモンになんの迫力もないよね

もっと隕石みたいにしたいんだよ

隕石ってスピンしながら飛んでるイメージない?

このままじゃダメダメだ

さてここで厄介な問題が1つ

レモンを回転させると 向きも変わるよね

でも進路は真っ直ぐのままにしたいんだよ…

何とかならないか?

どうしてもレモンを回したいんだよ!

まずは「○秒待つ」を2秒に戻しとくか

「クローンされたとき」を見てみて

問題となるのは この「○歩動く」だ

向きと進路が同じ場合は便利なブロックなんだけどな…

よし技を伝えよう

よく使われる技だから知ってるかもだけど――

注目!

x座標とy座標を変えるぞ

xには変数「speed」に みんなの嫌いなアレを掛けたもの

「向きのsin(サイン)」だ

「speed」掛ける「向きのcos(コサイン)」ずつy座標も変える

これでどうなると思う?

信じられないかもだけど これで「○歩動く」と同じになる

ウソだろって?

じゃあブロックを入れ替えてみようか

見てろよ

緑の旗を押して――

ほら!みて!

さっきとまったく同じ動きだろ?

にしてもガッツリ数学っぽくなったけど――

要は「○歩動く」ブロックはsinとcosで置き換え可能ってことだ

この演算のおかげで レモンの向きを変えつつ 進路は変えず進むことができるぞ!

あとは「向き」を変数「dir」と入れ替えよう

ようやくこの変数の使いどころまで来たな

さぁちゃんと動くかな…

よし

じゃあ本題だ

「右に5度回す」を移動後に置いてっと

動かすぞ!

ウーフー!見てみろよ

レモンが回転して中央に迫ってくるぞ!

クローン同士のアタリ判定1

やったな!

でもレーザーがこのままじゃ片手落ちだよな

ちょっと厄介なコーティングに挑むぞ!

まずはスプライト「Lemon」に「もしも」ブロックを追加だ

単純にレモンとレーザーが触れてるか調べるぞ

触れたら消すっと

テストしようか

宇宙を支配するのが誰なのかハッキリさせてやろう!

よし楽勝だな!

まともに画面内にすら入らせないぞ!

でもちょっと見て

レーザーが貫通しちゃってるよな

射線上のレモンが全部消えてるだろ?

これでもいいかもだけど――

今回は1つしか倒せない仕様にしたい

そして これこそが簡単そうに見えて 実は激ムズのスクラッチャー泣かせの仕様なのだ!

難しい原因はクローン同士が触れた場合 どっちがどっちに触れたか分からないことだ

どうやって判定すればいいと思う?

残念だけど答えは簡単じゃない

絶対に正しい答えはないんだけど――

十分に使える技ならあるぞ

スプライト「Laser」を開こう

「レーザーがレモンに触れたら」の処理があるよな

もう1つ「クローンされたとき」を追加して――

「○まで待つ」に「レモンに触れたら」を入れる

そしたらすぐにクローンを消す

さぁこれの何がダメだか分かる?

確かにレーザーもレモンも両方消えるようにしたばすだよな?

でもこれじゃダメなんだよ…

別の問題にブチ当たるから 見てみよう

レモンが破壊できてないだろ?

レーザーはレモンに当たったら消えるけど レモンは消えてないな

レモンめ レーザー耐性を得たのか!?

全然「触れたら」判定が機能してないぞ

いったいぜんたい…なんでだ?

うむ 謎をとくための3大理由をお伝えしよう!

競合状態の解決

まずレーザーとレモンのスプライトがあるよな

双方ともに移動処理とアタリ判定が行われていて――

見た目では同時に動いて見える…が!

実は違うのだ!

スクラッチではブロックは1つずつ順番に実行される

早すぎて目視は無理だけどな

今回の場合だと まずレーザーが動く

レーザーが進んでアタリ判定が行われる

まだ当たってないね

次にレモンが前に進む

こっちもまだ当たらない

ここで再描画され人間の目にもスプライトの動きが分かる

で またレーザーの番な

前進して――

ドカーン!

当たったぞ! どうなるだっけ?

うん 消えるんだよな

ふむ…これはキナ臭いね

次はレモンが動いて アタリ判定は――

はい! レーザーもうないじゃん!

これがレモンが消えない理由だ

専門的には「競合状態」っていうんだ

どちらか片方しかアタリ判定が正しく行われないってことな

両方のアタリ判定を動かすには どうしたらいいかな?

答えはカンタン

レモンのアタリ判定が終わるまでレーザーを消さなければいいだけ

レモンのアタリ判定が終わったら両方消すわけだ

カンタンだろ?

クローンを消す前に「○秒待つ」を置いて 値は――

ゼロ!

え? ウソだろって?

いやいやいや! 本当だって!

スクラッチだとゼロ秒待つと 次の再描画まで処理が持ち越されるんだ

これでレモンが消える処理もされて――

レーザーもちゃんと消える

テストしてみるぞ

ほらな!!

断然いいだろ!

ほとんどのレーザーは合格だ…

でもたまに失敗するな

じゃあ クローン同士のアタリ判定が上手くいかない3大理由の2つ目に移るぞ

レモンを分裂させる

っと その前に レモンのアタリ判定処理に注目してみよう

スプライト「Lemon」を開いて

レモンにレーザーが当たったら 小さなレモンに分裂するようにしてみるぞ

隕石っぽい演出でいいだろ?

カスタムブロック「Enemy Hit」でクローンを消す処理を置き換えよう

コレはコッチに引っ越し

よし

ここでレモンを分裂させるぞ

まずは半分にしよう

「大きさ÷2」でいいね

テストしよう

うん まぁまぁ期待通りかな

でも小さくなりすぎだな

どっかで消えるようにしないとな

「もし大きさが35未満なら」クローンを消すようにするか

ちょっと試してみよう

これでレモンは――

消えるね!

じゃあ分裂させる前に速度を上げよう

変数「speed」を1.5倍にするか

あと変数「dir」を0から180にランダムで変えてゴチャまぜにしよう!

よし 分裂も作ろうか

「自分自身のクローンを作る」を置こう

向きが同じままだから――

変数「dir」に120度加えよう

4分の3ひねる感じ

3つ目のレモンも作って――

また「dir」に120加える

早く動かしたいな!

おっと 先に出現間隔を5秒にしてっと

よーしテストするぞ!

ひゅー! イケてるな!

分裂する演出は最高だな!

ってかチビレモン速いな!

的も小さくて危険だな!

射てば射つほどレモンだらけって――

クローン同士のアタリ判定2

最高だな(笑)

でもチビレモンはアタリ判定ミスも多いな…

ここらで3大理由の2つ目を見ていくか

2つ目も処理の順番に問題がある

レーザーがレモンを追いかけてるとする

今回もレーザーが先に当たるとしよう

さっきレーザーを消さずに レモンの処理を待つように改善したよな

それってレモンが離れたらどうなる?

わかった?

レモンの移動後にアタリ判定が走るから――

離れすぎて触れてないことになる

さぁ どうしよか?

シンプルに処理の順番を変えてしまおう

アタリ判定を先に実行するぞ

これでアタリ判定時にはレモンとレーザーは触れ合ってる状態だな!

じゃあ「もしも」ブロックをループの一番上に移そう

コスチュームを変えるより さらに前だぞ

テストするぞ

1つずつ撃ってみるぞ

よし アタリ判定が機能してるぞ

次回予告

問題解決してそうだな!

レモンが分裂するってなかなかいいだろ?

アタリ判定もすごくいいし!

もうチョット改善できるけどな…

まぁそれは次回――

レモンの体力実装と 爆発の演出を作るときでいいな

みんなの作品紹介

次回も絶対楽しいぞ!

じゃあ終わりにみんなの作品を紹介しよう!

まずはこの2人だ

ラズカナズさんは2種類の作品をアップしてくれたぞ

1つ目はモバイル対応版だ! すごいな!

レモンも出てきたら最高だな

スクラッチだと両方同時に操作できないのが残念ではあるけど――

これを考慮して 2つ目はマウスを追いかけるだけで操作できるようになってたぞ

次はジュポンさんの作品だ!

わぉ ゲーム完成してるな!

よくやった!

これ 猫は動かせないんだね

でも中央のレモンガールを守る必要があるぞ

ストーリーもあって楽しいぞ

ジュポンさん ありがとうな!

じゃあ スタジオ内の作品をザッと見ていこう

アイデアを探してる人は実際にチェックしてくれよ!

まとめ

ガチで感動ものだぞ

よーし今回はここまで

チャンネル登録・高評価よろしくな

チャンネルメンバーも募集中だ

メンバー増えたら動画も早く増えるから よろしくな

メンバー特典も色々あるぞ

それじゃまた次回!

スクラッチオン!