跳到主要內容

Stge基礎教學

這篇文章作為stge script的入門教學,會告訴你如何撰寫stge script來描述簡單的彈幕效果並整合到good裡,透過good的顯示功能呈現到畫面上。要補充說明的是,雖然stge script最初是為了射擊遊戲而設計的,但因為它也有基本足夠的彈性,所以也能夠作為粒子效果來應用。

;

1, 首先打開good Game Editor,按下Ctrl+S儲存空白專案,命名為StgeTest1.txt。
2, 接著在工具列上點擊新增空白關卡(New Level),或點擊選單Project->New Level...加入空白關卡。
3, 在新關卡(level1)的屬性檢視器上的ClearColor,開啟顏色選擇對話盒並設定成黑色。
4, 在工具列上點擊新增空白腳本(New Script),或點擊選單Project->New Script...加入空白腳本,檔案名稱填StgeTest1.lua。
5, 在資源樹上點擊level1回到空白關卡1的屬性檢視器,在Script欄位上填入Level。
6, 按下Ctrl+S儲存檔案。

現在已建立基本的資源,接下來全部使用script來建立我們要的功能。首先撰寫一些good script作出基本框架。
Level= {}

Level.OnCreate = function(param)
  Stge.RunScript('StgeTest1')
end

Level.OnNewParticle = function(param, particle)
  local obj = Good.GenObj(-1, -1)
  Good.SetDim(obj, 0,0, 3, 3)
  Good.SetBgColor(obj, 0xffff0000)
  Stge.BindParticle(particle, obj)
end

Level.OnKillParticle = function(param, particle)
  Good.KillObj(Stge.GetParticleBind(particle))
end


如上,我們有個叫作Level的table,並加入了三個空白的function,這三個function是good預先定義的event。OnCreate是當物件建立時會被呼叫,並且只會被呼叫一次,我們可以在這個event裡作些初始化相關工作。如上面的例子所示,我們在OnCreate事件中起動了一個叫作StgeTest1的stge script。

OnNewParticle和OnKillParticl才是和Stge有關的event。當有個新的粒子被建立出來時會觸發此事件,我們可以利用這個事件把stge粒子和good物件綁定(Bind),讓stge粒子來控制畫面上顯示的good物件。相反的當粒子要釋放時會觸發OnKillParticle,這時我們再把產生出來的good物件也一起釋放掉。

在上面的例子中,我們在OnNewParticle事件發生時,同時建立一個大小是8x8的紅色色塊,並把這個物件和粒子作綁定。而在OnKillParticle事件觸發時,再透過GetParticleBind取得所綁定的物件並把它一起Kill掉。

7, 接著在工具列上點擊新增空白stge腳本(New Particle),或點擊選單Project->New Particle...加入空白stge腳本,檔案名稱填StgeTest1.stge,接著在StgeTest1.stge文建內寫下如下的script。
script StgeTest1
  fire()
end


儲檔後可以按下工具列上的Play或F5執行看看,應該會顯示一個全黑的畫面,而畫面正中央有個紅色方塊。我們已發射了一枚粒子出來,並如我們所設定的和一個紅色色塊綁定,只不過它還不會動!

現在按下ESC退出程式,現在我們要加點程式讓粒子動起來。

;

首先要先說明一下需要注意的地方。good的座標系原點是在左上角,而stge的座標系原點在正中央,這就是為什麼這個粒子會在畫面正中央。同時good座標系和一般的銀幕座標系一樣往右往下是正的,而stge座標系是往右往上是正的,和一般我們在學習數學時的笛卡兒作標系定義相同。

;

stge script都是以一個script關鍵字開始,接著一個名稱,最後再以一個end關鍵字結尾,和lua的function有點類似。你可以寫很多個script,然後再用Stge.RunScript以script名稱來個別執行它。

fire指令是用來發射一枚粒子的。因為我們還沒有指定速度給它,預設速度是0,所以它才維持在畫面正中不動。現在我們要把它加上速度,同時也給它一個方向。
script StgeTest1
  direction(0)
  speed(120)
  fire()
end


direction是用來設定方向的,單位是度。0度是x軸的正方向也就是正右,90度是正下,所以角度是順時針方向。有效值是0-360間,比360大或比0小時會自動調整。方向的預設值也是0,所以direction(0)也可以省略不寫。speed則是用來設定移動速度,單位是每秒移動的pixel量。

現在再執行程式,可以看到這個粒子往右動了起來了!

;

如果要發射二枚粒子,只要呼叫二次fire指令就行了,如下所示。
script StgeTest1
  direction(0)
  speed(120)
  fire()
  direction(45)
  fire()
end


這次同時發射了二枚粒子,一個朝0度方向飛去,另一個朝45度方向飛去。

在上面的例子裡注意到,我在第二次射擊時沒有再以speed設定一次速度,因為只要設定過的方向或速度,在下次改變時會一直保留狀態,所以我們不必每次都作設定。

;

現在有個問題了,如果要一定射擊多發子彈,那就要呼叫很多次fire才行,這不是一個好辨法。所以我們需要迴圈,如下所示。
script StgeTest1
  speed(120)
  repeat(12)
    direction(30, add)
    fire()
  end
end


執行上面的範例,可以看到朝四面八方發射了一個有12個粒子的環。

repeat就是我們使用的迴圈指令,它最後需要以一個end關鍵字作結束。在這個區塊裡的指令,會重覆執行repeat所指定的數量。而direction的add參數則是指定說,以上一次的設定值,累加30度的意思,所以每一次執行會以間隔30度的角度發射一枚粒子出去。

接下來我們對程式作一點點如下的小修改,再執行看看。
script StgeTest1
  speed(120)
  repeat(-1)
    direction(30, add)
    fire()
    sleep(0.1)
 end
end


我們可以看到畫面上,不斷的以螺旋的方式發射出粒子。

把repeat的執行數量改成-1,就表示為無窮迴圈的意思,所以它才會不停的發射粒子。而我們在fire之後插入了一條sleep指令,這是用來暫停執行的指令,暫停的時間我們指定為0.1秒。所以執行結果會變成,每次間隔0.1秒會射擊一枚粒子,並一直不斷的重覆這個動作直到結束。

;

接著我們要來製作子母彈,程式改成如下。
script StgeTest1
  speed(120)
  repeat(-1)
    direction(30, add)
    fire(sub1)
    sleep(0.1)
 end
end

script sub1
  sleep(rand(2,4))
  speed(120)
  repeat(10)
    direction(36, add)
    fire()
  end
end


注意我們在StgeTest1裡的fire指令指定了一個叫sub1的參數,sub1又是另一個script,這表示說我們發射出來的粒子會和sub1綁定,由sub1來控制。而因為sub1又是另一個script,因此StgeTest1能作的事sub1也能作到,也就是說被發射出來粒子還能夠發射粒子!

sub1的執行的動作比較特別的是一開始的sleep指令,我給它一個rand(2,4)參數,透過rand指令我可以得到一個2-4間的亂數,這樣就能作出一些變化。rand指令除了有rand(a,b)的形式外,也還能用rand()產生0-1間的亂數,或rand(a)產生0-a間的亂數。

sub1暫停一小段時間後,會炸開一個環。同時最後一條clear指令會把自己給刪除,這樣畫面上就不會那麼礙眼。

;

底下要介紹的是userdata指令,讓我們可以傳遞一些資料給good,讓good根據這些資料產生不同的變化。
script StgeTest1
  speed(120)
  repeat(-1)
    direction(30, add)
    fire(sub1)
    sleep(0.1)
 end
end

script sub1
  sleep(rand(2,4))
  speed(120)
  userdata(1)
  repeat(10)
    direction(36, add)
    fire()
  end
end


如上,我們只在sub1裡加入一條userdata指令,參數傳入1。userdata最多可以傳遞4個參數,這裡我們只用了一個。那麼我們要怎麼應用?

現在我們回到StgeTest1.lua的Level.OnNewParticle事件,修改成如下程式碼。
Level.OnNewParticle = function(param, particle)
  local u1 = Stge.GetUserData(particle, 0)
  local obj = Good.GenObj(-1, -1)
  Good.SetDim(obj, 0,0, 8, 8)
  if (1 == u1) then
    Good.SetBgColor(obj, 0xff00ff00)
  else
    Good.SetBgColor(obj, 0xffff0000)
  end
  Stge.BindParticle(particle, obj)
end


如下所示,我們在一開始時透過Stge.GetUserData指令取得第一個參數(從0開始),接著我們在設定色塊顏色時用這個參數來決定要用什麼顏色,在此例中,我們檢查如果是1就用綠色,否則就用紅色。所以執行結果,我們可以看到炸開的環都是綠色子彈!在實際應用上,我們可以自行利用這4個參數來作更多的變化。例如定義成粒子類形、hp、屬性等等。

;

現在再回到StgeTest1.stge,我們再修改一下原來的程式,如下所示。
script StgeTest1
  speed(120)
  repeat(-1)
    direction(30, add)
    fire(sub1, rand(2,4), 1)
    sleep(0.1)
  end
end

script sub1
  sleep($1)
  speed(120)
  userdata($2)
  repeat(10)
    direction(36, add)
    fire()
  end
  clear()
end


在這個範例裡面,我們把sub1要暫停的時間,和要設定的userdata參數化了,由在StgeTest1的fire指令參數傳遞過來給sub1(fire指令總共可以傳遞最多4個參數)。在sub1裡,就以$1及$2來取用由上一層傳遞過來的參數。透過這個方法,增加了不少彈性,可以作出更多的變化來。

;

範例程式下載

留言

這個網誌中的熱門文章

單人撲克牌遊戲 - 蒙地卡羅

更多可在網頁玩的 單人撲克牌遊戲 ; 新增一個簡單的單人撲克牌遊戲: 蒙地卡羅 ,簡單介紹一下玩法。 下載 事先排列好5x5張牌。 每次移動一張可以配對的牌,並消除這對牌。在上下、左右及斜向相隣的二張牌,只要擁有同樣數字(不計花色),即可配對。 消除二張配對的牌後,剩餘的牌以往左往上的方式補滿空隙,接著在發新牌補滿後面的空格。 重覆步驟2~3,直到沒有牌可以配對及發完所有牌為止。 結果有二種。一個是勝利,成功的消除掉所有牌。另一個是Gameover沒有牌可以再作配對。

以lex/yacc實作算式計算機

前面我們透過 手工的方式 實作了一個簡易的算式計算機,現在我們要開始使用工具來作同樣的事,比較看看手工和使用工具有什麼不同的差別。首先要介紹的就是lex&yacc。 lex & yacc lex(Lexical Analyzar)及yacc(Yet Another Compiler Compiler)是用來輔助程式設計師製作語法剖析器的程式工具。lex的工作就是幫助我們將輸入的資料文字串流分解成一個個有意義的token,而yacc的工作就是幫我們分析這些token和我們定義的規則作匹配。下圖中所表示的是使用lex及yacc的一般工作流程。 首先看到yacc會讀入一個.y檔案,這裡.y檔案的內容就是我們使用類似(E)BNF語法定義的語法規則,yacc會分析這些語法規則後,幫我們產生可以用來解析這些規則的程式碼,而這個檔案一般名稱預設為y.tab.c,產生的程式碼裡面最重要的一個的函式叫作yyparse。 同yacc類似,lex也會讀入一個.l的檔案,這個檔案裡面定義的是如何從文字流裡解出token的規則,使用的方法是常規表示式(regular expression)。在圖的左側中間我們還可以看到有一個叫作y.tab.h的檔案從yacc產生出來並餵給lex作輸入,這個檔案是yacc根據在讀入的.y檔裡面所定義的token代號所產生出來的一個header,這樣yacc及lex產生出來的程式碼裡面就可以使用共通定義的代碼而不必各寫個的。lex分析過.l檔案後也會產生一個一般預設叫作lex.yy.c的原始碼檔案,裡頭最重要的一個函式叫作yylex。 最後,我們把yacc產生出來的y.tab.c還有lex產生出來的lex.yy.c,以及其它我們自己撰寫的原始碼檔案一起拿來編譯再作連結,最後產生出來的就是一個可以用來解析我們定義的語法的解析器工具。以上是整個lex及yacc的使用流程概觀。 常規表示式 在正式使用lex之前,我們首先來對常規表示法作一個基本的認識。常規表示法是一種用來表示字串樣式(pattern)的中繼語言,就好比前文所介紹的(E)BNF表示式一樣,都是用來描述其它語言的語言,只不過用途不太一樣罷了。 常規表示式使用一些中繼符號(meta-symbol)以及ASCII字元定義字串樣式,以下列出一些常規表示式所使用的符號。 . 表示除了換行字元...

窮人的 AI:自動漫畫分鏡切割

  ( 試試看 ) 在手機上看漫畫時,有一個體驗上的問題: 漫畫原本是「整頁設計」 手機最適合的是「一格一格往下滑」 與其強迫使用者縮放、拖曳、放大,更直覺的做法是: 直接把一頁漫畫自動切成多個分鏡,轉成瀑布流閱讀。 這篇文章分享一個不靠深度學習、完全在前端完成的實作方式: 使用 OpenCV.js 做分鏡偵測 輸出 rect list 再用 全畫面 Canvas 把每個分鏡當成一個「閱讀單位」 整個系統可以拆成三層: 漫畫圖片 ↓ 影像處理(找出 rects) ↓ 排序後的 rect list ↓ 全畫面 Canvas 逐格呈現(瀑布流) Step 1:灰階化 漫畫的資訊 90% 都在線條上,顏色反而是干擾。 cv.cvtColor(src, grayImage, cv.COLOR_RGBA2GRAY); 灰階化的好處: 降低維度 對邊緣偵測更穩定 對黑白漫畫特別有效 Step 2:邊緣偵測,抓出「分鏡的邊」 接下來用最經典、也最夠用的 Canny Edge Detection: cv.Canny(grayImage, edges, 50, 150); 在漫畫中,分鏡外框通常就是最明顯的邊界。 Step 3:形態學操作,把破碎邊框「補起來」 真實漫畫的線條並不完美,常常有斷線、陰影、留白。 所以要做一個很重要的步驟:膨脹(Dilation) const kernel = cv.Mat.ones( 5 , 5 , cv.CV_8U); cv.dilate(edges, dilatedEdges, kernel); 直覺理解就是: 把細線「抹粗一點」, 讓本來斷掉的邊界連成封閉區域。 這一步直接決定後面能不能成功抓到「一整格分鏡」。 Step 4:找輪廓,轉成矩形框(rect) 有了封閉區域之後,就可以找輪廓: cv.findContours( dilatedEdges, contours, hierarchy, cv.RETR_EXTERNAL, cv.CHAIN_APPROX_SIMPLE ); 每一個 contour,代表一個「可能的分鏡區塊」。 接著轉成矩形: const rect = cv.boundingRect(contour); rects.push([rect.x, rect.y, rect.widt...