用HTML5技术打造跨平台大型网游

HTML5这一游戏新技术已经被应用于iPhone和Android平台，应用这一技术，使得玩家可以在手机上获得和PC类似的网页游戏体验，即通过点击游戏地址直接进入游戏。

跨平台是HTML5游戏的一大优势，尽管使用现代浏览器（如Chrome）在PC上可以获得非常棒的体验效果，但其在移动平台表现如何，是近一年以来大家都在热议的话题。

本次为你带来的是一款基于HTML5的大型网页游戏——《三国时代OL》，该游戏由神奇时代团队所开发，即将在Google Chrome WebStore上发布。本文主要与大家分享一下该游戏的开发心得。在阅读本文之前，你可以先在Chrome中试玩一下《三国时代OL》。

开发环境说明

开发所采用的技术：JavaScript、Canvas、CSS3、Application Cache、Localstorage、Audio等

模式：JS+CSS3+Canvas+DOM

参考第三方API：jQuery1.6、 jQuery Mobile、jQuery tmpl

多平台：iOS、Android、PC

浏览器：桌面浏览器（Chrome、Firefox等），手机浏览器（自带浏览器、Chrome、UC、QQ、Firefox、Opera、遨游、海豚等）

采用HTML5的原因

1. HTML5大势所趋

用HTML5制作的游戏具备跨平台特性，并且采用JS开发语言，大大降低了开发成本。另外各个浏览器厂商都在加强对HTML5的支持，彼此展开对市场的竞争，对HTML5带来了迅速的发展。另一方面HTML5是社交游戏发展的未来，得益于HTML5游戏无需下载的优势，尤其是针对智能手机而言，玩家可以在社区里随时聊天、交友并相互分享游戏的快乐。与原生客户端相比，更易于推广，方便更新版本，用户会在第一时间看到。游戏无需下载，可节省手机容量空间。只需打开手机浏览器，就可以通过网页体验游戏。

2. iPhone上的HTML5

iPhone 4上的HTML5分为两种模式：App Mode与Web Mode。

屏幕尺寸：App Mode——320x460 有效绘画区（全屏）；Web Mode——320x356 或者 320x416（没有地址栏）

调试：设置>Safari > 开发，打开调试，即可帮助开发者查看日志，有效解决问题。

离线：可以保存应用到桌面，并采用离线方式，像本地应用一样打开运行。

开发中的问题

1. HTML5的局限性

目前HTML5还缺少有效的开发工具。对于手机用户来说，国内网络环境依然以GPRS为主，下载速度以及流量限制了大批用户。

以Chrome、Safari为主的webkit内核比较成熟，但其它浏览器厂商都在研发新的内核，造成了大量兼容性问题，对开发者而言，需要做大量的适配工作，也由于不兼容，影响了用户体验。

另一方面，与原生客户端游戏相比，HTML5所支持的功能较少或者欠缺，在性能上也是存在不足，但是随着硬件性能和内核引擎的提升，将来会有所改观。

2. iOS 4性能问题

由于采用iOS 4，用到Retina图象优化方式，造成Canvas绘图效率下降。实际上可以用过两种方式避免，对于使用Canvas，可先放大再用viewport的0.5倍缩放，另一种是使用Dom做为游戏呈现方式，采用transform3D加速。而Safari 5采用Nitro JavaScript引擎。苹果表示，Mac版Safari 5运行JavaScript脚本的速度比Safari 4快30%，比Chrome 5.0快3%，几乎达到火狐3.6的两倍。

3. Android问题

Android系统版本及浏览器比较多，标准不统一，造成大量机型适配工作。

4. Audio 问题

到目前为止，在手机上播放音效情况很糟糕。

开发所用技术

1. Application Cache

为什么要用Application Cache：第一次下载资源和代码后，可以缓存到浏览器缓存区，从而加快游戏加载代码和资源的时间，以及在国内网络环境不好的情况下，有效缓解一些问题。

通过下面代码，我们可以了解ApplicationCache的基本原理和更新实现。

<htmlmanifest="test.manifest"> ... </html>
CACHE MANIFEST#version v1 ?#指明缓存入口CACHE:index.htmlstyle.cssimages/logo.pngscripts/main.js?#以下资源必须在线访问NETWORK:login.php

如何更新：当你的资源或者代码修改后，在Manifest文件中，修改一下版本号即可，代码实现如下。

var appCache = window.applicationCache;
if (appCache.status ==window.applicationCache.UPDATEREADY) { appCache.swapCache();window.location.reload();//得到最新版本缓存列表，并且成功下载资源，更新缓存到最新
}

2. jQuery Mobile

jQuery Mobile框架可以让熟悉jQuery框架的开发者快速开发出基于HTML5的移动应用，而且直接通过手机的浏览器即可浏览。除此以外，jQuery Mobile也有很好的扩展性，用户可以很好地对其进行定制修改。

jQuery Mobile也很好的为我们定义并展示了好的用户体验，很多东西值得开发者借鉴。

示例1：从jQuery Mobile借鉴过来，实现了平滑效果的页面切换，如果不采用CSS，用JavaScript实现后的效率很低。在三国时代中，当切换功能页面时，可以看到划动的效果。

.slide.in {-webkit-animation-name:slideinfromright;-webkit-animation-timing-function:ease-in-out;-webkit-animation-duration:350ms;
}
@-webkit-keyframes slideinfromright {from { -webkit-transform: translateX(100%);to { -webkit-transform: translateX(0);
}
$(currentPage).addClass("slidein");

示例2：实现了一个会闪烁的框，作为游戏中新手引导的高亮显示效果。

.splash{border:5pxsolid #dedede;-webkit-animation-name:splashAnim; -webkit-animation-timing-function:ease-in-out;-webkit-animation-duration:1s;-webkit-animation-iteration-count:infinite;
}
@-webkit-keyframes splashAnim {from { border-color: #eeee00;}to { border-color: #000000;}
}

3. Slider Bar

Slider Bar是游戏中用到的一个很实用的功能，用户无需每次都打开Input输入框来输入数字，用户可以通过划动滚动条来改变数字。HTML5增加了<inputtype="range" />这个标签，但其实在手机并没有完全支持，实际上用JavaScript+CSS也能做出期望的效果。

可以通过下面的关键代码，来了解Slider的实现原理。

sliderBar =document.createElement("div");
sliderBar.ontouchmove = function(evt) {sliderBarMove(evt);
}
sliderBarMove : function(evt) {x= evt.touches[0].pageX;sliderBar.style.left= x + "px";onChange();
}

以上是该游戏的开发心得，欢迎大家试玩这款游戏。

作者：神奇时代

用HTML5技术打造跨平台大型网游相关推荐

云服务器配置网站卡顿,大型网游云服务器要多大配置才能解决卡顿等问题？
用云服务器做游戏服务器自然是可以的,要是私人玩没有那么限制,一般1核2g的新睿云服务器就能够满足2-4个用户的需求.2个人玩的话一年也不卡,4个人勉强能玩,6个的话就会很卡.如果4个人以上联机玩,那么 ...
开源大型网游服务器架构项目
开源大型网游服务器架构项目 Trinity,国人习惯称T端,是在M端(MaNGOS)的基础上,发展出来的大型网游服务器架设软件.此项目为开源方式,任何人都可以在Trinity官方网站免费下载其源码,进 ...
大型网游全景图制作方法
大型网游的全景图会比现实类的全景更加出色,因为网游画质和现实照片相比,网游的画面更加细腻和具有美观,以及非常梦幻漂亮.在这里,通过这个教程的学习,你可以从零基础的小白,学会制作大型网游全景图,以后不管 ...
一个大型网游需要哪些代码块_你会因为网游的非公平性，而转投单机游戏阵营吗？...
现在网络游戏越来越多,在大家都投身网游的同时,还是有不少玩家转向单机游戏.网游需要玩家通过连接网络.耗费大量的时间与精力,甚至氪金来养号,导致游戏竞技缺乏一定公平性.而单机游戏更多的是注重剧本.故事内 ...
20人就能做大型网游 Hero游戏引擎进军韩国
据韩媒报道,Hero Korea于首尔西桥洞弘大附近召开记者会,公开自制引擎"Hero",此引擎专为MMORPG开发所设计,以云端为架构整合客户端与服务器. Hero Engine ...
一套跨平台五子棋网游的开发经历
闲来无事,因自己想要在服务器开发方面进行更深入的学习,积累更丰富的经验.决定写一套网络游戏的c/s. 因为主要目的是服务器的开发,因此游戏我选用规则较为简单.画面特效没有要求的回合制游戏:五子棋.我曾 ...
python带你采集大型网游英雄皮肤图~
前言嗨喽~大家好呀,这里是魔王呐 ! 开发环境以及模块的使用: python 3.6 pycharm requests >>> pip install requests os 内置 ...
P2【商业级MMORPG大型网游】Unity全栈开发笔记
入门unity开发笔记已报名,见评论.刚刚开始学习unity3d,今天我将开发我的第一个项目.一是项目的规划. 1. 游戏玩法是一种冒险玩法,类似于<马里奥>,但它是基于3D视角开发的. ...
浅谈小型网游服务器端技术架构成本分析
俺不敢说大型网游,是因为市面上那些pc网游我没有经验,不知道怎么做.先说说我经历的网游,wap网游,一款宠物为主的mmorpg,最高峰值在线 2600+,现在我在一家sns游戏公司工作,一款类似开心农 ...

用HTML5技术打造跨平台大型网游

用HTML5技术打造跨平台大型网游相关推荐

最新文章

热门文章