スクラッチでゲームを作っているとスプライトの重なりが気になることはないでしょうか。
たとえばキャラクタが奥にいるのに、一番手前に重なって見えてしまう。
高いところから見おろした画面表示がスクラッチでうまく表現できない。
「ファイナルファイト」のようなベルトスクロールアクションゲームはどうやってスプライトで表現すればいいの？
本記事では、そのようなお悩みを解決できるスプライトの重なりで奥行を表現する方法をご説明します。
スクラッチでベルトスクロール風アクションやその他のゲーム作成でお役に立てるかと思います。
ぜひ最後までよんでみてください。
スクラッチのスプライトのレイヤー（重なり）で奥行きを表現するとは？
本記事では画面の下にあるスプライトほど、手前に表示される状態のこととして説明していきます。
具体的にはY軸が小さいほどスプライトが手前に、Y軸が大きいほどスプライトが裏に表示される状態。
スプライトが画面下にいくほど見ているプレイヤーに近いという視点です。
ベルトスクロールアクションや上から見下ろすゲームはそんな表現になっています。
スクラッチでスプライトのレイヤーを調整する方法を発見
スクラッチでは次のブロックを駆使してスプライトのレイヤー（重なり）を調整します。
でも、これをどう使えばスプライトの重なりを調整できるのか？
これがわからない・・・。
ググってみてもScratchのスプライトの重ね方で「これだ！」っていうのがみつかりません。
そんなある日、たまたまYouTubeを見ていると、その方法を説明していた動画を発見。
一度は見ていただきたい「目からウロコ」の動画です。
ちなみに英語なので自動翻訳する必要があります。
面白くわかりやすい動画ですが、日本語で検索できずリストを使う点も少しむずかしい。
そこで日本語でもわかるようにしました。
スクラッチのスプライトのレイヤーで奥行きを表現するスクリプト
まずはスクラッチのスプライトのレイヤーで奥行きを表現するスクリプトだけ記載します。
このスクリプトをオブジェやキャラクタなどのスプライトにコピペしておけばOKです。
ゲームマネージャーに次のスクリプトを1つだけ入れておきます。
ゲームマネージャーとはゲームクリアやゲームオーバーを管理しているスクリプト群。
ゲームの作り方は人それぞれと思いますが、私はゲームタイトルをゲームマネージャーにしています。
事項でもう少し詳しく分解して説明していきます。
スプライトのレイヤー調整するスクリプトの作り方
ここからはスクリプトを分解しながら作り方を説明していきます。
次のような流れでスクリプトを作っていきます。
ポイント
- まずはスプライトのY座標をリストに入れる材料をつくる
- リストをY座標が大きい順に並べ替える
- リスト順をもとにスプライトを手前に表示する
- 最後にスプライトのレイヤーを常に整えるスクリプトをつくる
１.まずはスプライトのY座標をリストに入れる材料をつくる
スクラッチは2D表示なのでX軸、Y軸しかありません。
奥行きを考えるとZ軸をつくる必要があります。
Y座標が小さくなるほどスプライトのレイヤーを手前に表示したいので、Z軸とY軸に関連を持たせます。
そんなところを踏まえつつ材料を作っていきます。
1−1 「Z軸」という名前でリストを作ります。「すべてのスプライト」にチェック。
1−2 続いてメッセージ「スプライトへ指示」を作成します。レイヤー調整のトリガーにするスクリプトに使います。
1−3 名前は何でも良いので適当にブロック定義を作ります。「スプライト指示受け」とでもしておきました。
引数は「Z軸」、「画面を再描画せず実行する」には必ずチェックを入れておきます。
「スプライトへ指示」を受け取ったらブロック定義「Z軸」にY座標が入るようにします。
2.Y座標が大きい順にリスト内をソート（ならべ替える）するスクリプトをつくる
すべてのスプライトのY座標をリストに入れる準備が整いました。
今度はY座標が大きいほどリストの上に来るように並び替えをしていきます。
2−1 カウンタ用の変数「i」をつくる。
繰り返す回数を数える変数、ループカウンタを1つ作成します。
ループカウンタ「i」はスプライトをクローンした時も使うので「このスプライトのみ」で作っておきます。
定義「スプライト指示受け」の下に「iを（0）にする」ブロックをおきます。
0を1に変えておきましょう。
2−2 Y座標がリストに入るようにする
リスト「Z軸の◯番目に（なにか）を挿入する」ブロックをおきます。
◯には「i」、（なにか）にはブロック定義の「Z軸」を入れます。
これで「スプライトへ指示」メッセージを受け取るとリストにY座標が入るようになりました。
2−3 リストをソートするためのプログラムを組んでいきます。
「◯回繰り返す」のブロックを追加します。
繰り返すたびにカウンタを1足すように「iを◯ずつ変える」のブロックを入れます。
◯には1を入れておきましょう。
2−4 リストに大きい順にソートしながらY座標を入れていく。
リスト「Z軸」は最大が一番上、最小が一番下になるように並び替えたいので、ブロック引数「Z軸」＞「i」を入れることで常に小さい数字より上になるまで繰り返すことができます。
でもちょっと問題があるのです。
ここが少しややこしいのですが、小さい数字と＝になった時（自分が一番小さいY座標だった場合）についても考える必要があります。
スクラッチの等号・不等号には「以上」や「以下」（＞＝、＜＝）がありません。
そこで「＞」を「＜」にしてから「～でない」を入れることで＝と同じ意味におきかえることができます。（←ここの理解がむずかしい・・・。）
「（ブロック引数「Z軸」＜「i」）ではない」というブロックに変更してループの条件にします。
以下が完成したブロックの形です。
これでリストZ軸が大きい数字から小さい数字に並び替えられました。
ためしにクローンを作ってY座標をリストにしてみるとこんな感じに。
3.リスト順にスプライトを手前に表示する
クローンも含めたスプライトごとに「i」数番に並び変えられています。
ここで冒頭の「◯層手前に出す」を使います。
「◯層手前に出す」のブロックの◯を変数「i」に変更することでレイヤーの順番を決めて表示できるようになりました。
次の1つだけ修正しておきます。
変数「i」が1の時（スプライトが1つの時など）は適切なレイヤーにいるので移動させる必要がありません。
そのため「i」-1にしておきます。
このスクリプトを主人公キャラや敵キャラなど、すべてのスプライトにコピペで実装しておきます。
4.最後にスプライトのレイヤーを常に整える
最後にレイヤー並び替えのトリガーになるスクリプトを実装します。
「ずっと～」ブロックの中に、リストの「Z軸をすべて削除する」ブロックとメッセージ「スプライト指示」を入れたスクリプトを作ります。
「フラグが押されたとき」ブロックにくっつけておきます。
このスクリプト1つをゲームマネージャーに入れて常にレイヤーを監視して整えるようにしておきます。
これで完了です。
つくったスクリプトは以下になります。
スクラッチキャットを動かしても常に手前のスプライトが前面に表示されます。
一点だけ追記があります。
アクションゲームに実装する時は、コスチュームの中心点をキャラクタの足元にあわせておくといいですよ。
ベルトスクロール風アクションゲームにこのスクリプトをためしてみると・・・
早速このスクリプトをためしてみました。
サンプルゲームは「野田クリスタルのこんなゲームが作りたい! Scratch3.0対応」のチャプター３です。
ベルトスクロール風アクションの作り方と素材が掲載されています。
レイヤー表示に関するプログラムがありませんでしたので、当記事のスクリプトを主人公キャラと敵キャラに適用してみると・・・
主人公キャラをどれだけ操作しても、しっかりと機能しています。
Y軸が下がれば手前に。
Y軸が他スプライトより上に行けば奥に。
違和感は完全になくなりました！
まとめ
スクラッチのスプライトのレイヤー調整について説明してきました。
上から見下ろすゲームを作るときやベルトスクロールアクションのゲームを作る時など、広く利用できるスクリプトかと思います。
本記事ではリスト、変数、ブロック定義（関数）、引数などプログラミング用語の多い内容となってしまいました。
用語やプログラミングの組み方については書籍やプログラミング関連動画も参考になります。
ただしリスト（配列）に関しては少し難しいためか、参考になるものをあまり見たことがありません。
プログラミングを1から順序よく覚えるなら、プログラミングスクールで学ぶほうがよいでしょう。
一度プログラムの組み方や用語を覚えてしまえば、その他のプログラミング本や動画も理解が進み、自分で作るときに困らなくなります。
プログラミングスクールについてはこちらもご参考ください。
【徹底比較】小学生・中学生向けオンラインプログラミングスクール8選【ランキング】
以上「スクラッチでスプライトのレイヤーを調整する方法【ベルトスクロールの奥行き表現】」でした。
最後まで読んでいただきありがとうございます。
では。
