作者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/cn.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