.. include:: /index.rst :start-after: start_hello_message :end-before: end_hello_message レッスン5 インタラクティブアニメーション =============================================== これまでに、超音波モジュールを使用してGalaxyRVRが自動的に障害物を回避するようにしました。 このアクティビティでは、モジュールをステージと組み合わせて、ローバーが火星の表面を楽しく横断するインタラクティブなアニメーションを作成します。 .. raw:: html 学習目標 ------------------------- * スプライトの描画と背景の編集方法を学ぶ。 * イベントリスナーやループ構造などの基本的なプログラミング概念を理解する。 * アプリのプログラミング環境と基本操作に慣れ、火星ローバーをシミュレートする簡単なアニメーションを作成する。 新しいスプライトの追加 ---------------------------- #. まず、:ref:`app_connect` を行います。 #. 不要なスプライトを削除します。 .. image:: img/6_animate_delete.png #. インターフェースの右下隅にある **スプライトを選択** ボタンをタップして、4つのオプションを表示します。 .. image:: img/5_create_sp.png #. 小さな画面では、このボタンを表示するために別の画面に切り替える必要がある場合があります。 .. image:: img/5_create_sp0.png 4つのオプションは次のとおりです： * **スプライトをアップロード** – デバイスからスプライトを読み込みます。 * **サプライズ** – ライブラリからスプライトをランダムに選択します。 * **ペイント** – 自分でスプライトを描きます。 * **スプライトを選択** – スプライトライブラリから選択します。 次に、 **スプライトを選択** を使用してスプライトを選び、** ペイント** を使用してスプライトを描きます。 **スプライトを選択** #. **スプライトを選択** （虫眼鏡アイコン）をタップして、スプライトライブラリを開きます。 .. image:: img/5_sp_list.png #. ライブラリから **GalaxyRVR** を見つけて選択します。 .. image:: img/1_choose_galaxyrvr.png **新しいスプライトをペイント** #. **ペイント** （ブラシアイコン）をタップして、新しいスプライトを作成します。ここでは **火星** のスプライトを描きます。 .. image:: img/5_create_custom.png #. **円ツール** を使用して、惑星を表す円を描きます。 .. image:: img/5_create_custom1.png #. **ポインターツール** を使用して、円をキャンバスの中央に移動します。このステップは重要です。スプライトの座標と移動はその中心に基づくためです。 .. image:: img/5_create_custom2.png #. **塗りつぶしツール** を使用して、円を赤く塗りつぶします。 .. image:: img/5_create_custom3.png #. **ブラシツール** を選択し、ブラシサイズを大きくして、適切な塗りつぶし色でテクスチャを追加します。 .. image:: img/5_create_custom_pen.png #. 色が適切でない場合は、塗りつぶし色を変更して、再度 **塗りつぶしツール** を使用します。 .. image:: img/5_create_custom5.png #. 再度 **ブラシツール** を選択し、サイズを2に設定し、色を黒に変更して、火星にクレーターを描きます。 .. image:: img/5_create_custom6.png #. **塗りつぶしツール** を使用して、クレーターを適切な色で塗りつぶします。 .. image:: img/5_create_custom7.png #. 完了したら、 **コードインターフェース** に戻ります。 .. image:: img/5_create_custom8.png #. 小さな画面の場合は、アイコンをクリックしてコードインターフェースに戻ります。 .. image:: img/5_create_custom8.1.png #. ステージに火星のスプライトが表示されます。 **名前を変更する** ことを忘れないでください。 .. image:: img/5_create_custom9.png **ステージ** #. **背景** をクリックして背景を変更します。デフォルトの白い背景を星空に変更します。 .. image:: img/6_jump_backdrop.png #. **背景** インターフェースに入ります。 .. image:: img/6_jump_backdrop_page.png #. キャンバスに長方形を描きます。 .. image:: img/6_jump_rect.png #. **塗りつぶしツール** を使用して、暗い色で塗りつぶします。 .. image:: img/6_jump_fill.png #. **ブラシツール** を使用して、星をいくつか追加します。 .. image:: img/6_jump_paint.png アニメーションの作成 ------------------------------- 火星とGalaxyRVRが用意できました。スプライトのアニメーション方法もわかったので、GalaxyRVRが火星上で動くアニメーションを作成しましょう。 火星を反対方向に回転させることで、スプライトが動いているように見せかけ、GalaxyRVRがその表面を移動している効果を生み出します。 #. まず、:ref:`app_connect` を行います。 #. 両方のスプライトのサイズと位置を調整します。 * GalaxyRVRスプライトを **(0, 0)** に設定し、GalaxyRVRがその表面に立っているように火星を配置します。 .. image:: img/6_jump_place.png **火星スプライト** #. 火星スプライトを選択します。その役割は反時計回りに回転し、GalaxyRVRが前進しているような錯覚を生み出すことです。 .. image:: img/6_ssp_mars.png #. 緑色の旗ブロックをドラッグします。すべてのアニメーションは緑色の旗から始まります。 .. image:: img/6_jump_mar_flag.png #. ``ずっと`` ブロックをドラッグして、アニメーションを連続的に実行し続けます。 .. image:: img/6_jump_mar_forever.png #. ``回す`` ブロックと ``待つ`` ブロックをドラッグして、火星を連続的に回転させます。 .. image:: img/6_jump_mar_turn.png #. 緑色の旗をクリックすると、火星が反時計回りに回転するのを見ることができます。 **GalaxyRVRスプライト** #. GalaxyRVRスプライトを選択します。その役割は、実際には移動していなくても、移動しているかのようにアニメーションすることです。 .. image:: img/6_ssp_rvr.png #. 緑色の旗ブロックをドラッグします。すべてのアニメーションは緑色の旗から始まります。 .. image:: img/6_jump_mar_flag.png #. ``ずっと`` ブロックをドラッグして、アニメーションを連続的に実行し続けます。 .. image:: img/6_jump_mar_forever.png #. ``次のコスチューム`` ブロックと ``待つ`` ブロックをドラッグして、GalaxyRVRを連続的にアニメーションさせます。 .. image:: img/6_jump_mar_next.png #. ``距離`` ブロックをドラッグします。これは超音波モジュールが障害物（例：手）を検出したときにトリガーされます。 .. image:: img/6_jump_when.png #. 2つの ``行う`` ブロックをドラッグし、最初のブロックのy値を変更して、スプライトが跳ね上がってから落下するようにし、ジャンプ効果を作成します。 .. image:: img/6_jump_glide.png #. GalaxyRVRスプライトの完全なコードは次のようになります。 .. image:: img/6_jump_mar_rvr_all.png これで、緑色の旗をクリックしてアニメーションを開始します。超音波モジュールの前に手をかざして障害物をシミュレートすると、GalaxyRVRスプライトがジャンプして回避します。