A闪的 BLOG 技术与人文
我想大家应该不会对Stage3D陌生,这是一个允许AS3程序员访问到GPU的新的API。然而,大家肯定不希望在Stage3D直接面对底层操作码进行编码,于是Starling出现了。Starling其实是个库,它封装底层语言使它更易开发。伴随Starling一同出现的还有粒子效果的拓展( particle extension )。在本教程中,我们将研究此框架的粒子系统,并看它如何应用到shoot-’em-up(赶尽杀绝)游戏中去的。
第1步:基本设置
如果你已经使用过Flashdevelop一段时间了,可以跳过这一步。初学者在此可以了解如何装入一个库包 -此例中就是Starling和它的粒子拓展。注意,这两个东西不在同一个包内,因而我们得分别下载。
首先,去下载Starling框架以及其粒子拓展,解压。第一个文件解压后,找到src文件夹,并此文件夹所包含的Starling框架库(下图的高亮部分)拷到你的项目源文件夹中。
同理在第二个文件中找到粒子拓展部分,把它们归到一起—把下图高亮部分拖到Starling文件夹下。以下图片展示了整理后的最终结果。
欲览更多关于Flashdevelop以及如何使用外部库的资讯,请参阅本教程:从上一步骤的第二张图中你可以看到,它创建了两个类: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。它们类名相同但内容不同。
Starling粒子拓展包含三个重要的类,以下将它们的功能以表格形式列出:
我们将创建一个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);
}
完成上述步骤后运行项目能够出现以下画面,是不是很简单呢?以下是ParticleSystem的属性