【AS3 Coder】任务五：Flash 2D游戏的第二春（上）
在上一节中，我们基本上已经讲完了游戏中最主要的逻辑部分，不过为了更加全面地运用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框架也就只能做做较简单的游戏啦，而且很多公司也不太愿意冒险步入这块领域，想试手的童鞋可能还需要耐心等待机会喽~
又到了告别的时候了，列位道友，要想念贫道哦~