作者DKBO (DKBO)
看板Web_Design
標題[心得] 分享最近做的作品
時間Thu Aug 20 17:46:45 2015
作品連結 :
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://webptt.com/m.aspx?n=bbs/Web_Design/M.1440064009.A.DCA.html
1F：推 amazing2014: 我全部跑一遍了，做很棒! 08/20 18:23
2F：推 crossdunk: 猛猛der 08/20 19:06
3F：推 softseaweed: 好神啊XD 08/20 19:57
4F：推 pizzafan: 可建議也轉一份到《GameDesign》版 08/20 20:02
5F：推 vi000246: 好懷念的介面啊 08/20 20:30
6F：推 a926: 有好趣唷 :D 08/20 20:42
7F：推 sivid: 哇 XD 08/20 20:50
8F：推 clerkhsiao: 有神快拜 08/20 20:56
9F：→ DKBO: 大家過獎了。目前還在精進中。 08/20 23:23
※ 編輯: DKBO (180.217.222.36), 08/20/2015 23:37:32
10F：推 BamBam30: 哇～大師降臨啦～ 08/20 23:51
11F：→ MangoTW: 玩過RPG製作大師推！ 08/21 00:48
12F：→ MangoTW: 希望能實作出網頁版的RPG製作大師 08/21 00:49
13F：推 frank910138: 推 太厲害了.... 08/21 01:41
14F：推 sycc: haha好強 08/21 02:36
15F：推 shadowjohn: 非常強大 08/21 08:31
16F：推 shadowjohn: 不過我的電腦一直發生script讀取時間過長>_< 08/21 08:33
17F：推 Kenqr: 太猛了 08/21 10:03
18F：→ DKBO: 過獎了!其實並不是小弟厲害，是 JSX 蠻好運用的 08/21 10:23
※ 編輯: DKBO (1.174.0.186), 08/21/2015 13:34:25
19F：→ DKBO: 剛以為是 JSON 問題 請問@shadowjohn 是載入時還是行走時呢 08/21 16:41
20F：推 iamnodoubt: 真厲害 08/22 01:44
※ 編輯: DKBO (180.217.206.40), 08/22/2015 10:54:48
21F：推 shadowjohn: script讀取時間過長是發生在進屋子時，玩了二、三次 08/22 21:14
22F：→ shadowjohn: 都有發生~>_< 08/22 21:14
23F：推 dream1124: 推 08/23 00:53
24F：推 Fantasywind: 真懷念當初走這行第一個 Project 就是想做 RPG Maker 08/23 04:40
25F：→ Fantasywind: Online, Viewer on multi-platform 08/23 04:41
26F：→ Fantasywind: 最後一直沒有時間完成他，如果有人有興趣不如開個專 08/23 04:41
27F：→ Fantasywind: 案來完成他，我可以 Join 但要 Lead 可能無法 08/23 04:42
28F：→ Fantasywind: 現在 Canvas 成熟後效能跟之前完全比不上阿XD 08/23 04:43
29F：推 crossdunk: XDD 樓上講的好像FB某個一句話惹惱系列的文章 08/23 17:54
30F：推 befdawn: safari 人物好像沒辦法動耶（？） 08/24 00:30
31F：→ kurtisgod: 強大!!!! 08/24 01:32
32F：推 ho83leo: 理念給推 08/24 08:47
33F：推 tomin: Cool 08/24 14:07
※ 編輯: DKBO (111.254.119.222), 08/24/2015 16:54:51
34F：推 gamecubemomo: 好棒！小弟最近也在做一個類似的東西！ 08/26 01:25
35F：→ gamecubemomo: 用的是 React + Phaser，或許有機會可以交流一下XD 08/26 01:26
36F：→ DKBO: 謝謝提供資訊 ~ 增長見識了 08/26 09:35
37F：→ Maisie6: 好厲害!!! 08/26 11:01
※ 編輯: DKBO (180.217.212.185), 09/02/2015 21:29:07