drawcanvas：快速展现html5游戏场景

前言最近使用phaser游戏框架开发了一款html5小游戏，不得不说，使用框架确实能够加快开发效率。在一个小小的<canvas>中，就可以展现出精彩的游戏世界并添加互动效果。游戏比较简单，没什么好说的。然而令人头疼的地方在于对游戏界面的布局上，耗费了大量的时间与精力。因为图片是phaser框架绘制到<canvas>上的，在对它进行布局的时候，无法像开发web页面那样，在chrome的开发者工具中进行位置的实时编辑与展现。每次都要自己估计大概的值，写到代码中，然后刷新页面，查看效果。如果效果不佳，还是要重复上述步骤，时间和精力就这样被一点点的被消磨殆尽了。于是自己花了点时间开发了drawcanvas这个小工具。可以直接拖拽精灵图片到画布上，并通过鼠标的拖动改变图片位置以及滚轮的滚动来控制图片旋转角度。场景中的元素层次是由拖入的先后来决定的，先拖进画布中的元素位于场景的最深层（如背景等）。当我们用鼠标更改图片的位置以及旋转角度时，我们可以实时观测到相关值的变化。那么在新的项目开发中，根据设计的效果图，可以首先在这个工具中将UI元素布局好（工具中场景的大小是640x960，很多设计图都是用这个尺寸作为基准），得到其位置以及旋转信息。一次性写入代码中生成展示界面，来提升工作效率，将更多的心思放在游戏玩法的实现及优化上面。## 相关技术* electron（支持使用web技术开发桌面应用的平台，本身内置了nodejs与webkit浏览器引擎）* phaser（游戏框架，提供图片相对于<canvas>的坐标信息以及处理鼠标的输入）* zepto（方便易用的DOM元素处理库，因为drawcanvas工具的界面是用html5+css3开发的，界面响应及信息展示用到了它）## 如何使用#### 执行程序使用下载后解压，双击程序运行。直接将图片拖入工具的画布中（注意先后次序），然后用鼠标操作图标，在右侧观测相关信息。#### 源码使用1. 安装electron：npm install electron-prebuilt -g2. 克隆仓库：git clone https://github.com/chunqiuyiyu/learn-javascript.git3. 切换到工具目录： cd drawcanvas/4. 运行工具：electron .## 界面展示![drawcanvas.png][1]## 链接* [源码][2]* [执行程序][3]## 后记越来越多可视化工具的出现，真的只是为了提升开发效率而已。很多深层次的问题其实与技术和工具都没有关系。不要迷信于工具，也不要执着于技术，找到适合自己的，合乎实际的道路是最关键的。 [1]: /img/1185632692.png [2]: https://github.com/chunqiuyiyu/learn-javascript/tree/master/drawcanvas [3]: http://pan.baidu.com/s/1bozszJT