在说具体实现之前，丢个Flash物理引擎在产品展示中的应用：http://www.carlosulloa.com/.
这是一款汽车产品的展示平台，用方向键控制机车移动，点鼠标左键复位汽车初始位置。
不过，这个不是2d物理引擎完成的，而是基于PV3D的，，，，恩，3D物理引擎是在比较难搞……有时间尝试整理下……

下边来说下Demo的具体实现，首先要收下物理引擎，物理引擎是干嘛用的呢？
物理引擎是一个处理物理现象的引擎。

那什么是物理现象呢？
举个例子，一个风筝在天上飞，它会受到风力，阻力，摩擦力，还有重力，绳子的作用力，etc。。。而物理引擎就是帮你处理这些力的一个框架集。
你要做的就是给它个重力，然后都作用在风筝上，至于这些里之间的相互作用，都由引擎来搞定。

下边来代码，先是文档类，也就是主容器了：
[js]
package org.nwhy.bubble_bobble{
import flash.display.*;
import flash.events.Event;
import org.cove.ape.*;

public class BubbleBobble extends Sprite{
private var bulletHolder:Group;

public function BubbleBobble(){
init();
}
private function init(){
initStage();
initGroups()
}
private function initStage(){
stage.scaleMode = StageScaleMode.NO_SCALE;//设置为不缩放
//stage.align = StageAlign.TOP_LEFT;
stage.frameRate = 55;//设置帧频
stage.addEventListener(Event.ENTER_FRAME, run);
}
private function initGroups(){
//初始化2D物理引擎
APEngine.init(1/4);
APEngine.container = this;
APEngine.addForce(new VectorForce (false,0,1));//加上重力

//放bullet的容器,bullet就是那个各种颜色的球～
bulletHolder = new Group(true);
APEngine.addGroup(bulletHolder);

//加入墙壁
var wall:Wall = new Wall();
APEngine.addGroup(wall);

//gun,就是下边那个大伯说有点像啥的那个啥……囧一个
var gunGroup:GunGroup = new GunGroup(stage);
APEngine.addGroup(gunGroup);

//设置bullet的碰撞检测内容
bulletHolder.addCollidableList(new Array(wall,gunGroup));
}
private function run(e:Event) {
APEngine.step();
APEngine.paint();
}
//增加bullet的对外接口
public function addBullet(bullet:CircleParticle){
bulletHolder.addParticle(bullet);
}
}
}
[/js]
这里边干的事就是加入各种Group(APE物理引擎里的碰撞单元是Particle，单个或多个Particle组成Group)，至于Group里具体是啥Group里自己处理。

接下去是简单的Wall类，里边就是4个方块放在四周：
[js]
package org.nwhy.bubble_bobble{
import org.cove.ape.*;

public class Wall extends Group {
private var left:RectangleParticle;
private var right:RectangleParticle;
private var top:RectangleParticle;
private var bottom:RectangleParticle;

public function Wall() {
//上边的挡板
top = new RectangleParticle(200,-10,440,20,0,true);//PS:APE是以坐标中心点为坐标原点,所以x,y的起始位置是宽高的一半
addParticle(top);
top.sprite.cacheAsBitmap = true;
//下边的挡板
bottom = new RectangleParticle(200,610,440,20,0,true);
addParticle(bottom);
bottom.sprite.cacheAsBitmap = true;
//左边的挡板
left = new RectangleParticle(-10,300,20,640,0,true);
addParticle(left);
left.sprite.cacheAsBitmap = true;
//右边的挡板
right = new RectangleParticle(410,300,20,640,0,true);
addParticle(right);
right.sprite.cacheAsBitmap = true;
}
}
}
[/js]
很简单的一个类，什么功能都木有，就是加入4个方块，放在四周。
然后是这个例子里比较复杂的GunGroup.as:
[js]
package org.nwhy.bubble_bobble{
import flash.display.DisplayObjectContainer;
import flash.display.Stage;
import flash.events.MouseEvent;
import org.cove.ape.*;

public class GunGroup extends Group {
private var gun:RectangleParticle;//gun实例
private var angle:Number;//gun的角度
private var mStage:Stage;//stage值,用来添加鼠标事件用的

public function GunGroup(mStage:Stage,collideInternal:Boolean = false) {
//生成gun实例
gun = new RectangleParticle(200,600,82,10,0,true,1,0.75);
addParticle(gun);
gun.setDisplay(new Gun());
gun.sprite.cacheAsBitmap = true;

//添加监听
this.mStage = mStage;
this.mStage.addEventListener(MouseEvent.MOUSE_MOVE, rotateGun);
this.mStage.addEventListener(MouseEvent.MOUSE_DOWN, fire);
}
//处理鼠标移动时gun的角度旋转
private function rotateGun(e:MouseEvent) {
angle = Math.atan2(550-mStage.mouseY,mStage.mouseX-200)* 180 / Math.PI;
gun.sprite.rotation = -angle;
}
//处理鼠标点击时gun的bullet发射
private function fire(e:MouseEvent) {
var bullet:Bullet=new Bullet();
//生成一个bullet实例,具体位置是个比较复杂的数学公式……
var b:CircleParticle = new CircleParticle(200+45*Math.sin((90-angle)*Math.PI/180),550+45*(1-Math.cos((90-angle)*Math.PI/180)),6,false,2);
//给bullet一个力
b.addForce(new VectorForce(false,150*Math.sin((90-angle)*Math.PI/180),-130*(Math.cos((90-angle)*Math.PI/180))));
//监听下碰撞
b.addEventListener(CollisionEvent.COLLIDE, checkCollision);
//给它一个皮肤
b.setDisplay(bullet);
//调用主容器里的addBullet接口函数
(DisplayObjectContainer)(APEngine.container).addBullet(b);
}
//碰撞处理,这里是随机一个1/4的几率让粒子固定
private function checkCollision(e:CollisionEvent) {
if (Math.random()>0.75) {
e.currentTarget.fixed = true;
}
}
}
}
[/js]
最后是最简单的一个类，Bullet.as
[js]
package org.nwhy.bubble_bobble{
import flash.display.Sprite;
import flash.geom.ColorTransform;

import org.cove.ape.*;

public class Bullet extends Sprite {
public function Bullet() {
//随机改变一下颜色
var rOffset:Number = this.transform.colorTransform.redOffset + rand(-255,255);
var gOffset:Number = this.transform.colorTransform.greenOffset + rand(-255,255);
var bOffset:Number = this.transform.colorTransform.blueOffset + rand(-255,255);
this.transform.colorTransform = new ColorTransform(1, 1, 1, 1, rOffset, gOffset, bOffset, 0);
}
private function rand(min:Number,max:Number):Number{
return (Math.random()*(max-min)+min);
}
}
}
[/js]
其实这个类啥也没干，就是一个皮肤类，每次实例化的时候给个随机颜色。
整个东西就是这个样子，.fla文件里有2个豆哥涂鸦的元件，源文件在这里：
http://dl.dropbox.com/u/477487/flash/game/bubble-bobble.rar
Have fun!~

Some Related Posts

• 2010/03/05 -- Flash – APE物理引擎学习<一> (2)

点击鼠标发射子弹，击中那个囧就过关了。
代码实现其实也很简单，APE里边所有的Item都是以Group的形式存在。
在这个Demo里，上边的5个球是一组，例子里是Avatar类，里边有5个WheelParticle，不知道为何CircleParticle没有旋转的。

来来，看代码:
[js]
package org.nwhy.JustForFun{
import org.cove.ape.*;

public class Avatars extends Group {
public var ball1:WheelParticle;
public var ball2:WheelParticle;
public var ball3:WheelParticle;
public var ball4:WheelParticle;
public var ball5:WheelParticle;

public function Avatars() {
ball1 = new WheelParticle(50,100,15,true,10);
var avatar = new Avatar();
avatar.gotoAndStop(1);
ball1.setDisplay(avatar);
addParticle(ball1);
ball1.sprite.cacheAsBitmap = true;

ball2 = new WheelParticle(150,100,15,true,10);
avatar = new Avatar();
avatar.gotoAndStop(2);
ball2.setDisplay(avatar);
addParticle(ball2);
ball2.sprite.cacheAsBitmap = true;

ball3 = new WheelParticle(250,100,15,true,10);
avatar = new Avatar();
avatar.gotoAndStop(3);
ball3.setDisplay(avatar);
addParticle(ball3);
ball3.sprite.cacheAsBitmap = true;

ball4 = new WheelParticle(350,100,15,true,10);
avatar = new Avatar();
avatar.gotoAndStop(4);
ball4.setDisplay(avatar);
addParticle(ball4);
ball4.sprite.cacheAsBitmap = true;

ball5 = new WheelParticle(450,100,15,true,10);
avatar = new Avatar();
avatar.gotoAndStop(5);
ball5.setDisplay(avatar);
addParticle(ball5);
ball5.sprite.cacheAsBitmap = true;
}
}
}
[/js]
手动生成5个头像，当然你可以循环生成，这里本来是为了个性化定义的……
然后就是文档类，JustForFun.as:
[js]
package org.nwhy.JustForFun{
import flash.display.*;
import flash.events.*;
import org.cove.ape.*;

public class JustForFun extends Sprite {
var gun:Gun;
var bullet:Bullet;
private var target:WheelParticle;
private var bulletHolder:Group;
private var targetHolder:Group;
private var angle:Number;//gun的角度
private var avatars:Avatars;

public function JustForFun() {
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
stage.frameRate = 55;

APEngine.init(1/4);
APEngine.container = this;
APEngine.addForce(new VectorForce (false,0,0.98));

avatars = new Avatars();
for (var i:uint=1; i<6; i++) {
avatars["ball" + i].addEventListener(CollisionEvent.COLLIDE, handleCollision);
}
APEngine.addGroup(avatars);

bulletHolder = new Group();
APEngine.addGroup(bulletHolder);

targetHolder = new Group();
target = new WheelParticle(100,20,15,true,10);
var targetDisplay:Target = new Target();
target.setDisplay(targetDisplay);
targetHolder.addParticle(target);
target.addEventListener(CollisionEvent.COLLIDE, handleCollision);
APEngine.addGroup(targetHolder);

var gunGroup:GunGroup = new GunGroup();
gunGroup.gun.addEventListener(CollisionEvent.COLLIDE, handleCollision);
gun = new Gun();
gunGroup.gun.setDisplay(gun);
APEngine.addGroup(gunGroup);

bulletHolder.addCollidableList(new Array(avatars,targetHolder));

stage.addEventListener(Event.ENTER_FRAME, run);
stage.addEventListener(MouseEvent.MOUSE_MOVE, rotateGun);
stage.addEventListener(MouseEvent.MOUSE_DOWN, fireGun);
}
private function run(e:Event):void {
APEngine.step();
APEngine.paint();
}
private function rotateGun(e:MouseEvent) {
angle = Math.atan2(400-mouseY,mouseX-250)* 180 / Math.PI;
//trace(90-angle);
gun.rotation = -angle;
}
private function fireGun(e:MouseEvent) {
var b:CircleParticle = new CircleParticle(250+45*Math.sin((90-angle)*Math.PI/180),350+45*(1-Math.cos((90-angle)*Math.PI/180)),5,false,2);
b.addForce(new VectorForce(false,120*Math.sin((90-angle)*Math.PI/180),-120*(Math.cos((90-angle)*Math.PI/180))));
bullet = new Bullet();
b.setDisplay(bullet);
bulletHolder.addParticle(b);
bulletHolder.collideInternal = true;
//trace(90-angle,Math.sin((90-angle)* Math.PI / 180),100*Math.sin(90-angle));
}
// Everytime the ball hits a target or the pong, a CollisionEvent is raised and delt with here
private function handleCollision(e:CollisionEvent):void {
trace("Collision");
e.target.fixed = false;
if (e.target == target ) {
trace("succ");
}
e.target.removeEventListener(CollisionEvent.COLLIDE, handleCollision);
}
}
}
[/js]
要注意的是APE的注册点是在中心，所以定位置的时候要注意，唉，如果你没注意到这个，肯定会被弄死。
另外，Google group里边有个加强版的APE 0.45，加入了不少有用的类。如果你要扩展APE，一定要去看看。
今天就到这里，下次见？

Some Related Posts

• 2010/03/09 -- Flash-APE物理引擎学习<二> (7)