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

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

スタータープロジェクト

なし

完成サンプル
なし
難易度

挑戦レベル

チャプター数
全7章

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

グリフパッチ(動画)
ok-scratch(翻訳レビュー)
ペタ(翻訳)
コーディー(翻訳)

ついに、第三部ができたぜ!

レモンが爆発するエフェクトを作っちゃったんだ。それに、画面が揺れるカメラシェイク効果も追加しちゃったんだよ。レモンが爆発したとき、めっちゃかっこいい感じになってるから、試してみてね!まだゲームは完成形じゃないけど、これで自分で作りたいゲームのアイデアが湧いてくるといいな。

Intro

反レモン軍の諸君!

対レモン作戦への参戦継続を心から歓迎する!

今回は特別な演出を実装するぞ

いよいよ全ての要素が組み込まれるぞ! つまり――

サウンド…フラッシュ

爆発…光…そして この振動も!

Lemon Health

今回も絶対楽しいぞ!早速やってみよう!

振り返り…
なんか すごく物足りない感じだよな!

すぐに大きなレモンが分裂するし

ちょっと難易度を上げたいよな!

まず レモン毎に体力を付けてこう!

「レモン」スプライトでーー

変数「Health」にして「このスプライトのみ」にチェック

「New Enemy」のスクリプトに変数を入れて
「Health」は15にしよう

これでレーザーが15回当たったら分裂するぞ

次は「Define Enemy Hit」のスクリプトを探せ

これはレーザーがレモンに当たると走るぞ

じゃあ レモンの体力レベルはどうかーー

変数「Health」が0より大きいかを確認してみよう

もし大きかったら 変数「Health」をー1へ変更だ

これで体力レベルが無くなるように作れたぞ!

じゃ次は ダメージ時の演出をどうするかだ

レモンがダメージを受けてるように見せよう!

当たった瞬間にレモンが白くフラッシュするようにさせるぞ

スプライトの明るさを100にして「Stop」スクリプトを追加

レモンを白くしたいけど 分裂は防ぎたい

よし テストしてみよう
最初のレモンがきたぞ!

レーザーが当たると白くなったな!完璧だ!

また黄色に戻さなきゃだが それは後ほどだな

15回射撃してレモンが分裂したらーー

1発で小レモンを倒すようにできたな

次は迫力を付けるための音が必要だ!

さぁ 以前のプロジェクトの「All Audio」スプライトをクリックして

その中の 3つの爆発音を見ていくぞ

3つの「Explosion」ファイルを「レモン」スプライトにコピー

聞いてみよう…
「Explosion6」は短いぼやけた音だな

「Explosion2」はちょっと柔らく 更に短い

「Explosion18」は大きな爆発音!まじかっこいい!

よし 「レモン」スプライトをクリックーー

大きなレモンが射撃される音を設定しよう

「Enemy Hit」に「Start Sound」を追加「Explosion2」にするぞ

「Health」がー1に変更される前に追加だ

もう一度確認…最高だ!

次はレモンを黄色に戻そう

「クローンされたとき」スクリプトに戻って

レモンの明るさを0に設定

繰り返しブロックの始まりに追加すれば

黄色のレモンがデフォルトになり ダメージ時に白くなる

もう一度確認するぞ

これだ!これで完璧だ!気に入った

じゃ 次の爆発音を設定していこう

大きな爆発音と小さな爆発音があるぞ

「Define Enemy Hit」スクリプトを探せ

レモンの大小を区別するにはーー

「もし~なら~でなければ」ブロックを使う

最初のレモンはサイズが300だから

サイズが250以上かで区別しよう

大きなレモンには「Explosion 18」の音を設定

小さくなったら「Explosion 6」を開始にしよう!

レモンのサイズも特定できたから体力を4に設定しよう

分裂したレモンを倒すにはーー

更に4回レーザーを当てて体力を下げるぞ

1回の的中で倒せたらつまんないもんな!

いい感じになってきたぞ!

Explosion Flashes

だが まだビジュアルが物足りないな

射撃後の破片や爆発とか…

小さな明るいフラッシュを入れて爆発に見立てるぞ!

スペースゲームにまじ合うんだ!
それもスクラッチで描きやすい

じゃ「レモン」スプライトに爆発のコスチュームを入れた場合

大きな爆発が「レモン」として見なされてーー

フラッシュにレーザーが打たれ続けてしまう!

だから 爆発は新しいスプライトにしよう

新しいスプライトを作って「Boom」と名付けよう!

よし!まずは 塗りつぶされた丸を作ってーー

幅と高さは50ピクセルにしよう!
ズームして中央から始めるよ

左上に向かって グリッドを6つ数えて

クリック シフトキーを押したまま

グリッド6つ分を右下へドラグしてーー

完璧な丸が完成!

サイズも50ピクセルになったぞ!

次は選択ツールで丸を中央へ動かそう

丸の塗りつぶしは白ーー

枠線は透明に変更
既にカッコ良く見えるな!

ここに更にぼかしを付け加えてくぞ!

ALTキーを押して複製を作って

最初に作った丸に重ねよう

もう一度ALTキーを押しながら 角を外側へ広げる

スプライトのサイズが110になるまで広げるぞ

次は 塗りつぶしを放射線状パターンに変えよう

中心は白になってるから
右手の黒ボックスもクリックして

透明を選択しよう

色の選択画面を閉じたらーー

マジでカッコいいフェードのかかった丸ができたぞ!

いいねー!
コスチューム名は「Flash」で保存しよう

じゃ次に 大きなレモン用の大爆発を作ろうぜ

「Flash」コスチュームを複製して「God Rays」と名付けよう

最初に四角ツールで四角を書いていくよ

塗りつぶしを白単色に変更するぞ

その後 キャンバス全体が見えるよう縮小しよう

この光線はかなり長くするから最も左から書き始めてーー

最も右まで引っ張ってこう!
高さは元の外側の円と同じくらいかな

形を変えるツールで長方形の片方を細くしていこう

円から光線を出したいからドラグで動かそう

細い光線が中央にくるようにだぞ

さぁ 光線を増やす作業…
光線の上でALTキーを押してドラグだ

複製したら回転 中央から光線が出るようにする

1つずつの光線の細さを変えてもよい

この作業を繰り返すと フラッシュの完成だ!

Spawning Explosion Sprites

今度は このカッコ良いスプライトをどこで登場させるかーー

「Laser」スプライトを思い出してくれ

レーザーのクローンを「Player」スクリプトから作れたな

今回も同じ方法で レモンからフラッシュを作れるか?

できたら最高だが…フラッシュとレモンの位置がズレるしーー

どのレモンが爆発したかも分からない

「全てのスプライト用」変数に爆発の位置が入ったら

その変数から位置は定まる

が このやり方だとフラッシュを一気に出せない

じゃ「すべてのスプライト用」のリストを使えばいい

これで 自由にフラッシュの記録を作れる!

早速リストを作るぞ!
「全てのスプライト用に」にして名前は「BANG」だ!

表示しないにして始めるぞ

ここで「フラッシュ」スクリプトを試すスクリプトを追加

マウスの位置で「T」を押すと「Boom」スプライトをクローンしたいんだ

「T」が押されたら 「BANG」リストに1が追加されるようにな

このクローンは「コスチューム1」を使うぞ

今度 このクローンに座標を設定していくぞ

「Mouse X」と「Mouse Y」

じゃ テストしてみよう

ステージにマウスを置いて「T」を押せばテストできるぞ

これだ!「BANG」リストにコスチュームとマウス座標が含まれたな

また「T」を押すと2つ目の情報も追加できてるぞ

コスチューム番号 そしてXとYの座標位置な

いい!これで幾らでもフラッシュスプライトがクローンできる!

次はリストから爆発が走るようにスクリプトを書くぞ

「緑の旛が押された時」ブロックから始めよう

「隠す」ブロックを追加して最初のスプライトを隠す

念のため 「BANG」リストの中身も全て消す

データを整理してバグの発生を防いでおくぞ

じゃ「ずっと」ブロックを追加するぞ

「BANG」リストに何かが追加されるのを待つ

もしBANGの長さが0より大きかったらーー

リストのトップにある3つの情報を処理するぞ

最初のコスチュームはBANGの1番目に置き換える

次は座標位置…
XはBANGの2番目に置き換える

YはBANGの3番目に置き換える

3列を処理したら リストから削除していくぞ

同じ座標での爆発は1回に留めたいからな!

じゃ「BANGの1番目を削除する」を3回追加するぞ

1番目を削除すると情報が繰り上がるからーー

これで3つの情報が削除されていくぞ!最高!

次は「自分自身のクローンを作る」ブロックで

新しい「BOOM」スプライトのクローンを作るぞ

BANGに新たなコスチュームと座標の情報が追加されたらーー

新しいクローンが繰り返し作られていくぞ

最後に クローンされた時に表示するを設定ーー

これでテストするぞ!
プロジェクトは走らせない!

「緑の旛」スクリプトをクリックして

ステージ上で「T」を押せば きた!
綺麗な光をクローンできたぞ!

繰り返し押すと 光が明るくなっていくの分かるかな?

なぜだ?
キープレスイベントの事象でーー

キーを押した瞬間にスプライトの複製も発生してるな

つまり Tを押すとBANGリストの爆発と光が全て表示される

でも これはキープレスの試験だから心配ないぞ!

次は 爆発のフェードアウトを作るぞ

「-180から10までの乱数度に向ける」から始めよう

後ほど 便利になるからな

「0まで待つ」を追加して…
スプライトが表示されてから開始するようにな

次に「4回繰り返す」にして
「幽霊の効果を25ずつ変える」

これでスプライトが完全に薄れるから
最後に「このクローンを削除する」

また「緑の旛」スクリプトでチェック!「T」キーをタップするとーー

光がフラッシュして すぐにフェードアウトする
最高!

まさに花火だ!良い仕上がりだ!

じゃ コスチューム2の「God Rays」はどうしよ?

「Tキーが押されたら」スクリプトのーー

1つ目をコスチューム2の「2」へ変更しよう

もう一度「緑の旛」スクリプトをクリックして どうなるか見てみるぞ

いいな!でも…もう少し良くしたいな!

ちなみに 乱数度に向ける設定でーー

光線の雰囲気が変わってよいな!
じゃ次は 光線を長く表示させていこう!

もう少し回転も加えたいな!

この変更はコスチューム2向けだからーー

「0秒待つ」の下に「もしコスチューム番号が2なら」を加えよう

「4回繰り返す」をもう一度追加して「1度回す」にしよう
幽霊効果はいらないぞ!

コスチューム1のボックスにも「1度回す」を追加するぞ

「緑の旛」スクリプトで確認…
Tを押すとーー

これだ!ゆっくりと回転するのが最高に目立たつなー!

テストスクリプトは削除して ゲームに盛り込むぞ!

レモンスプライトをクリックして

ここに「Enemy Hit」スクリプトだ

音を鳴らすブロックに「Boom」スプライトを追加していくぞ

まず 「BANG」リストに3つのブロックを追加してクローンを作って

大きなレモンの「Godrays」から始めるぞ

そして コスチューム2を設定

同じく爆発の位置をXとY座標で設定

複製したら…1つ目のスタックブロックを「もし~なら」に挿入

もう1つは「でなければ」に追加
こっちは小爆発用だからコスチュームを1へ変更

「もし~なら」「でなければ」のブロックが共に座標位置で終わるーー

「BOOM」リストの最後に座標位置のブロックを変更して簡素化を図るぞ

これの方が分かりやすいな!

じゃ 実際ゲームをやってみよう!まじ楽しみだ!

やったぞ!大きなレモンが爆発した時の光が最高だな!

小さなレモンになった時の白い光もいい感じになったぞ!

良い出来だな!

最後に ゲーム全体を融合するものを追加したいーー

Camera Shake

次は…カメラシェイクだ!!!

色んなゲームで使われすぎ感はあるけどさ…欲しいよな!笑

レモンの爆発が迫力ありすぎて

画面全体が揺れるんだぜ!!

このエフェクトはスクロールゲームとかーー

画面移動するゲームに追加するのは簡単!

だが このゲームにそういう機能がまだない…

でも やってみよう!

まずは 動作開始のイベントを追加するぞ

そして「メッセージ1を送る」ブロック
大のレモン破壊後に追加だな

「シェイク」に名前を変更

コーディングは「プレイヤー」スプライトの中でな

シェイクには画面上の全てをーー

同量で動かすことが必要だ

変数「SHAKE DX」を作るぞ

全てのスプライト用に設定だ

これでX軸の移動量が決まる

Y軸向けに「SHAKE DY」も全てのスプライト用で設定するぞ

DXもDYも0でスタートする

各フレーム 同じ間隔で画面全てのものを動かしたい

じゃ プレイヤーを動かすスプライトを探して

演算ブロックを追加して
X座標がXスピードとSHAKE DXに応じて揺れるようにするぞ

Y座標も同じように設定だ

次は レーザースプライトでも同じ設定をするぞ

「11歩動かす」の下に「X座標をSHAKE DXずつ変える」のブロックを追加しよう

Y座標も同じようにしたら 完成だ

今度はレモンスプライトだ

動作スクリプトは「クローンされたとき」の下だな

また「X座標をSHAKE DXずつ変える」

SHAKE DYも同じだ
そして テストするぞ!

緑の旛をクリックしてーー

SHAKE DYをダブルクリックすると 値ブロックがスライダーに変わる

スライダーをドラグすると…レモンが上に上がっていくな

想定より早いな!
SHAKE DXも同じように動いていくぞ

これをどうやって応用していくのか?

スクリーンをサッと揺らして画面が揺れてるみたいするよ

コツは 画面中央を維持しつつ 迫力ある揺れを作ることだよ

プレイヤースプライトに戻り 「shakeを受け取ったとき」を追加しよう

最初の揺れの方向は撃ったレモンから遠ざかる方がいいね。

だからsinとcos使って揺れのDXとDYを設定しよう。

揺れ速度が遅くて逆方向だから大きなマイナスの数をかけて修正ね。

新しいカスタムブロック「shake」を作り、dxとdyを入力に追加。

画面更新なし実行はオフにしてね、後でわかる理由がある。

画面更新を強制するため、0秒待つブロックを追加。

画面上のものがずれる時間ができる。画面更新なしオンにしなかった理由もこれ。

そして、もう一度0秒待つよ。なぜかって?画面上のものが同じくらいの揺れのDXとDYで動くためだよ。

これで、2フレームにわたって前後の動きがきれいに増幅されるから、もっとリアルな揺れになるんだ。

さて、揺れのDXとDYを大きなマイナスの数で掛けたいって言ったよね。新しいカスタムshakeブロックを使って、X方向とY方向の両方で-16を掛けよう。

16ピクセルの揺れはかなり強いね。これで画面上のものがここまで揺れるよ。

次に揺れるときは、反対の方向に動くんだ。だから、次の揺れでは今来たばかりの反対側に戻るようにしたいよね。

そのためには、前回の2倍近くの距離を移動し、またマイナスの方向に進む必要があるんだ。それを実現するには、元の揺れを-2よりちょっと小さい数で掛けるんだ。

今回は、X方向とY方向の両方で-1.8を使うよ。ちょっとだけ2より小さい数を使うことで、時間がたつにつれて揺れが徐々に小さくなるんだ。

さて、揺れがちゃんと始まったから、行ったり来たりするアクションを続けるためにリピートループを作ろう。16回くらい繰り返すといいよ。

どれくらい?揺れが両サイドでフルに動いているから、ちょっとだけ1より小さいマイナスの数で掛けることで、揺れが徐々に減っていくが、左右に反転するようになるよ。

ランダムな数値を使って、最初の入力にはランダム-0.5から-0.8を、2つ目の入力にも同じ値を使うんだ。最後に、きれいにするために、最後にshake 0, 0を追加しよう。

これで、ゲーム全体が徐々に視界から消えることがなくなるよ。さあ、これを試して最終テストしてみよう!

このシェイクは本当に素晴らしく、他のエフェクトとも完璧に調和してるよ。ブーム!これで一気にストップさせられるね。

ああ、もちろん気付いたと思うけど、このゲームではまだ死ぬことはできないんだ。でも、かなり手に負えなくなってきてるよ。

レモンがもっとゆっくり出現するように設定することをお勧めするよ。レモンのスプライトをクリックして、ここでレモンの間隔を設定できるんだ。

最初のレモンが出現するまでの一時停止を2秒にしよう。そして、レモンの間隔を5秒に設定してね。

Conclusion

これで、第1エピソードで最初にデザインしたゲームに追いついたね!レモノイドを作ったよ!

まだ完成したゲームとは言えないけど、これが自分たちで作るゲームのアイデアを出すための触媒になればいいなって思ってるんだ。

まだ追加できることがたくさんあるよね。プレイヤーがゲームを終了できる方法を簡単に追加することから始めようかな。

もしかしたら、Scratch仲間からの質問に答えるフォローアップ動画を作るかもしれないよ。じゃあ、この3エピソードで学んだことを使って、すごいものを作ってね。

Outro

この動画の終わりになるけど、楽しんでくれたなら「いいね」ボタンを押してね。そして、

チャンネル登録もお願いします。それが僕にとって助けになるし、本当にサポートが必要なんだ。

僕がもっと素晴らしいコンテンツを作り続けるために、チャンネルのメンバーシップを開始したんだ。金銭的なサポートがあれば、特典ももらえるんだよ。

早期アクセスやコメントでの優先アクセス、プロジェクト自体にアクセスできる権限もあるんだ。教育者や親御さんにとってはとってもお得だから、ぜひチェックしてみてね。

それじゃあ、次回までに良い1週間を過ごしてね。レモンに気をつけて!またね!

スクラッチャーからのコメント

unagi-rocket unagi-rocket 2024-10-26
作品の質問です。 自分は今、ある歌に字幕をつけようと思って、タイマーとリストを使って字幕を表示させるタイミングを合わせていました。しかし、どう頑張ってもタイミングが合いません。自分のpcのラグなのか、それともscratchのバグなのか、それとも自分がどこかでミスをしているのか、教えてほしいです。お願いします。 https://scratch.mit.edu/projects/1087369845/
ok-scratch ok-scratch 2024-10-27
@unagi-rocket 切り下げてるからかも?たとえばリストの1つ目の「2.7xxx」を切り下げると「2」になっちゃいます。
unagi-rocket unagi-rocket 2024-10-27
@ok-scratch あれ?なんで僕、切り下げをしているんだろう??? 自分のミスに気づけました。ありがとうございます!!
ok-scratch ok-scratch 2024-10-27
@unagi-rocket (๑•̀ㅂ•́)و✧

スクラッチゲーム攻略

スクラッチゲーム

    • 厳選されたスクラッチ人気作品リストがレビュー付きで楽しめます
      世界中のヒットゲームをスクラッチで遊ぼう
      趣味に関するスクラッチ作品例
      勉強になるスクラッチ作品