Stage3D射击游戏的Starling粒子特效

点击查看原图

我想大家应该不会对Stage3D陌生,这是一个允许AS3程序员访问到GPU的新的API。然而,大家肯定不希望在Stage3D直接面对底层操作码进行编码,于是Starling出现了。Starling其实是个库,它封装底层语言使它更易开发。伴随Starling一同出现的还有粒子效果的拓展( particle extension )。在本教程中,我们将研究此框架的粒子系统,并看它如何应用到shoot-’em-up(赶尽杀绝)游戏中去的。

第1步:基本设置
如果你已经使用过Flashdevelop一段时间了,可以跳过这一步。初学者在此可以了解如何装入一个库包 -此例中就是Starling和它的粒子拓展。注意,这两个东西不在同一个包内,因而我们得分别下载。

首先,去下载Starling框架以及其粒子拓展,解压。第一个文件解压后,找到src文件夹,并此文件夹所包含的Starling框架库(下图的高亮部分)拷到你的项目源文件夹中。

点击查看原图

同理在第二个文件中找到粒子拓展部分,把它们归到一起—把下图高亮部分拖到Starling文件夹下。以下图片展示了整理后的最终结果。

点击查看原图

欲览更多关于Flashdevelop以及如何使用外部库的资讯,请参阅本教程:

Flashdevelop初学者的指南
如何在Flash项目中使用的外部库

第2步:主类(Main Classes)
若你还不太了解Starling以及其粒子拓展,那我强烈建议去看看Lee Brimelow的关于Starling粒子特效视频教程,还有Matthew Chung的关于如何用Starling处理动画状态的教程。
这两个步骤里我们只是来科普下基本部分,若你已经熟悉Starling及其粒子拓展,那就跳到第4步。

从上一步骤的第二张图中你可以看到,它创建了两个类:Main.as和Testing.as。前者可以链接到后者,因而我们将Starling的主要代码写在Testing.as里。Main.as里比较重要的代码(6~8行):

private function init(e:Event = null):void
{
    removeEventListener(Event.ADDED_TO_STAGE, init);
    // entry point

var myStarling:Starling = new Starling(Testing, stage);
myStarling.simulateMultitouch = true;
myStarling.start();

//initiate Starling onto stage
//allow mouse/ touch events to happen in Starling
//turn key and start the engine!

}

Testing.as如下

public class Testing extends Sprite
{
    public function Testing() {
        addEventListener(Event.ADDED_TO_STAGE, init);
    }
    private function init(e:Event):void {
        removeEventListener(Event.ADDED_TO_STAGE, init);
        // code goes here.

    stage.color = 0;    //turn stage colour to black

    //Draw a little quad on stage,
    //just to make sure everythings in place
    //Note the top left corner of sprite is aligned to middle of stage
    var q:Quad = new Quad(30, 30); addChild(q);
    q.color = 0xEEEEEE;
    q.x = stage.stageWidth >> 1; q.y = stage.stageHeight >> 1;
}

}

如果一切设置正确,那你应该能运行出如下所示的结果。内容不多,只是在舞台上有个sprite。


注:Testing.as继承于Starling.display.Sprite而非flash.display.Sprite。它们类名相同但内容不同。


第3步:Starling中的粒子拓展

Starling粒子拓展包含三个重要的类,以下将它们的功能以表格形式列出:

类名

功能

Particle.as

具有独立属性的单个粒子

ParticleSystem.as

控制粒子流:生成,动画及回收(generation, animation and recycling.)

ParticleDesignerPS.as

ParticleSystem.as的拓展,简化对粒子系统的操作.
我们将创建一个ParticleDesignerPS.as实例,这需要在类的构造函数中输入以下参数:
一个XML文件,包含粒子属性(数量相当多)的所有启动值
一张图像,作为所有粒子的外观

别急,onebyonedesign.com将有助于理解这些类。访问其粒子设计页面,将初始值调整随你喜欢,然后将所有数据导出为ZIP格式。此ZIP文件将包含XML文件和之前的粒子效果的图像。

点击查看原图

解压到flashdevelop的源文件夹下,见下图高亮部分。

点击查看原图

使用import语句来将这两个条目引入Testing类,同时还要重写Testing中的方法,详情如下:

[Embed(source=“particle.pex”, mimeType=“application/octet-stream”)]
private var InitValues:Class

[Embed(source = “texture.png”)] private var Sample:Class

private function init(e:Event):void {
removeEventListener(Event.ADDED_TO_STAGE, init);
// code goes here.

stage.color = 0; //turn stage colour to black var flow1:ParticleDesignerPS = new ParticleDesignerPS( XML(new InitValues()), Texture.fromBitmap(new Sample()) ); addChild(flow1); flow1.emitterX = stage.stageWidth >> 1; flow1.emitterY = stage.stageHeight >> 1; flow1.start(); Starling.juggler.add(flow1); }

完成上述步骤后运行项目能够出现以下画面,是不是很简单呢?

第4步:了解粒子系统
下一步任务是实现运行时(runtime)与粒子系统(小火)的交互,我们将用鼠标控制火的属性。而在此之前,我要插播下粒子系统的概念。

粒子是从某一坐标发射出来的sprite,它们在出生之后便以一个特定的模式进行动画。此模式或为所有粒子共通的或为每个粒子独有的,但无论哪种情况,随着时间的推移,粒子的物理属性都会逐渐改变。例如:
到出生点坐标的距离
方向和速度
颜色和alpha值
大小尺寸

此外,他们在舞台上的生命是出生时就决定了的。若粒子永远存活在舞台上,那将导致粒子数量过多,处理这些大量的图像资源会使得应用程序的性能受到影响。当粒子死亡,它不会被铲除,而是会被回收,迁移到某个出生点的坐标并继续作为一个新的粒子存在,被赋予新粒子的属性,直至再一次死亡,并周而复始地进行一轮又一轮的循环。


这与我们所要做的火焰效果有何相干?我们可以调用缓动函数,调整火焰的属性随着时间的推移而进行动画。starling框架内,ParticleDesignerPS被定义在继承体系的末端:

ParticleDesignerPS > ParticleSystem > DisplayObject > EventDispatcher > Object

为了更好理解,我们来追踪下从ParticleSystem继承而来的属性

第5步:ParticleSystem和ParticleDesignerPS的属性

以下是ParticleSystem的属性


属性

描述

capacity

粒子系统同时可以承载的最大粒子数量。只读。

numParticles

某时刻系统中的粒子数。只读

emissionRate

从出生点坐标每秒生成的粒子数

emitterX, emitterY

粒子活动所在的容器的控制点