【Scratch】SVGでカンタン背景スクロール

SVGで背景スクロール

Scratchで背景スクロールを実装する方法です。厳密には背景のスクロールではなく、スプライトのスクロールです

SVGで背景スクロール

Scratchでは480x320px以上のビットマップ素材を読み込むと、強制的に480x320pxのサイズに収まるように縮小されます。一方、ベクター画像のSVGはそのままのサイズで読み込むことができます。今回はこれを利用します

ステージの2倍の幅の960pxのSVGを作成して読み込ませることにします。今回はベクター画像が作成できるIllustrator的なソフト、Affinity Designerというソフトを使いました

幅480pxの画像を2つ並べます。背景の素材は、TOWN illustさんからお借りしました

SVGで背景スクロール

作成したSVGをScrachで読み込みます。読み込んだ状態だと位置がずれているかもしれません。その場合、画像の中心が真ん中に来るように位置を調整します。右に240px、左に240px画像がはみ出ている状態です

SVGで背景スクロール

このスプライトにこのスクリプトを設定すれば、無限スクロールになります

SVGで背景スクロール

スプライト(背景画像)の中心点がステージの左端(-240)より小さくなった時に、中心点をステージ右端の座標(240)に変更することで無限スクロールを実現しています

SVGで背景スクロール

画像作成がちょっと面倒かもしれませんが、プログラムはシンプルでわかりやすいと思います

関連コンテンツ
ブログランキング
  • にほんブログ村 教育ブログ プログラミング教育へ
  • にほんブログ村 子育てブログ 子供の習い事(教室・業者)へ

  • スポンサーリンク
    Google336 記事下
    Google336 記事下

    シェアする

    • このエントリーをはてなブックマークに追加

    フォローする

    スポンサーリンク
    Google336 記事下
    トップへ戻る