- ① 操作・剣・召喚 （いまここ）
- ② ダメージ・クリア
さぁ、スクラッチでナニ作る！？
チュートリアルの元になった作品
マインクラフトバトル - ウィザー戦
マインクラフト風のアクションバトルゲーム。プレイヤー（スティーブ）を操作してウィザーボスと戦う。物理ベースの移動（摩擦・重力・壁キック）、剣での攻撃、ウィザーの弾丸回避、HP管理を行い、ウィザーを倒すとクリアタイムが表示される。
今回の目標
- スティーブの物理移動（摩擦・重力・壁キック）と剣の左右攻撃を作る
- オオカミ追従、プレイヤーHPバー、クリアタイマーを追加する
- ウィザーの召喚演出とバトル行動、弾丸の爆発アニメーションまで作る
スターター作品をリミックスしよう
このチュートリアルにはスターター作品があります。使わなくても大丈夫だけど、最低限の素材などが用意されてるので便利です。
スターター作品をダウンロード
#1地面の配置
準備
スプライト「地面」を開く
地面| スプライトについて |
|---|
| 地面プラットフォーム。プレイヤーや弾丸の衝突判定に使用 |
| どんな役割か |
| 地面を配置するよ。プレイヤーが着地したりウィザーの弾が衝突したりするための足場だよ。 |
実装
が押されたとき で旗クリック時に 表示する で表示して、 x座標を ( ) 、y座標を ( ) にする で画面下部の座標(4, -154)にセットするよ。 大きさを ( ) %にする で大きさを130%にして、画面幅に合わせた足場を作るんだ。
#2スティーブの登場
準備
スプライト「スティーブ」を開く
スティーブ| スプライトについて |
|---|
| プレイヤーキャラクター。物理ベースの移動（摩擦・重力・壁キック）を行う |
| どんな役割か |
| スティーブを操作キャラクターとして設定するよ。左右移動にジャンプ、壁キックなど物理的な動きをプログラミングして、本格的なアクション操作を作っていこう。 |
実装
が押されたとき のあと、 コスチュームを ( ) にする でスティーブのコスチュームに切り替えて 表示する で表示するよ。 大きさを ( ) %にする を800%にすると、元のスプライトがぐっと大きくなるんだ。
回転方法を ( ) にする を「左右のみ」にするのがポイントだよ。これを設定しないと、斜めに動いたときにスティーブが回転して逆さまになっちゃうからね。
#3速度変数の初期化
準備
変数「★X速度」を追加
プレイヤーのX方向の速度
変数「★Y速度」を追加
プレイヤーのY方向の速度（重力・ジャンプ）
実装
( ) を ( ) にする で「★X速度」と「★Y速度」をどちらも0にリセットして、 x座標を ( ) 、y座標を ( ) にする で画面中央(0, 0)に配置するよ。ゲーム開始時に速度をゼロにしておかないと、前回プレイの動きが残ったまま始まっちゃうからね。
#4左移動の検知
ずっと の中に もし ( ) なら を置いて、 ( ) または ( ) と ( ) キーが押された で入力を検知するよ。左入力があったら ( ) を ( ) ずつ変える で「★X速度」を-1して、スティーブの向きを左に変えるんだ。
#5右移動の検知
もし ( ) なら で右入力を検知したら、 ( ) を ( ) ずつ変える で「★X速度」を+1して、スティーブの向きを右に変えるよ。左右の移動コードが対称になっているのがわかるかな。
#6摩擦と水平移動
( ) を ( ) にする で「★X速度」に0.90を掛けるよ。毎フレーム速度が90%になるから、キーを離すとだんだん遅くなって自然に止まるんだ。そのあと x座標を ( ) ずつ変える で「★X速度」の分だけ実際に横移動させるよ。
掛ける値を0.90から0.95に変えるとツルツル滑る氷の上みたいになるし、0.80にするとすぐ止まるようになるよ。この値ひとつでキャラクターの操作感がガラッと変わるんだ。
#7地面との衝突判定
もし ( ) なら と ( ) に触れた で地面に触れているか確認して、触れていたら y座標を ( ) ずつ変える で1ピクセル上に動かすよ。まだ触れていたらさらに1ピクセル、それでもまだなら...と、ネスト（入れ子）構造で最大3段階まで押し上げを試みるんだ。
この仕組みは坂道を登るときにも自動的に機能するよ。1ステップの横移動でめり込んだ分を、最大3ピクセルまで縦に補正できるんだ。
#8衝突判定の深層ネスト
step-6で作った3段のネストの奥に、さらに もし ( ) なら と y座標を ( ) ずつ変える のペアを3段追加するよ。4段目、5段目、6段目と、まだ地面に触れているなら1ピクセルずつ押し上げ続けるんだ。
#9壁衝突時の押し戻し
x座標を ( ) ずつ変える で「★X速度」の反対方向に動かして横移動を打ち消し、 y座標を ( ) ずつ変える で5ピクセル下に戻すよ。そのあと もし ( ) ならでなければ でジャンプキーが押されているかチェックして、壁キック（壁を蹴って反対方向にジャンプ）の判定に入るんだ。
壁キックが発動すると、「★X速度」が反対方向に10に設定されて壁から跳ね返るよ。マリオの壁ジャンプと同じテクニックだね。
#10壁キックの方向判定
もし ( ) ならでなければ と ( ) < ( ) で「★X速度」が正か負かを調べるよ。右に進んでいた場合は ( ) を ( ) にする で「★X速度」を-10にして左に跳ね返し、左に進んでいたら10にして右に跳ね返すんだ。同時に「★Y速度」を15にしてジャンプさせるよ。
壁キックが発動しない場合は「★X速度」を0にリセットして、壁にへばりつかないようにするんだ。
#11重力と着地判定
( ) を ( ) ずつ変える で「★Y速度」を毎フレーム-1するよ。これが重力の役割で、「★Y速度」がどんどんマイナスになって落下が加速するんだ。 y座標を ( ) ずつ変える で「★Y速度」の分だけ縦移動させたあと、 ( ) に触れた で地面に触れたか確認するよ。
地面に触れていたら、 y座標を ( ) ずつ変える で落下分を元に戻して、「★Y速度」を0にリセットするよ。これで着地完了だね。
#12ジャンプの実装
まず y座標を ( ) ずつ変える で2ピクセル下に動かして地面との接触を確認するよ。 もし ( ) なら でジャンプキーが押されていて、かつ地面に触れている場合だけ ( ) を ( ) にする で「★Y速度」を15にセットするんだ。最後に y座標を ( ) ずつ変える で1ピクセル上に戻すよ。
2ピクセル下げてから判定するのがコツだよ。ジャストで地面の上にいると接触判定が不安定になることがあるから、少しだけめり込ませてから確認して確実にジャンプを発動させているんだ。
#13オオカミの初期設定
準備
スプライト「オオカミ」を開く
オオカミ| スプライトについて |
|---|
| スティーブに追従するコンパニオンスプライト |
| どんな役割か |
| オオカミをスティーブの相棒として作るよ。常にスティーブの方を向いてついてくるようにプログラミングしよう。 |
実装
が押されたとき で旗クリック時に 表示する で表示して、 大きさを ( ) %にする で大きさ900%にするよ。 回転方法を ( ) にする を「左右のみ」にして、オオカミが逆さまにならないようにするんだ。
#14オオカミの追従
ずっと の中で ( ) へ向ける を使ってスティーブの方を向き、 ( ) へ行く でスティーブの位置に移動するよ。毎フレームこれを繰り返すから、スティーブがどこに行ってもピッタリついてくるんだ。
#15剣の初期設定
準備
スプライト「剣」を開く
剣| スプライトについて |
|---|
| ダイヤモンドの剣。スティーブに追従し左右対応のスイング攻撃アニメーションを行う |
| どんな役割か |
| ダイヤモンドの剣を作るよ。スティーブに追従して、スペースキーで剣を振る攻撃アニメーションをプログラミングしよう。キラキラ光る色エフェクトも付けるよ。 |
実装
が押されたとき で 画像効果をなくす を実行して画像効果をリセットし、 大きさを ( ) %にする で800%に設定するよ。 回転方法を ( ) にする を「自由に回転」にして、剣が攻撃時に自由に回転できるようにするんだ。 ( ) 度に向ける で180度の初期角度にセットするよ。
#16剣の追従と表示
表示する で剣を表示して、 コスチュームを ( ) にする で「ダイヤモンドの剣」コスチュームにするよ。 ずっと の中で ( ) へ行く を使ってスティーブに追従させるんだ。
#17剣の向き切り替え
ずっと の中で左入力を検知したら コスチュームを ( ) にする で「ダイヤモンドの剣2」に、右入力なら「ダイヤモンドの剣」に切り替えるよ。コスチュームが2枚あるだけで、キャラクターの向きに合った剣の持ち方になるんだ。
このコスチュームで向きを管理する手法は、追加の変数なしで状態を表現できる賢いやり方だよ。あとで攻撃アニメーションでも、このコスチューム番号を使って左右どちらの攻撃を出すか判定するんだ。
#18剣のキラキラエフェクト
が押されたとき で ずっと を開始して、 ( ) 回繰り返す で10回 ( ) の効果を ( ) ずつ変える の色効果を0.5ずつ変えるよ。これで色がじわっと変化していくんだ。
#19エフェクトの折り返し
( ) 秒待つ で0.1秒待ってから、 ( ) 回繰り返す で10回 ( ) の効果を ( ) ずつ変える の色効果を-0.5ずつ戻すよ。行きが+0.5で帰りが-0.5だから、元の色に戻ってまた最初から繰り返すんだ。この小さな往復が、ずっと虹色に輝いて見えるエフェクトの正体だよ。
#20左向き攻撃の振り
が押されたとき で ずっと を始めて、 ( ) = ( ) と でコスチューム番号が2（左向き状態）かチェックするよ。スペースキーか1キーが押されたら、 ( ) 回繰り返す で3回 ( ) ( ) 度回す を-15度ずつ回転させて、剣を振りかぶるアニメーションを作るんだ。
#21左向き攻撃の完了
準備
メッセージ「攻撃」を追加
実装
( ) を送る で「攻撃」メッセージを送信して、 ( ) 回繰り返す で3回 ( ) ( ) 度回す を+15度ずつ戻すよ。-15度×3回で振りかぶり、+15度×3回で戻すから、トータルでちょうど元の角度に戻るんだ。
#22右向き攻撃の振り
( ) = ( ) でコスチューム番号が1（右向き状態）のとき、スペースキーか1キーで ( ) 回繰り返す を3回、 ( ) ( ) 度回す を+15度ずつ回転させるよ。左向きは-15度だったけど、右向きは+15度で逆方向に振るんだ。
#23右向き攻撃の完了
( ) を送る で「攻撃」メッセージを送信し、 ( ) 回繰り返す で3回 ( ) ( ) 度回す を-15度ずつ戻すよ。これでスペースキーを押すと、左右どちらを向いていても剣がブンッと振れるようになったんだ。
#24攻撃ボタン（左）配置
準備
スプライト「攻撃ボタン（左）」を開く
攻撃ボタン（左）| スプライトについて |
|---|
| 左側のモバイル攻撃ボタン。クリックで攻撃準備メッセージを送信 |
| どんな役割か |
| 左側の攻撃ボタンを作るよ。クリックすると剣の攻撃が発動するようにプログラミングしよう。 |
実装
が押されたとき で x座標を ( ) 、y座標を ( ) にする を使って座標(-137, -104)の画面左下に配置し、 表示する で表示するよ。タブレットやスマホでも遊べるように、タップで攻撃できるボタンなんだ。
#25左ボタンのクリック処理
準備
メッセージ「攻撃準備」を追加
実装
このスプライトが押されたとき でボタンがクリックされたら、 ( ) を送る で「攻撃準備」メッセージを送るよ。剣のスプライトがこのメッセージを受け取って攻撃アニメーションを実行するんだ。ボタンと剣を直接つなげるのではなく、メッセージを経由するのがポイントだよ。
#26ボタン経由の右向き攻撃
準備
スプライト「剣」を開く
実装
( ) を受け取ったとき で「攻撃準備」を受け取ったら、 ( ) = ( ) でコスチューム番号が1（右向き状態）かチェックするよ。右向きなら ( ) 回繰り返す で3回 ( ) ( ) 度回す を+15度ずつ振って、 ( ) を送る で「攻撃」を送信するんだ。
#27ボタン右向き攻撃の戻し
( ) 回繰り返す で3回 ( ) ( ) 度回す を-15度ずつ戻して、最後に ( ) 度に向ける で180度にリセットするよ。スペースキー攻撃と違って、ボタン攻撃は ( ) を受け取ったとき で始まるから、向きのリセットを明示的に入れて確実に元の状態に戻すんだ。
#28攻撃ボタン（右）配置
準備
スプライト「攻撃ボタン（右）」を開く
攻撃ボタン（右）| スプライトについて |
|---|
| 右側のモバイル攻撃ボタン。クリックで攻撃準備メッセージを送信 |
| どんな役割か |
| 右側の攻撃ボタンを作るよ。左ボタンと同じく、クリックで攻撃を発動するんだ。 |
実装
が押されたとき で x座標を ( ) 、y座標を ( ) にする を使って座標(228, -104)の画面右下に配置し、 表示する で表示するよ。左右にボタンがあれば、どちらの手でも攻撃しやすいよね。
#29右ボタンのクリック処理
このスプライトが押されたとき で ( ) を送る の「攻撃準備」を送信するよ。左右のボタンが同じメッセージを送るから、剣の側では1つの受信コードで両方のボタンに対応できるんだ。これがメッセージを使う大きなメリットだよ。
#30ボタン経由の左向き攻撃
準備
スプライト「剣」を開く
実装
( ) を受け取ったとき で「攻撃準備」を受け取り、 ( ) = ( ) でコスチューム番号が2（左向き状態）なら、 ( ) 回繰り返す で3回 ( ) ( ) 度回す を-15度ずつ振って、 ( ) を送る で「攻撃」を送信するよ。
#31ボタン左向き攻撃の戻し
( ) 回繰り返す で3回 ( ) ( ) 度回す を+15度戻して、 ( ) 度に向ける で180度にリセットするよ。これでキーボードのスペースキーでも画面上のボタンでも、どちらからでも左右の攻撃ができるようになったね。
#32ウィザーの初期設定
準備
スプライト「ウィザー」を開く
ウィザー| スプライトについて |
|---|
| ボスエネミー。フェーズ遷移、移動、弾丸発射、被ダメージを管理する |
| どんな役割か |
| ウィザーボスを作るよ。召喚演出から弾を撃ってくるバトルフェーズまで、メッセージ連鎖でフェーズ管理していこう。 |
実装
が押されたとき で 画像効果をなくす を実行して画像効果をリセットし、 表示する で表示するよ。 x座標を ( ) 、y座標を ( ) にする で座標(0, 37)の画面上部中央に配置して、 大きさを ( ) %にする で1000%の大迫力サイズにするんだ。
#33ウィザーの召喚演出
準備
メッセージ「召喚ウィーザ！」を追加
実装
コスチュームを ( ) にする で「ウィザー2」（休眠状態）のコスチュームに切り替えて、 ( ) 秒待つ で0.5秒間の溜めを作るよ。そのあと ( ) を送る で「召喚ウィーザ！」メッセージを送信して、3つの爆発エフェクトを一斉に起動するんだ。
#34爆発エフェクトの準備
準備
スプライト「爆発」を開く
爆発| スプライトについて |
|---|
| 中央位置の爆発エフェクト。召喚時と最終爆発時にアニメーションを再生する |
| どんな役割か |
| 中央位置の爆発エフェクトを作るよ。ウィザー召喚時と最後の爆発時にアニメーションを再生するんだ。 |
実装
が押されたとき で コスチュームを ( ) にする を「explosion_0」（爆発の1コマ目）にセットして、 隠す で隠しておくよ。コスチュームを先にセットしてから隠すのがポイントで、表示されたときに1コマ目からアニメーションがスタートするんだ。
#35中央爆発のアニメーション
( ) を受け取ったとき で「召喚ウィーザ！」を受信したら、 表示する で表示して ( ) へ行く でウィザーの位置に移動するよ。 ( ) 回繰り返す で7回ループして、 ( ) 秒待つ で極小の待ち時間を入れながら 次のコスチュームにする でコスチュームを切り替えて爆発アニメーションを再生するんだ。
待ち時間を0.000000001秒というほぼゼロの値にしているのは、Scratchの描画更新を強制的に発生させるためだよ。0秒だと画面が更新されずにアニメーションが飛んじゃうことがあるんだ。
#36中央爆発の完了処理
準備
メッセージ「爆破完了」を追加
実装
( ) の音を鳴らす で「get4」の効果音を再生し、 隠す で爆発エフェクトを隠すよ。そして ( ) を送る で「爆破完了」メッセージを送信するんだ。このメッセージがウィザーのバトルフェーズ開始のトリガーになるよ。
#37爆発2の準備
準備
スプライト「爆発2」を開く
爆発2| スプライトについて |
|---|
| 右上位置の爆発エフェクト。Explosionと同時に異なる座標で再生する |
| どんな役割か |
| 右上位置の爆発エフェクトを作るよ。中央の爆発と同時に再生されて、迫力のある演出になるよ。 |
実装
が押されたとき で コスチュームを ( ) にする を「explosion_0」にして 隠す で隠すよ。爆発スプライトの初期化コードは全て同じパターンだね。
#38右上位置の爆発
( ) を受け取ったとき で「召喚ウィーザ！」を受信したら、 x座標を ( ) 、y座標を ( ) にする で座標(43, 78)に移動して 表示する で表示するよ。中央の爆発と同じように ( ) 回繰り返す で7回コスチュームを切り替えてアニメーションを再生するんだ。
3つの爆発スプライトが同じメッセージを受信することで、異なる座標で同時に爆発が再生されるよ。1つのメッセージで複数のスプライトを同時に動かせるのが、ブロードキャストの強力なところだね。
#39爆発2の完了処理
( ) の音を鳴らす で「get4」を再生し、 隠す で隠して ( ) を送る で「爆破完了」を送信するよ。3つの爆発がそれぞれ「爆破完了」を送るから、ウィザーは3回受信することになるんだ。
#40爆発3の準備
準備
スプライト「爆発3」を開く
爆発3| スプライトについて |
|---|
| 左上位置の爆発エフェクト。Explosionと同時に異なる座標で再生する |
| どんな役割か |
| 左上位置の爆発エフェクトを作るよ。3つの爆発が同時に光って、ウィザー召喚のインパクトを演出するんだ。 |
実装
が押されたとき で コスチュームを ( ) にする を「explosion_0」にして 隠す で隠すんだ。3つの爆発スプライトはコードがほぼ同じで、違うのは表示位置だけだよ。
#41左上位置の爆発
( ) を受け取ったとき で「召喚ウィーザ！」を受信して、 x座標を ( ) 、y座標を ( ) にする で座標(-37, 69)に移動し 表示する で表示するよ。 ( ) 回繰り返す で7回コスチュームを切り替えてアニメーションを再生すれば、中央・右上・左上の3箇所同時爆発でウィザー召喚の大迫力演出が完成するんだ。
#42爆発3の完了処理
( ) の音を鳴らす で「get4」を再生し、 隠す で隠して ( ) を送る で「爆破完了」を送信するよ。3つの爆発が次々と「爆破完了」を送り、ウィザーのバトルフェーズが始まる準備が整うんだ。
#43ウィザーの活性化
準備
スプライト「ウィザー」を開く
変数「★ウィザーHP」を追加
ウィザーの体力ポイント
メッセージ「発射」を追加
実装
( ) を受け取ったとき で「爆破完了」を受信したら、 ( ) を ( ) にする で「★ウィザーHP」を43にセットするよ。 コスチュームを ( ) にする で「ウィザー1」（活性状態）にコスチュームを変えて、 ずっと の中で ( ) 秒待つ のランダム1〜5秒ごとに ( ) を送る で「発射」メッセージを送信するんだ。
攻撃間隔をランダムにしているのがポイントだよ。毎回同じタイミングで撃ってきたら簡単に避けられちゃうけど、1〜5秒のランダムだと予測できなくて緊張感が生まれるんだ。
#44ウィザーの移動
( ) を受け取ったとき で「爆破完了」を受信して、 回転方法を ( ) にする を「左右のみ」に設定するよ。 ずっと の中で ( ) 歩動かす で5歩ずつ進んで、 ( ) に触れた で画面端に触れたら もし端に着いたら、跳ね返る で跳ね返るんだ。
ウィザーの活性化（弾の発射）と移動が別々のスクリプトになっているのに注目しよう。同じ「爆破完了」メッセージを受信するけど、それぞれ独立して動くんだ。Scratchでは同じスプライト内で複数のスクリプトが同時に実行できるから、こういう設計が可能なんだよ。
#45弾丸スプライトの準備
準備
スプライト「ウィザーの頭」を開く
ウィザーの頭| スプライトについて |
|---|
| ウィザーの弾丸。クローンで生成されスティーブを追尾する |
| どんな役割か |
| ウィザーの弾丸を作るよ。クローンで生成されて、スティーブめがけて飛んでいくんだ。当たると爆発するよ。 |
実装
が押されたとき で x座標を ( ) 、y座標を ( ) にする を座標(-160, -90)に設定し、 大きさを ( ) %にする で800%にするよ。 隠す で隠しておくのが大事で、この親スプライトは弾の「設計図」の役割なんだ。実際に画面に出てくるのはクローンだけだよ。
#46弾丸クローンの生成
( ) を受け取ったとき で「発射」を受信したら、 ( ) のクローンを作る で自分自身のクローンを作るんだ。ウィザーがランダム間隔で「発射」を送るたびに新しい弾が1発ずつ生まれる仕組みだよ。クローンの具体的な動き（スティーブを追尾して飛んでいく処理）は、次のステップで作っていくよ。
#47弾丸の発進
クローンされたとき でクローンが始動したら、 コスチュームを ( ) にする で「ウィザー」コスチュームに切り替えて 表示する で表示するよ。 ( ) へ行く でウィザーの位置に移動してから、 ( ) へ向ける でスティーブの方を向くんだ。
弾丸がウィザーから発射された瞬間にスティーブの方を向くだけで、そのあとは追尾しないよ。発射時の狙いだけで直進するから、プレイヤーは動いて避けることができるんだ。
#48弾丸の飛行と着弾
ずっと の中で ( ) 歩動かす を10にして弾丸を前進させるよ。 もし ( ) なら と ( ) または ( ) で、 ( ) に触れた が画面端か地面に触れたら爆発開始だ。 ( ) 回繰り返す で6回、 ( ) 秒待つ で極小時間を入れつつ 次のコスチュームにする でコスチュームを切り替えて爆発アニメーションを再生するよ。
ここでも待ち時間を0.000000001秒にして描画更新を強制しているよ。召喚時の爆発と同じテクニックだね。
#49着弾処理とスティーブへの命中
準備
メッセージ「攻撃された」を追加
実装
爆発アニメーション後に ( ) の音を鳴らす で「get4」を再生して このクローンを削除する でクローンを削除するよ。そして もし ( ) なら と ( ) に触れた でスティーブに触れたかチェックして、当たっていたら ( ) を送る で「攻撃された」メッセージを送信するんだ。
#50スティーブ命中時の爆発
「攻撃された」メッセージの送信後、 ( ) 回繰り返す で6回 ( ) 秒待つ と 次のコスチュームにする で爆発を再生して、 このクローンを削除する で削除するんだ。弾丸がどこに当たっても爆発エフェクトが出るから、見た目のフィードバックがしっかりしているよ。
まとめ
前半お疲れさまでした！物理ベースの移動や7段ネストの衝突解決など、難しいところをしっかり乗り越えてきたね。ブロードキャスト連鎖でウィザーの召喚演出からクローン弾丸の爆発まで作れたのもすごいよ。後半ではダメージ処理やウィザーのHPバー、ゲームクリア・ゲームオーバーの仕組みを作って完成を目指そう！