5スプライトで遊ぶ
今回は「スプライト」について紹介します。
スプライトとは
「スプライト」とは定義したキャラクタ画像を表示するための機能のことです。
スプライトを使うと大量のキャラクタを高速に動かすことができますので、ゲーム作りにすごく重宝します。
《画面の機能》
SmileBASICには他にも様々な画面の機能があります。
「コンソール」は文字を表示する機能のことです。
そして、「グラフィック」はドット単位で絵を描画するための機能です。
これらの機能は1つに重ね合わせた状態で画面に表示されます。重ね合わせの順番は自由に変更することができます。
スプライトを使った表示の例がこちらです。
スプライトはキャラクタ画像を回転させたり、拡大縮小、移動、左右反転、上下反転させることができます。
プチコン3号の場合、初期設定時のスプライトの最大表示数は512個です。
スプライトの表示方法
スプライトを表示するプログラムの例がこちらです。行数はわずか3行です。
プログラムの2行目にある「SPSET」はスプライトを作成するための命令です。
SPSET命令の主な書式は次のとおりです。
SPSET 管理番号,定義番号
引数の「管理番号」はスプライトを管理するための番号です。
プチコン3号の場合、初期設定の状態で0~511の値を設定することができます。
「定義番号」はキャラクタ定義用テンプレートに定義された番号のことです。
たとえば、引数を「0,2544」とすると、管理番号0番にキャラクタ定義用テンプレートの2544番を割り当てるという意味です。
定義番号の仕組みについては後で詳しく紹介します。
プログラムの3行目にある「SPOFS」はスプライトの表示位置を設定するための命令です。
この命令を実行するには、あらかじめSPSET命令を実行しておく必要があります。
SPOFS命令の主な書式は以下のとおりです。
SPSET 管理番号,定義番号
引数の「管理番号」はスプライトの管理番号です。「X」と「Y」と「Z」は表示する座標を表しています。
Z座標は省略して記述することができます。
引数を「0,200,120」とした場合、管理番号0番のスプライトの位置を座標(200,120)に変更するという意味です。
プログラムの実行結果がこちらです。
「人」の形をしたスプライトが画面中心に表示されます。
別の書式を使ったプログラムの例がこちらです。
SPSET命令の次の書式を使っています。
SPSET 定義番号 OUT 変数
この書式ではスプライトの空きから自動的に管理番号を割り当てられ、変数に格納されます。
使い方によっては便利な書式です。
なお、実行した結果は先のプログラムと全く同じです。
スプライトの表示できる範囲
こちらがプチコン3号やプチコンBIGのスプライトの表示範囲です。
初期設定時の画面サイズは400×240ドットです。
表示範囲の一番左上の座標が(0,0)、一番右下の座標が(399,239)です。
SPOFS命令を使うと、スプライトのZ座標を指定することができます。
値の範囲は-256~1024です。
Z座標が0の場合は画面の平面上にスプライトが存在します。
Z座標がマイナスの場合は画面よりも手前に存在します。
Z座標がプラスの場合は画面の奥に存在します。
もし、プチコン3号で実行している場合はスプライトが画面から飛び出したり、画面奥に引っ込んだ状態で表示することができます（3DS本体の立体視機能が有効な場合）。
キャラクタ定義用テンプレート
スプライトのキャラクタ定義用テンプレートには次のデータが定義されています。
・キャラクタの元画像の座標（U、V）
・キャラクタの画像サイズ
・座標基準点（回転や拡大縮小の中心座標）
・アトリビュート（左右反転や上下反転などの情報）
定義内容は「定義番号」で管理することができます。定義番号の範囲は0000番~4095番です。
たとえば、定義番号2544番の内容はこのとおりです。
「元画像の座標」は座標(0,144)が定義されています。
この座標はグラフィック画面のページ4に存在する元画像の位置を示しています。
現時点では特に知らなくても利用できますので、今回は説明を省きます。
なお、キャラクタの元画像には透明色が使われています。
スプライトが背景と重なった場合、透明な部分には背景が表示されます。
キャラクタの輪郭線は透明色ではなく「すごく暗い灰色」が使われています。
「画像サイズ」は16×16ドットが定義されています。
「座標基準点」というのは、画像を回転させたり、拡大縮小するさいに中心して扱う座標です。
この場合は座標(8,15）に定義されています。
これらの内容は定義番号の値によって全て違っています。
キャラクタ定義用テンプレートの内容を確認するプログラムの例です。
実行すると、定義番号2544~2593番のキャラクタ画像を使ったスプライトが表示されます。
キャラクタ定義用テンプレートの確認方法
プチコン3号の場合、次の方法を使うとキャラクタ定義用テンプレートを手軽に確認することができます。
《スマイルツールの起動》
下画面のキーボードにある「スマイルボタン」をタッチします。
プチコンBIGの場合、レイアウトがこの画面と違っていますが、同じように「スマイルボタン」をタッチします。
《スマイルツールの動作中》
スマイルツールが起動します。ここで、下画面の「SPDEF」のボタンをタッチします。
キャラクタ定義用テンプレートの確認画面に切り替わります。
画像は人物やモンスター、乗り物、武器、道具などゲーム作りに必要な素材が一通りそろっています。
画像に表示されている数値がキャラクタ定義テンプレートの定義番号です。
十字ボタンやスライドパッドを上下に入力することによって、表示するテンプレートを切り替えることができます。
スプライトの重ね合わせ
複数のスプライトを表示する場合には重ね合わせに配慮しましょう。
《Z座標を省略した場合》
スプライトを2つ表示するプログラムの例です。
2行目は作成したスプライトは管理番号を変数Nに格納する処理です。
3行目は作成したスプライトは管理番号を変数Pに格納する処理です。
4~5行目はスプライトを配置するための処理です。
実行すると、このように「人」と「リンゴ」のスプライトが表示されます。
このプログラムではスプライトのZ座標を指定していません。
このため、Z座標は0が設定されます。
Z座標が同じスプライトが重なった場合、管理番号が大きいスプライトが手前に表示されます。
その結果として、リンゴが手前に表示されます。
《Z座標を指定した場合》
リンゴより人を手前に表示する場合のプログラムです。
ここではリンゴのスプライトのZ座標を増やして、人よりも奥に配置しました。
プログラムの実行結果です。
見事、リンゴの手前に人を表示させることができました。
プライトの回転と拡大縮小
スプライトを回転して表示するには「SPROT」という命令を使います。
そして、スプライトを拡大縮小して表示するには「SPSCALE」 という命令を使います。
SPROT命令とSPSCALE命令の主な書式は次のとおりです。
SPROT 管理番号,角度
SPSCALE 管理番号, 倍率X, 倍率Y
SPROT命令とSPSCALE命令を使ったプログラムがこちらです。
変数Sには画像の拡大率が代入されています。拡大率が1の場合は等倍で表示されます。
拡大率は少数で指定することが可能です。
変数Aには画像の回転角度が代入されています。
プログラムを実行すると、8個のスプライトが表示されます。
表示されるスプライトの拡大率と角度は次のとおりです。
（左から順に）
拡大率：1倍→1.5倍→2倍→2.5倍→3倍→3.5倍→4倍→4.5倍
角度：0度→45度→90度→135度→180度→225度→270度→315度
この結果を見ると、スプライトは座標基準点を中心にして回転することが分かります。
拡大縮小も同じく座標基準点を中心に行っています。
さらに、角度が増えた場合は時計方向に回転しています。
大量のスプライトを動かす
続いて、大量のスプライトを動かしてみましょう。
《Z座標を省略した場合》
大量のスプライトを動かすプログラムの例です。
ここでは限界一杯の512個のスプライトを動かします。
2~6行目はスプライトを作成するための処理です。
「FOR」文を使って512回ループさせています。
変数Nにはスプライトの管理番号が代入されます。
7~19行目はスプライトを移動させるためのメインループです。
FOR文を使って、512回ループさせています。
先に紹介した「OUT」を使い、スプライト自身からスプライトの座標や移動方向の情報を取り出しています。
9行目ではスプライトの座標を変数Xと変数Yに代入しています。
10行目ではスプライトの角度を変数Dに格納しています。
18行目の「VSYNC 1」はループの周期を1/60秒に調節するための命令です。
プログラムを実行すると、512個のスプライトが画面内を移動します。
スプライトは45度単位で移動します。
スプライトが画面外に出ようとすると、その手前で反射して向きを変えます。
スプライトを使ったゲーム
今まで紹介してきたテクニックを組み合わせてゲームを作ってみましょう。
今回作るのは「穴をよけるゲーム」の改良版。
名付けて「穴をよけるゲーム2」です。
「穴をよけるゲーム2」のプログラムです。
前回はプレイヤーキャラにコンソール（文字）を使っていましたが、今回はスプライトに変更しています。
地面のキャラクタはコンソールに描きます。
プログラムの1行目~7行目は初期化のための処理です。
6行目にある「SPANIM」という命令はアニメーション表示をするための処理を行っています。
図のように4つの画像を切り替えてプレイヤーキャラが走っているように見せています。
SPANIM命令については詳しく説明すると長くなってしまうので、次回に持ち越します。
8行目~26行目がメインループです。
ボタン入力や地面のスクロールするための処理は前回と全く同じです。
ジャンプの処理についてはスプライトを動かすため移動量が変わっています。
27行目はゲームオーバーの時の処理です。
プログラムを実行中の画面です。
プレイヤーキャラが1ドット単位でなめらかに動きます。
アニメーション表示を行っているので動きに迫力があります。
ゲームの内容は前回と同じです。
Aボタンを押すとプレイヤーキャラがジャンプしますので、穴に落ちないように飛び越えましょう。
プレイヤーキャラが穴に落ちるとゲームオーバーです。
スプライトを使うと、このようにキャラクタ画像を容易に切り替えることができます。
今回のまとめ
今回紹介した命令と関数は次のとおりです。さらに深く知りたい場合には、ヘルプ機能や公式サイトにある「命令表」で調べてみましょう。
- SPSET
- SPOFS
- SPROT
- SPSCALE
- SPANIM
- SPCHR