- スターター作品
- なし
- 今回の完成サンプル
- なし
さぁ、スクラッチでナニ作る！？
チュートリアルの元になった作品
[prj-embed prj="841750153" mini="1" title="プレイしておこう"]今回の[prj-link prj="841750153"]スクラッチを作る参考作品[/prj-link]にさせていただきました、ありがとう！[/prj-embed]マインクラフト風のアクションバトルゲーム。プレイヤー（スティーブ）を操作してウィザーボスと戦う。物理ベースの移動（摩擦・重力・壁キック）、剣での攻撃、ウィザーの弾丸回避、HP管理を行い、ウィザーを倒すとクリアタイムが表示される。
今回の目標
- 弾丸がスティーブに命中した時のダメージ処理とダブルダメージの仕組みを作る
- ウィザーのHPバーと剣のダメージ判定、攻撃ボタン、勝利・敗北のロジックを実装する
- ゲームクリアとゲームオーバーの演出を全スプライトに設定して完成させる
#1剣で弾丸を破壊（キーボード）
[talk class="m-l-n"]スペースキーの攻撃で弾丸を切り落とせるようにするよ。ただ避けるだけじゃなく、剣で弾を斬れるとアクション性がぐっと上がるんだ。[/talk]
( ) を受け取ったとき で「攻撃」メッセージを受信したら、 もし ( ) なら と ( ) に触れた で剣に触れているかチェックするよ。触れていたら ( ) 回繰り返す で6回、 ( ) 秒待つ と 次のコスチュームにする で爆発アニメーションを再生するんだ。
#2剣破壊の完了処理
[talk class="m-l-n"]爆発アニメーションが終わったら効果音を鳴らして弾丸を消すよ。[/talk]
( ) の音を鳴らす で「get4」を再生して 隠す で隠し、 ( ) 秒待つ で1秒待ってから このクローンを削除する で完全に削除するよ。1秒待つのは効果音が鳴り終わるまでの時間を確保するためだよ。
#3攻撃ボタンで弾丸を破壊
[talk class="m-l-n"]画面上のボタンで攻撃したときも、同じように弾丸を壊せるようにするよ。[/talk]
( ) を受け取ったとき で「攻撃準備」メッセージを受信したら、 もし ( ) なら と ( ) に触れた で剣に触れているかチェックするよ。触れていたら ( ) 回繰り返す で6回爆発アニメーションを再生するんだ。
「攻撃」（キーボード）と「攻撃準備」（ボタン）の2つの異なるメッセージで同じ処理を実行しているよ。メッセージが違うだけで、弾丸の破壊処理は全く同じパターンだね。
#4ボタン攻撃破壊の完了
[talk class="m-l-n"]ボタン攻撃での弾丸破壊も、効果音・非表示・削除の流れは同じだよ。[/talk]
( ) の音を鳴らす で「get4」を再生して 隠す で隠し、 ( ) 秒待つ で1秒後に このクローンを削除する で削除するよ。キーボード攻撃の完了処理と全く同じコードだね。
#5ウィザーへのダメージ
[talk class="m-l-n"]剣の攻撃が弾丸だけでなく、ウィザー本体にもダメージを与えられるようにするよ。[/talk]準備
スプライト「ウィザー」を開く
ウィザー| スプライトについて |
|---|
| ボスエネミー。フェーズ遷移、移動、弾丸発射、被ダメージを管理する |
| どんな役割か |
| ウィザーボスを作るよ。召喚演出から弾を撃ってくるバトルフェーズまで、メッセージ連鎖でフェーズ管理していこう。 |
メッセージ「痛いヨォぉぉ」を追加
実装
( ) を受け取ったとき で「攻撃」メッセージを受信したら、 もし ( ) なら と ( ) に触れた で剣に触れているかチェックするよ。当たっていたら ( ) を ( ) ずつ変える で「★ウィザーHP」を-1して、 ( ) の音を鳴らす で「ダメージ」の効果音を鳴らし、 ( ) を送る で「痛いヨォぉぉ」メッセージを送信するんだ。
「痛いヨォぉぉ」メッセージはウィザーHPバーに届いて、バーの表示を更新するトリガーになるよ。変数を減らすだけじゃなく、メッセージで他のスプライトに変化を伝える連鎖がここでも使われているんだ。
#6ウィザーHPバーの準備
[talk class="m-l-n"]ウィザーの体力を画面に表示するHPバーを準備するよ。プレイヤーHPバーと同じ仕組みで、コスチューム切替でバーの減少を表現するんだ。[/talk]準備
スプライト「ウィザーHPバー」を開く
ウィザーHPバー| スプライトについて |
|---|
| ウィザーHP表示。43段階のコスチュームでウィザーHPの減少を表現する |
| どんな役割か |
| ウィザーのHPバーを作るよ。剣で攻撃が当たるたびにコスチュームが切り替わって、ウィザーのHPが減っていく様子を表示するよ。 |
実装
.st0 {
fill: #45993D;
}
.st1 {
fill: #4CBF56;
}
#7HPバーの表示
[talk class="m-l-n"]ウィザーが召喚されたタイミングでHPバーを画面に出すよ。[/talk]
( ) を受け取ったとき で「召喚ウィーザ！」メッセージを受信したら 表示する で表示するよ。メッセージ1つで、ウィザーの登場と同時にHPバーも自動的に現れる仕組みだね。
#8HPバーの減少と敗北判定
[talk class="m-l-n"]剣がウィザーに当たるたびにHPバーを1コマ進めて、最後のコスチュームに達したら「ウィーザ敗北」を宣言するよ。[/talk]準備
メッセージ「ウィーザ敗北」を追加
実装
( ) を受け取ったとき で「痛いヨォぉぉ」を受信するたびに 次のコスチュームにする でバーを1コマ減らすよ。 もし ( ) なら と ( ) = ( ) で （コスチューム番号）が43になったかチェックして、43に達したら ( ) を送る で「ウィーザ敗北」メッセージを送信するんだ。
コスチューム番号をHP残量の代わりに使うのがこのHPバーの仕組みだよ。43段階もあるから、1ヒットごとにバーが少しずつ減っていく細かい演出ができるんだ。
#9プレイヤーHPバーの初期化
[talk class="m-l-n"]ここからはプレイヤー側のHPバーを作るよ。ウィザーの弾に当たるとバーが減っていくんだ。[/talk]準備
スプライト「プレイヤーHPバー」を開く
プレイヤーHPバー| スプライトについて |
|---|
| プレイヤーHP表示。20段階のコスチュームでHP減少を表現する |
| どんな役割か |
| プレイヤーのHPバーを作るよ。ダメージを受けるたびにコスチュームが切り替わって、HPの残量がわかるようにするんだ。 |
変数「★HP」を追加
プレイヤーの体力ポイント
実装
.st0 {
fill: #45993D;
}
.st1 {
fill: #4CBF56;
}
#10被ダメージとHP減少
[talk class="m-l-n"]ウィザーの弾が当たるたびにHPを1減らして、0になったら敗北メッセージを送るよ。[/talk]準備
メッセージ「おしまい」を追加
実装
( ) を受け取ったとき で「攻撃された」を受信したら ( ) を ( ) ずつ変える で「★HP」を-1するよ。 もし ( ) なら と ( ) = ( ) で「★HP」が0かチェックして、0なら ( ) を送る で「おしまい」メッセージを送信するんだ。最後に 次のコスチュームにする でバーを1コマ進めて、HPの減少を視覚的に表示するよ。
#11ダブルダメージの仕組み
[talk class="m-l-n"]同じ「攻撃された」メッセージを別のスプライトでも受信して、もう1ポイント追加でHPを減らすよ。1発の弾で合計2ダメージになるんだ。[/talk]準備
スプライト「ダメージ処理」を開く
ダメージ処理| スプライトについて |
|---|
| ダメージ追加処理。攻撃されたメッセージを受信してHPを追加で減らす |
| どんな役割か |
| ダメージ追加処理を担当するスプライトを作るよ。攻撃を受けたときにHPをさらに減らして、1回の攻撃で2ダメージにするんだ。 |
実装
( ) を受け取ったとき で「攻撃された」を受信したら、step-59と同じく ( ) を ( ) ずつ変える で「★HP」を-1して、 もし ( ) なら で0チェック→ ( ) を送る で「おしまい」→ 次のコスチュームにする でバー更新するよ。
[talk]ここで使われているのは「同じブロードキャストを複数のスプライトが受信する」というScratchの大事な特性だよ。テレビの放送と同じで、1つの局が発信すると全チャンネルで受信できる。この作品では、プレイヤーHPバーとダメージ処理スプライトの2つが同じ「攻撃された」メッセージを受け取ることで、1回の攻撃で2ダメージを実現しているんだ。ゲームバランスの調整テクニックとして覚えておこう。[/talk]
#12被ダメージ効果音
[talk class="m-l-n"]弾が当たった瞬間にダメージの効果音を鳴らして、プレイヤーにヒットしたことを音でも伝えるよ。[/talk]準備
スプライト「スティーブ」を開く
スティーブ| スプライトについて |
|---|
| プレイヤーキャラクター。物理ベースの移動（摩擦・重力・壁キック）を行う |
| どんな役割か |
| スティーブを操作キャラクターとして設定するよ。左右移動にジャンプ、壁キックなど物理的な動きをプログラミングして、本格的なアクション操作を作っていこう。 |
実装
( ) を受け取ったとき で「攻撃された」を受信したら ( ) の音を鳴らす で「hurt」の効果音を再生するよ。これで弾が当たるとHPバーが減り、効果音が鳴り、ダブルダメージも入る、という3つのスプライトが同時に反応する仕組みが完成したね。
#13クリアタイムの初期化
[talk class="m-l-n"]ゲームクリアまでの時間を計る「★クリアタイム」変数を準備するよ。ウィザーを倒した速さが記録されるんだ。[/talk]準備
変数「★クリアタイム」を追加
ゲームクリアまでの経過時間を計測する変数
実装
.st0 {
fill: #45993D;
}
.st1 {
fill: #4CBF56;
}
#14タイマーのカウント
[talk class="m-l-n"]ゲームが始まったら1秒ごとにクリアタイムを増やしていくよ。[/talk]
.st0 {
fill: #45993D;
}
.st1 {
fill: #4CBF56;
}
#15ウィザーHPバーの非表示
[talk class="m-l-n"]ウィザーが倒されたらHPバーはもう必要ないから、画面から消すよ。[/talk]準備
スプライト「ウィザーHPバー」を開く
実装
( ) を受け取ったとき で「ウィーザ敗北」を受信したら 隠す で隠すよ。バトルが終わったあとにHPバーが残っていたら違和感があるからね。
#16ウィザーの死亡演出
[talk class="m-l-n"]ウィザーが倒されたとき、明るく光りながら消えていく演出を作るよ。ただ消えるだけじゃなく、劇的な退場シーンにするんだ。[/talk]準備
スプライト「ウィザー」を開く
実装
( ) を受け取ったとき で「ウィーザ敗北」を受信したら、まず で「スプライトの他のスクリプトを止める」を実行して移動や射撃を停止するよ。 x座標を ( ) 、y座標を ( ) にする で座標(0, 37)の中央に移動してから、 ( ) 回繰り返す で20回 ( ) の効果を ( ) ずつ変える の明るさを5ずつ上げていくんだ。
20回×明るさ5で合計100になるから、ウィザーが真っ白に光って消滅する演出になるよ。
#17最終爆発の起動
[talk class="m-l-n"]ウィザーが光り切ったら、少し間を置いて最終爆発を起動するよ。[/talk]準備
メッセージ「最後の爆発」を追加
実装
( ) 秒待つ で0.5秒の溜めを作ってから、 ( ) を送る で「最後の爆発」メッセージを送信して 隠す でウィザーを消すよ。この「最後の爆発」が、召喚時と同じ3箇所同時爆発のトリガーになるんだ。
#18最終爆発（中央）の準備
[talk class="m-l-n"]ウィザーを倒したあとの最終爆発を作るよ。召喚時と同じ3箇所で爆発するから、始まりと終わりが対になった美しい演出になるんだ。[/talk]準備
スプライト「爆発」を開く
爆発| スプライトについて |
|---|
| 中央位置の爆発エフェクト。召喚時と最終爆発時にアニメーションを再生する |
| どんな役割か |
| 中央位置の爆発エフェクトを作るよ。ウィザー召喚時と最後の爆発時にアニメーションを再生するんだ。 |
実装
( ) を受け取ったとき で「最後の爆発」を受信したら、 コスチュームを ( ) にする で「explosion_0」にセットして 表示する で表示するよ。 x座標を ( ) 、y座標を ( ) にする で座標(-4, 24)に配置するんだ。
#19中央爆発のアニメーション
[talk class="m-l-n"]爆発のコスチュームアニメーションを再生するよ。[/talk]
( ) 回繰り返す で7回、 ( ) 秒待つ で極小時間を入れつつ 次のコスチュームにする でコスチュームを切り替えるよ。召喚時の爆発と全く同じ7コマのアニメーションだね。
#20最終爆発からゲームクリアへ
[talk class="m-l-n"]中央の爆発が終わったら効果音を鳴らして、いよいよ「ゲーム終了です」メッセージを送信するよ。これがゲーム全体のクリア信号になるんだ。[/talk]準備
メッセージ「ゲーム終了です」を追加
実装
( ) の音を鳴らす で「get4」を再生して 隠す で隠し、 ( ) 秒待つ で1秒後に ( ) を送る で「ゲーム終了です」を送信するよ。このメッセージ1つで、クリア画面の表示、スプライトの非表示、ゲームの停止が一斉に起動するんだ。
#21最終爆発（右上）の準備
[talk class="m-l-n"]2つ目の最終爆発を右上の座標(29, 67)に配置するよ。[/talk]準備
スプライト「爆発2」を開く
爆発2| スプライトについて |
|---|
| 右上位置の爆発エフェクト。Explosionと同時に異なる座標で再生する |
| どんな役割か |
| 右上位置の爆発エフェクトを作るよ。中央の爆発と同時に再生されて、迫力のある演出になるよ。 |
実装
( ) を受け取ったとき で「最後の爆発」を受信して、 コスチュームを ( ) にする で「explosion_0」にし、 表示する で表示して x座標を ( ) 、y座標を ( ) にする で座標(29, 67)に移動するよ。召喚時の爆発2と同じスプライトが、違う位置で再び使われるんだ。
#22右上爆発のアニメーションと完了
[talk class="m-l-n"]右上の爆発もアニメーションを再生して、効果音を鳴らして消すよ。[/talk]
( ) 回繰り返す で7回コスチュームを切り替えてアニメーション再生し、 ( ) の音を鳴らす で「get4」を鳴らして 隠す で隠すよ。 ( ) 秒待つ で1秒待って完了だよ。3つの爆発が同じ「最後の爆発」メッセージで同時に動くから、圧巻のフィナーレになるんだ。
#23最終爆発（左上）の準備
[talk class="m-l-n"]3つ目の最終爆発を左上の座標(-35, 71)に配置するよ。[/talk]準備
スプライト「爆発3」を開く
爆発3| スプライトについて |
|---|
| 左上位置の爆発エフェクト。Explosionと同時に異なる座標で再生する |
| どんな役割か |
| 左上位置の爆発エフェクトを作るよ。3つの爆発が同時に光って、ウィザー召喚のインパクトを演出するんだ。 |
実装
( ) を受け取ったとき で「最後の爆発」を受信して、 コスチュームを ( ) にする で「explosion_0」に切り替え、 表示する で表示して x座標を ( ) 、y座標を ( ) にする で座標(-35, 71)に移動するよ。
#24左上爆発と最終爆発の完成
[talk class="m-l-n"]最後の爆発スプライトもアニメーションを再生して消滅させるよ。これで3箇所同時爆発の演出が完成だね。[/talk]
( ) 回繰り返す で7回コスチューム切り替え、 ( ) の音を鳴らす で「get4」、 隠す で非表示、 ( ) 秒待つ で1秒待つよ。中央・右上・左上の3つの爆発が同時に光って、ウィザー撃破の達成感を最大限に演出するんだ。
#25ゲームクリア画面の準備
[talk class="m-l-n"]ウィザーを倒したあとに表示するゲームクリア画面を準備するよ。最初は隠しておくんだ。[/talk]準備
スプライト「ゲームクリア画面」を開く
ゲームクリア画面| スプライトについて |
|---|
| ゲームクリア画面。勝利時にクリアタイム変数を表示する |
| どんな役割か |
| ゲームクリア画面を作るよ。ウィザーを倒すとクリアタイムを表示する画面だよ。 |
実装
.st0 {
fill: #45993D;
}
.st1 {
fill: #4CBF56;
}
#26クリア画面とタイム表示
[talk class="m-l-n"]「ゲーム終了です」メッセージを受け取って、クリア画面とクリアタイムを表示するよ。[/talk]
( ) を受け取ったとき で「ゲーム終了です」を受信したら、 変数 ( ) を表示する で「★クリアタイム」変数を画面に表示するよ。 表示する でクリア画面を出して、 ( ) へ移動する で最前面に移動させるんだ。
最前面に出すのは、他のスプライトの上にクリア画面がかぶさるようにするためだよ。プレイ中の画面が裏に隠れて、スッキリしたクリア表示になるんだ。
#27サムネイルの準備
[talk class="m-l-n"]ゲーム終了時にじわっとフェードインするサムネイルを準備するよ。完全に透明な状態で待機させておくんだ。[/talk]準備
スプライト「サムネ」を開く
サムネ| スプライトについて |
|---|
| サムネイルオーバーレイ。ゲーム終了・敗北時にゴースト効果でフェードイン表示する |
| どんな役割か |
| サムネイルを作るよ。ゲームの勝利・敗北時にゴースト効果でじわっとフェードインする演出を作ろう。 |
実装
.st0 {
fill: #45993D;
}
.st1 {
fill: #4CBF56;
}
#28クリア時のフェードイン
[talk class="m-l-n"]ゲームクリア時に、サムネイルがゴースト効果でじわっと現れる演出を作るよ。[/talk]
( ) を受け取ったとき で「ゲーム終了です」を受信したら 表示する で表示して、 ( ) 回繰り返す で50回 ( ) の効果を ( ) ずつ変える のゴースト効果を-2ずつ変えるよ。50回×(-2)で合計-100、つまり完全透明からじわじわと不透明になっていくんだ。
#29クリア演出の完了
[talk class="m-l-n"]フェードインが終わったら少し間を置いて、ゲーム全体を停止するよ。[/talk]
( ) 秒待つ で0.5秒の余韻を持たせてから、 で「すべてを止める」を実行するよ。クリアタイムを表示した状態でゲームがきれいに終了するんだ。
#30敗北時のフェードイン
[talk class="m-l-n"]プレイヤーが倒されたときも、同じフェードイン演出でサムネイルを表示するよ。[/talk]
( ) を受け取ったとき で「おしまい」を受信したら 表示する で表示して、 ( ) 回繰り返す で50回 ( ) の効果を ( ) ずつ変える のゴースト効果を-2ずつ変えるよ。クリア時と敗北時で同じフェードイン演出を使うことで、どちらの結末でも統一感のある終わり方になるんだ。
#31敗北演出の完了
[talk class="m-l-n"]敗北時もフェードイン後に少し待ってからゲームを停止するよ。[/talk]
( ) 秒待つ で0.5秒待ってから で「すべてを止める」を実行するよ。クリアでも敗北でも、サムネイルが画面を覆ってゲームが終わる演出は同じだね。
#32スティーブの退場（クリア）
[talk class="m-l-n"]ここからはゲーム終了時に各キャラクターを画面から消す処理を追加していくよ。まずはスティーブからだ。[/talk]準備
スプライト「スティーブ」を開く
実装
( ) を受け取ったとき で「ゲーム終了です」を受信したら 隠す でスティーブを隠すよ。クリア画面の裏でキャラクターが動いていたら変だからね。
#33スティーブの退場（敗北）
[talk class="m-l-n"]敗北時もスティーブを隠すよ。[/talk]
( ) を受け取ったとき で「おしまい」を受信したら 隠す で隠すんだ。クリアと敗北の両方に対応させることで、どちらの結末でもスティーブが退場するよ。
#34オオカミの退場（クリア）
[talk class="m-l-n"]オオカミもゲームクリア時に画面から消すよ。[/talk]準備
スプライト「オオカミ」を開く
オオカミ| スプライトについて |
|---|
| スティーブに追従するコンパニオンスプライト |
| どんな役割か |
| オオカミをスティーブの相棒として作るよ。常にスティーブの方を向いてついてくるようにプログラミングしよう。 |
実装
( ) を受け取ったとき で「ゲーム終了です」を受信して 隠す で隠すよ。
#35オオカミの退場（敗北）
[talk class="m-l-n"]敗北時もオオカミを消すよ。[/talk]
( ) を受け取ったとき で「おしまい」を受信して 隠す で隠すんだ。
#36剣の退場（クリア）
[talk class="m-l-n"]剣もクリア時に非表示にするよ。[/talk]準備
スプライト「剣」を開く
剣| スプライトについて |
|---|
| ダイヤモンドの剣。スティーブに追従し左右対応のスイング攻撃アニメーションを行う |
| どんな役割か |
| ダイヤモンドの剣を作るよ。スティーブに追従して、スペースキーで剣を振る攻撃アニメーションをプログラミングしよう。キラキラ光る色エフェクトも付けるよ。 |
実装
( ) を受け取ったとき で「ゲーム終了です」を受信して 隠す で隠すんだ。
#37剣の退場（敗北）
[talk class="m-l-n"]敗北時も剣を消すよ。これでスティーブ、オオカミ、剣の3つが、クリアでも敗北でもきちんと画面から退場するようになったね。[/talk]
( ) を受け取ったとき で「おしまい」を受信して 隠す で隠すよ。1つのメッセージで複数のスプライトが同時に反応して消えていくのは、ブロードキャストの便利なところだね。
#38攻撃ボタン（左）の退場
[talk class="m-l-n"]攻撃ボタンもクリア時に隠すよ。ゲームが終わったらボタンは不要だからね。[/talk]準備
スプライト「攻撃ボタン（左）」を開く
攻撃ボタン（左）| スプライトについて |
|---|
| 左側のモバイル攻撃ボタン。クリックで攻撃準備メッセージを送信 |
| どんな役割か |
| 左側の攻撃ボタンを作るよ。クリックすると剣の攻撃が発動するようにプログラミングしよう。 |
実装
( ) を受け取ったとき で「ゲーム終了です」を受信して 隠す で隠すよ。
#39攻撃ボタン（右）の退場
[talk class="m-l-n"]右側の攻撃ボタンもクリア時に隠すよ。[/talk]準備
スプライト「攻撃ボタン（右）」を開く
攻撃ボタン（右）| スプライトについて |
|---|
| 右側のモバイル攻撃ボタン。クリックで攻撃準備メッセージを送信 |
| どんな役割か |
| 右側の攻撃ボタンを作るよ。左ボタンと同じく、クリックで攻撃を発動するんだ。 |
実装
( ) を受け取ったとき で「ゲーム終了です」を受信して 隠す で隠すんだ。
#40HPバーの停止（クリア）
[talk class="m-l-n"]ゲームクリア時にプレイヤーHPバーのスクリプトも止めるよ。[/talk]準備
スプライト「プレイヤーHPバー」を開く
実装
( ) を受け取ったとき で「ゲーム終了です」を受信したら で「すべてを止める」を実行するよ。
#41HPバーの非表示（クリア）
[talk class="m-l-n"]プレイヤーHPバーも画面から消すよ。[/talk]
( ) を受け取ったとき で「ゲーム終了です」を受信して 隠す で隠すんだ。
#42HPバーの停止（敗北）
[talk class="m-l-n"]敗北時もプレイヤーHPバーのスクリプトを停止させるよ。これでゲーム終了処理が全て完成だね。[/talk]
( ) を受け取ったとき で「おしまい」を受信して で「すべてを止める」を実行するよ。クリアでも敗北でも、すべてのスプライトが正しく退場して、サムネイルがきれいにフェードインしてゲームが終わるんだ。
まとめ
お疲れさまでした！クローン弾丸の追尾、ブロードキャスト連鎖による敗北演出、コスチュームHP表示など、本格的なアクションゲームに必要な要素を全部作り上げたね。16スプライトが協調して動く大規模な作品を完成できたのはすごいことだよ！ここで学んだ物理移動とイベント駆動設計を活かして、ぜひ自分オリジナルのボスを作ってみよう！
