スクラッチで背景をシフトさせる方法

プログラミング,教室レポート

突然ですがスクラッチで背景をシフトさせたいんです

どうやって背景をシフトさせますか?

[speech_bubble type="drop" subtype="R1″ icon="tkak.png" name="たっきー"]今日の課題は、スクラッチを使って背景をムービーのようにシフトさせてみたいと思います。さあー、どうやって作る?[/speech_bubble]
[speech_bubble type="drop" subtype="L1″ icon="girl.png" name="shiちゃん"]...[/speech_bubble] [speech_bubble type="drop" subtype="R1″ icon="tkak.png" name="たっきー"]じゃあ、イメージをつかんでもらうためにサンプルを準備しましたー。 背景がアニメみたいに左に流れているのが分かるかな。実はずっと背景がつながっているように見えて、つなぎ目があるんだ。あと、アニメみたいに車 2台がカーチェイスするプログラムを組んでみました。[/speech_bubble]

[speech_bubble type="drop" subtype="L1″ icon="girl.png" name="shiちゃん"]簡単そう! やってみます![/speech_bubble] [speech_bubble type="drop" subtype="R1″ icon="tkak.png" name="たっきー"]ポジティブ、いいね!。 今回の背景シフトは簡単そうに見えて、実はちょっと難しいんです。先生と一緒に考えてみよう![/speech_bubble] [speech_bubble type="drop" subtype="L1″ icon="girl.png" name="shiちゃん"]はーい。[/speech_bubble]

背景画像を準備する

[speech_bubble type="drop" subtype="R1″ icon="tkak.png" name="たっきー"]先ず背景を準備します。普通は選んだ背景にプログラムを組むと思うかもしれないけど、今回は背景をスプライトとして使うよ。[/speech_bubble]
[speech_bubble type="drop" subtype="R1″ icon="tkak.png" name="たっきー"]具体例で説明します。以下新しい背景のメニューから一番左のボタンを押します。[/speech_bubble]

[speech_bubble type="drop" subtype="R1″ icon="tkak.png" name="たっきー"]背景を選んだら、OKを押します。ここでは、「space」という背景を選んでみました。[/speech_bubble]

[speech_bubble type="drop" subtype="R1″ icon="tkak.png" name="たっきー"]背景が選択出来たら、①[背景]タブを押して以下の画面にします。②次に自分で選んだ背景をクリックします。③その後、右クリックして、[ローカルファイルに保存]を選びます。[/speech_bubble]

[speech_bubble type="drop" subtype="R1″ icon="tkak.png" name="たっきー"]背景を画像としてパソコンに保存ができたら、もうこの背景は不要になるので、×を押して削除します。背景は白にします。[/speech_bubble][speech_bubble type="drop" subtype="L1″ icon="girl.png" name="shiちゃん"]ふーん、ファイルに保存しただけで背景には使わないんだ![/speech_bubble]

[speech_bubble type="drop" subtype="R1″ icon="tkak.png" name="たっきー"]ここでスプライトとして、さっき保存した背景のファイルを選びます。スプライトは3個準備します。[/speech_bubble] [speech_bubble type="drop" subtype="L1″ icon="girl.png" name="shiちゃん"]背景をスプライトとして使うんですね![/speech_bubble]

背景スプライトをスムーズにシフトさせる

[speech_bubble type="drop" subtype="R1″ icon="tkak.png" name="たっきー"]背景スプライトを左方向にスムーズにシフトさせるには、下記のようなプログラムになるよ。ここは難しくないね。[/speech_bubble] [speech_bubble type="drop" subtype="L1″ icon="girl.png" name="shiちゃん"]ここはいつも通りだから大丈夫! でもスプライトの初期値はいくつにセットしたらいいの?どこまで移動させたらいいの??[/speech_bubble]

[speech_bubble type="drop" subtype="R1″ icon="tkak.png" name="たっきー"]3個のスプライトを始めに置く場所(初期値)が異なります。スプライトを置く時にX座標,Y座標を指定するんだけど、このX座標,Y座標は画像の中心を表しているよ。
以下のように3個のスプライトを階段のようにずれて配置させるのがポイントです![/speech_bubble] [speech_bubble type="drop" subtype="L1″ icon="girl.png" name="shiちゃん"]ステージとして表示されない部分も意識するんですね。ムズ~。[/speech_bubble]

[speech_bubble type="drop" subtype="R1″ icon="tkak.png" name="たっきー"]あとはポイントだけご紹介します。3個のスプライトがスムーズにシフトして、切れ目ができないように考えてみました。以下の図では240歩ずつシフトしていった時の変化の様子を表しているよ。少し複雑に見えるけど、頭の体操と同じで、パターンが決まっているのでそれを見つけたら繰り返すだけ。[/speech_bubble] [speech_bubble type="drop" subtype="L1″ icon="girl.png" name="shiちゃん"]2個のスプライトでもシフトできそうですよ。なんで3個なんですか?[/speech_bubble] [speech_bubble type="drop" subtype="R1″ icon="tkak.png" name="たっきー"]わかりませーん。2個でやってみたら切れ目ができちゃいました。たぶん、スクラッチの処理が追いつかないんだと思います。3個のスプライトで切れ目なくシフトできるように二重に重なった状態でシフトさせているよ。[/speech_bubble]

 

[speech_bubble type="drop" subtype="R1″ icon="tkak.png" name="たっきー"]上手くシフトするとこんな風になりました。切れ目なく背景がシフトしていることが分かるね。逆にもっといい方法が思いついたら、先生に教えて下さい![/speech_bubble] [speech_bubble type="drop" subtype="L1″ icon="girl.png" name="shiちゃん"]はーい、超えて見せます![/speech_bubble]