一分間スクラッチ講座｜スクロール処理④ クローンしたブロックの表示・非表示を管理する方法

前回は、クローンを使って複数の足場ブロックを作成しました。

ただ、このままだと一つ問題があります。
ブロックが画面の端まで移動しても、完全には隠れず、少しだけ画面に残ってしまうことがあります。

今回は、この問題を解決するために、

表示する範囲に入ったら表示する
表示範囲の外に出たら隠す

という仕組みを作っていきます。

スクロールゲームでは、画面外のブロックをうまく隠すことで、自然にステージが続いているように見せることができます。

Youtube「ファイブボックス一分間スクラッチ講座」でもこの課題をショート動画でまとめています。
もしよろしければ併せてご覧ください。

今回やること

今回は、前回作成したクローンのブロックに対して、表示・非表示の判定を追加します。

ブロックの中心が画面内に近い
→ 表示する

ブロックの中心が画面の外に離れている
→ 隠す

ただし、ブロックには横長のもの、短いもの、縦長のものなど、いろいろな大きさがあります。

そのため、すべて同じ位置で隠してしまうと、ブロックによっては早く消えたり、逆に端に残ったりしてしまいます。

そこで今回は、コスチュームごとの幅を使って、隠す位置を計算します。

1. スプライトとリストの準備

コスチュームの中心をそろえる

まず大事なのが、コスチュームの中心位置です。

今回のように、ブロックの位置を計算して表示・非表示を切り替える場合、コスチュームの中心がずれていると、判定もずれてしまいます。
そのため、すべてのコスチュームで、中心点をできるだけそろえておきます。

横長のブロックでも、短いブロックでも、縦長のブロックでも、中心が同じ考え方で使えるようにしておくことがポイントです。

コスチュームの幅をリストに入れる

今回使うブロックは、コスチュームごとに幅が違います。
そのため、コスチュームごとの幅を保存しておくリストを作ります。
リスト名、今回は「はば」とします。

このリストには、それぞれのコスチュームの横幅を入れていきます。
たとえば、コスチュームの下に　200 × 32　と表示されている場合、左側の 200 が横幅です。

この値を、コスチューム1から順番にリストへ入れていきます。

コスチューム　幅
コスチューム1　220
コスチューム2　70
コスチューム3　70

このように、コスチューム番号とリストの番号が対応するようにしておきます。

2. 表示・非表示の境界を考える

次に、ブロックをどこまで表示するかを考えます。
Scratchのステージは、横方向が -240 から 240 までです。
つまり、画面の中心から右端までは 240 です。

ただし、ブロックには幅があります。
ブロックの中心が 240 の位置に来た時点では、ブロックの半分はまだ画面の中に残っています。
そのため、ブロックが完全に画面外へ出る位置は、

240 + ブロックの幅 ÷ 2

になります。

ここで少し注意が必要です。
Scratchでは、スプライトが画面の端に近づいたとき、完全に画面外へ出る前に、少し残って見えることがあります。
この残る部分は、おおよそ 15 くらいと考えると扱いやすいです。

そのため、今回は右端の基準を 240 ではなく、
240 - 15 - 1 = 224
として考えます。

つまり、表示・非表示の境界は次のようになります。

表示・非表示の境界X座標
= 224 + ブロックの幅 ÷ 2

Scratchのブロックで考えると、

224 + はば の コスチューム番号 番目 / 2

という形になります。

3. x座標の絶対値を使う

ブロックは、右側にも左側にも移動します。

右側だけを考えるなら、x座標が大きくなったかを見ればよいですが、左側に移動した場合は x座標がマイナスになります。
そこで使うのが「絶対値」です。
絶対値を使うと、

x座標が 250 のとき → 250
x座標が -250 のとき → 250

のように、プラス・マイナスに関係なく、中心からどれくらい離れているかを調べることができます。

つまり「x座標の絶対値」を見ることで、右端でも左端でも同じ判定ができます。

4. クローンのスクリプトを作る

前回作成したクローンの処理に、表示・非表示の判定を追加します。

作成するスクリプトは次の通りです。

ここで大事なのは、

表示範囲の中にいるときは表示する
表示範囲の外に出たときは隠す

ということです。

5. 完成後の動き

この処理を入れると、クローンされたブロックがスクロールによって移動したときに、表示範囲に入れば表示され、端まで移動すると隠れるようになります。

これで、ブロックが画面の端に少し残ってしまう問題を防ぐことができます。

また、横長のブロックや短いブロックなど、幅の違うコスチュームでも、それぞれの幅に合わせて判定できるようになります。

補足：左右の端に少し余裕を作る方法

Scratchの仕様上、画面の端ではどうしても少し表示が残ることがあります。

今回のように 15 程度を引いて調整すればかなり自然になりますが、それでも気になる場合は、画面の左右にフレームのようなものを置いて、端の部分を隠してしまう方法もあります。
たとえば、画面の左右に少し太めの枠を置くと、ブロックが端に残る部分を見えにくくできます。

スクロールゲームでは、このように画面外の処理を少し工夫すると、見た目がかなり自然になります。

今回のまとめ

今回は、クローンで作ったブロックを、画面の端で表示・非表示にする方法を作りました。

ポイントは次の3つです。

1. コスチュームの中心をそろえる

2. コスチュームごとの幅をリストに入れる

3. x座標の絶対値と幅を使って、表示・非表示を判定する

特に大事なのは、ブロックの幅を考えて隠す位置を決めることです。
同じ位置で隠すのではなく、

224 + ブロックの幅 ÷ 2

を使うことで、幅の違うブロックでも自然に表示・非表示を切り替えることができます。

次回予告

今回の方法では、コスチュームの幅をリストに手作業で入力しました。
ただ、コスチュームが増えてくると、この作業は少し面倒です。
次回は、コスチュームの幅を自動で取得し、リストに登録する方法を説明します。

ファイブボックス一分間スクラッチ講座 の記事はこちらでまとめてあります。

ファイブボックスでは、スクラッチやUnityの個別指導のオンラインレッスンを行っています。

ご興味のある方は当サイト、オンラインレッスンから、無料体験授業へお問い合わせ下さい。