跳到主要內容

實作迷你薩爾達傳說

夢見島的地圖是由160乘128個Tile所組成,每個畫面大小是10乘8個Tile,也就是說完整的地圖是由16乘16共256個畫面組成。每次當林克移動到畫面邊緣的時候,整個畫面會往林克前進的方向捲動,一次捲動一整個畫面。

先以編輯器編輯好遊戲資源。使用地圖TileSet編輯好地圖資源,並開一個新關卡資源加地圖加入。然後再加入幾個簡單的精靈資源,主要是林克的4個行走方向,還有幾朵不同顏色的花。接著就可以開始用Lua來實作Gameplay。

+ + +

因為這是個簡單的Demo,主要要實作的功能是要可以在地圖上行走,也要可以作簡單的碰撞,當走到地圖邊緣的時候要能捲動到下一張地圖。

為了簡單起見,我把它劃分為二個類別:Game及Link。Game類別只負責作地圖捲動的工作。而Link類別則負責處理使用方向鍵輸入在地圖上行走,行走的時候作碰撞簡單,以及走到地圖邊緣時觸發事件讓Game類別作地圖捲動。

另外在也圖上常常可以見到一些會動的小花,假如要在關卡編輯器裡面,一個一個用精靈物件的方式種上去太費時費力了。所以需要使用動態生成的方式,在每次地圖捲動後把可見範圍內的小花動態產生出來,同時釋放捲出畫面範圍外的小花物件。

所以最後整個關卡裡只需放二個物件,一個是地圖,一個是林克(在靠畫面中央小屋前的小傢伙)。然後在關卡的Script欄位填上Game,林克的Script欄位填上Link。而視窗的大小設定為一張小地圖的大小,160x128。

+ + +

在關卡上的每一個物件都有個位置,可以透過Good.GetPos和Good.SetPos來作存取。而關卡本身也有位置屬性,一樣可以透過Good.GetPos和Good.SetPos來作存取。

改變關卡的位置,可以製作出地圖捲動的效果。當然也可以去改變地圖物件的位置來作出捲動效果,但是使用這個方法的話,所有相對於地圖的物件,像是林克或地圖上的小花也都要一起移動。雖然可以把這件物件的父親都設成地圖,這樣只要移動地圖就好,但還是比不上移動關卡來的直覺容易,畢盡關卡是所有物件的最上層父物件,只要移動它所有底下的物件都可以全跟著動起來。
Game.OnCreate = function(param)
local idLvl = param._id

scrolling = false
Good.SetPos(idLvl, 320, 1280)
KillAndDynaGenObj(idLvl)
end
Game初始化的時候,我們先把關卡的位置捲到小屋前林克所在的小地圖位置,同時初始化用來控制是否作地圖捲動的全域變數scrolling。接著再呼叫函式KillAndDynaGenObj來動態產生小花物件。

KillAndDynaGenObj函式首先會把除了林克以外的所有精靈物件刪除。接著檢查目前地圖可見範圍內的每一塊Tile,假如是小花Tile的話,則在那個地置動態的產生一個小花物件出來(全部共有4種不同顏色的小花)。最後一步則是再把林克物件加入關卡裡,這個動作是重新調整物件的次序,確保林克會畫在其它物件上面。
function KillAndDynaGenObj(idLvl)
local nc = Good.GetChildCount(idLvl)
for i = nc,0,-1 do
local idChild = Good.GetChild(idLvl, i)
if (Good.TYPES_OBJ == Good.GetType(idChild) and 14 ~= idChild) then
Good.KillObj(idChild)
end
end

local x,y = Good.GetPos(idLvl)
for i = 0,9 do
for j = 0,7 do
local lx,ly = x + 16 * i, y + 16 * j
local tile = Resource.GetTileByPos(1, lx, ly)
...(略)
end
end

Good.AddChild(idLvl, 14)
end
OnStep則檢查scrolling全域變數是否設立來執行捲動,捲動的方向則檢查另一全域變數dir。捲動的時候依據水平或垂直方向決定速度,再配合offset全域變數來控制捲動量。當結束捲動時,再執行一次KillAndDynaGenObj函式重新產生小花物件。

Game.OnStep = function(param)
local idLvl = param._id

if (not scrolling) then
return
end

local x,y = Good.GetPos(idLvl)
local spd1, spd2 = 5, 4
if (Input.KEYS_LEFT == dir) then
x = x - spd1
offset = offset + spd1
elseif ...
....(略)
end
Good.SetPos(idLvl, x, y)

if (Input.KEYS_LEFT == dir or Input.KEYS_RIGHT == dir) then
if (160 <= offset) then
scrolling = false
end
elseif (Input.KEYS_DOWN == dir or Input.KEYS_UP == dir) then
if (128 <= offset) then
scrolling = false
end
end
if (not scrolling) then
KillAndDynaGenObj(idLvl)
end
end
稍微注意一下,dir的值沒有另外再定義而是直接套用方向鍵的定義。

+ + +

林克的處理主要分成二個部份。一個是當地圖捲動時林克也要隨著地圖捲動移動位置,如下。
Link.OnStep = function(param)
local id = param._id
local x,y = Good.GetPos(id)

if (scrolling) then
local spd1, spd2 = 0.5, 0.5
if (Input.KEYS_LEFT == dir) then
x = x - spd1
elseif ...
....(略)
end
Good.SetPos(id, x, y)
return
end
end
當地圖捲動時林克也需要跟著修正位置。


如上圖所示,當林克走到地圖左側邊緣,地圖往左捲動。假如完全不對林克作位置修正的話,地圖捲過去後,林克一樣會站在地圖左側邊緣。這不合理,因為以這張地圖的角度來說,林克是從右側進入的,應讓要站在右側才對。
Link.OnStep = function(param)
....(略)
local ox,oy = x,y
local spr
local spd = 0.8

if (Input.IsKeyDown(Input.KEYS_LEFT)) then
x = x - spd
spr = 10
elseif (Input.IsKeyDown(Input.KEYS_RIGHT)) then
x = x + spd
spr = 13
end
if (Input.IsKeyDown(Input.KEYS_DOWN)) then
y = y + spd
spr = 11
elseif (Input.IsKeyDown(Input.KEYS_UP)) then
y = y - spd
spr = 12
end

if (ox == x and oy == y) then
return
end

Good.SetSpriteId(id, spr)
end
接著檢查按下的方向鍵來計算移動後的位置,假如沒有任何位移(包含沒有按下方向鍵),則不作任何事,否則依據按下的方向鍵改變林克的面向。
Link.OnStep = function(param)
....(略)
local cx,cy = x + 8, y + 10
if (Input.IsKeyDown(Input.KEYS_LEFT)) then
cx = x;
elseif (Input.IsKeyDown(Input.KEYS_RIGHT)) then
cx = x + 16
end
if (Input.IsKeyDown(Input.KEYS_DOWN)) then
cy = y + 16
end
if (not IsMoveable(cx, cy)) then
return
end
end
剛才是依據移動下方計算下一個位置,現在再把下一個位置加上一個Tile的大小同時再一次依據移動方向作一次修正(因為原點在物件左上角),然後再以函式IsMoveable判定是否可走來作最後是否要移動林克的決定。
MoveableTile = {121,122,....(略)}

function IsMoveable(x, y)
local tile = Resource.GetTileByPos(1, x, y)
for i,v in ipairs(MoveableTile) do
if (tile == v) then
return true
end
end
return false
end
IsMoveable原理很簡單,根據指定位置取出地圖Tile,並且和MoveableTile裡所列出的所有可走的Tile作比較作是否可走判定。
Link.OnStep = function(param)
....(略)
local idLvl = Good.GetParent(id)
local px,py = Good.GetPos(idLvl)

dir = -1
if (px > x) then
dir = Input.KEYS_LEFT
x = x - 0.5
elseif (px + 160 < x + 16) then
dir = Input.KEYS_RIGHT
x = x + 0.5
end
if (py > y) then
dir = Input.KEYS_UP
y = y - 0.5
elseif (py + 128 < y + 16) then
dir = Input.KEYS_DOWN
y = y + 0.5
end

if (-1 ~= dir) then
offset = 0
scrolling = true
end

Good.SetPos(id, x, y)
end
最後的步驟先檢查林克是否走到地圖邊緣,假如是的話設定scrolling全域變數從下一個step開始作地圖捲動,最後一行則是把林克移動到下一個位置。

....(完)

留言

  1. 有沒有 linux 版本, 支援 DirectFB ? 或許可以介紹幾個朋友給你, 看能不能 porting 到中華電信 MOD 的 STB 上.

    Ramon

    回覆刪除
  2. 這是設計成跨平台, 在Windows和iPhone上有Player可以執行, PSP上也有試Port過, 可以執行使用色塊但不包含貼圖的Sample

    回覆刪除

張貼留言

這個網誌中的熱門文章

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

更多可在網頁玩的 單人撲克牌遊戲 ; 新增一個簡單的單人撲克牌遊戲: 蒙地卡羅 ,簡單介紹一下玩法。 下載 事先排列好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...