HTML5大会游戏专场演讲_张哲

主题HTML5游戏的经验，技术，数据分享北京神奇时代张哲北京神奇时代三国时代(SLG)忘仙(ARPG)HTML5技术开发2012年2月9日公测在线2万人原生开发2012年6月18日公测在线10+万人北京神奇时代三国时代OL忘仙OLHTML5之路原生《不江湖》预计2013年8月底封测全新3D项目怎么开始用HTML5的？三国时代OL,手机页游的开始一个想法，是否能在手机浏览器里玩大型网页游戏浏览网页三国时代是什么样的可以在手机浏览器里运行（封测）在电脑的浏览器里运行，互通（91）打包成客户端里运行（封测后才开始）接了60多个渠道，支持最多的最早赚钱的HTML5大型网游三国时代运营数据注册用户数突破1000万活跃用户数100万付费ARPU达到700元累计收入突破7000万！三国时代的技术特性HTML：在电脑上运行，调试方便（chrome）DOM，CSS3：UI开发快，布局简单（不怕rework）ApplicationCache（update花了很多时间研究）最早用Canvas：处理复杂动画灵活（兼容性好，DOM有兼容性问题）三国时代的优势多平台同时运行（PC，Android，ios）不需要去商店下载安装包（微博里玩）推广方式多（短信，push，一个链接）快速更新（修改bug，用户没啥感觉）运营灵活（说改就改，原生出问题后果很严重）其它还有谁也这么干呢？！其它HTML5游戏HTML5策略类网游•近2年的HTML5的游戏发展历程，特别是在策略类网游发展得到了长足的进步，其中比较优秀的有HTML5回合制网游•近2年的HTML5的游戏发展历程，MMO回合制网游出现，但是与原生相比效果还差很多HTML5的ARPG？原生忘仙HTML5的ARPG还没有出现！HTML5的普遍形态HTML5Why？分析原因中低端机型上HTML5性能低很多（包括ios版本）在网页上运行，大量资源加载体验问题（用户流失）各浏览器版本的兼容性问题（问题太多）Javascript，css等技术的了解不够（需要积累）联网方式的不足（websocket不支持，现在也有）但HTML5的优势多平台运行，一套代码，可以做客户端网页型式不需要去商店下载安装包易于更新，可以更新代码推广方式多，快速进入游戏数据统计很灵活，维护快我们的态度Q：是否我们要用HTML5开发游戏？A：YES！Q：什么时候我们可以用HTML5开发高品质的MMORPG网游？A：Now！神奇时代HTML5新作三国时代OL不江湖OL历时一年的研发HTML5技术开发预计8月底封测我们在做什么我们在做什么我们在做什么我们在做什么我们在做什么我们在做什么我们在做什么我们在做什么不江湖的技术特点MMORPG回合制HTML5网游（手机页游的最高品质）开发技术依然：DOM+CSS+Canvas（很熟）资源全部运行时动态加载（吃一欠长一智）5秒快速进入游戏，展现精美画面（这是必须的）可以随时更新功能+BUG修改（不用更端啦）不江湖的优势多平台运行PC+Android+Ios+Win85秒钟快速进入游戏，推广效果明显达到原生网游水平（怎么就达到了呢？）不江湖的性能Android客户端跑60帧以上（欧朋引擎上）IOS的Safari可以跑60帧以上Android的UC，百度，海豚可以跑40帧以上ios客户端可以跑30帧以上（iphone4差一些）特别感谢深入交流+SPHINX的硬件加速欧朋的Sphinx客户端版性能达到原生水平，GPU加速代码不需要任何修改，打包方便支持DOM，CSS3，用DOM做UI很方便支持Audio，Websocket，localstorage等将来在浏览器上也支持，甚至更多哦对于CP大家一起开始使用HTML5吧！Html5游戏的时代已经来临！Canvas还是DOM+CSS？开发方式网游类：Canvas+DOM结合的方式单机类：纯Canvas方式优缺点DIV+CSS优点是渲染独立，易于开发。缺点是兼容性比较适合快速制作UI，自适应较好，有很多成熟的插件辅助开发。开发门槛适合广大的页面程序员，但是因为各个浏览器的渲染方式的差异需要兼容处理。Canvas优点兼容性好，缺点开发难度较大不易上手需要游戏开发经验比较丰富的人员。HTML5引擎CreateJS0.6.1EaselJS：基于Canvas的开发框架TweenJS：处理线性动画SoundJS：强大的声音库PreloadJS：管理和预先加载资源（图片，声音，脚本）辅助开发插件varmySound=newbuzz.sound(/sounds/mysound,{formats:[ogg,mp3,aac,wav],preload:true,autoplay:true,loop:false});最开始使用WebAudioAPI,很多不兼容问题辅助开发插件滚动翻页，滑动HTML5辅助开发插件JQueryTemplatesplugin(JqueryTmpl)$.tmpl(li${Name}/li,{Name:JohnDoe}).appendTo(#target);模版+数据=页面HTML5辅助开发插件JQueryUI实现拖拽HTML5辅助开发插件特效动画HTML5辅助开发插件1,CSSanimation实现{animation-name:jg_suc;animation-duration:.8s;animation-timing-function:linear;animation-delay:0s;animation-iteration-count:1;animation-direction:alternate;}@-webkit-keyframesjg_suc{0%{background:url(../img/ui/jg_suc001.png)centerno-repeat;}50%{background:url(../img/ui/jg_suc007.png)centerno-repeat;}100%{background:url(../img/ui/jg_suc008.png)centerno-repeat;}}HTML5辅助开发插件2,Jsmovieclip实现('#id_successEffect').JSMovieclip({width:474,direction:'h',frames_number:5,framerate:5,stopCallback:function(){$('#id_successEffect').remove();}});$('#id_successEffect').data('JSMovieclip').play(false);HTTPVSWEBSOCKETHTTP方式优点：最原始最基础最兼容缺点：单通道稳定不足流量多WEBSOCKET方式优点：双通道消耗小性能稳定缺点：Android默认不支持HTML5高性能引擎欧朋和UC的HTML5GPU加速引擎提供了与原生应用近似的性能提升，提高了用户体验，为HTML5的推广扫清障碍。HTML5高性能引擎cocos2d-html5同样是一款好的HTML5引擎，网页游戏用Cocos2d-html5开发，网页可以运行，相同的游戏逻辑，使用JSB引擎，不用怎么修改，就可用Hybrid的方式发布到原生应用的渠道。性能与原生一致。HTML5平台的发展前景新浪微博：@张哲_神奇时代