寫RPG,第一個會遇上的問題就是地圖
(咦,不是紙娃娃系統或劇本顯示與動畫嗎?)
嗯,那些也是問題,不過劇本顯示之前在文字型冒險遊戲有大致上處理過
雖然處理得不是很好用,但我想問題應該是相對小些
至於紙娃娃跟動畫等其它系統大致上處理好後再去煩惱吧!!
不過我還是覺得,寫RPG會遇到的第一個較大的問題就是地圖
因為地圖有蠻多種的
像RPG製作大師,三國志曹操傳(有三色銅雀結局的)採用的Tile-based,也就是格子式地圖
常見做法是用二維陣列存地圖內容(各格子對應到的圖檔)
那做法優點蠻多的,特別是處理障礙物,寶箱,劇情觸發點時會較好思考些
但我現階段是比較想採用大圖式的就是了!!
呃,什麼是大圖式啊?其實我也不清楚相關稱呼
但我想就是直接載入圖檔,而非一格一格的填相對應的圖檔
哪些遊戲採用大圖式老實說我也不確定(因為我也不知道那些遊戲怎麼做的)
但我想大圖式做得好的話效果會較接近天之痕吧
就看起來較沒一格一格的感覺(不過寶箱大概還是很難避免)
除了tile-based跟大圖式之外
還有許多同人遊戲會採用的,本質上也很接近tile-based但算融合的地圖
就行走的地方格子狀很明顯,但把美工花在非格子的背景上
嗯,若用說得不好想像,就直接看影片吧
嗯,這麼說來地圖好像也才三種嘛!!感覺也不是很多
呃,會說地圖多的原因是,採其中一種到後來再換別種應該會是很痛苦的事情
此外上述說的大多是2D地圖
這麼說不是說2D地圖不好,但若要做晝夜變化是沒有燈光可打的
(是可以利用混色然後再配上不錯的轉場效果!!像"recettear 道具屋的經營妙方"那樣)
至於做天氣效果(像下雨,風)的話我就不清楚了
只是基本上來說,做2D若要多些變化,大多得靠圖檔量的增加
而且不像3D模型較容易重複利用
因此做2D遊戲的逐漸變少了吧
不過目前我其實也不具備做3D遊戲的技術啦(不會快去學啊!!)
呀,等以後生活有著落時再看看吧!!
隱約覺得創作跟生活分開些,對自己身心較能承受
(這樣創作跟生活都爛爛的時候,就有滿好的理由可以解釋)
也許哪天想到就會去研究(反正現在2D也有些受挫)
不過等到真有成果出來大概要段時間
回正題
大圖式必然得處理地圖捲動問題
也就是角色移動時,地圖內容跟著變
麻煩的是角色移動有時地圖內容也沒變
那變與不變要怎麼做
其實從很久以前做出人物移動時就卡住想很久了
雖然那時圖書館有本書,好像是"從做中學-遊戲程式設計"其實有原始碼
但總之一直不太清楚怎麼寫就是了
不過這兩天總算解決了
接著要想辦法處理劇情觸發點或寶箱,障礙物等
也許要用邏輯上的tile或者說grid來處理吧
還沒想清楚要怎麼做
原理可以參考這篇(若註冊的話原始檔應該也能下載)
做法可以參考這篇(它用Unity做的)
兩篇都是對岸的文章
原理簡單來說是,在邊界時地圖不動,人物圖檔移動座標
在非邊界時,人物不動,地圖移動
(話說記錄的地平線小說有冊結語有提到這概念,
看樣子這概念可能對玩遊戲的來說還算普遍,
不過實作起來是另一回事)
實作起來時,這兩件事情其實是同段程式碼處理好的
唔,也許也可以用兩段程式碼來寫
不過一開始把那兩件事情分開來時,一直想不到要怎麼寫
好,大致上就這樣
這次作品僅處理地圖捲動(無障礙物),是由上次雷步遇敵戰鬥系統改過來的
我把遇敵條件改了下,所以不管怎麼移動都不會進入戰鬥
檔名:map_scrolling.html
程式看function draw_hp那段就好
(因為之前處理畫面重繪的寫在那就沿用下來了,名字等完善後再改吧)
更準確來說主要就↓這些
var cx,cy,hx,hy;
if(cx<=0) cx=0;
else if(cx+640>=1366) cx=1366-640;
if(cy<=0) cy=0;
else if(cy+480>=768) cy=768-480;
if(w<=0) w=0;
else if(w>=1366) w=1366;
if(h<=0) h=0;
else if(h>=768) h=768;
hx=w-cx;
hy=h-cy;
if(hx>=640-96) hx=640-96;
if(hy>=480-96) hy=480-96;
ctx.drawImage(background_image.image,cx,cy, canvas_element.width, canvas_element.height,0,0, canvas_element.width, canvas_element.height);
ctx.drawImage(cobra_image.image,96*step,96*direction,96,96,hx,hy,96,96);
地圖圖檔是1366*768
canvas(顯示地圖的)大小是640*480(過往檔案是600*480,我略做修改下來測地圖捲動)
cx=w-320+48
cy=h-240+48
可簡單看成
想法上是以人物為中心擷取大地圖中640*480的區塊
不過人物的圖檔座標是以左上角來計算(人物圖檔大小是96*96)
因此要正確以人物為中心的話,就需要補一半回來
若想要讓人物佔比較右邊才捲動地圖
X座標就要減比較多些
(因為等下的算式,X座標減越多,人物離左邊越遠)
重點在程式要有三組座標
第一組是人物在大地圖中的座標(w,h),在按下鍵盤時w,h值會更動
第二組是在螢幕中以人物為中心(這邊其實看個人)所擷取出的地圖座標(cx,cy)
第三組是在螢幕中的人物座標(hx,hy),但實際上這利用運算產生較省事
算式是:(w-cx,h-cy)
人物動,但地圖不動的情形只會發生在地圖邊界
而地圖邊界就是cx或cy值是固定的地方
因此用人物在地圖座標減掉螢幕中的地圖座標即可完成此效果
-96那邊是同樣是因為圖檔座標是以左上角計算,圖檔一格角色大小是96*96
若不減掉96,圖檔會跑出螢幕外
------------------------------------------
最後,關於tile-based的,網路上有看到個人實作出來
但canvas版的原始碼就不清楚有沒有提供了
創作內容
9/10,第一個遇上的問題及解法,html5地圖捲動
單機版網頁遊戲系列相關 (20)
