2004/2/14

Chasm


2d冒險遊戲,主角是一隻小鴨嘴獸,故事好像是原本用來水力發電的水道橋壞了,聰明的小鴨嘴獸受命前往修理,但在無法修理的情況下,想辦法引用其他水道的水源…
(以上故事是我自己猜的…)

這個作品我較欣賞它的關卡設計,有恰當的難度,需動點腦筋才能過關。
另外音樂也十分優美。
玩玩看吧。
Chasm

*提示
這個作品最難的部份應該是爬水管那段
(如果不想破壞樂趣就先別往下看)

2004/2/11

Buggy Woogie


高擬真的flash 3d賽車,也許是因為全用擬真的點陣圖來做,效果大大提昇。
這裏開放的是練習版,正式版好像要付費(網頁說明看不懂-_-")

Buggy Woogie

2004/2/9

GDD-第七章 Tile based world

*GDD是指MacromediaFlashMXGameDesignDemystified這本書

在此分享我的讀書心得,並歡迎討論與指教。


(放兩張圖,讓版面不要太難看)

第七章 Tiles-based worlds
本節筆記範例檔下載

前言:
本章節的重點在講述建構一個tiles-based world的入門技術。

tiles-based world是很常見的一種遊戲場景製作方式。

我想其原理大概就像在地板上貼瓷磚一般,設計者可設定不同屬性的磚塊,依需求貼入適當的位置。例如某處想設計成一片海,就用"海磚"貼滿它,某處需設計成草原,就用"草磚"鋪上去。
這種方式有著一些優點:
例如地圖就不用是一大張的圖檔,取而代之的是一串記錄每個位置需貼什麼磚的資料,遊戲size便可以降低很多。

個人認為Tiles-based只是一種場景建構技術,並非只能用於某種類型的game,例如有人用來做RPG,也有人用來做捲軸動作,高興就好。

像Pac-Man小精靈那種就是了,或是早期紅白機上的坦克大決戰,亦或是像早期日式2D RPG也有。

另一方面,Tiles-based也不限定只能弄成像俯瞰視角般,平平的2d畫面,你也可以弄出一點立體感,以45度角(或隨便幾度)的方式來建構場景,像Diablo、Utiltima7等等。即使他們實質上還是2d的技術,但總比上述那種全平面會多一些些立體感。

我想前言大概就這樣了吧。


第一節 鋪一些磚出來吧(俗擱有力的標題!)
範例檔:grid.fla

我們先來弄一個10*10(tile)的地圖看看。

但要鋪磚之前,得先有磚吧,隨便畫一個正方型,取個名,並設好linkage id(我是設square)

再來怎麼鋪呢?絕不可能是每個tile各別去設它的x、y位置,因為這樣要寫100次。

所以我們用兩層迴圈來做,我在第一格frame?寫入:



第一層迴圈算是換行,第二層迴圈才是畫格子,每當二號圈畫滿10格,一號圈就換行,如此十行,便組成10*10的地圖

第二節 建立tile資料
檔:grid2.fla

上一節只是視覺上出現了地圖,但在遊戲中,我們還需要儲存一些資訊在裏面,例如它是海或是草?能走的或是不能走的?

就依照上一節來改吧,當我們每畫出一個tile時,順便建一個obj,並記錄他的一些資料,如x、y、名稱、實體mc、類型

第一格frame的action script如下:

後面我順便做了個小測試,測一下是否能順利取得資料。


第三節 取得標座
檔:grid_getXY.fla

這?將會發現tiles-based world(TBW)的第一項好處(書?這樣說的)
如果現在放一個角色在你的10*10地圖上,你要怎麼知道他的位置呢?如何得知他位在哪一塊tile上呢?

在TBW裏,我們可以不需知道角色確切的xy值(指一般情況),反倒是角色處在哪一塊tile上會比較重要。
比較笨是方法是,做100次的hitTest,看角色跟那一塊tile碰到了。這也是一種方法啦,但電腦跑起來會比較慢…

這裏教的一招是用x y值,配合tiles的間距,做兩次簡單的除法運算就可以了。

試想目前角色的真實x座標值為32,而每塊tile的寬度為10的話,那麼角色不就是在左邊數來第四塊tile上。(以32/10並無條件進位)
同理用於y軸座標,亦可得y的tile編號。

先從較簡單的開始練習,用游標去點地圖,並判斷那一塊tile被點到了。
我們先將原來的tile原型做點變化,做成八個frame,每個frame畫些不同的圖案,並在第一格設stop();

接下來在主場景的script上加一個tileChange的函式,在滑鼠按下且游標位於地圖上時,呼叫它。





第四節 放個角色進去
檔:gird_move.fla

延用上一節的檔案
先做一個角色吧,我是做了一個pac-man,在最簡單的TBW中,若角色的長寬等於或小於一個單位tile的話,寫起來會比較簡單。

在程式裏設一個man的物件,並給予一些屬性:x、y值、半徑(因為pac-man是圓形物體)、移動速度…等等

接著做一個以方向鍵控制移動的function,用簡單的
if(Key.isDown(Key.UP)){man._y-=man.speed}
類似這樣的

做到這裏沒問題的話,把上面man._y-=man.speed拿掉,換成呼叫另一個函式
我是設名為manMove()函式

這裏開始才是重點,在這個manMove()函式裏,我們要先算出角色下一步的x、y值,再用上一節教的方式,判斷下一步他是否能走得過去。記得我在上一節中將tile?設了8個frame,在此我做了一下調整,我把山、火、海…等不能行走的tile圖,放到第5個frame後,而草地、沙漠…等能走的區域則放在第4格以前的frame,而frame的編號亦等同為type的值,所以當計算出下一步位置所處之tile,其type若小於5,則能正常移動,反之則不能前進。

寫成script就是:



有點麻煩的是,同樣的計算式要寫四遍,因為上、下、左、右的計算式不一樣,所以要各別判斷。
(照理說應該有比較簡短的計算式才對,但一時沒想到…)

此範例完成後,則可自行編輯場景,再以方向鍵控制角色,檢查角色行動範圍是否依tile屬性而改變。

這樣就可以達到類似碰撞偵測的效果,但?面卻完全沒有用到傳統的碰撞偵測語法。^_^


第五節 利用xml建立地圖
檔:TBW_xml_edit.fal & TBW_xml_play.fla

本節教的是利用外部檔建立地圖,這裏以xml為例。
以外部檔建立地圖是相當便利的方式,
因為如果你的game有100關,每一關都各有一張地圖,
你需要讓使用者一次就載入100關的資料嗎?
應該是看玩哪一關就載入那一關地圖會比較好吧。
而且讓主程式與關卡資料分開,也能得到較好的管理與擴充能力。

這裏我弄兩個檔,一個是編輯器,一個是執行程式

#編輯器部份

這?我想以第三節的檔案來改,然後加一個產生xml碼的功能就可以了。
先新增一個文字區及按鈕"建立"
當按下"建立"時,便呼叫"產生xml碼"函式,並將產生結果貼在文字區當中
"產生xml碼"函式如下



這裏能將產生出來的xml碼貼在右邊的文字方塊上,將這些碼copy下來,貼到NotePad或任何文字編輯軟體,並存成.xml檔。
(如果想用flash直接就生出文字檔來,那又是另一門課了…這裏就先這樣吧…)



用第四節的檔案來改,先將點擊並改變地圖的功能拿掉,
再做一個簡單的檔名輸入介面。
當你能成功地讀取xml檔案後,

我個人習慣是先將xml轉成array啦,所以在原有的建地圖函式加了幾行



完成後,你就可以用執行程式,抓取你編輯出來的xml檔,並測驗成果。

*關於flash與xml的連結,可說又是另一門課了,請參閱其他書藉、文章


大致重點就這樣了。

後記心得&本章重點整理

.Tiles可重複使用,且可用於許多種遊戲上

.tile讓遊戲場景可程式化

.在TBW裏運用一些數學技巧,可降低電腦執行資源的耗費

.每個Tile是一個mc

.以一個obj專門存放所有tile的資料,能使資料更方便存取

.利用外部檔存放TBW的地圖資訊

.利用巢狀迴圈來建地圖

.針對角色所處的區域上存在的物件做角色與物件間的碰撞偵測,不用讓角色與地圖上所有物件做偵測。

心得:讀完這章後,對tbw在觀念上及建構技巧上有了更多的瞭解。

舊的迴響
看了很有趣
所以也看了那一章
後來發現這樣控制比較方便
不用寫4個switch case()
就是用x.y代表上下左右(1 ,0)=右(-1 ,0)=左

但是有個地方有點問題
就是球走在線上的的時候
會跑到tile裡面..
可能還要限制
每走一次都是剛好在tile中間


由 阿超 於 2004年02月22日 上午01時28分發表
==================================================


讚讚,用1,-1代表方向果然方便很多

關於走在線上會卡住的問題,
目前的寫法是只判別前進方向的那一點,因此兩側很容易陷入tile,
後來我改成一次判斷上下左右四個點,就比較正常些了
(不過角落處還是會有一點陷入感,可能要增加到八方向偵測才行)

由 maso 於 2004年02月22日 上午08時00分發表

2004/2/1

Flash遊戲獎2003

日前Flashkit的討論區前,辦了一個小活動
Flashkit members's choice Game AWARDS 2003!

針對網路上的flash game做提名及票選。
其實真的是滿小的活動,只由Flashkit的會員在論壇?提個名,投投票,前後大概十幾天,總票數也大約幾十票而已。
不過也許將來能以此為雛型,發展成正式的活動,滿樂見其成的。

廢話不多說,還是來作品觀摩比較重要…

活動公告 | 結果公佈