[心得] 分享最近做的作品

[DKBO (DKBO)]

作品連結 :
http://dkbo.github.io

場景編輯器連結 :
http://dkbo.github.io/RPG-Map-Maker

追加線上互動版 :
http://dkbo-rpg-online.herokuapp.com/

透過Socket.io 方式，只是..沒有做任何優化，伺服器可能會殘留人物。

聊天框也是陽春的放上去而已。別傷到眼睛，手機沒 RWD 聊天框。

------------------------------------------------------------------
初始在 CodePen 試作的

遊戲作品 :
http://codepen.io/dkbo/pen/vOvWox

地圖編輯器 :
http://codepen.io/dkbo/pen/eNoKem

最近想練習寫 ReactJS 主題以 RPG 製作大師風格呈現，邊學邊寫的途中，

也寫了大概兩個禮拜。在製作過程中遇到最棘手的問題就是直接 Coding

JSON 畫出地圖，之後做了一個簡易的地圖編輯器。

地圖編輯器

熱鍵

(地圖區)

1. w、s、a、d 及方向鍵 控制地圖位移動

2. g 地圖格線切換

3. f 前層物件視圖 顯示/隱藏

4. b 後層物件視圖 顯示/隱藏

5. 滑鼠左鍵 畫物件至後層

6. 滑鼠右鍵 畫物件至前層

7. Alt + c 清除地圖及碰撞區域 ## 隱藏時將無法清除

8. Alt + s 儲存地圖

9. Alt + l 讀取地圖紀錄

10.Alt + 滑鼠左鍵   碰撞區域設定 ## 在拼圖區塊未選取時

(圖庫區)

1.滑鼠滾輪 圖庫上下位移

2.滑鼠左鍵 選取要繪製的圖庫區塊

3.滑鼠右鍵 取消選取

(上方文字區塊)

左方 為 物件存取為 JSON

右方 為讀取 JSON 並繪製

簡單來說就是繪製好的地圖就要保存好左方的Code

不斷的實作累積經驗，前端真的蠻有趣的。

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 1.174.0.186
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1440064009.A.DCA.html
推 amazing2014: 我全部跑一遍了，做很棒!
推 crossdunk: 猛猛der
推 softseaweed: 好神啊XD
推 pizzafan: 可建議也轉一份到《GameDesign》版
推 vi000246: 好懷念的介面啊
推 a926: 有好趣唷 :D
推 sivid: 哇 XD
推 clerkhsiao: 有神快拜
→ DKBO: 大家過獎了。目前還在精進中。
※ 編輯: DKBO (180.217.222.36), 08/20/2015 23:37:32
推 BamBam30: 哇～大師降臨啦～
→ MangoTW: 玩過RPG製作大師推！
→ MangoTW: 希望能實作出網頁版的RPG製作大師
推 frank910138: 推  太厲害了....
推 sycc: haha好強
推 shadowjohn: 非常強大
推 shadowjohn: 不過我的電腦一直發生script讀取時間過長>_<
推 Kenqr: 太猛了
→ DKBO: 過獎了!其實並不是小弟厲害，是 JSX 蠻好運用的
※ 編輯: DKBO (1.174.0.186), 08/21/2015 13:34:25
→ DKBO: 剛以為是 JSON 問題 請問@shadowjohn 是載入時還是行走時呢
推 iamnodoubt: 真厲害
※ 編輯: DKBO (180.217.206.40), 08/22/2015 10:54:48
推 shadowjohn: script讀取時間過長是發生在進屋子時，玩了二、三次
→ shadowjohn: 都有發生~>_<
推 dream1124: 推
推 Fantasywind: 真懷念當初走這行第一個 Project 就是想做 RPG Maker
→ Fantasywind: Online, Viewer on multi-platform
→ Fantasywind: 最後一直沒有時間完成他，如果有人有興趣不如開個專
→ Fantasywind: 案來完成他，我可以 Join 但要 Lead 可能無法
→ Fantasywind: 現在 Canvas 成熟後效能跟之前完全比不上阿XD
推 crossdunk: XDD 樓上講的好像FB某個一句話惹惱系列的文章
推 befdawn: safari 人物好像沒辦法動耶（？）
→ kurtisgod: 強大!!!!
推 ho83leo: 理念給推
推 tomin: Cool
※ 編輯: DKBO (111.254.119.222), 08/24/2015 16:54:51
推 gamecubemomo: 好棒！小弟最近也在做一個類似的東西！
→ gamecubemomo: 用的是 React + Phaser，或許有機會可以交流一下XD
→ DKBO: 謝謝提供資訊 ~ 增長見識了
→ Maisie6: 好厲害!!!
※ 編輯: DKBO (180.217.212.185), 09/02/2015 21:29:07