Recrit
【捨丸&KID】如何放置SP圖像
今天要來介紹NScripter裡的SP(sprite)相關指令,也就是在遊戲畫面放放置除了人物圖、背景圖之外的圖片,可以增加遊戲畫面的豐富度,甚至可以藉著NScripter指令製作簡易的動畫。
* 所謂的sprite是?
Nscripter中所用的sprite為可以在畫面像自由配置的圖像。(在之後都以SP簡稱)
Point:SP到底是什麼東西?
SP是在從前電腦的記憶體還很少的時候,為了在畫面上製作出動作激烈的感覺而產生的東西。將幾個較小的圖像和背景圖像組合使用,使其產生動作。
由於是較小的圖像能夠節約記憶體的使用,藉由各種圖像疊合的效果也能夠產生深奧的表現。
以2D射擊遊戲來作為例子,不管是自機、敵人還是子彈都是以SP所作成,藉由各自進行計算產生動作而後表示在畫面上。
從語源上來看,sprite是指西洋文化中的妖精。由於這是妖精的總稱,不管是小妖精(pixie)、等人身的妖精(elf)、矮人妖精(goblin)都能夠被稱為sprite。由於在電腦產業界愛好幻想奇幻世界的人相當多,可能因此將在畫面上突然消失突然出現的圖像稱為sprite。
* SP會在何種時機使用到?
如圖像button、讓角色產生動作的演出等,在開始想要使用較多技巧和心力時,常常會用到SP。例如在目錄頁時所使用的按鈕常常是以SP所表示。
* 雖然存在但是為看不見的狀態,又有著透明度的問題所以相當複雜
利用lsph命令所呼叫出的SP雖然存在於畫面上,但是無法被看見。
那麼這可以說是「透明」囉?雖然可能會這麼認為,但是實際上還有著圖像透明度的設定,所以並不是透明。只是無法在畫面上看到而已。和所謂的「透明」是不一樣的狀態。
設計成這麼複雜的系統是因為當SP被用於按鈕等狀況時常常會有想要暫時從畫面上消去的時候,並且在進行動作的處理時,比起每次都從硬碟中呼叫出來,還是暫時放置於記憶體中以看不見的狀況待機,這樣的執行速度比較快。
以看不見的狀態待機這名詞雖然不容易直接以直覺來理解,但是藉由操作SP應該就能夠慢慢理解。
* 在畫面上呼叫出SP
首先說明在畫面上呼叫出SP的命令。
程式碼
lsp SP號碼,呼叫圖像的文字列,x座標,y座標(,透明度:0-255:省略的時候為255)
範例
lsp 0,”:c; butterflyUp.jpg”,224,95
「
;mode800
*define
clickstr"!?。」",2
game
*start
bg "BG\093.JPG",1
lsp 0,":c;butterflyUp.jpg",224,95
click
end
」
lsp為命令本體。
此為LoadSprite的縮寫。
此命令的意義是在畫面上以表示狀態叫出圖像。
雖然說是表示狀態,但是其實只是以完成表示準備的意思,光只是這個命令並無法在畫面上表示。在輸入print命令,重新更新過畫面時才會被表示。
「
;mode800
*define
clickstr"!?。」",2
game
*start
bg "BG\093.JPG",1
lsp 0,":c;butterflyUp.jpg",224,95
print 1
click
end
」
lsp 0,” :c; butterflyUp.jpg”,224,95
0為SP的號碼。
可以同時使用0~999號總共1000個SP。
被表示的圖像會重疊。但是0號為最上層,而999號為最下層。
lsp 0,”:c; butterflyUp.jpg”,224,95
:c; butterflyUp.jpg為將圖像呼叫出來的文字列。
:c;為利用copy的圖像tag來處理圖像(請參考之前人物立繪教學)。
lsp 0,”:c; butterflyUp.jpg”,224,95
224是x座標,而95則是y座標。
這兩個數值指定SP圖像左上角的表示座標。
* 表示在畫面上
print命令為更新表示畫面的命令。
程式碼
print effect號碼
範例
print 2
利用指定的effect將畫面表示更新的命令。
2為定義好的effect號碼(請參考之前的教學)。
當有SP以表示狀態存在時,print命令會更新畫面,並且以所指定的effect來使SP出現。
* 消去SP
從記憶體上完全去除
消去SP的命令。連記憶體上的data也會一起消去。
程式碼
csp,SP號碼
範例
csp,0
csp是命令本體。
為ClearSPrite的縮寫。
0為SP號碼。
當SP號碼指定為-1的時候,會將目前所設定的全部SP都從記憶體上消去。
在使用這個命令的時候不需要用print命令。
暫時性消去或表現的命令
暫時性在畫面上將SP消去時和想將畫面上暫時被消去的SP表現時會使用到vsp命令。這是將vsp切換表示、非表示的命令。
程式碼
vsp SP號碼,表示flag(0/1)
範例
vsp 1,0
vsp是命令本體。
為VisionSPrite的縮寫。
1為SP號碼。
0為表示flag。當此數值為0的時候為非表示狀態、數值為1的時候為表示狀態。在此命令之後輸入print便能夠使SP的表示非表示狀態反應出來。
統合輸入
vsp 1,1
print,2
—當這樣分成兩行輸入的時候,處理速度較慢的電腦可能會產生lime lag。
因此在表示SP的時候,將這兩個命令統合輸入可以避免產生time lag。
vsp 1,1:print,2
藉由「:」可以讓不同的命令在同行輸入。
讓全部的SP暫時被消去
程式碼
allsphide
範例
allsphide
將全部的SP暫時隱藏起來。
將現在被表示的全部SP全部切換到非表示狀態。
讓全部的SP切換至表示狀態
程式碼
allspresume
範例
allspresume
將利用allsphide命令隱藏起來的SP全部表示出來。
請注意,不會對利用vsp命令個別切換的SP有所反應。
當想將button console、SP的集合一起消去或是表現時會使用到的命令。
* 將SP以非表示狀態呼出
程式碼
lsph SP號碼, 呼叫圖像的文字列,x座標,y座標(,透明度:0-255:省略的時候為255)
範例
lsph 0,”:c; butterflyUp.jpg”,224,95
lsph為命令本體。
為LoadSPriteHiden的縮寫。
0為SP號碼。
“:c; butterflyUp.jpg”為所叫出檔案的名稱。
224為SP的左上角x座標。
95為SP的左上角y座標。
使用這個命令所叫出的SP雖然存在,但是在畫面上是非表示狀態。
這個命令是用於讀取複數張的動畫圖像高速切換表示的時候、或是想將button圖像全部一起配置因此在一開始保持著非表示狀態會較方便等各種狀況下可以用到。
lsph所叫出的圖像雖然存在但是看不到。雖然在記憶體內存在,但是在畫面上非表示因此稱為非表示狀態或待機狀態。
* 讓SP移動
當想要移動SP的時候使用到的命令。
在製作動作性的演出效果時是不可缺少的命令。
相對位置的移動命令
讓SP的現在位置座標數值經過增加或是減少的移動命令。
程式碼
msp SP號碼,x座標增減數值,y座標增減數值,透明度增減數值
範例
msp 0,50,25,255
msp為命令本體。
為MoveSPrite的縮寫。
0是SP號碼。
50為x座標的增減數值。當想要往相反方向移動的時候,請加入minus記號(-)輸入-50。
25為y座標的增減數值。當想要往相反方向移動的時候,請加入minus記號(-)輸入-25。
255為透明度的增減數值。當想要增加透明度的時候(朝透明的傾向變化)請輸入整數的數值,當想要降低透明度的時候(朝不透明的傾向變化)請輸入負數。當透明度為0是完全透明,255是完全不透明。
使用這個命令後必須使用print命令才能夠使它表現。請注意每移動一個位置都要用print命令,並且中間要加上wait命令才會有移動的視覺效果。
「
;mode800
*define
clickstr"!?。」",2
game
*start
bg "BG\093.JPG",1
lsp 0,":c;butterflyUp.jpg",224,95
print 1
click
msp 0,50,25,255
print 1
wait 500
msp 0,50,25,255
print 1
wait 500
msp 0,50,25,255
print 1
wait 500
msp 0,50,25,255
print 1
wait 500
end
」
這種指令之後可以用迴圈指令簡化,在之後的教學會提到
絕對位置的移動命令
讓SP從現在的位置移動到所指定位置的命令。
程式碼
amsp SP號碼,x座標增減數值,y座標增減數值,透明度增減數值
範例
amsp 0,250,150,255
amsp為命令本體。
為AbsoluteMoveSPrite的縮寫。
0為SP號碼。
250為x座標。
150為y座標。
此命令所使用的是絕對座標,直接輸入x,y座標的數值。SP會在此座標上被表示。
255為透明度的數值。利用0~255範圍的數值來設定透明度。0為完全透明,255為完全不透明。
使用這個命令後必須使用print命令才能夠使它表現。
【捨丸&KID】如何調整對話框
這次要來介紹如何調整NScripter的對話框,其實之前幾次的文字表現都是出現在對話框內,只是若我們沒有寫指令調整,NS就自動會用預設的數值,一般預設的對話框都是全畫面,先來看一看實際的例子:
範例
「
;mode800
*define
clickstr"!?。」",2
game
*start
bg "BG\093.JPG",1
click
天譴寶寶說你好!
end
」
大家可以注意到背景的顏色變暗了,其實那是被覆蓋整個畫面的半透明對話框蓋住,當然在一般置作avg遊戲時,運用到全畫面的對話框機會很少,這時候就得來調整對話框了。另外注意,NScripter可以運用的對話框就只有一個,不像吉里吉里有多對話框的可能,下面我們就來介紹該如何調整對話框。
* 命令本體
setwindow 20,15,23,16,26,26,0,2,40,1,1,#bbbbbb,0,0,639,479
setwindow為設定文字表現視窗的命令本體。
*define區塊和執行區塊都能夠使用。
在執行區塊中使用時,在此行之後的文字會如同所設定表示。
範例:
「
;mode800
*define
clickstr"!?。」",2
game
*start
bg "BG\093.JPG",1
click
setwindow 20,15,23,16,26,26,0,2,40,1,1,#bbbbbb,0,0,639,479
天譴寶寶說你好!
end
」
* 第一個文字的左上角座標
setwindow 20,15,23,16,26,26,0,2,40,1,1,#bbbbbb,0,0,639,479
首先設定文字的開始位置。在此範例之中,遊戲畫面的左上角座標為(0,0),而第一行的第一個文字表現之位置其左上角座標為(20,15)。
* 每行文字數字和行數
setwindow 20,15,23,16,26,26,0,2,40,1,1,#bbbbbb,0,0,639,479
此兩個數字分別設定每一行橫向的文字數字還有畫面中的行數。
在此範例中設定為橫向每一行23個文字,縱向16行。
* 文字的大小
setwindow 20,15,23,16,26,26,0,2,40,1,1,#bbbbbb,0,0,639,479
設定表示文字的大小。
在此範例中設定為文字大小是26x26畫素。
* 文字間、行間間距
setwindow 20,15,23,16,26,26,0,2,40,1,1,#bbbbbb,0,0,639,479
設定文字間和行間的間距。
在此範例中橫向的文字間間距設定為0畫素,而縱向的行間間距為2畫素。
* 文字的表現速度
setwindow 20,15,23,16,26,26,0,2,40,1,1,#bbbbbb,0,0,639,479
此數字設定一個文字表現在畫面上後到下個文字表示出來之間的時間。
在此範例中指定為40ms(1000ms=1s)。
文字表示的速度也能夠用其他指令來變更。
* 表示選項(option)
setwindow 20,15,23,16,26,26,0,2,40,1,1,#bbbbbb,0,0,639,479
決定文字表現選項的數值。1為ON,0為OFF。
第一個數字決定是否要強調文字。一旦切換成ON之後,文字會變得較粗體。
第二個數字決定是否要加上陰影。切換成ON之後文字會加上陰影。
在此範例之中,文字強調和陰影都被開啟。
文字表示選項是為了在帶有顏色的視窗上表示明亮的文字時能夠加強文字的辨識程度。當在白色底圖上表示黑色文字時便不是那麼需要可以將其切換成OFF。
* 設定window color
setwindow 20,15,23,16,26,26,0,2,40,1,1,#bbbbbb,0,0,639,479
本數值設定視窗的基本顏色。利用#RRGGBB的RGB code來指定顏色(請參考p12)。
在此範例中輸入#bbbbbb指定為灰色。當顏色較淡的時候下面的圖像會比較容易看但是文字會變得就不容易閱讀。而顏色較濃時文字會較容易閱讀,而下面的圖像則會較難以看清。
隨著畫風和遊戲種類來調整濃淡即可。(必須意識到文字是否容易閱讀這件事情來設定顏色圖)
* 設定視窗左上角位置
setwindow 20,15,23,16,26,26,0,2,40,1,1,#bbbbbb,0,0,639,479
本命令能夠設定視窗左上角的座標。
在此範例中,視窗由畫面的原點(X:0,Y:0)開始。
在使用下視窗模式的時候先使用繪圖軟體做出模擬的視窗畫面,設計出視窗的位置後在取得座標較簡單。
* 設定視窗右下角位置
setwindow 20,15,23,16,26,26,0,2,40,1,1,#bbbbbb,0,0,639,479
本命令能夠設定視窗右下角的座標。
在此範例中視窗的終點位在座標(X:639,Y:479)
必須注意為何數值不是640,480。由於原點是從(X:0,Y:0)開始,因此在數值計算時也得將0算入,那麼x軸上第640個畫素則是座標639、y軸上第480個畫素則是座標。
* 讀取畫像帶入全畫面的形式
在讀取畫像的形式中會以畫像作為視窗來取代原本利用單一顏色塗滿的視窗。如果和α channel處理組合的話能夠做出各式各樣設計的視窗。
* 畫像的設定
setwindow 20,15,23,16,26,26,0,2,40,1,1,”:a;sys¥win.bmp”,0,0
設定想要作為視窗使用的畫像。
在此範例中,會以利用α channel處理過後sys資料夾中的win.bmp檔案作為視窗使用。
* 設定畫像左上角座標
setwindow 20,15,23,16,26,26,0,2,40,1,1,”:a;sys¥win.bmp”,0,0
設定配置畫像的位置。在此範例中,會將原點(0,0)和畫像的左上角重疊而配置。
由於使用畫像檔案因此大小已經固定所以不需要指定右下角的座標。當想要在全畫面模式中使用時請準備與畫面大小相符的畫像。
* 簡便地變更視窗的顏色或是畫像
每當為了變更視窗的底色或是畫像時,就要打一長串的setwindow指令實在是很麻煩。並且一旦使用setwindow命令的話回想用的內文backlog就會被清理掉,而無法回到回想模式。因此為了這點而設計出能夠簡便地變更視窗底色和畫像的setwindow2命令。
* setwindow2命令
程式碼
setwindow2 #RGB code
setwindow2 “視窗畫像檔案名稱”
範例
setwindow2 #FFFFFF
setwindow2 “window2.bmp”
上面兩個例子,會各自表示為所指定的畫像和顏色。範例:
「
;mode800
*define
clickstr"!?。」",2
game
*start
bg "BG\093.JPG",1
click
setwindow 20,15,23,16,26,26,0,2,40,1,1,#bbbbbb,0,0,639,479
天譴寶寶說你好!
setwindow2 #000000
天譴寶寶說你好!
end
」