【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包里面的东西去……

本例中比较重要的四个类是:BackgroundImageMutiStateMovieClipPanelBaseAssetswManager。注意它们的写法会为你以后的开发带来一定的启示。

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

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

原文地址:https://www.cnblogs.com/keng333/p/3195485.html