.. include:: /index.rst :start-after: start_hello_message :end-before: end_hello_message .. _sc_tap_tile: お楽しみプロジェクト7 黒いタイルをタップ ========================================== 多くの皆さんは、黒いタイルをタップして得点し、白いタイルを避ける人気のモバイルゲームをご存知でしょう。このやみつきになるチャレンジを、2 つの障害物回避モジュールを使ってお届けします。いずれかの IR モジュールの上で手を遮ると、ステージ上でタップが実行されます。 タップが黒いタイルに当たれば得点、白いタイルをタップすると減点されます。プレイヤーは黒いタイルの位置に基づいて、左または右の IR モジュールのどちらをタップするかを素早く判断しなければなりません。 .. raw:: html 以下は、プロジェクトを実装するための手順です。最初はこれらの手順に従うことをお勧めします。慣れてきたら、お好みに応じてエフェクトを変更しても構いません。 1. **タイル** スプライトを描く ----------------------------------- **Tile** スプライトは、白と黒のタイルが交互に下に移動する効果を実現するために使用します。携帯電話版のこのゲームでは通常 4 列ありますが、ここでは 2 列のみで行います。 * デフォルトのスプライトを削除し、 **スプライトを追加** アイコンをタップして、** ペイント** を選択します。 .. image:: img/tile_paint_tile1.png * 次に、 **コスチューム** ページに移動し、** 四角形** ツールを使用して、灰色の枠線と白い塗りつぶしの長方形を描きます。 .. image:: img/tile_paint_tile2.png :width: 90% * 長方形を選択し、 **コピー** -> ** 貼り付け** をクリックして同じ長方形を作成し、2 つの長方形を隙間なく並べます。 .. image:: img/tile_paint_tile3.png :width: 90% * いずれかの長方形を選択し、塗りつぶしの色を黒にします。 .. image:: img/tile_paint_tile4.png :width: 90% * 次に、両方の長方形を選択し、それらの中心点がキャンバスの中心に合うように移動します。 .. image:: img/tile_paint_tile5.png :width: 90% * コスチューム1 を複製し、2 つの長方形の塗りつぶし色を交互にします。例えば、コスチューム1 は左が白で右が黒、コスチューム2 は左が黒で右が白の塗りつぶし色にします。 .. image:: img/tile_paint_tile6.png :width: 90% * **コード** ページに戻り、スプライトの名前を **Tile** に設定します。 .. image:: img/tile_paint_tile7.png 2. **タイル** スプライトのスクリプト ------------------------------------- * まず、 **Tile** スプライトがステージの上部に位置するように初期位置を設定します。 .. image:: img/tile_script_tile1.png * 変数 **blocks** を作成し、初期値を与えて **Tile** スプライトが出現する回数を決定します。[まで繰り返す] ブロックを使用して、変数 **blocks** が 0 になるまで徐々に減少させます。その間、スプライト **Tile** がランダムにコスチュームを切り替えるようにします。緑色の旗をクリックすると、 **Tile** スプライトがステージ上で素早くコスチュームを切り替えるのが見えます。 .. image:: img/tile_script_tile2.png * 変数 **blocks** が減少している間に **Tile** スプライトのクローンを作成し、blocks が 0 になったらスクリプトの実行を停止します。2 つの [待つ] ブロックを使用しています。1 つ目は **Tile** のクローン間の間隔を制限し、2 つ目はプログラムをすぐに停止させずに変数 blocks を 0 まで減少させ、最後のタイルスプライトに移動する十分な時間を与えます。 .. image:: img/tile_script_tile3.png * 次に、 **Tile** スプライトのクローンがゆっくりと下に移動し、ステージの下部に到達したら削除されるようにスクリプトを書きます。y座標の変化が落下速度に影響し、値が大きいほど落下速度が速くなります。 .. image:: img/tile_script_tile4.png * 本体を非表示にして、クローンを表示します。 .. image:: img/tile_script_tile5.png 3. 背景のスクリプト ------------------------------- 背景では、2 つの IR モジュールの値を読み取り、対応するアクションを実行します。 * 緑色の旗がクリックされたら、変数 **count** を 0 に設定します。 .. image:: img/tile_script_backdrop.png :width: 90% * 左側の IR 障害物回避モジュールが手を感知したら、メッセージ **left** をブロードキャストします。 .. image:: img/tile_script_backdrop1.png * 右側の IR 障害物回避モジュールが手を感知したら、メッセージ **right** をブロードキャストします。 .. image:: img/tile_script_backdrop2.png 4. **左IR** スプライトを描く ----------------------------- **Left IR** スプライトはクリック効果を実現するために使用します。左側の IR モジュールが手を感知すると、 **Left IR** スプライトにメッセージ **left** を送信して動作を開始させます。ステージ上の黒いタイルに触れた場合はスコアが 1 増加し、それ以外の場合はスコアが 1 減少します。 * 再度、 **スプライトを追加** アイコンをタップし、** ペイント** を選択します。 .. image:: img/tile_paint_ir1.png * **コスチューム** ページに移動し、塗りつぶしの色（黒と白以外の任意の色）を選択して円を描きます。 .. image:: img/tile_paint_ir2.png * **コード** ページに戻り、スプライトの名前を **Left IR** に変更します。 .. image:: img/tile_paint_ir3.png 5. **左IR** スプライトのスクリプト ------------------------------------------ * 次に、 **Left IR** スプライトのスクリプトを作成します。緑色の旗がクリックされたら、最初にスプライトを非表示にします。 .. image:: img/tile_script_ir1.png * メッセージ **left** を受信したら（左側の IR 受信モジュールが障害物を検出）、スプライトを表示し、サイズを 100% に設定してから [繰り返し] ブロックを使用して 10 ずつ縮小し、再度非表示にします。これにより、スプライトに拡張と収縮の効果が生まれます。 .. image:: img/tile_script_ir2.png * 次に、 **Tile** スプライトの黒いブロックに触れたかどうかを判定し、触れた場合は変数 **count** を 1 増やし、それ以外の場合は 1 減らします。 .. image:: img/tile_script_ir3.png .. note:: **Tile** スプライトをステージ上に表示してから、 **Tile** スプライト内の黒いブロックの色を吸収する必要があります。 .. image:: img/tile_script_ir4.png 6. **右IR** スプライト ------------------------------------- **Right IR** スプライトの機能は基本的に **Left IR** と同じですが、受信する情報が **Right** である点が異なります。 * ここで **Left IR** スプライトを複製し、スプライトの名前を **Right IR** に変更します。 .. image:: img/tile_paint_ir4.png * 次に、受信するメッセージを **right** に変更します。 .. image:: img/tile_script_ir5.png 7. スクリプトの実行 --------------------------------- * 3 つのスプライトの位置とサイズを調整します。 * **Tile** スプライトをステージの下部にドラッグし、x位置を 0 に設定します。 * **Left IR** スプライトを左側のフレーム内に移動します。** コスチューム** ページに移動して、スプライトのサイズをフレームサイズの 50% に縮小する必要があります。 * 同様に、 **Right IR** スプライトを右側のフレーム内に移動します。** コスチューム** ページに移動して、スプライトのサイズをフレームサイズの 50% に縮小する必要があります。 * **Left IR** と **Right IR** のスプライトが **Tile** スプライトの上に重なるようにします。 .. image:: img/tile_paint_ir5.png * これですべてのスクリプトが完了しました。緑色の旗をクリックしてスクリプトを実行できます。 .. raw:: html