better platform, better web game

26
Better Platform Better Web Game 魏子是非现场版本, 删减了一些非核心内容 以及 用于活跃现场气氛的内容, 对图片和画效果也做了精. 增加了几行代.

Upload: finscn

Post on 02-Aug-2015

1.663 views

Category:

Technology


2 download

TRANSCRIPT

Page 1: Better platform, Better web game

Better Platform Better Web Game

魏子钧

这是非现场版本, 删减了一些非核心内容 以及 用于活跃现场气氛的内容,

对图片和动画效果也做了精简.同时增加了几行代码.

Page 2: Better platform, Better web game

本 Slide 部分图片来自互联网, 版权归原作者所有.

为更好表达演讲意图,对其中一些图片进行了修改.

如以上行为损害了您的合法权益,请告知.我会第一时间删除相关图片.

声明

Page 3: Better platform, Better web game

关于我

网名: 大城小胖

( fins/finscn )

blog: fins.javaeye.com

twitter: @finscn

新浪微博: @大城小胖

多年非资深Web开发者

& 业余游戏开发爱好者

胖子控

Page 4: Better platform, Better web game

泛化的HTML5

Page 5: Better platform, Better web game

不仅仅是 Asynchronous JavaScript and XML

Page 6: Better platform, Better web game

基于标准的传统Web技术

不仅仅是

新兴的可用于Web的标准化技术

Page 7: Better platform, Better web game

HTML5 与 移动平台

Page 8: Better platform, Better web game

移动平台的魅力

全新的用户体验

• 多点触控/重力感应/陀螺仪

随时.随地.随身

• 沟通/娱乐/Always online

适合HTML5生长的土壤

• 大部分 *优秀的移动平台* 均支持HTML5

• 使用 *优秀的移动平台* 的人越来越多

• 基于Web的RIA应用的不二选择

Page 9: Better platform, Better web game

移动平台WebGame

昨天有人说过了, 我就不说什么了...

HTML5

移动平台

更好的 WebGame

Page 10: Better platform, Better web game

如何选择,是个问题

Page 11: Better platform, Better web game

iOS 设备 也许是不错的选择哦~~~

Page 12: Better platform, Better web game

iOS 是目前运行HTML5应用的最佳移动平台

浏览器对HTML5的支持度最高

浏览器对设备API的支持最完备

• 多点触控

• 重力感应

• 陀螺仪

支持CSS3 3D & 硬件加速

支持 WebSocket

Flash ? Apple Say NO!

Page 13: Better platform, Better web game

HTML5 与 iOS

Page 14: Better platform, Better web game

多点触控touch :

touchstart / touchend / touchmove

gesture :

rotate / scale

需开发人员处理的动作:

tap / double-tap / swip

注意 : 是”点”,不是”面”

部分兼容鼠标事件: down/up/click/move/over

click != tap

Page 15: Better platform, Better web game

运动 与 方位DeviceMotion :

• 对重力加速度的感应

DeviceOrientation :

• 对加速度与转向的感应

参见 : http://dev.w3.org/geo/api/spec-source-orientation.html

Page 16: Better platform, Better web game

CSS 3 CSS 3 Animation

CSS 3 3D

CSS 3 3D 硬件加速

Page 17: Better platform, Better web game

Web Socket

Web Socket 没啥好说的,它的名字已经代表了一切

Page 18: Better platform, Better web game

联机游戏原理示意图 1

Page 19: Better platform, Better web game

联机游戏原理示意图 2

Page 20: Better platform, Better web game

屏蔽浏览器默认行为-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

注意事项

Page 21: Better platform, Better web game

声音播放欠佳

难以实现真正的全屏

无法锁定显示方向

不足

Page 22: Better platform, Better web game

未来

更快的核

更多的核

更好的支持HTML5

new iOS , new Safari

>228 ? WebWorker? 全屏?

Android 奋起直追

Page 23: Better platform, Better web game

HTML5

HTML5

HTML5

标准

标准 标准

HTML5HTML5

HTML5

HTML5

标准

标准

标准

标准HTML5

HTML5标准

标准

标准

HTML5

Page 24: Better platform, Better web game

大城小胖 可能是 大忽悠

HTML5 绝对 不忽悠

Page 25: Better platform, Better web game

A Whole New World

文本

Page 26: Better platform, Better web game

Thanks&

Q&A