Category Archives: Koala

HTML5游戏开发实战分享

现在越来越多的人开始尝试使用html5开发游戏应用,随着设备性能的提高,以及硬件API支持度的完善,这些条件让使用html5开发出一个媲美原生体验的游戏应用变得可能,或许你已经是迫不及待了。Web的优势不言而喻,跨平台特性可以大大降低应用的开发成本;知道地址就够了,服务器端更新,这些同时又能降低用户的获取成本。 但目前来说,使用html5技术还是会碰到不少挑战,本文主要分享手机QQ中一款html5游戏的实战经验,我们在开发的过程中,做了一些创新的地方,希望能给大家打开更多思路。 首先让来大家来玩一款游戏。在手机QQ的好友聊天对话框中,按右下角的“+”号键,即会出现“一起玩”的黄色Logo,点击Logo,即可进入“一起玩”平台选择游戏。 一起玩中的两款游戏都是html5应用,下面是开发过程中的一些要点。 技术选型:Canvas 还是 DOM (html+css+js) 看了很多介绍html5游戏开发的文章,大多数案例都是使用Canvas来制作,目前已有不少优秀的游戏引擎了。但我并没有选择Canvas,我们这次需要做的是一个轻量级小游戏,我不想使用那些笨重的框架。并且Canvas也有一些缺点,比如没有实现动画的API,你必须依靠定时器和其他事件来更新Canvas,对文本的渲染支持也是比较差,由于Canvas里面没有dom节点,当某个元素需要执行交互事件(如click)的时候只能是通过坐标来判断。 那如果以传统的DOM页面形式来制作会怎么样呢?事实上我们可以发现传统页面制作的方式有很多优点,比如元素布局使用css控制, 动画可以用css3 的animation与transition,以及屏幕尺寸适配可以使用media query,最关键的是,我们对这些技术非常熟悉。所以“捏泡泡”游戏我最后选择了使用html+css +js来开发。 巧妙地使用css3动画 一款游戏肯定包含非常多的动画元素。在jQuery横行的时代,我们用$.fn.animate函数用得不亦乐乎。css3出来后,我们可以更方便简单地编写动画。Css3动画与js结合使用,基本上能完成游戏中的各种动画。 这个是泡泡爆炸动画UI,每个泡泡爆炸效果共有4帧,使用css3 animation属性我们很容易就制作出一个类似gif的动画,并且还能使用js进行控制。 参考代码: 上面的代码,只需要给泡泡元素添加一个类名.cleared, 就能触发爆炸效果。 Css3动画主要有transition与animation两个属性,transition可控制元素变形、缩放、透明度等属性的变化,animation则是一个动画帧的概念,允许创建多个帧组合成一个动画,以达到更精细的动画控制。Css动画的另一个优势是可以与js完美结合,我们完全可以用css编写一个复杂的动画,再使用js非常简单地控制。 一些css动画教程: Using CSS transitions:https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions Using CSS animations:https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations 这里推荐一个css动画库,包含很多常见的动画效果,供做参考。 Animate.css: http://daneden.github.io/animate.css/ 多终端分辨率适配 先看不同设备下的界面自适应。 iPhone4s Samsung Galaxy Note II 对应移动端应用来说,分配率适配是个逃不过的问题。我不知道传统的手机游戏是如何处理这个问题的,但是我这次很轻松就完成了适配。这是web的一个优势,相对于Canvas来说,这也是css的一个优势。使用百分比布局以及media query,我们很容易就能控制元素位置与可视区域。比如上面的两个画面,在不同的屏幕尺寸下,首先是可视区域不一样,更大的屏幕将看到更宽的内容,其实也只是修饰性内容更完整而已,游戏主要操作区域在所有屏幕下都是保证可见的;其次可以看到中间的弹窗间距以及泡泡排列间距,都很好地适应了不同的屏幕尺寸。在游戏的设计上,我们是以iPhone4s(960*640)尺寸为标准进行设计的。 设备功能API 在普通的浏览器环境中,浏览器对一些设备功能的支持还不够,各个浏览器也存在着很多兼容性问题,我们可能无法做到像原生游戏一样那么好的效果。 手机QQ团队的同学已经考虑到了这个问题,他们开发了一系列的api接口,只要是从手Q中的webview访问,就能调用这些api,比如媒体播放、麦克风、重力感应、震动等很酷的设备功能, 这对于html5应用来说无疑是很大的支持。 性能优化 所有人都在怀疑移动端网页的性能,但实际上并没有想像中的那么糟糕。目前手Q大部分用户已经是4.x安卓版本了,浏览器性能及api支持度都有了很大提高。在“捏泡泡”游戏中,我们也只是对比较常见的低端机型做降级处理,取消了一部分动画效果,不影响整个游戏的体验,其余的优化则跟传统的网页优化相似。 这里特别分享一下我们的图片压缩方式。一般的游戏都会大量地使用png图片,在PS中png图不像jpg,可以选择导出的质量,我们需要使用第三方压缩工具进行压缩处理。在对比了多款图片压缩类库后,我们最终选择了pngquant。这个库对png图压缩效率高的惊人,最高能减少70%多的体积。虽然采用的是有损压缩,但肉眼是无法看出差别的。 离线缓存 离线缓存是html5一个新特性,不仅可以让应用能够离线使用, 对于web应用,提升应用的载入速度对于用户体验来说也是非常重要的。 标准的html5 application cache目前的兼容性并不好,各种坑,目前业务上的使用基本还处在试用阶段。离线缓存是一种浏览器技术,对于hybrid app来说,我们可以自己实现它。 […]

<span class="entry-utility-prep entry-utility-prep-cat-links">Posted in</span> Koala, WEB技术 | <span class="entry-utility-prep entry-utility-prep-tag-links">Tagged</span> | Leave a comment

Koala v1.0.1发布

Koala v1.0.1 发布 下载地址:http://koala-app.com 更新日志: Compass项目支持config.rb配置。 支持文件批量操作,可以批量设置output path与删除文件。 支持拖拽添加文件到当前项目。 设置output path时弹出的文件(目录)选择窗口直接定位到相关目录。 修复无法保存项目配置的问题。 修改Mac OSX下无法启动的问题。 欢迎体验!

<span class="entry-utility-prep entry-utility-prep-cat-links">Posted in</span> Koala | <span class="entry-utility-prep entry-utility-prep-tag-links">Tagged</span> | Leave a comment

如何调试less & sass

很多同学都已经开始在项目使用less或sass,它们用起来确实是很爽,大大提高效率呀。 less & sass 都无法在浏览器中直接执行,需要变成CSS。有时候想调试样式,我们看到的行号是css代码的行号,并不能直接对应到less&sass文件中,修改起来总是不方便。 看到less&sass这么受欢迎,热情的开发者们给firefox开发了一个插件 FireSass,后来chrome也跟上了,开启一个实验性功能支持sass调试。 具体设置如下: 编译时添加参数: sass开启debug-info选项:sass demo.sass demo.css –debug-info less开启line-numbers:lessc demo.less demo.css –line-numbers=comments 这样,编译后的css中将包含调试信息:   浏览器设置: firefox执行安装FireSass即可。 chorme:地址栏打开chrome://flags/,启用开发者工具实验 (Developer Tools experiments.)。重启浏览器后,打开开发者工具的设置选项卡,Experiments -> Support for sass 勾选。   最终调试效果: less & sass 在官网上只提供命令行的方式编译文件,这实在是太低效了。这里向大家推荐一款工具来帮助我们后台自动编译less & sass。 Koala项目地址:http://koala-app.com/index-zh.html koala是一款开发者工具,负责对less、sass、coffeescript的编译工作,帮助web开发者更高效地使用less、sass、coffeescript开发。 功能特性: 多语言支持:支持less、sass、coffeescript 和 compass framework。 实时编译:监听文件,当文件改变时自动执行编译,这一切都在后台运行,无需人工操作。 编译选项:可以设置各个语言的编译选项。 代码压缩:less & sass支持编译后自动代码压缩. 错误提示:在编译时如果遇到语法的错误,koala将在右下角弹出错误信息,方便开发者定位代码错误位置。 跨平台:windows、linux、mac都能完美运行。   如何在Koala中开启调试信息参数: 点击文件元素,在右侧展开的面板中勾选debug info选项。     […]

<span class="entry-utility-prep entry-utility-prep-cat-links">Posted in</span> Koala | <span class="entry-utility-prep entry-utility-prep-tag-links">Tagged</span> | Leave a comment