2.6 スプライトでボタンを作成

今回の目的
 読み込んだスプライトをボタンにします。

 ボタン用の命令文や画像の特徴について覚えましょう。

 


スプライトをボタンに
 スプライトボタンにすると、その画像は選択肢同様にクリックすることでいろいろな命令を実行することが出来ます。

 スプライトをボタンにするには「spbtn」を用います。

 言葉では説明しにくいので、実際にスクリプトを見てみましょう。

 なお、ボタン用の画像は「通常時」用と「カーソルが重なった時」用の、
 二種類のセルをくっつけたものを用意します。

 セルとは一区切りの画像一枚と考えてください。
 左から順番にセル0、セル1、セル2…となっていきます。

 
 上絵は透過する場合です。透過しない場合はマスク画像は必要ありません。

 ※下の三つの画像をダウンロードしてimageフォルダ内に置いてください。
  start.jpgload.jpgowaru.jpg

*define

clickstr "」。!?",2
effect 10,10,1000

game
*start

スプライトを3つ表示します。
lsp 0,":a/2,0,3;image\start.jpg",220,280
lsp 1,":a/2,0,3;image\load.jpg",220,340
lsp 2,":a/2,0,3;image\owaru.jpg",220,400
print 10

表示されました。
これらの画像をボタンにします。

spbtn 0,1
spbtn 1,2
spbtn 2,3

ボタンになりました。
これらを作って選択肢を作ります。\

*else

btnwait %0

if %0=0  goto *else
if %0=-1 goto *else
if %0=1  goto *hajime
if %0=2  goto *tuduki
if %0=3  csp -1:print 10:end

*hajime
ゲームが始まります。

end

*tuduki
systemcall load

end
 長いスクリプトですが、手順を踏んで見ていけばどうってことありません。

 まずスプライトを「lsp」で読み込みますが、命令文が今までとは少し違ってますね。
 「:a」に続く数字はアニメーション動作の指定で、この場合は「2,0,3」を指定します。

 「2,0,3」はスプライトボタンを使う時の共通の番号です。
 今はこのまま覚えてしまいましょう。
 アニメーションについては、次の章で解説します。

 読み込んだスプライトをボタンにするには、
 「spbtn」の後に「スプライト番号」「ボタン番号」を指定すればOK。

 「スプライト番号」で、ボタンにしたいスプライトを決めます。
 そのスプライトボタンには「ボタン番号」が割り振られます。
 「ボタン番号」は1以上の値を使いましょう。

 ここまで来たらボタン処理を行います。
 「btnwait」を設定すると、どれかのボタンが押されるまで待ちつづけます。
 「btnwait」の後の変数は選んだボタンのボタン番号を格納するためのものです。
 
 上の例では、「spbtn 0,1」と設定されているので、
 スプライト番号0のスプライトをクリックすると変数「%0」には1が代入されます。
 ちなみに、スプライトボタン以外の場所をクリックすると「0」が代入され、
 画面を右クリックすると「-1」が代入されます。

 その直後のifによる条件分岐で、選んだボタンごとの反応を指定します。
 ここは従来どおりの使い方で大丈夫です。

 右クリックなどに特別な命令を持たせない場合は、
 goto文を使って「btnwait」の直前に飛ばしてやりましょう。
 こうすれば、いくらクリックしても無視されます。


 
 上のように二枚のセルがくっついた画像を用意します。

  
 通常はセル0が表示されますが、マウスを乗せるとセル1に変化します。

  
 クリックしたボタンによって、様々な反応をします。

 上のスクリプトにもう少し手を加えてやれば、タイトル画面としても充分使えます。 

 


文字スプライトもボタンに
 前項で解説した文字スプライトボタンにすることができます。

 文字スプライトの場合は文字色を変えることで、セルを作ります。

*define

clickstr "」。!?",2
effect 10,10,1000

game
*start

スプライトを3つ表示します。
lsp 0,":s#ffffff#ffff00スタート",260,280
lsp 1,":s#ffffff#ffff00ロード",270,340
lsp 2,":s#ffffff#ffff00終わる",270,400
print 10

表示されました。
これらの文字列をボタンにします。

spbtn 0,1
spbtn 1,2
spbtn 2,3

ボタンになりました。
これらを作って選択肢を作ります。\

*else

btnwait %0

if %0=0  goto *else
if %0=-1 goto *else
if %0=1  goto *hajime
if %0=2  goto *tuduki
if %0=3  csp -1:print 10:end

*hajime
ゲームが始まります。

end

*tuduki
systemcall load

end
  
 画像がテキストになりました。マウスを乗せればやはり色が変わります。

 文字スプライトの色指定を「#ffffff#ffff00」のように、
 連続して複数回指定することで、セルを複数枚用意したことになります。

 


まとめ
 スプライトボタンは、一度モノにしてしまえば様々な使い道があります。
 そのぶんスクリプトは複雑になりがちなので、使いこなすにはセンスが必要です。

 一般的にはゲームのタイトル画面としてよく用いられますが、
 あなたなりの面白い使い方を考えてみてはいかがでしょう。

 次節では、画面を振動させるなどのエフェクト効果についてです。

 


前へ    TOPへ戻る    次へ