アンダーテール「サンズ戦」の作り方①

アンダーテール「サンズ戦」の作り方①
ok-scratch

スクラッチに挑戦している皆さん、どうも!スクラッチコーチです。

Undertaleのサンズ戦をオマージュしたアクションバトルをスクラッチで全実装。骨弾幕・ガスターブラスター・コマンドメニュー・物理演算・ペンフォントを全部作る本格上級チュートリアル。

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

動画で見てみよう

ok-scratch ok-scratch
チャンネル登録して応援よろしく!チャンネル登録する

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

サンズボス戦

サンズボス戦

by FunnyAnimatorJimTV
プレイしておこう プレイしておこう
今回のスクラッチを作る参考作品にさせていただきました、ありがとう!★攻撃番号ひとつに28の攻撃シーンを全部ぶち込んで、デクリメントしながら順番に捌くって発想がキレッキレ。変数1つで状態機械を回す設計がシンプルなのに、骨弾幕・ブラスター・重力物理・ペンフォントまで全部この仕組みで繋がってるのがヤバすぎる。このバトルシステムの組み立て方、見ていこう。

今回の目標

ステージ初期化・バトルボックス・ハートの赤モード(4方向移動)を実装する

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

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

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

#1ステージ: ゲーム開始の準備

準備

スプライト「stage」を開く

ステージ
スプライトについて
Undertaleのサンズバトルを再現したゲームのステージ。BGM・HPなどの全体変数の初期化と音楽制御を担当する

変数「★HP」を追加

プレイヤーのHP(初期値100、骨やブラスターに当たると減少)

変数「★HP」を追加

実装

step-0

まずはバトルが始まる瞬間の準備から。イベントgreenflag が押されたときで旗が押されたら、画面の見た目と数値をいっきに整えるよ。

プレイヤーの体力を見せるために変数変数 ( ) を表示するで「★HP」を画面に出して、戦闘ステージの背景に切り替える。最後に「■サンズのサイズ」を80にセット。

このサイズ、じつはサンズ本体じゃなくて頭・体・脚の3つのスプライトが共通で読みにいく数字なんだ。1か所いじるだけで3パーツまとめて大きさが揃う、みたいな仕組み。

#2ステージ: 全スプライトの一斉始動

ok-scratch ok-scratch
続いてサンズのサイズと立ち位置を決めるよ。「★サンズのX座標」を0、「★サンズのY座標」を70にして画面中央の少し上へ。「■ダンス速度」も0.4で用意しておくんだよ。

準備

変数「■サンズのサイズ」を追加

サンズスプライトのサイズ(旗クリック時に80に設定し以降変更しない定数)

変数「■サンズのサイズ」を追加

変数「★サンズのX座標」を追加

サンズの基準X座標(テレポートや位置リセット時に参照する)

変数「★サンズのX座標」を追加

変数「★サンズのY座標」を追加

サンズの基準Y座標(テレポート後の位置を決める)

変数「★サンズのY座標」を追加

変数「■ダンス速度」を追加

サンズのダンスアニメーションの移動速度(旗クリック時に0.4に設定し以降変更しない定数)

変数「■ダンス速度」を追加

メッセージ「スタート」を追加

メッセージ「スタート」を追加

メッセージ「ハート操作開始」を追加

メッセージ「ハート操作開始」を追加

実装

step-1

準備が終わったらイベント( ) を送るの出番だね。「スタート」と「ハート操作開始」の2つを送って、各スプライトをいっせいに動かし始めるんだ。

ブロードキャストはテレビの放送みたいなものだよ。ステージが1回発信すると、受信側のスプライト全員が同時に反応するんだ。バラバラのスプライトを1つのゲームとして束ねる司令塔の役割だね。

#3サンズの頭: イントロの初期化

ok-scratch ok-scratch
ここからはバトルの幕開け、サンズが登場するシーンを作っていくよ。

準備

スプライト「サンズの頭」を開く

サンズの頭サンズの頭
スプライトについて
サンズの頭部スプライト。表情コスチュームを切り替えながらセリフをタイプライター風に表示し、攻撃開始の合図を出す
どんな役割か
サンズが喋るよ!表情を変えながらセリフを1文字ずつ表示する仕組みと、攻撃の引き金を引く仕組みを一緒に作ろう。

実装

step-2

イベント( ) を受け取ったときで「スタート」の合図を受けたら、見た目表示するでサンズを表示して、見た目コスチュームを ( ) にするで「閉口」の落ち着いた顔に。

見た目大きさを ( ) %にするで「■サンズのサイズ」変数の値(80)に合わせるんだね。サイズを変数で持っておくと、あとでテレポート演出のときも同じ大きさを一発で呼び出せて便利ってわけだよ。

#4サンズの頭: 頭を定位置へ

ok-scratch ok-scratch
サンズの頭を画面の定位置にすえるよ。
step-3

動きx座標を ( ) 、y座標を ( ) にするで「★サンズのX座標」「★サンズのY座標」の位置へ移動して、見た目( ) へ移動するでいちばん前に出す。これで胴体や脚に隠れないようにするんだね。

最後に制御( ) 秒待つで0.5秒だけ間を置く。この小さな「ため」が、このあと体と脚がそろう登場の見せ場につながるんだ。

#5サンズの胴体: 胴体スプライトの登場

ok-scratch ok-scratch
サンズの頭を画面に出せたから、ここからは胴体スプライトに切り替えるよ。頭と体が別々に動いて、合わせて1人に見える仕組みの土台なんだ。

準備

スプライト「サンズの胴体」を開く

サンズの胴体サンズの胴体
スプライトについて
サンズの胴体スプライト。ポーズ切り替え・ダンスアニメーション・左右へのよけ動作を担当する
どんな役割か
サンズの体を動かそう!腕組みや上向きなどのポーズを切り替えて、ダンスやよけ動作もつけるよ。

実装

step-4

胴体側もイベント( ) を受け取ったときで同じ「スタート」の合図を受けて、見た目表示するで表示、見た目コスチュームを ( ) にするで正面向きの「0」のポーズに。

そのあと見た目大きさを ( ) %にするで「■サンズのサイズ」に合わせて、動きx座標を ( ) 、y座標を ( ) にするで「★サンズのX座標」「★サンズのY座標」へ移動。頭と同じサイズ・同じ基準位置の変数を使うから、頭と体がズレずにピタッと重なるんだよ。

#6サンズの脚: 脚の初期化

ok-scratch ok-scratch
ゲーム開始の「スタート」で、脚を初期状態にセットするよ。

準備

スプライト「サンズの脚」を開く

サンズの脚サンズの脚
スプライトについて
サンズの脚部スプライト。頭・胴体と連動してシェイクや位置合わせを行う
どんな役割か
サンズの足元を作ろう!頭や胴体と一緒に揺れたり位置を合わせたりする脚のスプライトだよ。

実装

step-5

表示してコスチュームを「0」に戻したあと、見た目大きさを ( ) %にするで大きさを「■サンズのサイズ」に、動きx座標を ( ) 、y座標を ( ) にするで位置を「★サンズのX座標」「★サンズのY座標」に合わせるんだ。

ok-scratch ok-scratch
普通、キャラクターを動かすときは1つのスプライトに何枚もコスチュームを持たせて表現するよね。でもこの作品のサンズは、頭・胴体・脚を別々のスプライトに分けてるんだ。バラバラなのにズレないのは、「★サンズのX座標」「★サンズのY座標」っていうグローバル変数をみんなで読んでるから。1つの基準座標をシェアすれば、3つのパーツがピタッと重なって1体のキャラに見える。表情・ポーズ・土台をそれぞれ独立して動かせるのに、位置だけは完璧に揃う。これがマルチスプライト連携の気持ちいいところなんだ。

確認プレビューしておこう 確認プレビューしておこう
頭と体と足がそろって画面に出てきたね、こっから作り込んでいこうか

#7FIGHTボタン: たたかうボタン

ok-scratch ok-scratch
カーソルができたから、今度は選択肢のボタン本体を作っていくよ。トップバッターは「たたかう」ボタン。

準備

スプライト「FIGHTボタン」を開く

FIGHTボタンFIGHTボタン
スプライトについて
バトルメニューの「たたかう」ボタンスプライト。カーソル選択状態に応じてコスチュームを切り替える
どんな役割か
「たたかう」ボタンを作ろう!カーソルが当たると選択状態になってハイライトされる仕組みを実装するよ。

実装

step-6

イベント( ) を受け取ったときで「スタート」を受けたら、コスチュームを「たたかう」にして動きx座標を ( ) 、y座標を ( ) にするで画面左下(-153, -153)へ。サイズを80にして見た目表示するで表示するよ。

位置・大きさ・見た目をまとめて整えてから出すんだね。ボタンを画面にきっちり並べるための土台づくりだね。

確認プレビューしておこう 確認プレビューしておこう
たたかうボタンが表示された。こんな感じで残りのボタンも作っていく

#8ACTボタン: こうどうボタン

ok-scratch ok-scratch
たたかうボタンができたから、隣の「こうどう」ボタンも作るよ。中身はほぼ同じ作りでいけるんだね。

準備

スプライト「ACTボタン」を開く

ACTボタンACTボタン
スプライトについて
バトルメニューの「こうどう」ボタンスプライト。カーソル選択状態に応じてコスチュームを切り替える
どんな役割か
「こうどう」ボタンを作ろう!カーソルが当たると選択状態になる仕組みを実装するよ。

実装

step-7

「スタート」を受けたらコスチュームを「こうどう」にして、動きx座標を ( ) 、y座標を ( ) にするで(-51, -153)へ。たたかうボタンの右どなりに並ぶ位置だね。サイズを80にして見た目表示するで表示するよ。

1個ボタンの型ができると、あとは位置とコスチュームを変えるだけで量産できるね。アイテムもみのがしも、この調子でどんどん増やせるってわけだよ。

確認プレビューしておこう 確認プレビューしておこう
選択中のたたかうボタンが光るようになった。カーソルが合うと黄色くハイライト、外れると元に戻る。隣にこうどうボタンも追加された

#9アイテムボタン: アイテムボタンを出す

ok-scratch ok-scratch
「こうどう」ボタンができたから、3つ目は「アイテム」ボタン。作りはこれまでのボタンとほぼ同じ。

準備

スプライト「アイテムボタン」を開く

アイテムボタンアイテムボタン
スプライトについて
バトルメニューの「アイテム」ボタンスプライト。カーソル選択状態に応じてコスチュームを切り替える
どんな役割か
「アイテム」ボタンを作ろう!カーソルが当たると選択状態になる仕組みを実装するよ。

実装

step-8

イベント( ) を受け取ったときで「スタート」を受けたらコスチュームを「アイテム」にして、動きx座標を ( ) 、y座標を ( ) にするで(51, -153)へ。こうどうボタンのさらに右どなりに並ぶ位置だね。

サイズを80にして見た目表示するで表示。位置とコスチュームを差し替えるだけで、もう1個ボタンが増えるんだね。型ができてると量産がラク。

確認プレビューしておこう 確認プレビューしておこう
こうどうボタンも選択でハイライトするようになった。振動や再表示の処理もそろって、ボタンとして一通り動く。3つ目のアイテムボタンも登場

#10みのがすボタン: みのがすボタンを出す

ok-scratch ok-scratch
アイテムボタンができたから、ラストは4つ目の「みのがす」ボタン。これでメニューが4つそろう。

準備

スプライト「みのがすボタン」を開く

みのがすボタンみのがすボタン
スプライトについて
バトルメニューの「みのがす」ボタンスプライト。カーソル選択状態に応じてコスチュームを切り替える
どんな役割か
「みのがす」ボタンを作ろう!カーソルが当たると選択状態になる仕組みを実装するよ。

実装

step-9

イベント( ) を受け取ったときで「スタート」を受けたらコスチュームを「みのがす」にして、動きx座標を ( ) 、y座標を ( ) にするで一番右の(153, -153)へ。サイズ80で見た目表示する

たたかう・こうどう・アイテム・みのがす。横一列に4つ並んで、いよいよバトルメニューの全体像が見えてきたね。

確認プレビューしておこう 確認プレビューしておこう
OK,これでメニューのボタンが全部そろった。かなり整ってきた感じがしてきた

#11サンズの頭: セリフ表示ブロックを作る

ok-scratch ok-scratch
サンズのセリフを1文字ずつ出す自作ブロック「セリフを表示する」を作っていくよ。まずは土台から。

準備

スプライト「サンズの頭」を開く

サンズの頭
サンズの頭

カスタム定義「セリフを表示する」を追加

テキストをタイプライター風に1文字ずつ表示し、Zキーで送る

カスタム定義「セリフを表示する」を追加

変数「表示中テキスト」を追加

タイプライター表示で現在画面に出ている文字列

変数「表示中テキスト」を追加

変数「残り文字数」を追加

タイプライター表示の残り文字数カウンタ

変数「残り文字数」を追加

実装

step-10

ブロック定義定義 ( )で「セリフを表示する」を定義して、「表示中の文字」をいったん空っぽにリセット。

変数( ) を ( ) にするで「残り文字数」に、これから出す文章の長さを演算( ) の長さで測ってセットする。この数を1ずつ減らしながら文字を足していく作戦だ。

#12サンズの頭: 1文字ずつ足すループ

step-11

ここが1文字ずつ表示する心臓部。制御( ) まで繰り返すで「残り文字数」が-1になるまでくり返すよ。

ループの中では演算( ) と ( )演算( ) の ( ) 番目の文字を組み合わせて、「表示中の文字」のうしろに次の1文字をくっつける。これをくり返すと、文章がだんだん伸びていくんだ。

#13サンズの頭: 画面に出して残りを減らす

step-12

1文字つなげたら、変数( ) を ( ) ずつ変えるで「残り文字数」を1つ減らすよ。これでループが少しずつ終わりへ近づく。

そして見た目( ) と言うで、いまの「表示中の文字」を吹き出しに出す。ループのたびに更新されるから、文字がだんだん増えていくように見えるってわけ。

#14サンズの頭: タイプ音を鳴らす

ok-scratch ok-scratch
文字を出すたびに、しゃべってる感を出す音を足すよ。
step-13

制御もし ( ) ならで、いまの文字が空白じゃないときだけ( ) の音を鳴らすで「Sans voice」を鳴らす。空白でいちいち音が鳴るとうるさいから、そこは飛ばすんだ。

制御( ) 秒待つの待ち時間が、文字を出す速さそのもの。引数で受け取るから、セリフごとにテンポを変えられるんだね。

#15サンズの頭: 全文スキップの親切設計

ok-scratch ok-scratch
1文字ずつ読むのが待てない人のために、スキップ機能をつけるよ。
step-14

制御もし ( ) ならでXキーが押されたら、見た目( ) と言うで文章をいっきに全部表示。

あとは制御( ) まで待つでZが押されるのを待って、制御 でこの表示処理を打ち切る。せっかちなプレイヤーにもやさしい作りだ。

ok-scratch ok-scratch
このセリフを1文字ずつ出すやり方は「タイプライター表示」って呼ばれてて、RPGやノベルゲームの定番テク。文字の表示スピードを変えるだけで、せっかちなキャラにも落ち着いたキャラにも見せられるんだ。プレイヤーが文章を読むテンポそのものを設計してる、奥が深い演出だよ。

#16サンズの頭: 送り待ちの調整

ok-scratch ok-scratch
セリフ表示の仕上げに、入力待ちをきれいにするよ。
step-15

制御( ) まで待つでXキーが離されるのを待ってから、もう一度Zキーが押されるのを待つんだ。

こうしないとキーを押しっぱなしで全部スキップされちゃう。一拍おくことで、誤操作で読み飛ばすのを防いでるってわけ。

#17サンズの頭: あの第一声

ok-scratch ok-scratch
いよいよサンズがしゃべるよ。さっき作った「セリフを表示する」ブロックを呼び出して、ファンにはおなじみの第一声を流すんだ。
step-16

「きょうは ステキな日だ。」「はながさいてる ことりたちも さえずってる」「こんな日には おまえみたいなヤツは」と、3つのセリフを畳みかける。2つ目の引数(0.07や0.05)が1文字を出す速さで、数字を変えてセリフごとのテンポを調整してるのが細かいんだよね。

#18サンズの頭: 口を開いて決めゼリフ

step-17

ここがイントロの決め台詞。見た目コスチュームを ( ) にするでサンズの顔を「開口」に変えて、口が動いてる感を出すよ。

そして「じごくで もえて しまえばいい」と言い放つ。おだやかな天気の話から急にこの一言――この温度差こそ、この作品いちばんの見せ場なんだ。

確認プレビューしておこう 確認プレビューしておこう
1文字ずつ表示するタイプライター式のセリフ機能が完成。サンズが、きょうはステキな日だ、から有名な煽りのセリフまでしゃべり出す

#19サンズの頭: 最初の攻撃へ

準備

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

ゲーム開始直後のイントロ攻撃の開始を通知する

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

実装

step-18

セリフが終わったら、いよいよ戦闘へ。イベント( ) を送るで「最初の攻撃」の合図を送るよ。

このたった1ブロックが、バトルのスタートボタン。受け取った側がサンズを動かしはじめる。おだやかなイントロから戦いへ、物語が動き出す瞬間だ。

#20テレポートエフェクト: テレポート係の初期化

ok-scratch ok-scratch
イントロのブラスターができたから、次はサンズが瞬間移動するときのエフェクトを作っていくよ。

準備

スプライト「テレポートエフェクト」を開く

テレポートエフェクトテレポートエフェクト
スプライトについて
サンズのテレポート演出を制御するスプライト。BGM音量の切り替えとランダム攻撃の制御も担当する
どんな役割か
サンズが瞬間移動するエフェクトを作ろう!テレポートの演出とランダムで攻撃パターンを変える仕組みを作るよ。

実装

step-19

この「テレポートエフェクト」スプライトは、イベントgreenflag が押されたときでゲームが始まったら動きx座標を ( ) 、y座標を ( ) にするで画面の真ん中へ。見た目隠すでいったん隠しておくね。

普段は見えない裏方だけど、テレポートの瞬間だけ仕事をする係。

確認プレビューしておこう 確認プレビューしておこう
青ハートの「バッドタイム」本番ができた。ハートが落とされて青モードに切り替わり、箱もターゲット型や拡大形に変形。bad timeになるぞ、の文字も出る

#21テレポートエフェクト: テレポート開始

ok-scratch ok-scratch
ここからテレポートの演出が本番。最初の攻撃の合図でエフェクトを出すよ。
step-20

イベント( ) を受け取ったときで「最初の攻撃」を受け取ったら、見た目( ) へ移動するで最前面に出して見た目表示するで表示するよ。

そして( ) の音を鳴らすでテレポート音を鳴らすんだよ。シュンッていう、あの瞬間移動の音だね。

#22テレポートエフェクト: 位置を送って瞬間移動

ok-scratch ok-scratch
エフェクトを一瞬見せたら、サンズを別の場所へワープさせるよ。

準備

メッセージ「テレポートZ」を追加

サンズのテレポートエフェクト開始を通知する

メッセージ「テレポートZ」を追加

実装

step-21

ちょっとだけ待ってから、テレポート先の高さを変数にセットしてイベント( ) を送るで「テレポートZ」を送る。サンズ側がこの合図を受けて移動するんだ。

合図を送ったら見た目隠すでエフェクトを隠して、もう一度テレポート音。出る音と消える音で挟むと、瞬間移動っぽさが出る。

#23サンズの頭: テレポートの目光り

ok-scratch ok-scratch
サンズが瞬間移動するときの、目をチカチカ光らせる演出を作るよ。

準備

スプライト「サンズの頭」を開く

サンズの頭
サンズの頭

実装

step-22

イベント( ) を受け取ったときで「テレポートZ」が来たら動きy座標を ( ) にするで高さを「★サンズのY座標」に合わせる。

そこから制御( ) 回繰り返すで3回、「黄色目」と「青目」のコスチュームを切り替えて目を点滅させるんだ。テレポート直前の不気味な感じ、出てるよね。

#24サンズの胴体: テレポート演出

ok-scratch ok-scratch
今度はサンズが瞬間移動する演出。「テレポートZ」の合図でスッと動くよ。

準備

スプライト「サンズの胴体」を開く

サンズの胴体
サンズの胴体

実装

step-23

動きy座標を ( ) にするで縦位置を「★サンズのY座標」に合わせて、見た目コスチュームを ( ) にするで「上向き」のポーズに切り替える。同時にブラスターが出るときの効果音も鳴らすんだ。

#25サンズの胴体: コスチューム逆送り

ok-scratch ok-scratch
テレポートの仕上げに、コスチュームを1コマだけ戻すんだね。
step-24

見た目コスチュームを ( ) にするに、今のコスチューム番号から1を引いた値を渡すのがミソだよ。見た目コスチュームの ( )で現在の番号を取って、そこから演算( ) - ( )で1引くよ。番号で指定すると、こういう「1つ前に戻す」処理がスッと書けるんだ。

#26サンズの脚: 脚のテレポート

ok-scratch ok-scratch
サンズがテレポートするとき、脚の縦位置もリセットするよ。

準備

スプライト「サンズの脚」を開く

サンズの脚
サンズの脚

実装

step-25

動きy座標を ( ) にするで「★サンズのY座標」に合わせるだけ。瞬間移動だから、滑らかに動かさず一発で位置を変えるのがポイントだね。

確認プレビューしておこう 確認プレビューしておこう
緑の旗を押してテストする。テレポートが成功しているかチェックしよう。シュンって一瞬で移動する様子が見て取れるね。

#27バトルボックス: バトルボックスの準備

ok-scratch ok-scratch
ステージの裏方が整ったから、ここからはプレイヤーが動き回る舞台「バトルボックス」を作っていくよ。まずは旗が押されたときの初期化から。

準備

スプライト「バトルボックス」を開く

バトルボックスバトルボックス
スプライトについて
プレイヤーが動き回る戦闘用の白枠ボックス。攻撃に合わせてコスチュームを切り替えてサイズ・形状を変える
どんな役割か
戦いの舞台になる四角いボックスを作ろう!攻撃によってボックスの形や大きさが変わるよ。

実装

step-26

見た目隠すでいったん姿を隠して、レイヤー(重なり順)を整えるよ。見た目( ) へ移動するで最前面に出してから、100層ぶん奥に下げるんだ。

わざわざ最前面→奥へと動かすのは、毎回スタート位置を同じレイヤーに固定するためだよ。重なり順がブレると、ボックスがハートや骨に隠れて見えなくなることがあるんだね。最初に基準を作っておく感じなんだ。

確認プレビューしておこう 確認プレビューしておこう
BGMが鳴り出して、サンズの頭・体・脚が座標を共有して「ダンス」や振動で1体みたいに連動する。ペン文字であの煽り文も描かれて、戦う箱の準備も整った

#28バトルボックス: テレポート後の正方形

step-27

サンズがテレポートする場面の演出だよ。「テレポートZ」を受け取ったら、動きx座標を ( ) 、y座標を ( ) にするでボックスを画面の中央(0, 0)へ移動。

そこで「正方形」コスチュームに切り替えて見た目表示するで表示するよ。テレポートのたびに位置と形をリセットして、毎回まっさらな状態から始められるようにしてる。

確認プレビューしておこう 確認プレビューしておこう
バトルボックスも連携できた。だんだん素材が整ってきて、アンダーテールっぽさが出てきたね。

#29ハート(魂): ハートの初期設定

ok-scratch ok-scratch
ボックスの舞台ができたから、次は主役――プレイヤーが操作する「ハート(魂)」を作っていくよ。旗が押されたときの初期化から始める。

準備

スプライト「ハート(魂)」を開く

ハート(魂)ハート(魂)
スプライトについて
プレイヤーが操作するハート型の魂スプライト。赤モード(4方向移動)と青モード(重力あり)の2種類の操作方式を持つ
どんな役割か
プレイヤーが操作するハートを作ろう!矢印キーで動かして骨やブラスターを避けよう。赤と青で動きが変わるのがポイントだよ。

変数「★ハートモード」を追加

ハートの操作モード(r=赤モード、b=青モード)

変数「★ハートモード」を追加

変数「Y方向速度」を追加

ハートの縦方向の移動速度(青モードで重力の影響を受ける)

変数「Y方向速度」を追加

実装

step-28

見た目大きさを ( ) %にするで大きさを82にして、「★ハートモード」を0、「Y方向速度」も0にリセット。モードと速度を毎回ゼロに戻しておくのが大事なんだ。

リセットを忘れると、前回のゲームの速度が残ったままスタートして、いきなりハートがすっ飛んでいくバグになりがち。最初に0で揃えておく、お約束。

確認プレビューしておこう 確認プレビューしておこう
バトルボックスが攻撃の合図で形を変えるようになった。正方形から長方形へ切り替わったり、ガクッと揺れたり。ハートの初期化もここから「スタート」

#30ハート(魂): 赤ハートで待機

ok-scratch ok-scratch
初期化の続きだよ。「X方向速度」も0にして、コスチュームを「赤」にセット。

準備

変数「X方向速度」を追加

ハートの横方向の移動速度

変数「X方向速度」を追加

実装

step-29

見た目( ) へ移動するで最前面に出してから見た目隠すで隠すよ。出番が来るまでは隠しておいて、最前面の位置だけ先に確保しておくんだ。

ハートは骨やブラスターより手前にいないと、攻撃に隠れて自分の魂が見えなくなる。だから表示するより先にレイヤーを最前面で押さえておくってわけ。

#31ハート(魂): テレポートでハート登場

ok-scratch ok-scratch
「テレポートZ」を受け取ると、ハートが登場するよ。「被弾判定有効」を1にして、当たり判定をオンにするところからスタート。

準備

変数「被弾判定有効」を追加

ハートの被弾判定が有効かどうか(1=有効、0=無効)

変数「被弾判定有効」を追加

実装

step-30

位置を(0, -37)に決めて、最前面に出して見た目表示するで表示。前に隠しておいたハートを、ちょうどいいタイミングで画面に呼び出すんだ。

確認プレビューしておこう 確認プレビューしておこう
S攻撃ブラスターの配置と発射まで完成して、ガスターブラスターがひと通りそろった。ここからハートの「バッドタイム」突入演出、青ハートの落下に入っていく

#32ハート(魂): 下へスッと滑り込む

ok-scratch ok-scratch
登場したハートを下へ動かす演出だよ。「★ハートモード」をいったん「r」にして、少し待ってからコスチュームを「青」に切り替えるんだね。
step-31

動き( ) 秒でx座標を ( ) に、y座標を ( ) に変えるで0.1秒かけて(0, -95)まで一気に動かして、( ) の音を鳴らすで殴られたような効果音をドンッと鳴らすよ。短い時間で動かすと、テレポートで叩き落とされたみたいな勢いが出るんだ。

確認プレビューしておこう 確認プレビューしておこう
サンズのイントロらしい動きが少しずつ出来てきた

#33ハート(魂): 着地のシェイク

準備

メッセージ「シェイク」を追加

サンズとボックスをシェイクさせ被弾演出を行うよう通知する

メッセージ「シェイク」を追加

実装

step-32

滑り込んだ勢いそのままにイベント( ) を送るで「シェイク」を送って、画面をブルッと震わせるよ。

そのあと動き( ) 秒でx座標を ( ) に、y座標を ( ) に変えるで0.3秒かけて(0, -50)へ。落下より少しゆっくり戻すことで、ドンッと落ちて反動でちょっと跳ねる、みたいな手触りになる。

#34サンズの頭: 画面を揺らす

ok-scratch ok-scratch
被弾の演出に使う、サンズのシェイク(ブルブル揺れ)を作るよ。

準備

スプライト「サンズの頭」を開く

サンズの頭
サンズの頭

変数「揺れの強さ」を追加

シェイクアニメーションの振れ幅(12から0に減衰)

変数「揺れの強さ」を追加

実装

step-33

イベント( ) を受け取ったときで「シェイク」が来たら「揺れの強さ」を12にして、見た目( ) へ移動するで最前面に持ってくる。

あとは制御( ) 回繰り返すで12回、演算( ) から ( ) までの乱数でランダムな位置にガタガタ動かすよ。揺れの強さを少しずつ減らすから、だんだん収まっていく感じ。

#35サンズの頭: 揺れを止める

ok-scratch ok-scratch
揺らし終わったら、サンズをきちんと元に戻すよ。
step-34

動きx座標を ( ) 、y座標を ( ) にするで定位置(0, 85)に戻して、制御 でこのスプライトの他の動きを止めるんだ。

最後に見た目コスチュームを ( ) にするで「空白」コスチュームにして無表情に。演出が終わったら素の顔に戻しておくってことだ。

確認プレビューしておこう 確認プレビューしておこう
緑の旗を押してテストする。画面シェイクをピタリと止めるリズム感ができた

#36サンズの胴体: 被弾でシェイク

ok-scratch ok-scratch
サンズが攻撃を受けたとき、ブルブル震える「シェイク」を作るよ。

準備

スプライト「サンズの胴体」を開く

サンズの胴体
サンズの胴体

実装

step-35

変数( ) を ( ) にするで「揺れの強さ」を12にセット。制御( ) 回繰り返すを12回まわして、その中で動きx座標を ( ) 、y座標を ( ) にするに乱数を混ぜて、基準位置からランダムにズラすんだ。

ループのたびに変数( ) を ( ) ずつ変えるで「揺れの強さ」を1ずつ減らすのがミソなんだ。振れ幅が12から0へ減っていくから、揺れが自然におさまる

#37サンズの胴体: シェイク後の戻し

ok-scratch ok-scratch
震えが終わったら、サンズを元の位置へ。
step-36

動きx座標を ( ) 、y座標を ( ) にするで定位置に戻して、ちょっと制御( ) 秒待つで待つんだよ。それから見た目次のコスチュームにするを2回まわして、表情をパッと切り替えるんだ。

#38サンズの脚: 脚もシェイク

ok-scratch ok-scratch
脚にも被弾の「シェイク」をつけるよ。中身は胴体とそっくりだ。

準備

スプライト「サンズの脚」を開く

サンズの脚
サンズの脚

実装

step-37

変数( ) を ( ) にするで「揺れの強さ」を12にして、制御( ) 回繰り返す12回の中で動きx座標を ( ) 、y座標を ( ) にするにランダムなズレを入れて震わせる。

揺れが終わったら動きx座標を ( ) 、y座標を ( ) にするで定位置(0, 85)に戻す。胴体と脚が同じ「シェイク」の合図で一緒に震えるから、サンズ全体が1体として揺れて見える。バラバラのスプライトを連動させるコツだね。

確認プレビューしておこう 確認プレビューしておこう
シェイクがアクセントになって攻撃への転換点を演出できてる!

#39バトルボックス: 画面を揺らすシェイク

準備

スプライト「バトルボックス」を開く

バトルボックス
バトルボックス

メッセージ「ヒット判定」を追加

ハートの被弾判定ループの開始を通知する

メッセージ「ヒット判定」を追加

実装

step-38

被弾したときに画面がブルッと震える、あのシェイク演出を作るよ。「シェイク」を受け取ったら、まずイベント( ) を送るで「ヒット判定」も起動する。

「揺れの強さ」を12からスタートして、制御( ) 回繰り返すで12回くり返すよ。毎回動きx座標を ( ) 、y座標を ( ) にするでランダムにちょっとズレた位置へ飛ばして、揺れの強さを1ずつ減らしていくんだ。

ポイントは強さをだんだん小さくしてること。最初は大きく、終わりはほぼ動かないから、自然に揺れが収まって見える。一定の揺れをずっと続けるより、減衰させるほうがリアルなんよ。

#40FIGHTボタン: ボタンを揺らす

ok-scratch ok-scratch
ボタンにも、被弾時のブルッと揺れる演出をつけるよ。「シェイク」が合図だよ。

準備

スプライト「FIGHTボタン」を開く

FIGHTボタン
FIGHTボタン

実装

step-39

「揺れの強さ」を12からスタートして、制御( ) 回繰り返すで12回くり返すね。毎回ちょっとズレた位置へ飛ばしつつ、変数( ) を ( ) ずつ変えるで強さを1ずつ減らしていくんだよ。

強さをだんだん小さくするから、揺れが自然に収まって見えるんだ。バトルボックスの揺れと同じ理屈を、ボタンにも使い回してるってわけだね。

#41FIGHTボタン: 定位置に戻す

ok-scratch ok-scratch
揺らしっぱなしだと、位置がズレたままになっちゃう。
step-40

だから最後に動きx座標を ( ) 、y座標を ( ) にするで、もとの(-153, -153)へピシッと戻す。揺れの演出と定位置キープ、セットで1つの仕組みだね。

#42ACTボタン: 攻撃でボタンを揺らす

準備

スプライト「ACTボタン」を開く

ACTボタン
ACTボタン

実装

step-41

攻撃が始まる合図でボタンをブルブル震わせる演出を作るよ。イベント( ) を受け取ったときで「シェイク」を受けてスタート。

まず「揺れの強さ」を12にセット。制御( ) 回繰り返すを12回まわして、毎回動きx座標を ( ) 、y座標を ( ) にするで本来の位置(-51, -153)から「揺れの強さ」のぶんだけランダムにずらすんだね。

ミソは1回まわすごとに変数( ) を ( ) ずつ変えるで「揺れの強さ」を1ずつ減らしてることなんだ。揺れ幅がだんだん小さくなって、自然に止まる震え方になる。最初ガッと揺れて、すーっと収まる感じだ。

#43ACTボタン: 揺れを元の位置へ

step-42

揺れが終わったら動きx座標を ( ) 、y座標を ( ) にするで、きっちり元の位置(-51, -153)に戻すんだよ。

ランダムでずらしてたぶん、最後に正しい場所へ着地させないと微妙にズレが残っちゃう。締めの1ブロック、地味だけど効いてるんだ。

#44アイテムボタン: アイテムも揺らす

ok-scratch ok-scratch
攻撃の合図で、アイテムボタンも震わせるんだ。「シェイク」を受けて動くのは、こうどうボタンと同じ仕組みだよ。

準備

スプライト「アイテムボタン」を開く

アイテムボタン
アイテムボタン

実装

step-43

「揺れの強さ」を12からスタートして、制御( ) 回繰り返すで12回、本来の位置(51, -153)のまわりにランダムでずらすね。回すたびに強さを1ずつ減らして、だんだん収めていくんだ。

3つのボタンが「シェイク」で同時に震えると、メニュー全体がガタッと揺れて攻撃の迫力が出るんだよ。ばらばらのスプライトを1つの放送でまとめて動かす、ってわけなんだ。

#45アイテムボタン: 元の位置に戻す

ok-scratch ok-scratch
揺れたあとは(51, -153)へ、ぴしっと戻すよ。
step-44

ランダムでずれた位置を、正しい場所へ着地させるんだね。揺れ系はこの「戻し」をセットで入れとくのが鉄則だ。

#46みのがすボタン: みのがすを揺らす

ok-scratch ok-scratch
みのがすボタンは、揺れの動きから先に作るよ。「シェイク」を受けたときの震えだね。

準備

スプライト「みのがすボタン」を開く

みのがすボタン
みのがすボタン

実装

step-45

「揺れの強さ」を12にして、制御( ) 回繰り返すで12回、定位置(153, -153)のまわりをランダムに揺らすんだよ。1回ごとに強さを1ずつ減らして、自然に収束させるんだ。

揺れの作りは3つのボタンで完全に共通。ちがうのは中心になる座標だけ、ってとこがポイントなんだ。

#47みのがすボタン: 定位置へ戻す

ok-scratch ok-scratch
揺れが済んだら、(153, -153)へ戻すんだね。
step-46

ずれを直して本来の場所へ着地。もう何度も見てきた、揺れの締めだね。

確認プレビューしておこう 確認プレビューしておこう
緑の旗を押してテストする。これで画面全体のシェイクもリズムよくおさまったね

#48ハート(魂): 青モードに切り替え

ok-scratch ok-scratch
ここでハートを「青モード」に切り替えるよ。青モードは、横スクロールゲームみたいに重力がかかって、上ボタンでジャンプする操作方式。

準備

スプライト「ハート(魂)」を開く

ハート(魂)
ハート(魂)

実装

step-47

「★ハートモード」に青モードの動きをセットすることで、このあと作る操作ループがその中身を読んで動き出す。赤と青、2つの操作方式を1つの変数で切り替えてるんだ。

赤モードは上下左右に自由移動、青モードは重力+ジャンプ。同じハートなのに、変数の中身ひとつで別ゲームみたいに操作感が変わるのが、この作品の面白いところ。

#49ハート(魂): 赤モードの移動を部品にする(左)

準備

カスタム定義「赤モードの移動」を追加

赤モード時のハート移動処理(上下左右4方向・壁判定)

カスタム定義「赤モードの移動」を追加

実装

step-48

ここからはハートの動き方そのものを部品にしていくよ。まずは赤モードの移動をブロック定義定義 ( )でまとめて、自作ブロックにするんだ。

中身は4方向移動。左向き矢印が押されてたら動きx座標を ( ) ずつ変えるで左へ-5動かして、壁の色に調べる( ) 色に触れたで触れてたら同じぶん戻すんだね。

ok-scratch ok-scratch
キャラを動かすとき、ただ座標をずらすだけだと壁をすり抜けちゃうよね。だからこの作品は「動かす→壁にめり込んでたら押し戻す」の2段構えにしてるんだ。ゲームの世界では、この「動かしてから、まずい位置なら戻す」って考え方を衝突解決って呼ぶ。マリオもゼルダも、根っこはこういう地道なチェックの積み重ねで動いてるんだよ。

#50ハート(魂): 右も同じ作り

step-49

左ができたら右も。右向き矢印は左とまったく同じ作りでいけるよ。調べる( ) キーが押されたで右向き矢印が押されてたら、動きx座標を ( ) ずつ変えるで+5動かすだけ。

左は移動と壁の押し戻しがセットだったけど、右はまず動かすとこまで。壁にめり込んだぶんを戻す補正は、次のステップでまとめて入れるんだ。

#51ハート(魂): 左右の壁ぎわ補正(仕上げ)

ok-scratch ok-scratch
左右キーの移動の最後の仕上げ。横に動いたあと、壁にめり込んでいないかをチェックするよ。
step-50

制御もし ( ) ならで灰色の壁(調べる( ) 色に触れた)に触れていたら、動きx座標を ( ) ずつ変えるで逆向きに少し戻して、めり込みを直すんだ。

#52ハート(魂): 上キーで上に動く

step-51

ここから上下の動き。制御もし ( ) ならで上向き矢印が押されているか(調べる( ) キーが押された)を見て、押されていたら動きy座標を ( ) ずつ変えるで上に進むよ。

進んだ先で壁(調べる( ) 色に触れた)に触れていたら、もう一度動きy座標を ( ) ずつ変えるで逆向きに戻して補正する。動かす→ぶつかったら戻す、という左右と同じ理屈だね。

まとめ

ここまでで、ゲームの骨格ができたね。旗を押したらHP表示、バトルボックス表示、ハートが動く、の3点が揃えばステージ1クリアだ。

ブクマよろしくお願いします! ブクマよろしくお願いします!
どんどん追記・更新していくので、ブックマークやシェアよろしくお願いします!