WebGame方案汇总

强势三国卡版风页游《五虎上将》－－－－等你来战

《五虎上将》神迹官网:点击进入游戏

 

看着五虎上线了，说实话，心里还是有一丝窃喜，却又一丝悲伤。

窃喜的是这也算是自己参与过的项目上线了，悲伤的是，这不是自己手把手从头到尾一路走来的项目。

没有那种一路风雨走过来的感觉。

 

话说，虽然自己不是从五虎从头到尾跟过来的，但我确实从五虎中学到了许多， 特别是学到了 “如果我也这样做，那结果就是现在这样”。

它就像是一面镜子，时刻让自己反醒。

我并不是说五虎代码差成什么样，而是，这就是传说中的“经验”。恰巧，这些东西，被我悄悄地偷取了。

 

由于是后入五虎项目组的，所以我并不能参与五虎的功能部分开发。当然，这也是我所期望的。 我不想让自己纠结于泥潭中无法抽身，又或者当我抽身后，

把别人陷入了泥潭中。

 

因此，我只能在资源加载，浏览器缓存，代码规范上给予他们帮助。

在为五虎寻找解决方案的同时，另一个项目也在进行着， 一个教育类养成页游项目。于是，我将所有的方案先应用于养成页游中，经测试和优化完毕后，再投入五虎项目组。

下面是我研究和整理出来的一些方案，这些方案并不完美，甚至说仅仅是一些很常见的手法。于是，我大可公布于下，不必担心任何纠葛。因为这并非是我个人所创的专利，也不是五虎项目所特有的东西，而是我在拥有芸芸众生的网络中摆渡，谷歌而来。同时，希望有志同道合的朋友能够给我提出建议，相互交流，共同进步。

资源加载相关事项：

一、首要的任务，就是要将资源请求打包为一个队列。 这样外部需要加载多个资源时，就可以把队列作为一个整体来进行事件监听等。

二、其次就是资源的分类，资源至少可以分为三类， 一类是Modules.即FLEX中用来模块化的东西，类似于C++中的DLL，（swc即类似于lib)。其次是ApplicationDomain.这多半是FLASH IDE编辑资源后的导出类。 最后就是纯数据了， 如XML或者一些配置文件。 所以，需要将其分类，并能够以一个很方便访问的方式来管理。

三、Loading方式。 Loading方式大概也可以分为两类， 一类是阻塞式，一类是非阻塞式。  阻塞式就是那种需要出现Loading条的方式，使用这种方式时，资源必须要完全加载完成后，才可以使用。如一些配置文件，UI组件的皮肤资源等。 非阻塞式就是不需要等待，而是在资源未加载完成时，统一采用一个显示资源来替换。 比如一些图标，或者RPG地图中一些人物的显示（许多游戏在人物未加载完成时，显示一个球形）。

pureMVC使用注意事项：

一、pureMVC的使用应尽量标准，如果MVC使用得不标准，还不如不用。

二、尽量只在UI与业务逻辑通信时才使用pureMVC，逻辑与逻辑通信应当避免使用，否则会导致逻辑BUG的完全不可控。

模块划分注意事项：

一、游戏是一个巨大的项目，模块划分在所难免。 不论是否拆分为新工程，都必须明确规定各模块代码所能操作的权限，若权限过大，会导致无力维护，人走茶凉的现象。

二、若是采用Flex module进行模块划分， 若各Modules分开建立项目，则需要注意文件夹的层级，以及Modules编译时相对主模块的优化选项要开启。

三、若将所有的Module依然放到一个项目里，则依然要注意文件夹的层级，规范各模块代码的操作权限，通信方式等。

UI方案：

一、Flex Button大小问题   若采用Flex Button并使用CSS Style方案，则要注意 对于 downSkin，若需要改变大小，则要保证其up down over状态使用的皮肤都具有同样的大小。（特别是FLASH IDE中导出元件的话，更要注意，仅仅将缩小后的元件锚点偏移，是会失真的，因为FLEX BUTTON只识别一个元件有效像素的包围框作为元件尺寸。 可以新建一个透明层或者遮罩层来解决这个问题。 

二、Button的特殊性 采用CSS使用FlexButton需要将Button各帧拆开。这涉及到美术工作量问题，所以，对于那种以图片展现（即不需要在BUTTON上添加文本）的BUTTON，可以直接使用FLASH IDE导出SimpleButton并直接使用即可。 而对于那种需要动态修改文本的按钮，采用CSS即可。

三、CSS文件的使用。 CSS的使用可以说极大地方便了UI的工作，其实就是将FLEX的UI换肤而已。 但是采用CSS文件方式并不适合我们。因为CSS文件的静态和动态使用方式都会导致文件巨大。 

静态使用方式， 即<mx:Style source=”ooxx.css”/> 方式，这种方式会把 ooxx.css中所嵌入的资源都嵌入到嵌入ooxx.css样式的SWF中来。

动态使用方式， 即将css编译为swf  如 ooxx.swf  并用styleManager加载。 这个方案有一个好处，就是可以动态加载和卸载需要的CSS样式。 看似天衣无缝的方案，却有极大的弱点。 当你查看ooxx.swf的大小时，你会发现，就算你什么资源也没嵌入，也会有300KB+的大小。 这是因为css本身是一个module.它会引入一个flex module所要import的符号。可惜，CSS编译时，并不能指定针对某个主模块进行优化。 我也曾尝试将ooxx.css嵌入到一个module A.mxml中。并在编译时针对主模块进行优化，文件减小到了60+KB. 60+KB足够一个公共UI库的大小了。所以，CSS文件一定要慎用。

四、CSSStyleDeclaration与setStyle.  可以通过动态注册CSS样式来达到修改FLEX组件样式的目的。 具体使用方法可以搜索这两个关键字。 但是，在使用时，请先将所需要的资源载入。

五、TabNavigator 视情况而用。

六、可拖动窗口  并不一定要使用TitleWindow  若要使窗口可拖动，只需要将窗口startDrag()即可。  而对于许多窗口来说，我们想要实现的是点击某个位置或者仅当点击标题栏才拖动。  这个时候，我们可以添加一些透明的组件在这个窗口上，监听这些透明的组件，并startDrag()窗口即可。

功能划分：

一、不管是哪种游戏类型，都应该把场景和UI划分清楚，就算是鼠标流的策略游戏，也是如此。 否则在逻辑功能上也会模糊不清。

二、游戏，永远都有场景和UI，没有PAGE。。。 这是页游和网页的本质区别。希望做网页转为做页游的朋友能够接受这个现实，转变一下思路。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－分割线－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

浏览器缓存避免

浏览器缓存方案也是世人皆知的，我也仅简单说一下。 更多内容，可以参考本BLOG中，浏览器缓存相关文章。

要想完成浏览器缓存避免需要弄清楚两个事情  一、浏览器会缓存以URL全路径方式缓存HTTP所请求的资源（js,html,swf,txt等等都可以）。 二、FLEX中的资源加载，是 HTTP请求方式。  也就是说， FLEX项目中加载的资源，都会被浏览器缓存， 这也是导致许多时候，游戏资源更新失败的原因。

而要完全解决浏览器缓存问题，需要保证两个东西  第一、主文件 （比如whsj.swf）更新正常。  第二、主文件所使用的资源（如 assets/loading.swf)更新正常  .

这里，我们要用到HTTP请求时的传参功能  即在请求的资源URL后面加上?号 如 assets/loading.swf?v=1.0  。

在时行资源请求时，HTTP会忽略掉?号，以及以后的字符。 但浏览器缓存会缓存整个URL路径。 并且在进行缓存访问匹配时，也是采用的全路径。  所以，我们可以在资源请求时，给每个资源加上一个版本号。

网上的一个兄弟说的采用SVN生成每一个资源的版本号方案确实很给力，但我认为实在很麻烦。于是，我们大可在请求每个资源时，加上游戏的发布版本号。 这样，浏览器在进行资源缓存时，会将版本号信息一起缓存，当版本更新时，匹配则不会成功，从而解决了资源更新时，使用了旧资源的问题。

而最主要的，还是主文件的缓存， 因为就算你资源更新了， 但主文件没更新， 那么，游戏功能就不会变。  当你采用旧版游戏功能与新版的服务器端通信时，自然会出现各种各样的DOWN和黑屏。  因此， 主文件也要加版本号  如whsj_1_0.swf 而每次版本发布时，运营官网作相应的更改即可。

此方案也是目前我用在五虎项目上的初步方案。 对于主文件版本号的管理，许多公司的做法是加一个壳， 即做一个专门用于加载主文件的swf  它几乎不会更改，  永远都是采用随机数或者时间戳读取主文件版本号信息 如 version.xml?v=20111113，并使用  whsj.swf?v=1.0这样的方式来加载主文件。 这在版本发布时，可以一层不变。仅修改版本号信息文件即可。 而版本号文件采用时间戳等方式读取，可以保证每次都加载到最新的。

最后，祝贺一下二部项目天地劫即将测试。

天地劫神迹官网：点击进入