【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框架也就只能做做较简单的游戏啦，而且很多公司也不太愿意冒险步入这块领域，想试手的童鞋可能还需要耐心等待机会喽~

又到了告别的时候了，列位道友，要想念贫道哦~