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

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

  • 相关阅读:
    Mysql性能优化之---(一)
    好好思考之(二)---介绍什么是思维模型,分析它的本质内涵
    好好思考-----概述(一)
    oracle 的安装 及环境的配置...
    数据结构中的树
    生成SSH秘钥连接github(详细教程)
    后端 SpringBoot + 前端 vue 打包发布到Tomcat
    vue 轮播图
    vue文字向上滚动
    数组去重
  • 原文地址:https://www.cnblogs.com/keng333/p/3195485.html
Copyright © 2020-2023  润新知