■「btn」によるボタン定義の弱点
「btn」命令でボタン定義をしてボタンを作った場合、二つの弱点があります。
一つは、マウスカーソルが上にのらない限り画像が表示されないため、マウスカーソルがのっていない時の画像をスプライトなどで別に用意しなければならないことです。
そしてもう一つは、btndefで読みこんだ画像は透過することができないので、ボタンが必ず四角形になってしまうことです。
■スプライトボタン
そこで、それらの弱点を克服しているのが
スプライトボタンです。
「lsp」や「lsph」で読みこんだ画像を、ボタンにしてしまうのです。
これならば自由に透過させることができますし、セルを二つにすることでマウスカーソルがのっている時とのっていない時の画像を一つでまかなうことができます。
(ただし、透過して四角くないボタンを作ったとしても、クリックして反応する範囲は四角いままです)
■スクリプトの流れ
前回のボタンと比較して、スクリプトの流れを見てみましょう。
1.「lsp」「lsph」でボタン用のスプライトを読みこむ
2.「spbtn」でボタン化する(ボタン定義)
3.ボタン待ち(代入用の数字変数の用意)
4.ボタンが押されると、ボタンに対応した数字が数字変数に代入される
5.if文を使って分岐
「btndef」で読みこむのではなく「lsp」「lsph」で、「btn」でボタン定義するのではなく「spbtn」でボタン定義を行うのが違うところです。他は変わりません。
■スクリプト
では、スクリプトを見ていきましょう。
lsp 0,":a/2,0,3;spbotan_01.jpg",255,155
lsp 1,":a/2,0,3;spbotan_02.jpg",255,215
lsp 2,":a/2,0,3;spbotan_03.jpg",255,275
print 1
spbtn 0,1
spbtn 1,2
spbtn 2,3
*loop
btnwait %0
if %0 == 0 goto *loop
if %0 == -1 goto *loop
if %0 == 1 bg #FF8833,1
if %0 == 2 bg #33FF88,1
if %0 == 3 bg #8833FF,1
|
このスクリプトの動作は前回と同じです。三つのボタンが用意されていて、ボタンを押すと背景の色が変わります。
■「lsp」「lsph」でボタン用のスプライトを読みこむ
まず、ボタンにするスプライトを読みこんでしまいましょう。
ボタンにする前に、画面上に見えるように表示した方がいいと思います。
ということで「lsp」で読みこみ、「print」も行っています。
ここで用意した画像は、下のようなものです。
spbotan_01.jpg 520×50
spbotan_02.jpg 520×50
spbotan_03.jpg 520×50
ボタン化するスプライトは、
必ずセルが二つなければなりません。
セル0番(左)がマウスカーソルがのっていない時の画像、セル1番(右)がマウスカーソルがのっている時の画像です。
普通、セルという概念は画像タグによるアニメーションの時に使われます。しかし、それ以外でもこのようにセルが必要になる時があります。
というわけで、スプライトにセルが複数必要な場合、アニメーションをしなくても画像タグでアニメーション指定をしなければなりません。
その場合、
ループ形式には「3」を指定します。
ループ形式「3」は、「アニメーションをしない」という指定です。
1セルにかける時間は何でもよいです(0を指定しておけばよいでしょう)。
■「spbtn」でボタン化する(ボタン定義)
ボタンにするスプライトを読みこんだら、次は
「spbtn」でボタン定義をします。
「btn」とは違い、各スプライトにボタン番号を割り振るだけです。
スプライトを読みこむ時に指定した位置が、そのままボタンの位置になります。
「spbtn」のすぐ次の数字がスプライト番号、その次の数字がボタン番号です。そのスプライトにそのボタン番号を割り振るわけです。
■ボタン待ち(代入用の数字変数の用意)
ここからは「btn」の時と変わりません。ボタンを押した時に変数に代入される値は、スプライト番号ではなく割り振ったボタン番号だということに注意すれば問題ありません。
■メモリ上の画像
ですが、注意が必要なのはメモリ上の画像です。
btnwaitでボタンを押した時に消去されるのは、ボタン用の画像とボタン定義です。
ボタン用の画像とは、「btndef」で読みこんだ画像のことであり、ここでは「spbtn」によってスプライトからボタン用の画像にコピーがなされています。
つまり、btnwaitの時にボタンを押したり、「btndef ""」を行ってたりしても読みこまれたスプライトは消去されないので、「csp」で自分で消去する必要があります。