Upload
pl-dream
View
2.372
Download
24
Embed Size (px)
DESCRIPTION
html5 game for mobile
Citation preview
HTML5 游戏之路Ready to go? HTML5 Games
HTML5 给游戏带来了什么
• What does HTML5 bring to Games
HTML5 究竟是什么?What HTML5 IS?
• 新的标记语言, 拥有了很多新的 tag, 比如 <canvas>, <audio>, <video>, <article>, <nav>
HTML5 究竟是什么?
现在我们说的广义 HTML5 ,通常还包括 CSS3 和 JavaScript engines
What HTML5 IS?
我们能用它来作什么?
先从 <canvas> 和 <audio> 说起
What we can do with these stuff?
Canvas 实现 2D 绘图、动画效果
<audio> 播放音频
背景声音、 音效、音量控制、 多通道 还是比较基础的 JavaScript API
Canvas + audio + js engine =?能够干什么?
有例子么 ? 当然有 ...
Got an example? Sure...
经典的坦克大战
http://www.mhtml5.com/games/tank/
Classic Tank game
射击游戏
http://dougx.net/plunder/plunder.html
Shooting game
WHY COOL ?
WRITE ONCE
USE ANYWHERE
• Saving time with development and Testing
• 轻量级 • Lightweight• Text, Image, CSS, JS
• 优化游戏运营 提高效率
Optimize game operation
Improve efficiency
有多少支持 HTML5 的浏览器了?
How many browsers support HTML5?
还有 ...
And...Umm
终于 ... 鼓掌!
Finally ... Applause !
性能一定不行吧 ...也许你会想
You may thinkPerformance sucks . right?
CANVAS 在桌面端性能相当好
Chrome 、 IE9 支持图形硬件加速。 Safari, firefox 部分支持
CANVAS works pretty well in desktop/laptop
“ 相当好” 的定义是 ?
如果你要作 Tiny wing, Angry bird, 超级马里奥, 可以跑到 FPS 60
How good is pretty good?
那物理引擎怎么办?
• canvas 只管画图
How about physics engine?
拥抱开放 第三方的引擎Embrace open technoogy! 3rd party engines
BOX 2D已经用在了 Angry bird 的 HTML5 版本上http://chrome.angrybirds.com/
JPEhttp://colorhook.com/portfolio/jpe/examples/CarDemo/CarDemo.html
http://colorhook.com/portfolio/jpe/examples/RobotDemo/RobotDemo.html
还有更多的 JS engine
crafty
isogenic 建设类
Gameclosure 开发中
3D 的场景怎么办?How about 3D?
• - 浏览器里的 3D 效果• -2011.3 月 WEBGL 公布 1.0 Spec. 虽
然还比较初级, 但是已经得到了多个浏览器支持 .
• Google 已经 Port 了 QUAKE II 到WEBGL.
多人在线的呢?How about multiplayer game?
WEBSOCKETS
• 用来处理服务器和玩家的双向通讯
NODE.JS
• 服务器端的 Javasript 解释器• 高并发 低消耗
手机上能用么?Does it work in mobile?
没问题! No problem!
• IOS + Android .. + WP7?
但 HTML5 手机游戏面临挑战
Still. mobile HTML5 game faces challeange
<audio> 在手机上的问题比较大<canvas> 的绘制速度偏慢,尤其在iframe 中效率更低。 硬件加速并非所有硬件支持Android 适配问题Javasript 引擎的速度,物理类
问题总会被解决
机器的性能在飞速提升
Problem will be solved anyway, just take a while
还有 impact js
http://m.agame.com/game/Biolab+Disaster/en_US/index.html
作 HTML5 游戏有赚钱么 ?
Does HTML5 game make money ?
有!但目前大多在手机游戏领域
• 在日本已经有不少手机 HTML5 游戏, 收入相当不错
Definitely YES, but only in mobile right now
巨头们也在布局
http://www.warimals.com/
为什么先在手机游戏?
兼容性 智能手机的兴起手机 HTML5 游戏的转换率高于下载游戏,体验简单用户对效果的预期并没有那么高, HTML5 游戏已经能实现不错的效果社交游戏, ARPU 高
Why mobile?
HTML5 游戏的机遇Opportunity
移动设备的生产量 2011 年超过 PC , 智能手机占绝对主流巨头的支持, 微软Windows8 , Google, Apple, Facebook, Google +
社交游戏的盛行手机硬件和浏览器开放更多 API
更灵活的市场渠道 browser based, apk,app...
HTML5 游戏在中国
HTML5 研究小组 游戏比赛 >>
更多的产品在孕育中 ...
HTML5 games in China