- 1. ゲーム準備・ハートの移動・青モード物理
- 2. テキスト表示システムとサンズの3パーツ連携 (いまここ)
#1サンズの頭: 合図を受け取る
第2回目はまずサンズの体がダンスしているようにリズミカルに揺れる演出を作っていく。少し揺れるだけなのに、サンズの息遣いが聞こえてくるような生々しい存在がでるぞ。
準備
スプライト「サンズの頭」を開く
| スプライトについて |
|---|
| サンズの頭部スプライト。表情コスチュームを切り替えながらセリフをタイプライター風に表示し、攻撃開始の合図を出す |
| どんな役割か |
| サンズが喋るよ!表情を変えながらセリフを1文字ずつ表示する仕組みと、攻撃の引き金を引く仕組みを一緒に作ろう。 |
実装

#2サンズの頭: ダンス中だけリズミカルに揺らす

「ダンス中フラグ」が1なら基準となる座標の少し先の位置へスーッと動く。
#3サンズの頭: 揺れを連続させる

続けて座標を上げ下げする揺れを足す。これでサンズがその場で軽くリズムに乗るみたいな「ダンス」になる。

ok-scratch
短い動きをつなげると、なめらかなループに見えるっていうテクニックはアニメーションでも応用できそうだね

確認プレビューしておこう
#4サンズの胴体: 踊り続けるループの土台
準備
スプライト「サンズの胴体」を開く
| スプライトについて |
|---|
| サンズの胴体スプライト。ポーズ切り替え・ダンスアニメーション・左右へのよけ動作を担当する |
| どんな役割か |
| サンズの体を動かそう!腕組みや上向きなどのポーズを切り替えて、ダンスやよけ動作もつけるよ。 |
実装

胴体にもダンスのループを作っていく。
#5サンズの胴体: フラグ1個で踊る・踊らないを切り替える

同じように「ダンス中フラグ」が1のときだけ、胴体をスッと動かす。
#6サンズの胴体: 四角く揺れる

続きも同じような感じで、ちょっとずつズラして動く。

ok-scratch
基準からたった2座標ずつのズレでも、繋げると小刻みに揺れてるみたいに見える。足は動かなくていいので、ダンス処理はこれでOK。
#7バトルボックス: バッドタイム突入
サンズがマジになって攻撃してくるバッドタイムの作成に移る。バトルボックスにはテキストを出力してハートはいったん隠し、プレイヤーがボタンでメニュー選択する処理を作っていく。
準備
スプライト「バトルボックス」を開く
| スプライトについて |
|---|
| プレイヤーが動き回る戦闘用の白枠ボックス。攻撃に合わせてコスチュームを切り替えてサイズ・形状を変える |
| どんな役割か |
| 戦いの舞台になる四角いボックスを作ろう!攻撃によってボックスの形や大きさが変わるよ。 |
実装

まずバトルボックスの見た目をデフォルトの状態に戻す。

ok-scratch
ループでコスチュームを回すテクニックもアニメーションに詳しい作者さんらしい小技だね。

確認プレビューしておこう
#8ハート(魂): バッドタイムで非表示
次にハートは隠す。メニューの選択に入るからハートは見えないほうが都合がいい。
準備
スプライト「ハート(魂)」を開く
| スプライトについて |
|---|
| プレイヤーが操作するハート型の魂スプライト。赤モード(4方向移動)と青モード(重力あり)の2種類の操作方式を持つ |
| どんな役割か |
| プレイヤーが操作するハートを作ろう!矢印キーで動かして骨やブラスターを避けよう。赤と青で動きが変わるのがポイントだよ。 |
実装

「被弾判定有効」を0にして当たり判定を切ってから隠す。
#9テキスト表示: テキスト表示の初期化
セリフや行動の結果を画面に出す「テキスト表示」スプライトを作っていく。テキストはセリフと違って、コスチュームに専用のフォントが1文字ずつ用意してある。この作品で使用する文字については、ちゃんと日本語もスターター作品に入れておいた。
準備
スプライト「テキスト表示」を開く
テキスト表示| スプライトについて |
|---|
| バトルテキストをペンスタンプで1文字ずつ描画するスプライト。コスチュームが文字に対応しており、行動結果やセリフを画面に表示する |
| どんな役割か |
| 文字をスタンプで描くテキスト表示を作ろう!コスチュームを文字に見立てて、行動の結果や状況を画面に表示するシステムだよ。 |
変数「★選択番号」を追加
カーソルが現在指しているメニュー番号(1=たたかう・2=こうどう・3=アイテム・4=みのがす)

実装

旗が押されたら「選択番号」を1に初期化して、サイズを大きめに整えて、ペンの描画をまっさらに消す。最後に本体は隠しておく。

ok-scratch
選択番号はあとでボタンのスプライトで使うけど、このタイミングでセットしておく。

確認プレビューしておこう
#10テキスト表示: バッドタイムの準備

「バッドタイム」の有名なテキストが表示される場面を作っていく。「バッドタイム」を受けたらペンで消して少し待って、サイズも333にそろえる。

確認プレビューしておこう
#11テキスト表示: 文字を描くブロックを作る
テキストを画面に描く自作ブロック「テキストを描く」を作る。引数として文字列を用意する。あと変数「文字位置」も用意する。
準備
カスタム定義「テキストを描く」を追加
コスチュームをスタンプして1文字ずつテキストを画面に描画する

変数「文字位置」を追加
テキスト描画中の現在の文字インデックス

実装

まず「文字位置」を0にリセット。
#12テキスト表示: 文字数ぶんくり返す

渡された文字列の長さのぶんだけくり返して、ループの先頭で「文字位置」を1つ進める。

ok-scratch
これで「次に何文字目を出力するか」が決まる。

確認プレビューしておこう
#13テキスト表示: 1文字スタンプして右へ
例えば「サイアクな めに」という文字列が渡されたなら、1文字目は「サ」だから、「サ」という名前のコスチュームに切り替える。

この「サ」というコスチュームは、今回は既にスターターにあるので、ひらがなの「さ」ではなくカタカナの「サ」に切り替わるはず。

ok-scratch
このくり返しで、文字が横にきれいに並んでいく。x
#14テキスト表示: 状況で見せ方を変える
ちょっと先の処理なんだけど、サンズを「みのがす」ときのロジックを忘れないようにここで実装しておきたい
準備
変数「★みのがしフラグ」を追加
みのがしを選択済みかどうかのフラグ(1=みのがし選択済み、0=未選択)

実装

プレイヤーが「みのがす」を選択したときではない通常の処理も一緒に作る。ちょっと文字間隔や音が違うだけ

確認プレビューしておこう
#15テキスト表示: 名ゼリフの1行目

さっそく使ってみよう。位置を決めて文字列を渡せばOK。

ok-scratch
「明るさ」を100にすれば文字が白くなるぞ。以前は赤い文字じゃないと明るさ100にしても白くならなかった時期があったけど、最近のスクラッチでは何色でも明るさ100で白くなると思う
#16テキスト表示: 名ゼリフ完成

位置をずらせば改行もできる。続きを書いたら隠す。

ok-scratch
最後に隠さないと余分に1文字出力されてしまう。今回なら最後の文字の「る」がダブって「るる」ってなっちゃうので、隠しておく。

確認プレビューしておこう
#17カーソル: メニューカーソル
テキストが一通りできたから、ここからはメニューを選ぶ「カーソル」を作っていく
準備
スプライト「カーソル」を開く
| スプライトについて |
|---|
| バトルメニューのカーソル(ハートマーク)スプライト。左右キーで選択肢を切り替えZキーで決定する |
| どんな役割か |
| バトルメニューのカーソルを作ろう!左右キーで4つのコマンドを選んでZキーで決定できる仕組みを実装するよ。 |
実装

まずは旗が押されたら隠すだけ。
#18カーソル: バッドタイムでメニュー
準備
メッセージ「メニュー選択」を追加
カーソルによるメニュー選択状態に入るよう通知する

実装

バッドタイムでメニューの選択を指示するメッセージを送信する

確認プレビューしておこう
#19FIGHTボタン: 選択中のハイライト
次は「メニュー選択」を受け取った各ボタンの動きを調整していく。
準備
スプライト「FIGHTボタン」を開く
FIGHTボタン| スプライトについて |
|---|
| バトルメニューの「たたかう」ボタンスプライト。カーソル選択状態に応じてコスチュームを切り替える |
| どんな役割か |
| 「たたかう」ボタンを作ろう!カーソルが当たると選択状態になってハイライトされる仕組みを実装するよ。 |
実装

Zで決まるまでチェックを続けて、「選択番号」が1なら「たたかう」が選ばれている状態ということ。選択が確定したらハイライトから通常コスチュームに戻しておく

ok-scratch
カーソルの位置とボタンの見た目が毎フレーム連動する仕組み。選ばれてるボタンだけ光るから、どれを選んでるか一目で分かる。

確認プレビューしておこう
#20ACTボタン: メニュー選択でハイライト
準備
スプライト「ACTボタン」を開く
ACTボタン| スプライトについて |
|---|
| バトルメニューの「こうどう」ボタンスプライト。カーソル選択状態に応じてコスチュームを切り替える |
| どんな役割か |
| 「こうどう」ボタンを作ろう!カーソルが当たると選択状態になる仕組みを実装するよ。 |
実装

「こうどう」ボタンにもハイライト。選択番号の値以外は同じ。
#21アイテムボタン: 3番のときハイライト
準備
スプライト「アイテムボタン」を開く
アイテムボタン| スプライトについて |
|---|
| バトルメニューの「アイテム」ボタンスプライト。カーソル選択状態に応じてコスチュームを切り替える |
| どんな役割か |
| 「アイテム」ボタンを作ろう!カーソルが当たると選択状態になる仕組みを実装するよ。 |
実装

アイテムボタンも選択番号」が3ってとこ以外は同じ
#22みのがすボタン: 4番でハイライト
準備
スプライト「みのがすボタン」を開く
みのがすボタン| スプライトについて |
|---|
| バトルメニューの「みのがす」ボタンスプライト。カーソル選択状態に応じてコスチュームを切り替える |
| どんな役割か |
| 「みのがす」ボタンを作ろう!カーソルが当たると選択状態になる仕組みを実装するよ。 |
実装


ok-scratch
OK、4つのボタン全部が、自分の番号と一致したら光る仕組みでそろった。カーソルが動くたび、選ばれた1個だけがパッとハイライトされる。

確認プレビューしておこう
#23カーソル: カーソルでメニュー選択
仕上げに「メニュー選択」を受け取ったカーソルの動きを整える
準備
スプライト「カーソル」を開く
実装

カーソルを左下に出して「選択番号」を1に、Zキーが押されるまで選び続けるループに入る。

確認プレビューしておこう
#24カーソル: ←矢印キーの処理

ループの中では、左向き矢印で「選択番号」を1減らす。動かすたびに「ポッ」と鳴らす。

確認プレビューしておこう
#25カーソル: →矢印キーの処理

右向き矢印キーも同じように処理する。右はプラスするぞ
#26カーソル: 位置の調整1,2

「選択番号」が1なら左端、2なら左から2つ目、という感じで選択番号に応じてカーソルの位置を振り分ける

確認プレビューしておこう
#27カーソル: 位置の調整3,4


ok-scratch
残り2つも実装する。番号という1つの数字が、見た目のカーソル位置と直結してるのがポイント。
#28カーソル: 選択を確定して送信
準備
メッセージ「たたかう選択」を追加
FIGHT(たたかう)が選ばれたことを通知する

メッセージ「こうどう選択」を追加
ACT(こうどう)が選ばれたことを通知する

実装

Zキーで決定したら、まずカーソルを隠す。あとは「選択番号」をチェックして、1なら「たたかう選択」、2なら「こうどう選択」を送る。

ok-scratch
選んだ番号を、対応するメッセージに翻訳して発信。ここから先は、受け取ったボタン側がそれぞれ反応していく流れ。
#29カーソル: アイテムとみのがし
準備
メッセージ「アイテム選択」を追加
ITEM(アイテム)が選ばれたことを通知する

メッセージ「みのがす選択」を追加
MERCY(みのがす)が選ばれたことを通知する

実装

残りの3と4も同じ調子。「選択番号」が3なら「アイテム選択」、4なら「みのがす選択」を送る。これで4つの選択肢ぜんぶに行き先ができた。

ok-scratch
ここからはいったん「戦う」にフォーカスして処理を作っていくぞ
#30バトルボックス: 「たたかう」でターゲット枠
準備
スプライト「バトルボックス」を開く
実装

「たたかう」を選ぶと、ボックスが攻撃用の「ターゲット」コスチュームに一発で切り替わる。
#31テキスト表示: たたかうで掃除
準備
スプライト「テキスト表示」を開く

実装

「たたかう」が選ばれたときも、他のスクリプトを止めて文字を消す。

ok-scratch
10回繰り返すのは、タイミングによってテキストが残らないように確実に消すためだと思う
#32攻撃バー: 攻撃バーの準備
今度は、プレイヤーが「たたかう」を選んだときに動く攻撃バーを作っていく
準備
スプライト「攻撃バー」を開く
| スプライトについて |
|---|
| プレイヤーがFIGHTを選んだ時に動く攻撃バースプライト。バーが動きサンズがよける演出とMISSテキストを担当する |
| どんな役割か |
| プレイヤーが攻撃する時の動くバーを作ろう!バーが通過するとサンズがひょいっとよけるアクションを実装するよ。 |
変数「攻撃ループフラグ」を追加
攻撃ループの制御フラグ(攻撃番号27→28の折り返し判定に使う)

実装

ゲームが始まったら「攻撃ループフラグ」を0に戻して、バーは隠しておく。
#33攻撃バー: バーが横切る

「たたかう」を受けとったらバーを表示して左端の「スタート」位置に置いて、1.5秒かけて右へスーッと動かす。

ok-scratch
バーが真ん中に来た瞬間にZを押す、っていうタイミングゲームなんだけど、今回はすべてミスになる仕様だ。プレイヤーにはとことんサンズの攻撃を回避してもらうことになるw
#34攻撃バー: バーを動かす合図

Zキーが押されるか、バーが右端(X座標184より右)に行くまで待つ処理
#35攻撃バー: 斬撃
斬撃のタイミングでメッセージをいくつか操作する。アニメーションが連動する大切なところ
準備
メッセージ「サンズよける」を追加
サンズが攻撃をよけて左へ動くよう通知する

メッセージ「斬撃」を追加
FIGHT選択時の斬撃エフェクト表示を通知する

実装

このタイミングでサンズのダンスを止めて回避させる。合わせて斬撃のエフェクトも表示されるようにメッセージを送る。
#36斬撃エフェクト: 初期化
スプライトを切り換えて斬撃エフェクトを作っていく
準備
スプライト「斬撃エフェクト」を開く
斬撃エフェクト| スプライトについて |
|---|
| プレイヤーがFIGHTを選んだ時の剣の斬撃エフェクトスプライト |
| どんな役割か |
| FIGHTボタンを押した時の剣の光る斬撃エフェクトを作ろう!素早いアニメーションで攻撃感を演出するよ。 |
実装

必要になるまでは隠しておけばOK
#37斬撃エフェクト: 斬撃エフェクト

メッセージを受け取ったら最前面に出して音を鳴らして、コスチュームを1枚目にする
#38斬撃エフェクト: 剣の一閃

剣が光る一瞬のアニメ本体。表示したら5回コスチュームをパラパラ送って、待ち時間0で一瞬で駆け抜けて、終わったら隠す。

ok-scratch
待ちが0秒でも1コマずつは必ず表示されるから、速いのにちゃんと斬った感が出る。
#39攻撃バー: MISS表示のクローン
準備
スプライト「攻撃バー」を開く
実装

ちゃんとミスっていう表示も出力してあげようか。場所は固定でOK
#40攻撃バー: MISSを消す

表示したら1秒だけ待って、クローンを消す。
#41攻撃バー: バーの点滅

コスチュームを交互に切り替えて点滅。チカチカ光らせて、攻撃してる感を出す仕掛け。
#42サンズの頭: 左へよける
回避行動は頭と胴体と足の3つに実装していく。1つ1つは単純だけどタイミング調整が細かいから慎重にやっていく
準備
スプライト「サンズの頭」を開く
実装

まずメッセージを受け取ったらいったん止めて座標を定位置にそろえる。そこから左に8ずつ動かす
#43サンズの頭: よけも減速

さらに左に動くけど、めっちゃ細かいスピード調整をするぞ
#44サンズの頭: よけ動作の仕上げ

最後に1ずつだけ動かして、よける動作を締めくくる。

ok-scratch
こうすることでスライド感がでる上手いテクニック
#45サンズの胴体: 左へよける
次は胴体スプライトも回避させていく
準備
スプライト「サンズの胴体」を開く
実装

基本的には頭のときと同じロジックでOK
#46サンズの胴体: よけの減速


ok-scratch
ここもさっきみたいに微調整された減速処理
#47サンズの脚: 脚のよけ
準備
スプライト「サンズの脚」を開く
| スプライトについて |
|---|
| サンズの脚部スプライト。頭・胴体と連動してシェイクや位置合わせを行う |
| どんな役割か |
| サンズの足元を作ろう!頭や胴体と一緒に揺れたり位置を合わせたりする脚のスプライトだよ。 |
実装

足も同じようにロジックを組んでいく
#48サンズの脚: 脚よけの減速


ok-scratch
OK、これで頭と胴体と足が連動して回避行動を取るはずだ。チェックしてみようか
#49攻撃シーケンサー: 攻撃の順番を管理
そのスプライトがこちらの攻撃シーケンサーというスプライト。そして超重要変数となる「攻撃番号」を用意する。このあといろんなサンズの攻撃を管理する予定
準備
スプライト「攻撃シーケンサー」を開く
攻撃シーケンサー| スプライトについて |
|---|
| 攻撃番号に応じて適切なセリフブロードキャストを発行し攻撃順序を管理するコントローラースプライト |
| どんな役割か |
| 攻撃の順番を管理するコントローラーを作ろう!攻撃番号に対応したセリフと攻撃をセットで順番に発動する仕組みを実装するよ。 |
変数「★攻撃番号」を追加
現在の攻撃番号(28から14へ順に減少し攻撃シーケンスを管理する)

実装

最初に「攻撃番号」を28にセットする。

ok-scratch
この28がこれから出す攻撃の通し番号。ここから1つずつ減らして攻撃を進めていく。
#50攻撃バー: 攻撃番号を1減らす
いったん攻撃バーに戻ってプレイヤーの攻撃直後から実装を再開する
準備
スプライト「攻撃バー」を開く
実装

攻撃が終わったら、まず「ダンス中フラグ」を1に戻す。そして「攻撃番号」を1減らす。「攻撃番号」が27かつ「攻撃ループフラグ」が0のときだけ、ループ用のフラグを立てる。
#51攻撃バー: 攻撃番号を巻き戻す
準備
メッセージ「サンズ戻る」を追加
サンズを元の位置へ右から滑り戻るよう通知する

実装

さっきフラグを立てたタイミングで、「攻撃番号」を28に戻すと、攻撃シーケンスがもう一周まわる。整合性のために攻撃番号をマイナス1してるけど一旦戻しておくとこのあと都合がいい
#52サンズの頭: サンズが戻ってくる
準備
スプライト「サンズの頭」を開く
実装

よけて左に行ったサンズがで右からスーッと定位置に帰ってくる。右方向に、最初は8ずつ、次は5ずつ動かす。

ok-scratch
ここでもだんだん動く量を減らしてるのがポイント。動く幅を少しずつ小さくすると、自然に減速して見える。
#53サンズの頭: なめらかに止まる

戻る動きの続き。3ずつ、最後は1ずつと、移動量をさらに小さくしていく。

ok-scratch
最後はピタッと優しく止まる。この減速のさせ方、ゲームだとイージングって呼ばれてるテクニック
#54サンズの胴体: 右から戻る
準備
スプライト「サンズの胴体」を開く
実装

胴体にもイージングで定位置に戻る処理を実装する
#55サンズの胴体: 減速してダンスへ

最後に止めたらまたリズミカルに体を揺らすためのメッセージを送る
#56サンズの脚: 脚が戻る
準備
スプライト「サンズの脚」を開く
実装

足にもイージングで定位置に戻る処理を実装する
#57サンズの脚: 脚の戻り完了


ok-scratch
これで頭・胴体・脚がバッチリ揃った位置に戻る。チェックしてみよう
まとめ
ペンスタンプで文字を描く仕組みと、変数で3スプライトの座標を共有するテクニックが揃ったな。1つのキャラを複数スプライトで表現する発想は、RPGでもアクションでも使い回せるぞ。