不知道有多少人童年是在紅白機、世嘉游戲機下長大的，那些經(jīng)典的游戲如：魂斗羅，超級瑪麗，世嘉的戰(zhàn)斧、怒之鐵拳等等一系列的經(jīng)典。如今那些經(jīng)典的記憶，已經(jīng)隨著時間的沖刷慢慢減淡了。
今天就來看看如何使用phaser引擎制作一款rpg游戲。

演示

是不是滿滿的回憶(●'?'●)。
制作一款rpg游戲需要先制作一張地圖，看過前面的教程，相信大家都可以制作一款自己的地圖來。我這里在保存地圖的時候選擇的保存格式是json格式。
先上兩張場景的代碼，前面的教程里有很多介紹，這里只解釋一下沒有碰到過的功能。

加載資源場景

game.load.tilemap加載我們制作的地圖，因為我保存的時候選擇的格式是json格式，所以最后一個參數(shù)是Phaser.Tilemap.TILED_JSON，還有一種選項是Phaser.Tilemap.CSV表示地圖文件是csv格式的。前一個參數(shù)是json數(shù)據(jù)對象，我們這里沒有，設(shè)為null。

接下來在游戲場景中preload方法里做一些初始化操作。

初始化參數(shù)

這里初始化角色的跳躍、行走的參數(shù)。

現(xiàn)在添加地圖到場景中。

5.png

圖塊名稱

addTilesetImage第一個參數(shù)是我們制作地圖的時候選擇圖塊時給圖塊起的名稱，第二個參數(shù)是我們已經(jīng)加載的圖塊圖片。
setCollision和setCollisionBetween指定圖塊中哪些圖塊區(qū)域要做碰撞檢測，那它的參數(shù)是怎么回事呢？看下圖解釋。

小圖塊

• 如圖解釋，這個圖塊里的小圖塊是從左上角開始的，第一小塊的索引是1，如果不確定它的寬高，可以使用鼠標來點擊選中，選中后有高亮區(qū)域，就能確定小圖塊的區(qū)域。比如金幣的索引是11（數(shù)出來的）。
• 如果有圖片是幾塊拼起來的，比如煙囪，那么它所用到的幾個小圖塊都要做碰撞檢測。

圖塊

this.map.setCollisionBetween(14, 16);這幾個小圖塊如上圖所示，包括14和16。（這些數(shù)字我都是通過鼠標點擊查看區(qū)域數(shù)出來的）

現(xiàn)在添加主角。

添加主角

主角素材

• 主角圖片資源是個序列圖集。
• 前4張是朝左跑的動畫，后4張是朝右跑的動畫，中間那張是靜態(tài)狀態(tài)下的圖片。
• rpg游戲地圖會比較大，默認是主角走到哪就顯示哪部分，所以讓攝像機跟隨主角。

現(xiàn)在該到碰撞檢測和游戲輸入了。

碰撞檢測，游戲輸入

• this.map.setTileIndexCallback(11, this.getCoin, this)跟金幣做碰撞檢測，上面已經(jīng)解釋過了，金幣的索引是11。
• 這里為了方便，圖片上只制作了一個圖層，實際開發(fā)游戲的時候，注意不同用途的圖片要分開放到不同的圖層，比如邊界用的放一個圖層，不做碰撞檢測的用一個圖層，特殊用的再放一個圖層（比如金幣）。這里在主角跟金幣碰撞后只是把金幣隱藏了，并且取消了這個金幣的碰撞檢測，強制讓引擎重繪圖層后金幣就看不到了。

最后是update里對主角的一些控制。

主角控制

• 主角跟圖層做碰撞檢測，不然主角會掉出屏幕。
• 主角跳躍需要條件，不能在跳的過程中按下上方向鍵還能繼續(xù)跳，不合理。
• 左右跑動，這部分比較簡單，就是x軸上移動一個距離。
• 如果主角掉出屏幕，重置到初始位置。

上代碼：
碼云
github
到這里，rpg游戲就完成了，想象力豐富的你，會開發(fā)一款什么樣的rpg游戲呢？歡迎交流討論。