スクラッチのステージの画面サイズは、よこ480×たて360ピクセルとなっています。
背景用のスプライトを作る場合は、この480×360のサイズに合わせて作ることが多いと思いますが、これ以外にも複数の作り方ができます。
今回は、背景スプライトの通常の作り方とその他によこ長の背景とたて長の背景をつくってステージを広々と使う方法をご紹介します。
この記事を読んでいただくと、背景スプライトを作る際の必要なサイズやよこ長やたて長の背景の作り方とステージを広く使うスクリプトの作り方が分かります。
背景スプライトを準備する
スクラッチのステージの画面サイズは、よこ480×たて360ピクセルです。
画面サイズぴったりの背景を作る場合は、このサイズで作る必要があります。
今回は、通常サイズの背景、よこ長の背景、たて長の背景の3種類の背景を用意します。
それぞれの背景は、別々のスプライトで作ってもいいですし、1つのスプライトの中でコスチュームを分けて作っても大丈夫です。（今回はコスチュームで作っています）
【通常の背景パターン（480×360）】
ステージのサイズ（480×360）にピッタリ合わせて背景を作ります。
【よこ長の背景パターン（480×180）】
よこの長さはステージサイズ（480ピクセル）に合わせて、たての長さをステージサイズの半分（180ピクセル）にします。
背景画像の中心をコスチュームの中心に合わせます（+マークを一致させる）。
【たて長の背景パターン（240×360）】
たての長さはステージサイズ（360ピクセル）に合わせて、よこの長さをステージサイズの半分（240ピクセル）にします。
背景画像の中心をコスチュームの中心に合わせます（+マークを一致させる）。
背景サイズを拡大するスクリプトの作り方
通常の背景パターン（480×360）は特に動かす必要はないのでスクリプトは作成しません。
ここでは、たて長の背景パターンとよこ長の背景パターンの使い方を説明します。
完成した動き
【よこ長の背景パターン（480×180）】
元の画像を2倍の大きさに拡大しています。
たてがステージの大きさとピッタリ一致して、よこが2倍に広がりました。
【たて長の背景パターン（240×360）】
元の画像を2倍の大きさに拡大しています。
よこがステージの大きさとピッタリ一致して、たてが2倍に広がりました。
完成したスクリプト
【よこ長の背景パターン（480×180）】
【たて長の背景パターン（240×360）】
スクリプトの説明
ここでは、別の記事で解説しているテクニック「【Scratch 3.0】スプライト（コスチューム）のサイズ制限を回避する方法（Tips）」を使います。
ポイント①：1×1サイズの小さいコスチュームをつくる
たてよこ1×1や2×2くらいの小さいサイズのコスチュームをつくっておきます。
ポイント②：コスチュームを拡大後に背景画像に変更する
【よこ長の背景パターン（480×180）】
サイズの小さいコスチュームの状態で大きさを200％（2倍）に拡大します。
その後でコスチュームをよこ長の背景画像に変更します。
【たて長の背景パターン（240×360）】
サイズの小さいコスチュームの状態で大きさを200％（2倍）に拡大します。
その後でコスチュームをたて長の背景画像に変更します。
ポイント③：背景をスクロールさせる
【よこ長の背景パターン（480×180）】
右矢印キーが押された時、X座標を-5ずつ変えることによって背景スプライトを左に動かします。
こうすると自分が右に動いているような錯覚を起こすことができます。
また、左矢印キーが押された時は動きを逆にします。
【たて長の背景パターン（240×360）】
上矢印キーが押された時、Y座標を-5ずつ変えることによって背景スプライトを下に動かします。
こうすると自分が上に動いているような錯覚を起こすことができます。
また、下矢印キーが押された時は動きを逆にします。
ここまで出来たら、よこ長やたて長の背景を使ってステージを広々と使うプログラムの完成です！
失敗しやすいポイント
今回は失敗しやすいポイントは特にありませんが、サイズ制限を超えてスプライトを拡大するのはリスクもあります。以下の注意点を覚えておきましょう。
応用編
スプライトを登場させて、ステージいっぱいに移動させてみました。
このような動きをさせることができます。
※キーボードの上下左右の矢印キーでキャラクターを動かすとキャラクターの移動に合わせて背景がスクロールします。
まとめ
さいごに、よこ長やたて長の背景スプライトの作り方とステージを広く使うスクリプトの作り方のポイントをまとめます。
- ポイント①：1×1サイズの小さいコスチュームをつくる
- ポイント②：コスチュームを拡大後、背景画像に変更する
- ポイント③：背景をスクロールさせる
なお、説明の途中で出てきたサイズ制限を超えてスプライトやコスチュームを作る方法については、以下の記事で詳しく説明しています。↓↓↓
どうでしたか？上手くできたでしょうか？
他にも役に立つTips（ティップス）記事をたくさん書いてますので、ぜひ見てみてください。（記事のタイトルに「Tips」と書いていたり「Tips」タグを貼ってあります）
