ファイブボックス一分間スクラッチ講座アイキャッチ画像
ファイブボックス一分間スクラッチ講座アイキャッチ画像

一分間スクラッチ講座 スクロールの作成 第4弾 クローンで作成されたブロックの表示、非表示コントロール - ファイブボックス

一分間スクラッチ講座 スクロールの作成 第4弾 クローンで作成されたブロックの表示、非表示コントロール

このブログテーマでは、スクラッチの初心者から上級者まで、ちょっとお役に立つ情報を不定期で紹介していきます。

作成済みのプロジェクトでは、複数のブロックをクローンで作成し、任意の初期位置に配置、スクロールで左右に移動する仕組みを作成しています。最初から作りたい場合は、下記の記事をご参照ください。

スクロールの作成 第1弾 相対的な移動を作成する方法
スクロールの作成 第2弾 超簡単 天井跳ね返りの修正
スクロールの作成 第3弾 クローン機能でスクロールで移動する足場を複数作成

しかしこのクローンで作成されたブロックは、端に移動しても隠れないという課題が残っています。今回は端について隠れるべきポイントで隠す、表示されるポイントで表示する仕組みを作成します。

今回の完成作品を共有しますので、イメージがつかめない場合は以下をご参照ください。

下の動画は不定期配信の「ファイブボックス 一分間スクラッチ講座」です。ご興味のある方は併せてご参照ください。

スプライトと配列の準備

コスチュームの中心を合わせる

前回の動画で配置したブロック、指定した場所で表示、非表示をコントロールするには中心点がそろっていることが重要です。

全てのコスチュームの中心点を合わせる

配列の準備

今回用意したコスチュームはそれぞれ幅が違っています。その場合、表示、非表示の境界線の位置がそれぞれ違ってきます。それぞれのコスチュームの幅を格納するリストを用意します。

コスチュームの幅を格納するリスト「はば」を作成

作成したリストには、それぞれのコスチュームの幅を入力します。

コスチュームの大きさは、各コスチュームの下に表示されている「200 × 32」などの値の × をはさんだ左側の値になります。

コスチューム1から順に、リスト:はば にそれぞれのコスチュームの幅を入力します。サンプルでは3つのコスチュームを用意しているので、リストの長さは3になります。

コスチュームの幅は各コスチューム下の値の左側

スクリプトの作成

まずはクローンされたブロックが右側に移動したとき、消えるタイミングのX座標を求めます。さらにクローン自身のX座標のを求め、両者を比較します

表示非表示境界ポイント

クローンの幅は、それぞれのコスチュームの大きさによって変動します。作成済みのリストを活用し、「はば のコスチューム番号番目」になります。画面の外完全に出たときの大きさは、その半分なので、(はば のコスチューム番号番目)/2になります。

その値に、ステージの半分の大きさ:240を足した値が、本来クローンが隠れるポイントとなりますが、スクラッチには画面の端に行っても表示される部分があります。この値は15程度のようです。

従ってその値を引いて、さらにこの後比較する自分自身のX座標より大きくなるために、そこから1を引いて以下のような値となります。

表示非表示の境界x座標:224+はばのコスチューム番号/2 

ブロックが消える際のX座標

■ x座標

x座標はプラスでもマイナスでも比較できるように「絶対値」を活用します。

表示非表示判定

上で求めた2つの値を比較し、クローン自身のX座標の絶対値が表示境界ポイントよりも小さい時は表示し、そうでない場合は隠します。

すでに作成済みの「クローンされたとき」に続けて

クローンされたときずっと以下の処理を実行

  1. x座標を「初期位置x」+「スクロールx」にする
  2. もしx座標の絶対値が表示境界ポイントより小さければ隠す
  3. そうでなければ表示する
クローンされた後の表示、非表示コントロール

これでクローンされたブロックが表示されるポイントに到達したときに表示され、端にについて消えるポイントで隠れるという動きができたと思います。

スクラッチの使用上、どうしても15程度の誤差が生まれますが、気になる場合は画面端にフレームなどを作って左右15程度を隠してしまうというのもいいかもしれません。

今回の説明の過程で、リストにコスチュームの幅を入れるという作業が面倒ですよね?

次回はコスチュームの幅を自動で取得し、自動でリストに登録する方法を説明します。


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

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

TOP