スクラッチコーチキャンプ スクラッチで使える無料素材集
  • 素材
  • 修行
  • はじめての方へ
  • スクラッチゲームの作り方

    マインクラフトバトルVSウィザー #1

    マインクラフトバトルVSウィザー #1
    この記事は スクラッチコーチで掲載されているオリジナル記事 のバックアップです。
    スターター作品
    なし
    今回の完成サンプル
    なし
    [soy-series name="スクラッチでマイクラ風ウィザーバトルゲームの作り方"]

    さぁ、スクラッチでナニ作る!?

    チュートリアルの元になった作品

    [prj-embed prj="841750153" mini="1" title="プレイしておこう"]今回の[prj-link prj="841750153"]スクラッチを作る参考作品[/prj-link]にさせていただきました、ありがとう![/prj-embed]

    マインクラフト風のアクションバトルゲーム。プレイヤー(スティーブ)を操作してウィザーボスと戦う。物理ベースの移動(摩擦・重力・壁キック)、剣での攻撃、ウィザーの弾丸回避、HP管理を行い、ウィザーを倒すとクリアタイムが表示される。

    今回の目標

    • スティーブの物理移動(摩擦・重力・壁キック)と剣の左右攻撃を作る
    • オオカミ追従、プレイヤーHPバー、クリアタイマーを追加する
    • ウィザーの召喚演出とバトル行動、弾丸の爆発アニメーションまで作る

    スターター作品をリミックスしよう

    このチュートリアルにはスターター作品があります。使わなくても大丈夫だけど、最低限の素材などが用意されてるので便利です。
    スターター作品をダウンロード

    このチュートリアルでは作者さんの実装方法を尊重して作ってますが、最低限の改善をしてます。(参考作品と同じものが完成するわけではない点はご注意)

    #1地面の配置

    [talk class="m-l-n"]まずは足場となる地面を配置するよ。ここがプレイヤーやオオカミが立つ場所になるんだ。[/talk]

    準備

    スプライト「地面」を開く

    地面地面
    スプライトについて
    地面プラットフォーム。プレイヤーや弾丸の衝突判定に使用
    どんな役割か
    地面を配置するよ。プレイヤーが着地したりウィザーの弾が衝突したりするための足場だよ。

    実装

    step-0

    イベント .st0 { fill: #45993D; } .st1 { fill: #4CBF56; } greenflag が押されたとき で旗クリック時に 見た目 表示する で表示して、 動き x座標を ( ) 、y座標を ( ) にする で画面下部の座標(4, -154)にセットするよ。 見た目 大きさを ( ) %にする で大きさを130%にして、画面幅に合わせた足場を作るんだ。

    #2スティーブの登場

    [talk class="m-l-n"]いよいよ主人公のスティーブを画面に登場させるよ。大きさ800%でドーンと表示して、本格的なアクションゲームの主役らしい見た目にするんだ。[/talk]

    準備

    スプライト「スティーブ」を開く

    スティーブスティーブ
    スプライトについて
    プレイヤーキャラクター。物理ベースの移動(摩擦・重力・壁キック)を行う
    どんな役割か
    スティーブを操作キャラクターとして設定するよ。左右移動にジャンプ、壁キックなど物理的な動きをプログラミングして、本格的なアクション操作を作っていこう。

    実装

    step-1

    イベント .st0 { fill: #45993D; } .st1 { fill: #4CBF56; } greenflag が押されたとき のあと、 見た目 コスチュームを ( ) にする でスティーブのコスチュームに切り替えて 見た目 表示する で表示するよ。 見た目 大きさを ( ) %にする を800%にすると、元のスプライトがぐっと大きくなるんだ。

    動き 回転方法を ( ) にする を「左右のみ」にするのがポイントだよ。これを設定しないと、斜めに動いたときにスティーブが回転して逆さまになっちゃうからね。

    #3速度変数の初期化

    [talk class="m-l-n"]スティーブを動かすための速度変数を準備するよ。「★X速度」が横方向、「★Y速度」が縦方向の動きを管理するんだ。[/talk]

    準備

    変数「★X速度」を追加

    プレイヤーのX方向の速度

    変数「★X速度」を追加

    変数「★Y速度」を追加

    プレイヤーのY方向の速度(重力・ジャンプ)

    変数「★Y速度」を追加

    実装

    step-2

    変数 ( ) を ( ) にする で「★X速度」と「★Y速度」をどちらも0にリセットして、 動き x座標を ( ) 、y座標を ( ) にする で画面中央(0, 0)に配置するよ。ゲーム開始時に速度をゼロにしておかないと、前回プレイの動きが残ったまま始まっちゃうからね。

    #4左移動の検知

    [talk class="m-l-n"]スティーブを左に動かす仕組みを作ろう。キーボードのAキー・左矢印キー、さらにマウスクリックにも対応させるから、スマホやタブレットでも遊べるようになるよ。[/talk] step-3

    制御 ずっと の中に 制御 もし ( ) なら を置いて、 演算 ( ) または ( ) 調べる ( ) キーが押された で入力を検知するよ。左入力があったら 変数 ( ) を ( ) ずつ変える で「★X速度」を-1して、スティーブの向きを左に変えるんだ。

    #5右移動の検知

    [talk class="m-l-n"]左移動と同じ仕組みで、今度は右に動かすコードを追加するよ。Dキー・右矢印キー・マウスの3通りだね。[/talk] step-4

    制御 もし ( ) なら で右入力を検知したら、 変数 ( ) を ( ) ずつ変える で「★X速度」を+1して、スティーブの向きを右に変えるよ。左右の移動コードが対称になっているのがわかるかな。

    #6摩擦と水平移動

    [talk class="m-l-n"]キーを離したらスティーブがピタッと止まるんじゃなくて、少しずつ減速して止まるようにするよ。これが「摩擦」の仕組みだよ。[/talk] step-5

    変数 ( ) を ( ) にする で「★X速度」に0.90を掛けるよ。毎フレーム速度が90%になるから、キーを離すとだんだん遅くなって自然に止まるんだ。そのあと 動き x座標を ( ) ずつ変える で「★X速度」の分だけ実際に横移動させるよ。

    掛ける値を0.90から0.95に変えるとツルツル滑る氷の上みたいになるし、0.80にするとすぐ止まるようになるよ。この値ひとつでキャラクターの操作感がガラッと変わるんだ。

    #7地面との衝突判定

    [talk class="m-l-n"]スティーブが地面にめり込んだとき、1ピクセルずつ上に押し出して地表に戻す仕組みを作るよ。[/talk] step-6

    制御 もし ( ) なら 調べる ( ) に触れた で地面に触れているか確認して、触れていたら 動き y座標を ( ) ずつ変える で1ピクセル上に動かすよ。まだ触れていたらさらに1ピクセル、それでもまだなら...と、ネスト(入れ子)構造で最大3段階まで押し上げを試みるんだ。

    この仕組みは坂道を登るときにも自動的に機能するよ。1ステップの横移動でめり込んだ分を、最大3ピクセルまで縦に補正できるんだ。

    #8衝突判定の深層ネスト

    [talk class="m-l-n"]3段階の押し上げでは足りない急な坂や壁のために、さらに深いネストを追加するよ。合計で最大7ピクセルまで押し上げられるようになるんだ。[/talk] step-7

    step-6で作った3段のネストの奥に、さらに 制御 もし ( ) なら 動き y座標を ( ) ずつ変える のペアを3段追加するよ。4段目、5段目、6段目と、まだ地面に触れているなら1ピクセルずつ押し上げ続けるんだ。

    [talk]この「ネスト式衝突解決」はScratchならではの手法なんだ。普通のプログラミング言語ならループで書くところだけど、Scratchにはbreak(ループ途中で抜ける命令)がないから、変数フラグを使う必要があって冗長になりがち。ネスト式ならブロックの構造がそのまま「何段目の押し上げか」を表していて、視覚的にもわかりやすいんだよ。[/talk]

    #9壁衝突時の押し戻し

    [talk class="m-l-n"]7段ネストの最深部に到達してもまだ地面に触れているなら、それはもう壁にぶつかったということ。横移動を取り消して元の位置に戻すよ。[/talk] step-8

    動き x座標を ( ) ずつ変える で「★X速度」の反対方向に動かして横移動を打ち消し、 動き y座標を ( ) ずつ変える で5ピクセル下に戻すよ。そのあと 制御 もし ( ) ならでなければ でジャンプキーが押されているかチェックして、壁キック(壁を蹴って反対方向にジャンプ)の判定に入るんだ。

    壁キックが発動すると、「★X速度」が反対方向に10に設定されて壁から跳ね返るよ。マリオの壁ジャンプと同じテクニックだね。

    #10壁キックの方向判定

    [talk class="m-l-n"]壁キックでどっち方向に跳ね返るかを判定するよ。壁にぶつかったとき、進んでいた方向の逆に飛ばすんだ。[/talk] step-9

    制御 もし ( ) ならでなければ 演算 ( ) < ( ) で「★X速度」が正か負かを調べるよ。右に進んでいた場合は 変数 ( ) を ( ) にする で「★X速度」を-10にして左に跳ね返し、左に進んでいたら10にして右に跳ね返すんだ。同時に「★Y速度」を15にしてジャンプさせるよ。

    壁キックが発動しない場合は「★X速度」を0にリセットして、壁にへばりつかないようにするんだ。

    #11重力と着地判定

    [talk class="m-l-n"]ここからはスティーブに重力をつけるよ。空中にいるとだんだん落ちていって、地面に着地したら止まる仕組みだよ。[/talk] step-10

    変数 ( ) を ( ) ずつ変える で「★Y速度」を毎フレーム-1するよ。これが重力の役割で、「★Y速度」がどんどんマイナスになって落下が加速するんだ。 動き y座標を ( ) ずつ変える で「★Y速度」の分だけ縦移動させたあと、 調べる ( ) に触れた で地面に触れたか確認するよ。

    地面に触れていたら、 動き y座標を ( ) ずつ変える で落下分を元に戻して、「★Y速度」を0にリセットするよ。これで着地完了だね。

    #12ジャンプの実装

    [talk class="m-l-n"]ついにジャンプだよ!Wキー・上矢印キー・マウスを使って、地面に立っているときだけジャンプできるようにするんだ。[/talk] step-11

    まず 動き y座標を ( ) ずつ変える で2ピクセル下に動かして地面との接触を確認するよ。 制御 もし ( ) なら でジャンプキーが押されていて、かつ地面に触れている場合だけ 変数 ( ) を ( ) にする で「★Y速度」を15にセットするんだ。最後に 動き y座標を ( ) ずつ変える で1ピクセル上に戻すよ。

    2ピクセル下げてから判定するのがコツだよ。ジャストで地面の上にいると接触判定が不安定になることがあるから、少しだけめり込ませてから確認して確実にジャンプを発動させているんだ。

    #13オオカミの初期設定

    [talk class="m-l-n"]スティーブの相棒、オオカミを登場させるよ。マインクラフトでおなじみの忠実なペットだね。[/talk]

    準備

    スプライト「オオカミ」を開く

    オオカミオオカミ
    スプライトについて
    スティーブに追従するコンパニオンスプライト
    どんな役割か
    オオカミをスティーブの相棒として作るよ。常にスティーブの方を向いてついてくるようにプログラミングしよう。

    実装

    step-12

    イベント .st0 { fill: #45993D; } .st1 { fill: #4CBF56; } greenflag が押されたとき で旗クリック時に 見た目 表示する で表示して、 見た目 大きさを ( ) %にする で大きさ900%にするよ。 動き 回転方法を ( ) にする を「左右のみ」にして、オオカミが逆さまにならないようにするんだ。

    #14オオカミの追従

    [talk class="m-l-n"]オオカミがいつもスティーブについてくるようにプログラムするよ。まるで本物のペットみたいだね。[/talk] step-13

    制御 ずっと の中で 動き ( ) へ向ける を使ってスティーブの方を向き、 動き ( ) へ行く でスティーブの位置に移動するよ。毎フレームこれを繰り返すから、スティーブがどこに行ってもピッタリついてくるんだ。

    #15剣の初期設定

    [talk class="m-l-n"]ダイヤモンドの剣を作っていくよ。スティーブの手持ち武器で、攻撃のメインウエポンになるんだ。[/talk]

    準備

    スプライト「剣」を開く

    剣
    スプライトについて
    ダイヤモンドの剣。スティーブに追従し左右対応のスイング攻撃アニメーションを行う
    どんな役割か
    ダイヤモンドの剣を作るよ。スティーブに追従して、スペースキーで剣を振る攻撃アニメーションをプログラミングしよう。キラキラ光る色エフェクトも付けるよ。

    実装

    step-14

    イベント .st0 { fill: #45993D; } .st1 { fill: #4CBF56; } greenflag が押されたとき 見た目 画像効果をなくす を実行して画像効果をリセットし、 見た目 大きさを ( ) %にする で800%に設定するよ。 動き 回転方法を ( ) にする を「自由に回転」にして、剣が攻撃時に自由に回転できるようにするんだ。 動き ( ) 度に向ける で180度の初期角度にセットするよ。

    #16剣の追従と表示

    [talk class="m-l-n"]剣をスティーブの手に持たせるよ。オオカミと同じように、毎フレームスティーブの位置に追従させるんだ。[/talk] step-15

    見た目 表示する で剣を表示して、 見た目 コスチュームを ( ) にする で「ダイヤモンドの剣」コスチュームにするよ。 制御 ずっと の中で 動き ( ) へ行く を使ってスティーブに追従させるんだ。

    #17剣の向き切り替え

    [talk class="m-l-n"]スティーブが左を向いたら剣も左向き、右を向いたら右向きに切り替えるよ。左右で別々のコスチュームを用意してあるんだ。[/talk] step-16

    制御 ずっと の中で左入力を検知したら 見た目 コスチュームを ( ) にする で「ダイヤモンドの剣2」に、右入力なら「ダイヤモンドの剣」に切り替えるよ。コスチュームが2枚あるだけで、キャラクターの向きに合った剣の持ち方になるんだ。

    このコスチュームで向きを管理する手法は、追加の変数なしで状態を表現できる賢いやり方だよ。あとで攻撃アニメーションでも、このコスチューム番号を使って左右どちらの攻撃を出すか判定するんだ。

    #18剣のキラキラエフェクト

    [talk class="m-l-n"]剣にキラキラ光る色変化エフェクトをつけるよ。虹色に光ってカッコいい見た目になるんだ。[/talk] step-17

    イベント .st0 { fill: #45993D; } .st1 { fill: #4CBF56; } greenflag が押されたとき 制御 ずっと を開始して、 制御 ( ) 回繰り返す で10回 見た目 ( ) の効果を ( ) ずつ変える の色効果を0.5ずつ変えるよ。これで色がじわっと変化していくんだ。

    #19エフェクトの折り返し

    [talk class="m-l-n"]色を一方向に変えたら、今度は逆方向に戻して虹色のループを完成させるよ。[/talk] step-18

    制御 ( ) 秒待つ で0.1秒待ってから、 制御 ( ) 回繰り返す で10回 見た目 ( ) の効果を ( ) ずつ変える の色効果を-0.5ずつ戻すよ。行きが+0.5で帰りが-0.5だから、元の色に戻ってまた最初から繰り返すんだ。この小さな往復が、ずっと虹色に輝いて見えるエフェクトの正体だよ。

    #20左向き攻撃の振り

    [talk class="m-l-n"]スペースキーで剣を振る攻撃アニメーションを作るよ。まずはスティーブが左を向いているときの攻撃だね。[/talk] step-19

    イベント .st0 { fill: #45993D; } .st1 { fill: #4CBF56; } greenflag が押されたとき 制御 ずっと を始めて、 演算 ( ) = ( ) 見た目 コスチュームの ( ) でコスチューム番号が2(左向き状態)かチェックするよ。スペースキーか1キーが押されたら、 制御 ( ) 回繰り返す で3回 動き ( ) ( ) 度回す を-15度ずつ回転させて、剣を振りかぶるアニメーションを作るんだ。

    #21左向き攻撃の完了

    [talk class="m-l-n"]振りかぶったら、「攻撃」メッセージを送ってダメージ判定を発動させて、剣を元の位置に戻すよ。[/talk]

    準備

    メッセージ「攻撃」を追加

    メッセージ「攻撃」を追加

    実装

    step-20

    イベント ( ) を送る で「攻撃」メッセージを送信して、 制御 ( ) 回繰り返す で3回 動き ( ) ( ) 度回す を+15度ずつ戻すよ。-15度×3回で振りかぶり、+15度×3回で戻すから、トータルでちょうど元の角度に戻るんだ。

    #22右向き攻撃の振り

    [talk class="m-l-n"]今度はスティーブが右を向いているときの攻撃を作るよ。左向きとは回転方向が逆になるんだ。[/talk] step-21

    演算 ( ) = ( ) でコスチューム番号が1(右向き状態)のとき、スペースキーか1キーで 制御 ( ) 回繰り返す を3回、 動き ( ) ( ) 度回す を+15度ずつ回転させるよ。左向きは-15度だったけど、右向きは+15度で逆方向に振るんだ。

    #23右向き攻撃の完了

    [talk class="m-l-n"]右向きも同じく、「攻撃」メッセージを送って剣を戻すよ。[/talk] step-22

    イベント ( ) を送る で「攻撃」メッセージを送信し、 制御 ( ) 回繰り返す で3回 動き ( ) ( ) 度回す を-15度ずつ戻すよ。これでスペースキーを押すと、左右どちらを向いていても剣がブンッと振れるようになったんだ。

    #24攻撃ボタン(左)配置

    [talk class="m-l-n"]キーボードだけじゃなく、画面上のボタンでも攻撃できるようにするよ。まずは左側の攻撃ボタンを配置しよう。[/talk]

    準備

    スプライト「攻撃ボタン(左)」を開く

    攻撃ボタン(左)攻撃ボタン(左)
    スプライトについて
    左側のモバイル攻撃ボタン。クリックで攻撃準備メッセージを送信
    どんな役割か
    左側の攻撃ボタンを作るよ。クリックすると剣の攻撃が発動するようにプログラミングしよう。

    実装

    step-23

    イベント .st0 { fill: #45993D; } .st1 { fill: #4CBF56; } greenflag が押されたとき 動き x座標を ( ) 、y座標を ( ) にする を使って座標(-137, -104)の画面左下に配置し、 見た目 表示する で表示するよ。タブレットやスマホでも遊べるように、タップで攻撃できるボタンなんだ。

    #25左ボタンのクリック処理

    [talk class="m-l-n"]ボタンをクリックしたら攻撃が発動するように、メッセージで剣に指示を送るよ。[/talk]

    準備

    メッセージ「攻撃準備」を追加

    メッセージ「攻撃準備」を追加

    実装

    step-24

    イベント このスプライトが押されたとき でボタンがクリックされたら、 イベント ( ) を送る で「攻撃準備」メッセージを送るよ。剣のスプライトがこのメッセージを受け取って攻撃アニメーションを実行するんだ。ボタンと剣を直接つなげるのではなく、メッセージを経由するのがポイントだよ。

    #26ボタン経由の右向き攻撃

    [talk class="m-l-n"]剣のスプライトで「攻撃準備」メッセージを受信して、右向き攻撃を実行するよ。[/talk]

    準備

    スプライト「剣」を開く

    剣

    実装

    step-25

    イベント ( ) を受け取ったとき で「攻撃準備」を受け取ったら、 演算 ( ) = ( ) でコスチューム番号が1(右向き状態)かチェックするよ。右向きなら 制御 ( ) 回繰り返す で3回 動き ( ) ( ) 度回す を+15度ずつ振って、 イベント ( ) を送る で「攻撃」を送信するんだ。

    #27ボタン右向き攻撃の戻し

    [talk class="m-l-n"]攻撃メッセージ送信後、剣を元の角度に戻すよ。[/talk] step-26

    制御 ( ) 回繰り返す で3回 動き ( ) ( ) 度回す を-15度ずつ戻して、最後に 動き ( ) 度に向ける で180度にリセットするよ。スペースキー攻撃と違って、ボタン攻撃は イベント ( ) を受け取ったとき で始まるから、向きのリセットを明示的に入れて確実に元の状態に戻すんだ。

    #28攻撃ボタン(右)配置

    [talk class="m-l-n"]右側にも攻撃ボタンを配置するよ。左ボタンと対称の位置に置くんだ。[/talk]

    準備

    スプライト「攻撃ボタン(右)」を開く

    攻撃ボタン(右)攻撃ボタン(右)
    スプライトについて
    右側のモバイル攻撃ボタン。クリックで攻撃準備メッセージを送信
    どんな役割か
    右側の攻撃ボタンを作るよ。左ボタンと同じく、クリックで攻撃を発動するんだ。

    実装

    step-27

    イベント .st0 { fill: #45993D; } .st1 { fill: #4CBF56; } greenflag が押されたとき 動き x座標を ( ) 、y座標を ( ) にする を使って座標(228, -104)の画面右下に配置し、 見た目 表示する で表示するよ。左右にボタンがあれば、どちらの手でも攻撃しやすいよね。

    #29右ボタンのクリック処理

    [talk class="m-l-n"]右ボタンも左ボタンと同じく、クリックで「攻撃準備」メッセージを送るよ。[/talk] step-28

    イベント このスプライトが押されたとき イベント ( ) を送る の「攻撃準備」を送信するよ。左右のボタンが同じメッセージを送るから、剣の側では1つの受信コードで両方のボタンに対応できるんだ。これがメッセージを使う大きなメリットだよ。

    #30ボタン経由の左向き攻撃

    [talk class="m-l-n"]「攻撃準備」を受信したとき、左向きだった場合の攻撃アニメーションを追加するよ。[/talk]

    準備

    スプライト「剣」を開く

    剣

    実装

    step-29

    イベント ( ) を受け取ったとき で「攻撃準備」を受け取り、 演算 ( ) = ( ) でコスチューム番号が2(左向き状態)なら、 制御 ( ) 回繰り返す で3回 動き ( ) ( ) 度回す を-15度ずつ振って、 イベント ( ) を送る で「攻撃」を送信するよ。

    #31ボタン左向き攻撃の戻し

    [talk class="m-l-n"]右向き攻撃と同じように、剣を戻して角度をリセットするよ。[/talk] step-30

    制御 ( ) 回繰り返す で3回 動き ( ) ( ) 度回す を+15度戻して、 動き ( ) 度に向ける で180度にリセットするよ。これでキーボードのスペースキーでも画面上のボタンでも、どちらからでも左右の攻撃ができるようになったね。

    #32ウィザーの初期設定

    [talk class="m-l-n"]いよいよボスキャラ、ウィザーの登場だよ。マインクラフトで最強クラスの敵がScratchのステージに現れるんだ。[/talk]

    準備

    スプライト「ウィザー」を開く

    ウィザーウィザー
    スプライトについて
    ボスエネミー。フェーズ遷移、移動、弾丸発射、被ダメージを管理する
    どんな役割か
    ウィザーボスを作るよ。召喚演出から弾を撃ってくるバトルフェーズまで、メッセージ連鎖でフェーズ管理していこう。

    実装

    step-31

    イベント .st0 { fill: #45993D; } .st1 { fill: #4CBF56; } greenflag が押されたとき 見た目 画像効果をなくす を実行して画像効果をリセットし、 見た目 表示する で表示するよ。 動き x座標を ( ) 、y座標を ( ) にする で座標(0, 37)の画面上部中央に配置して、 見た目 大きさを ( ) %にする で1000%の大迫力サイズにするんだ。

    #33ウィザーの召喚演出

    [talk class="m-l-n"]ウィザーはいきなりバトルモードにはならないよ。まず休眠状態で表示してから、メッセージで召喚演出を開始するんだ。[/talk]

    準備

    メッセージ「召喚ウィーザ!」を追加

    メッセージ「召喚ウィーザ!」を追加

    実装

    step-32

    見た目 コスチュームを ( ) にする で「ウィザー2」(休眠状態)のコスチュームに切り替えて、 制御 ( ) 秒待つ で0.5秒間の溜めを作るよ。そのあと イベント ( ) を送る で「召喚ウィーザ!」メッセージを送信して、3つの爆発エフェクトを一斉に起動するんだ。

    #34爆発エフェクトの準備

    [talk class="m-l-n"]ウィザー召喚時の爆発エフェクトを準備するよ。最初は非表示にしておいて、メッセージを受け取ったら登場させるんだ。[/talk]

    準備

    スプライト「爆発」を開く

    爆発爆発
    スプライトについて
    中央位置の爆発エフェクト。召喚時と最終爆発時にアニメーションを再生する
    どんな役割か
    中央位置の爆発エフェクトを作るよ。ウィザー召喚時と最後の爆発時にアニメーションを再生するんだ。

    実装

    step-33

    イベント .st0 { fill: #45993D; } .st1 { fill: #4CBF56; } greenflag が押されたとき 見た目 コスチュームを ( ) にする を「explosion_0」(爆発の1コマ目)にセットして、 見た目 隠す で隠しておくよ。コスチュームを先にセットしてから隠すのがポイントで、表示されたときに1コマ目からアニメーションがスタートするんだ。

    #35中央爆発のアニメーション

    [talk class="m-l-n"]「召喚ウィーザ!」メッセージを受け取って、ウィザーの位置で爆発アニメーションを再生するよ。[/talk] step-34

    イベント ( ) を受け取ったとき で「召喚ウィーザ!」を受信したら、 見た目 表示する で表示して 動き ( ) へ行く でウィザーの位置に移動するよ。 制御 ( ) 回繰り返す で7回ループして、 制御 ( ) 秒待つ で極小の待ち時間を入れながら 見た目 次のコスチュームにする でコスチュームを切り替えて爆発アニメーションを再生するんだ。

    待ち時間を0.000000001秒というほぼゼロの値にしているのは、Scratchの描画更新を強制的に発生させるためだよ。0秒だと画面が更新されずにアニメーションが飛んじゃうことがあるんだ。

    #36中央爆発の完了処理

    [talk class="m-l-n"]爆発アニメーションが終わったら、効果音を鳴らして次のフェーズに進むよ。[/talk]

    準備

    メッセージ「爆破完了」を追加

    メッセージ「爆破完了」を追加

    実装

    step-35

    ( ) の音を鳴らす で「get4」の効果音を再生し、 見た目 隠す で爆発エフェクトを隠すよ。そして イベント ( ) を送る で「爆破完了」メッセージを送信するんだ。このメッセージがウィザーのバトルフェーズ開始のトリガーになるよ。

    #37爆発2の準備

    [talk class="m-l-n"]2つ目の爆発エフェクトを作るよ。中央の爆発と同時に別の位置で再生されて、迫力を増すんだ。[/talk]

    準備

    スプライト「爆発2」を開く

    爆発2爆発2
    スプライトについて
    右上位置の爆発エフェクト。Explosionと同時に異なる座標で再生する
    どんな役割か
    右上位置の爆発エフェクトを作るよ。中央の爆発と同時に再生されて、迫力のある演出になるよ。

    実装

    step-36

    イベント .st0 { fill: #45993D; } .st1 { fill: #4CBF56; } greenflag が押されたとき 見た目 コスチュームを ( ) にする を「explosion_0」にして 見た目 隠す で隠すよ。爆発スプライトの初期化コードは全て同じパターンだね。

    #38右上位置の爆発

    [talk class="m-l-n"]「召喚ウィーザ!」を受信して、今度は座標(43, 78)の右上位置で爆発させるよ。[/talk] step-37

    イベント ( ) を受け取ったとき で「召喚ウィーザ!」を受信したら、 動き x座標を ( ) 、y座標を ( ) にする で座標(43, 78)に移動して 見た目 表示する で表示するよ。中央の爆発と同じように 制御 ( ) 回繰り返す で7回コスチュームを切り替えてアニメーションを再生するんだ。

    3つの爆発スプライトが同じメッセージを受信することで、異なる座標で同時に爆発が再生されるよ。1つのメッセージで複数のスプライトを同時に動かせるのが、ブロードキャストの強力なところだね。

    #39爆発2の完了処理

    [talk class="m-l-n"]右上の爆発もアニメーション後に効果音と完了メッセージを送るよ。[/talk] step-38

    ( ) の音を鳴らす で「get4」を再生し、 見た目 隠す で隠して イベント ( ) を送る で「爆破完了」を送信するよ。3つの爆発がそれぞれ「爆破完了」を送るから、ウィザーは3回受信することになるんだ。

    #40爆発3の準備

    [talk class="m-l-n"]3つ目の爆発エフェクトも同じパターンで準備するよ。[/talk]

    準備

    スプライト「爆発3」を開く

    爆発3爆発3
    スプライトについて
    左上位置の爆発エフェクト。Explosionと同時に異なる座標で再生する
    どんな役割か
    左上位置の爆発エフェクトを作るよ。3つの爆発が同時に光って、ウィザー召喚のインパクトを演出するんだ。

    実装

    step-39

    イベント .st0 { fill: #45993D; } .st1 { fill: #4CBF56; } greenflag が押されたとき 見た目 コスチュームを ( ) にする を「explosion_0」にして 見た目 隠す で隠すんだ。3つの爆発スプライトはコードがほぼ同じで、違うのは表示位置だけだよ。

    #41左上位置の爆発

    [talk class="m-l-n"]最後の爆発は座標(-37, 69)の左上位置で再生するよ。[/talk] step-40

    イベント ( ) を受け取ったとき で「召喚ウィーザ!」を受信して、 動き x座標を ( ) 、y座標を ( ) にする で座標(-37, 69)に移動し 見た目 表示する で表示するよ。 制御 ( ) 回繰り返す で7回コスチュームを切り替えてアニメーションを再生すれば、中央・右上・左上の3箇所同時爆発でウィザー召喚の大迫力演出が完成するんだ。

    #42爆発3の完了処理

    [talk class="m-l-n"]左上の爆発も効果音を鳴らして完了メッセージを送るよ。これで3つの爆発が全て完了するんだ。[/talk] step-41

    ( ) の音を鳴らす で「get4」を再生し、 見た目 隠す で隠して イベント ( ) を送る で「爆破完了」を送信するよ。3つの爆発が次々と「爆破完了」を送り、ウィザーのバトルフェーズが始まる準備が整うんだ。

    #43ウィザーの活性化

    [talk class="m-l-n"]爆発が終わったら、ウィザーがいよいよバトルモードに入るよ。休眠状態から活性状態に切り替わって、弾を撃ち始めるんだ。[/talk]

    準備

    スプライト「ウィザー」を開く

    ウィザー
    ウィザー

    変数「★ウィザーHP」を追加

    ウィザーの体力ポイント

    変数「★ウィザーHP」を追加

    メッセージ「発射」を追加

    メッセージ「発射」を追加

    実装

    step-42

    イベント ( ) を受け取ったとき で「爆破完了」を受信したら、 変数 ( ) を ( ) にする で「★ウィザーHP」を43にセットするよ。 見た目 コスチュームを ( ) にする で「ウィザー1」(活性状態)にコスチュームを変えて、 制御 ずっと の中で 制御 ( ) 秒待つ のランダム1〜5秒ごとに イベント ( ) を送る で「発射」メッセージを送信するんだ。

    攻撃間隔をランダムにしているのがポイントだよ。毎回同じタイミングで撃ってきたら簡単に避けられちゃうけど、1〜5秒のランダムだと予測できなくて緊張感が生まれるんだ。

    #44ウィザーの移動

    [talk class="m-l-n"]ウィザーが左右に動き回るようにするよ。画面端にぶつかったら跳ね返って往復するんだ。[/talk] step-43

    イベント ( ) を受け取ったとき で「爆破完了」を受信して、 動き 回転方法を ( ) にする を「左右のみ」に設定するよ。 制御 ずっと の中で 動き ( ) 歩動かす で5歩ずつ進んで、 調べる ( ) に触れた で画面端に触れたら 動き もし端に着いたら、跳ね返る で跳ね返るんだ。

    ウィザーの活性化(弾の発射)と移動が別々のスクリプトになっているのに注目しよう。同じ「爆破完了」メッセージを受信するけど、それぞれ独立して動くんだ。Scratchでは同じスプライト内で複数のスクリプトが同時に実行できるから、こういう設計が可能なんだよ。

    #45弾丸スプライトの準備

    [talk class="m-l-n"]ウィザーが撃つ弾丸、「ウィザーの頭」を準備するよ。最初は非表示にしておいて、クローンで弾を量産するんだ。[/talk]

    準備

    スプライト「ウィザーの頭」を開く

    ウィザーの頭ウィザーの頭
    スプライトについて
    ウィザーの弾丸。クローンで生成されスティーブを追尾する
    どんな役割か
    ウィザーの弾丸を作るよ。クローンで生成されて、スティーブめがけて飛んでいくんだ。当たると爆発するよ。

    実装

    step-44

    イベント .st0 { fill: #45993D; } .st1 { fill: #4CBF56; } greenflag が押されたとき 動き x座標を ( ) 、y座標を ( ) にする を座標(-160, -90)に設定し、 見た目 大きさを ( ) %にする で800%にするよ。 見た目 隠す で隠しておくのが大事で、この親スプライトは弾の「設計図」の役割なんだ。実際に画面に出てくるのはクローンだけだよ。

    #46弾丸クローンの生成

    [talk class="m-l-n"]ウィザーから「発射」メッセージが届いたら、弾丸のクローンを1つ生成するよ。[/talk] step-45

    イベント ( ) を受け取ったとき で「発射」を受信したら、 制御 ( ) のクローンを作る で自分自身のクローンを作るんだ。ウィザーがランダム間隔で「発射」を送るたびに新しい弾が1発ずつ生まれる仕組みだよ。クローンの具体的な動き(スティーブを追尾して飛んでいく処理)は、次のステップで作っていくよ。

    #47弾丸の発進

    [talk class="m-l-n"]クローンが生まれたら、ウィザーの位置からスティーブめがけて飛んでいく弾丸の動きを作るよ。[/talk] step-46

    制御 クローンされたとき でクローンが始動したら、 見た目 コスチュームを ( ) にする で「ウィザー」コスチュームに切り替えて 見た目 表示する で表示するよ。 動き ( ) へ行く でウィザーの位置に移動してから、 動き ( ) へ向ける でスティーブの方を向くんだ。

    弾丸がウィザーから発射された瞬間にスティーブの方を向くだけで、そのあとは追尾しないよ。発射時の狙いだけで直進するから、プレイヤーは動いて避けることができるんだ。

    #48弾丸の飛行と着弾

    [talk class="m-l-n"]弾丸がまっすぐ飛んでいき、画面端か地面にぶつかったら爆発するようにするよ。[/talk] step-47

    制御 ずっと の中で 動き ( ) 歩動かす を10にして弾丸を前進させるよ。 制御 もし ( ) なら 演算 ( ) または ( ) で、 調べる ( ) に触れた が画面端か地面に触れたら爆発開始だ。 制御 ( ) 回繰り返す で6回、 制御 ( ) 秒待つ で極小時間を入れつつ 見た目 次のコスチュームにする でコスチュームを切り替えて爆発アニメーションを再生するよ。

    ここでも待ち時間を0.000000001秒にして描画更新を強制しているよ。召喚時の爆発と同じテクニックだね。

    #49着弾処理とスティーブへの命中

    [talk class="m-l-n"]地面や端で爆発したら効果音を鳴らして消滅するよ。さらに、スティーブに直撃した場合のダメージ処理も追加するんだ。[/talk]

    準備

    メッセージ「攻撃された」を追加

    メッセージ「攻撃された」を追加

    実装

    step-48

    爆発アニメーション後に ( ) の音を鳴らす で「get4」を再生して 制御 このクローンを削除する でクローンを削除するよ。そして 制御 もし ( ) なら 調べる ( ) に触れた でスティーブに触れたかチェックして、当たっていたら イベント ( ) を送る で「攻撃された」メッセージを送信するんだ。

    #50スティーブ命中時の爆発

    [talk class="m-l-n"]スティーブに当たった場合も、地面に当たったときと同じ爆発アニメーションを見せてからクローンを消すよ。[/talk] step-49

    「攻撃された」メッセージの送信後、 制御 ( ) 回繰り返す で6回 制御 ( ) 秒待つ 見た目 次のコスチュームにする で爆発を再生して、 制御 このクローンを削除する で削除するんだ。弾丸がどこに当たっても爆発エフェクトが出るから、見た目のフィードバックがしっかりしているよ。

    まとめ

    前半お疲れさまでした!物理ベースの移動や7段ネストの衝突解決など、難しいところをしっかり乗り越えてきたね。ブロードキャスト連鎖でウィザーの召喚演出からクローン弾丸の爆発まで作れたのもすごいよ。後半ではダメージ処理やウィザーのHPバー、ゲームクリア・ゲームオーバーの仕組みを作って完成を目指そう!

    ブクマよろしくお願いします!という口コミを寄せてくれた方 ブクマよろしくお願いします!
    どんどん追記・更新していくので、ブックマークやシェアよろしくお願いします!