在上一节中,我们基本上已经讲完了游戏中最主要的逻辑部分,不过为了更加全面地运用Starling中的一些特性,在本节中我们将一起来看看如何实现多面板切换以及粒子效果,这两个玩意儿可是比较频繁会出现于Starling游戏中的哦~
本章源码下载:www.iamsevent.com/zb_users/UPLOAD/AS3Coder5/AS3Coder5_src3.rar
游戏暂停面板
玩游戏的过程中难免要暂停一下游戏,不然老子玩个游戏却被尿憋憋死,你说老子的老娘是不是白养我那么多年了?!而创建这样一个面板非常容易,因为我们把一些基础的设置都封装在了其父类PanelBase中了:
/** * 看名字就晓得是干嘛的了 * @author S_eVent * */ public class GamePausePanel extends PanelBase { private var _theText:TextField; public function GamePausePanel() { super(); backgroundWidth = backgroundHeight = 300; backgroundAlpha = 0.5; layout(); } private function layout():void { _theText = new TextField(200, 150, "游戏暂停中……", "Verdana", 30, 0xFFFF00, true); _theText.x = (width - _theText.width) >> 1; _theText.y = 150; addChild(_theText); } }
之后,我们只需要在Game类中创建它,并在适当的时候弹出它并播放其内部的动画即可(虽然该面板内部暂时没有什么动画可播放):
/** * 游戏主类 * @author S_eVent * */ public class Game extends Sprite { …… private var _pausePanel:GamePausePanel; private var _isPause:Boolean = false; …… protected function onAdded( e:Event ):void { …… _pausePanel = new GamePausePanel(); this.addEventListener(EnterFrameEvent.ENTER_FRAME, onEF); stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown); stage.addEventListener(KeyboardEvent.KEY_UP, onKeyUp); } /** 暂停/继续游戏 */ private function pauseAndResume():void { _isPause = !_isPause; if( _isPause ) { addChild( _pausePanel ); _pausePanel.x = (stage.stageWidth - _pausePanel.width) >> 1; _pausePanel.y = (stage.stageHeight - _pausePanel.height) >> 1; _pausePanel.start(); _world.stop(); } else { removeChild( _pausePanel ); _pausePanel.stop(); _world.start(); } } private function onKeyDown( e:KeyboardEvent ):void { var direction:String; //方向键控制人物行走,P键控制游戏暂停 switch(e.keyCode) { …… case 80: pauseAndResume(); break; } if( direction ) _world.startMoving( direction ); } …… private function onEF( e:EnterFrameEvent ):void { if( _world.paused ) { _pausePanel.advanceTime( e.passedTime ); } else { _world.advanceTime( e.passedTime ); } } }
这样就可以在按下键盘上的P键(其keyCode为80)时会弹出暂停面板,且同时停掉游戏主界面中的动画播放。运行结果应该如下图所示:
这个暂停面板有点单调不是吗?那么接下来就让我们试玩一下Starling中的粒子效果吧。
你就像那一把火!
在《Starling介绍》中讲到过粒子效果需要借助第三方编写的Starling粒子插件来实现,该插件的下载地址如下:https://github.com/PrimaryFeather/Starling-Extension-Particle-System。下载完毕后你可以得到一个zip压缩包,找到其中的src目录,打开它,将其中的starling文件夹拷贝到咱们的项目目录中,这样我们就可以使用粒子插件的源码了。
参考过其给出的demo例子之后,我们了解了其使用的方式,即使用粒子纹理图片(.jpg,.png等格式)和粒子描述文件(.pex)文件来创建一个ParticleDesignerPS对象,之后将其添加到juggler对象中就可以播放了。不过,《Starling介绍》中介绍的用来制作粒子素材的工具ParticleDesigner只有在MAC系统上才能安装使用,我们国内的电脑大多数是用的Windows系统,啊呀,俺娘哎,你说这可咋办捏?不用着急,不用着急,休息,休息一会儿……
打开http://onebyonedesign.com/flash/particleeditor/,你看见了什么?哦,是的,我的孩子,这是一个在线的Starling粒子编辑器,来自onebyoneblog。使用它可以实现在Windows操作系统下的粒子素材制作。我简单地调了几个参数后,点击Export Particle按钮,在“保存到”界面将保存的文件名命名为fire后确定。发现在我选择的保存位置多了一个fire文件,若是没有指定文件类型,就给该文件加上.rar的文件后缀名,因为该文件本身是一个压缩包文件。将其加上.rar文件后缀名之后打开之,会发现其中包含了两个文件,一个是粒子纹理图片文件,一个是纹理描述文件。将它们拷贝到项目目录下面并分别命名为fire.png和fire.pex后我们需要将它们嵌入到AssetManager中,并为快速获取一个粒子效果创建一个共有方法:
public class AssetswManager { …… //-----------------------------------------粒子素材-----------------------------------------------------// [Embed(source="/assets/particals/fire.png")] public var FireTexture:Class; [Embed(source="/assets/particals/fire.pex", mimeType="application/octet-stream")] public var FireData:Class; …… private var _particalFactory:Object = {};//粒子缓存,其中每一项的格式为:name:{texture:, config:} …… /** * 获取一个粒子效果 * @param particalName 欲获取的粒子效果名 * */ public function getPartical(particalName:String):ParticleDesignerPS { var result:ParticleDesignerPS; var config:XML; var texture:Texture; if( _particalFactory[particalName] ) { config = _particalFactory[particalName].config; texture = _particalFactory[particalName].texture; } else { config = XML( getEmbedResource(particalName + "Data") ); var bmp:Bitmap = getEmbedResource(particalName + "Texture") as Bitmap; if( bmp )texture = Texture.fromBitmap(bmp); if( config && texture ) { _particalFactory[particalName] = {config:config, texture:texture}; } } if( config && texture ) result = new ParticleDesignerPS(config, texture); return result; } }
之后,我们就可以利用getPartical方法来很快地获取一个粒子效果。太棒了,赶快来试试看吧baby。打开GamePausePanel类,为其加上一个火焰效果:
public class GamePausePanel extends PanelBase { …… private var _theFire:ParticleDesignerPS; …… override public function start():void { super.start(); _theFire.start(); } override public function stop():void { super.stop(); _theFire.stop(); } private function layout():void { …… _theFire = AssetswManager.instance.getPartical("Fire"); _theFire.emitterX = width >> 1; _theFire.emitterY = 150; addChild(_theFire); juggler.add(_theFire); } }
只需要使用AssetswManager.instance.getPartical方法来获取一个粒子效果,然后将其粒子发生位置(对于火焰效果来说该位置为火焰底部位置)设置在文本框上面一点点就可以了,再次提醒一下,ParticleDesignerPS对象是一个实现了IAnimatable的对象,你必须将其添加到juggler对象中才能进行播放哦~
好了。大功告成,接下来直接运行一下程序吧,可以看到我们这个粒子的最终成品(点击图片试玩):
另外,你可以从我空间的友情链接中找到“simppa大神的粒子空间”,这是一个老外的博客,里面有很多构建于Stage3D基础上的粒子效果,相当地华丽。但是我想他应该不是使用Starling框架做的。
总结
又到了总结的时刻了,我不太喜欢做总结也不怎么爱在公共场合发言,不过轮到我讲的话就随便扯两句好了。经过咱们刚才的探索和实践,发现Starling框架还是比较好用的一个东东,只需要注意几个习惯性的问题即可,我总结了几个,有不足的可以补充:
1.注意纹理的尺寸限制问题
2.动画对象得放入juggler里面去,尽量用时间,而不是帧来控制人物移动等运动逻辑
3.MovieClip不是容器,制作多状态动画时需要注意
4.时刻注意导入的包路径是否正确,不要用到flash.display包里面的东西去……
本例中比较重要的四个类是:BackgroundImage、MutiStateMovieClip、PanelBase及AssetswManager。注意它们的写法会为你以后的开发带来一定的启示。
GPU加速带来的好处是降低CPU压力,提高呈现性能,但与传统的CPU渲染相比,依然存在诸多不足之处,还有待改进:
1.GPU中基本上都是基于图片来渲染的,都不能动态地绘制图像,Graphics类不能用,TextInput不能用……
2.没有滤镜支持。我开始向往传统Flash中的高亮、模糊这些滤镜了,555……要在GPU环境中使用滤镜,只能用替换图片的方式来做到了,这对于我们程序员来说实在是不便啊。虽说使用PixelBender3D可以创建一些GPU中可用的滤镜及混合模式,但是目前这一块研究的人极少,Starling的作者在其开发者社区中承诺在未来版本的Starling中会加入几个常用的滤镜,但是他也承认难度较大。额~这个不晓得要等到什么时候去了,还是用PS来换换图片得了……
3.尺寸约束。由于尺寸的约束,我们在一些大型场景中就很难用上一些超大尺寸的swf动画文件作为背景了,这不仅让程序员犯难,也让美术人员犯难
4.无法在Flex中使用Starling框架
5.Stage3D显示列表和原生Flash显示列表共存会造成性能下降,但是有时候我们不得不使用原生Flash显示列表……
还有一些我就不想举例了,总之,不论Flash还是Starling框架在GPU这块的发展才刚刚开始,以后还有相当长的路要走,作为小小的一个开发人员,我们当然希望它们发展得越来越好喽。不过当下,由于这块的发展还未成熟,使用Starling框架也就只能做做较简单的游戏啦,而且很多公司也不太愿意冒险步入这块领域,想试手的童鞋可能还需要耐心等待机会喽~
又到了告别的时候了,列位道友,要想念贫道哦~