Recrit

在知道如何運用SP之後，接下來就得開始學習如何製作按鈕(button)，基本上每一個SP圖片都可以製作成按鈕，不管是什麼樣的遊戲，按鈕都是不可或缺的。

 

＊所謂的button是？

button為「在遊戲畫面中點擊滑鼠（mouseclick）時，來進行各式各樣命令的系統」。

 

當遊戲種類屬於novelgame時，如果沒有進行systemcustomize的話，這是很少用到的功能，但如果是製作adventure game或是simulation game，這就是一定會用到的功能了。

使用button的時候，對於功能性的理解非常重要，但是藉由button配置的latout和design讓玩家在進行遊戲時能夠更簡便的考量也很重要。

 

 

 

Point：button配置的基本

 

於畫面上表示的button可以粗略分為放在「不好點擊的地方」、「容易點擊的地方」，將畫面分成四個部份的話，玩家最容易點擊的地方是左下，而最不好點擊的地方則是右上。

較長被用到的button（save、load）可以從左下開始依序配置，而畫面的右方則是放入圖像或是維持空白會比較適合。

 

 

＊button的系統構成

首先將畫面的一部分指定為button。

可以分為「直接輸入x,y座標值的命令」和「將SP畫像所表示的部份」指定為button領域的這兩類命令。

 

當滑鼠游標移至此領域之內時，可以變更表現圖像的顏色、改變形狀等，藉此來告訴玩家這裡有個button，這樣的作法稱為rollover。

 

如果於button定義領域內點擊滑鼠左鍵的話，Nscripter會依照所設定的button號碼輸入所指定的變數中，這個稱為回歸值(return value)。

 

 

利用變數中得到的回歸值來進行條件分歧，然後執行一開始就設定好的命令（常常會用goto命令來跳躍至特定label），這是基本的button的系統構成。

 

 

＊Nscripter中的button種類

 

Nscripter中button大致可以分為三種：

*使用btn命令的button

將畫面中的一部分座標值設定為button的命令，能夠製作「當滑鼠游標移到上面就會變更圖像」這種只有簡單rollover動作的button，當有許多不同的項目出現，排列得像是清單型按鈕的button集合時較常以這命令來製作。

 

 

*利用spbtn命令的SPbutton

將SP作為button的命令。

不只是使用圖像來製作button，也可以文字化的SP來簡單地設置button。

 

 

*使用exbtn命令的button

使用SP（請參考2-6）的功能擴張button。

能夠精細地讓圖像切換表示、非表示模式，並且也可以讓游標進入定義範圍時發出效果音。在使用button系列命令時必須先理解SP系列的命令。

 

除了btn命令之外的button系列都有使用到SP圖像，這在之後的教學會說明。

 

 

＊使用btn命令的button

利用btn命令製作的button。其特徵是能夠簡易地準備rollover的圖像。

 

使用繪圖軟體來製作dot圖像也是可以，但是如果利用FireWorks（Macrmaedia公司製作）等homepage製作用的繪圖軟體，就能夠簡易地製作button圖像。

我們試著以這個圖像為基本，來製作rollover的圖像。

 

當要製作rollover圖像時，最簡單的是將原本的圖像利用繪圖軟體來對顏色的濃度進行增加或減少，然後以不同的名稱儲存，再將已經改變顏色的部分圖像作為rollover圖像叫出。

 

 

如果是將顏色調整變得稀薄的話，能夠做出游標進入定義領域時變得明亮的button。

如果是將顏色調整變得較濃的話，能夠做出游標進入定義領域時變得陰暗的button。

 

以button用的圖像來說，雖然有許多無謂的部份，而使得檔案大小會增加。但是只要改變原本圖像的色調就能夠準備好素材，所以並不會花太多功夫。

 

 

*btn命令群

button命令是由複數的命令組合而形成。

設定rollover用的圖像

程式碼

btndef 叫出圖像的文字列

 

範例

btndef “sys02.jpg”(這邊sys02.jpg是第二張字比較亮的圖)

 

 

(上面這張是背景圖 下面這張是btn讀入的圖)

 

 

 

將rollover用的圖像讀取到記憶體之中，當滑鼠移到定義好的按鈕範圍時，在那個範圍內預先讀好的第二張圖片就會顯示出來(只有定義好的範圍會改變)，因此看起來就像游標指到選像按鈕之後，字就變亮了。

 

為BuTtonDEFault的縮寫。

輸入這個命令之後，在這之前的所有button定義會全部被消去。

 

Point：透明button

如果在btn命令裡將btndef所設定的圖像和背景圖相同時，則button領域就會變成了像是個透明的東西。

雖然還是會進行rollover處理，但是由於圖像相同所以即使更新了畫面之後也不會產生會被發覺的變化。

利用這一點的話可以設計出讓玩家在畫面上點擊尋找線索的探索地圖。

 

 

設定button領域的座標

程式碼

btnbutton號碼,button領域起點x座標,button領域起點y座標,button領域寬,button領域高,rollover置換領域起點x座標, rollover置換領域起點y座標

 

範例

btn1,217,362,211,50,217,362

 

 

定義button的命令。

由此設定button號碼以及button領域的x,y座標值。

 

btn1,217,362,211,50,217,362

button的定義命令。

為BuTton的縮寫。

 

btn 1,217,362,211,50,217,362

此為button號碼。

與此號碼相同的數值會作為回歸數值輸入所指定的變數中。

button號碼似乎沒有上限，實際實驗中即使將數字設定大於50000，也能夠運作。

 

 

btn1,217,362,211,50,217,362

設定button領域的左上角x,y座標值。

 

 

btn1,217,362,211,50,217,362

設定button領域的大小，兩數值分別為橫寬畫素、縱高畫素。

 

btn1,217,362,211,50,217,362

 

此兩個數值設定當執行rollover時，所置換的圖像會從bntdef所定義圖像的哪個位置開始的x,y座標。

由於圖像的置換是本命令的前提條件，因此rollover所置換的圖像大小數值會直接使用前面的211,50，也就是第4,5個參數。

當使用和原本的圖像只有顏色差異的圖像來進行rollover時，此兩個數值可以直接就使用button領域的x,y座標數值即可。

 

 

button處理命令

程式碼

btnwait2數字變數

 

範例

btnwait2%3

 

 

進行button處理的命令。為BuTtoNWAIT的縮寫。

直到有滑鼠的動作為止，Nscripter會暫時停住。當出現了滑鼠的動作時，會將其作為回歸值輸入btnwait後面的變數中。

在此命令之中，進行下面的操作時會作為特殊的回歸值輸入變數裡。

 

 

1.於沒有任何button存在的區域點擊時。

0會被當成回歸數值輸入變數之中。

 

2.點擊右鍵時

-1會被當成回歸數值輸入變數之中。

 

3.於button領域點擊時。

 

藉由btn命令所設定的button號碼會作為回歸數值輸入變數之中，例如btn1會傳回1，btn2會傳回2。

 

當按下button以外的部份時會重複進行這處理，因此也稱為「buttonloop」。

在button處理結束之後，請輸入btndefcleat的命令來將記憶體上所存在的rollover用圖像清除。

 

 

Point：為何是btnwait2？btnwait1呢？

 

雖然現在的版本也能夠使用btnwait，但是這是較為古老的命令。（不是btnwait1，而是btnwait。）

btnwait的設計是回歸值出現並且輸入變數之後，rollover用的圖像就會被從記憶體上清除掉。這是適合用於以前記憶體較小的老電腦使用，目前的狀況是推薦使用btnwait2。

 

 

button定義清除命令

程式碼

btndefclear

 

範例

btndefclear

 

 

將button定義清除的命令。

使用此命令之後，存在記憶體上的rollover用圖像也會一起被消除。

當想要從button區塊前進到其他label的時候，由於並不需要rollover圖像可以用此命令消去。

 

 

＊利用spbtn命令的SP型button。

spbtn命令為將SP畫像製作成button的命令。

基本上和button命令的流程是一樣的，但是因應使用素材的不同有兩種類的方法。

分為利用不需要圖像素材的文字列SP的方法以及利用SP用圖像製作的兩種。

SPbutton的優點為：由於表示button的是SP，因此可以利用αchannel做出不定形狀的button和在使用出現effect、移動演出後也能夠作成button。

 

 

*spbtn命令群

由SP命令和複數命令一起組成。下面將逐次解說設定。

在button命令之後所輸入的部份和bit命令相同，只是關於button的設定不同。

 

spbtn命令中用到的button一定要使用分成左右兩個cell的圖像。cell1為左側的圖像，在普通表示時使用；cell2為右側的圖像，在rollover時使用。

spbtn命令中的button領域為所使用的SP之大小，當滑鼠游標進入button畫像的領域時，圖像表示會從cell1rollover切換到cell2。

 

(alphatag專用)

 

SP設定（文字列SP）

設定SP的表示。

不需要輸入print命令。

在開始執行button命令的時候就會被表示。

 

範例

lsp1,”:s/40,40,0;#FF0000#FF8888＊遊戲開始”,82,135

 

 

lsp為命令本體。

1為SP號碼。

 

lsp1,”:s/40,40,0;#FF0000#FF8888＊遊戲開始”,82,135

:s;為文字SPoption。

 

lsp1,”:s/40,40,0;#FF0000#FF8888＊遊戲開始”,82,135

三個參數分別為：文字寬度、文字高度、文字間間隔（單位為畫素）。

 

lsp1,”:s/40,40,0;#FF0000#FF8888＊遊戲開始”,82,135

製作文字SP時會連續輸入兩個RGBcode，因為此文字SP由兩個cell所組成。

第一個RGBcode設定普通狀況時文字的顏色，第二個RGBcode設定rollover時文字的顏色。

 

lsp1,”:s/40,40,0;#FF0000#FF8888＊遊戲開始”,82,135

為畫面上出現的文字列。

 

lsp1,”:s/40,40,0;#FF0000#FF8888＊遊戲開始”,82,135

SP圖像左上角的x,y座標。

 

範例

*loop

lsp0, ”:s/40,40,0;#FF0000#FF8888＊遊戲開始”,82,135

lsp1, ”:s/40,40,0;#FF0000#FF8888＊讀取進度”,92,135

btndefclear

spbtn0,1;這一行表示將第0號sp定義為按鈕1

spbtn1,2

btnwait%0;會將數值傳回%0之中 搭配if式子就可以做分歧

if%0=0goto*loop

if%0=-1goto*loop

if%0=1goto*gamestart

if%0=2goto*loadgame

 

SP設定（圖像SP）

 

範例

 

lsp1,”:a/2,0,3;end.jpg”,217,312

 

lsp為命令本體。

1為SP號碼。

 

lsp1,”:a/2,0,3;end.jpg”,217,312

:c/為圖像SPoption。

 

lsp1,”:a/2,0,3;end.jpg”,217,312

三個參數分別代表：分割cell個數、cell切換的時間長度（單位ms）、動畫loop形式option。

2代表圖像分割為兩個cell。0表示切換時間長度為0ms。3表示此SP不進行動畫loop只呈現第一個cell。（關於此部份請參考p99。）

在使用圖像製作SPbutton時請準備由兩個cell構成的圖像。

製作方法舉例來說：首先以繪圖軟體製作原本的button圖像。然後在複製原本的圖像後變更色調或是亮度製作rollover用的圖像。

將這兩個圖像中，原本的圖像配置在左方，rollover用的圖像配置在右方組合成為一個檔案。左方即為cell1，又方為cell2。

當為了製作button叫出SP的時候，於圖像tag的設定上請注意需設定為只表示cell1。否則雖然仍然能夠進行rollover，但是SP的會不斷進行動畫迴圈造成困擾。

 

 

SPbutton化命令

將SP定義為button的命令。

程式碼

spbtnSP號碼,button號碼

 

範例

lsp1,”a/2,160,3;end.jpg”,217,312

btndefclear

spbtn1,1

btnwait%0

 

 

 

第一個數字為SP號碼，第二個數字為button號碼。button號碼並沒有上限。

 

 

*將button圖像中的透明部份從button領域中去除的命令 transbtn

此為用來將button圖像中的透明部份從button領域中去除的輔助命令

程式碼

transbtn

 

範例

lsp1,”a/2,160,3;end.jpg”,217,312

btndefclear

spbtn1,1

transbtn

btnwait%0

 

 

Nscripter的button領域基本上是四方形，但是當是想將標籤製作成button、或是做出圓形的button時可以使用這個命令。

使用後只有畫像中被表示的部份會對游標產生反應。