better platform, better web game
TRANSCRIPT
Better Platform Better Web Game
魏子钧
这是非现场版本, 删减了一些非核心内容 以及 用于活跃现场气氛的内容,
对图片和动画效果也做了精简.同时增加了几行代码.
本 Slide 部分图片来自互联网, 版权归原作者所有.
为更好表达演讲意图,对其中一些图片进行了修改.
如以上行为损害了您的合法权益,请告知.我会第一时间删除相关图片.
声明
关于我
网名: 大城小胖
( fins/finscn )
blog: fins.javaeye.com
twitter: @finscn
新浪微博: @大城小胖
多年非资深Web开发者
& 业余游戏开发爱好者
胖子控
泛化的HTML5
不仅仅是 Asynchronous JavaScript and XML
基于标准的传统Web技术
不仅仅是
新兴的可用于Web的标准化技术
HTML5 与 移动平台
移动平台的魅力
全新的用户体验
• 多点触控/重力感应/陀螺仪
随时.随地.随身
• 沟通/娱乐/Always online
适合HTML5生长的土壤
• 大部分 *优秀的移动平台* 均支持HTML5
• 使用 *优秀的移动平台* 的人越来越多
• 基于Web的RIA应用的不二选择
移动平台WebGame
昨天有人说过了, 我就不说什么了...
HTML5
移动平台
更好的 WebGame
如何选择,是个问题
iOS 设备 也许是不错的选择哦~~~
iOS 是目前运行HTML5应用的最佳移动平台
浏览器对HTML5的支持度最高
浏览器对设备API的支持最完备
• 多点触控
• 重力感应
• 陀螺仪
支持CSS3 3D & 硬件加速
支持 WebSocket
Flash ? Apple Say NO!
HTML5 与 iOS
多点触控touch :
touchstart / touchend / touchmove
gesture :
rotate / scale
需开发人员处理的动作:
tap / double-tap / swip
注意 : 是”点”,不是”面”
部分兼容鼠标事件: down/up/click/move/over
click != tap
运动 与 方位DeviceMotion :
• 对重力加速度的感应
DeviceOrientation :
• 对加速度与转向的感应
参见 : http://dev.w3.org/geo/api/spec-source-orientation.html
CSS 3 CSS 3 Animation
CSS 3 3D
CSS 3 3D 硬件加速
Web Socket
Web Socket 没啥好说的,它的名字已经代表了一切
联机游戏原理示意图 1
联机游戏原理示意图 2
屏蔽浏览器默认行为-webkit-touch-callout: none;-webkit-user-select: none;-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-text-size-adjust: none;
灵活使用 CSS3 3Ddom.style.webkitTransform=”translate3d(10px,20px,0)”;优于dom.style.webkitTransform=”translate(10px,20px)”;优于dom.style.left="10px";dom.style.top="20px";
关于retina屏幕http://fins.iteye.com/blog/923794
注意事项
声音播放欠佳
难以实现真正的全屏
无法锁定显示方向
不足
未来
更快的核
更多的核
更好的支持HTML5
new iOS , new Safari
>228 ? WebWorker? 全屏?
Android 奋起直追
HTML5
HTML5
HTML5
标准
标准 标准
HTML5HTML5
HTML5
HTML5
标准
标准
标准
标准HTML5
HTML5标准
标准
标准
HTML5
大城小胖 可能是 大忽悠
HTML5 绝对 不忽悠
A Whole New World
文本
Thanks&
Q&A