Starling本身是一个2D框架，不过引入一些3D计算，就可以实现简单的3D效果。这次我们要演示的是一个3D云彩效果，您就像一个战斗机飞行员，驾驶爱机在空中腾云驾雾，享受在云层中急速穿梭的感觉。因为只是简单的引入了Z轴排序，效果看起来还有不少瑕疵，期待3D高手不吝赐教，继续优化一下这个效果:)
示意图：
演示地址： http://www.todoair.com/demo/cover/CloudDemo.html
附上源代码：
package cloud
{
import flash.display.Bitmap;
import flash.geom.Point;
import flash.geom.Rectangle;
import starling.display.BlendMode;
import starling.display.Image;
import starling.display.QuadBatch;
import starling.display.Sprite;
import starling.events.Event;
import starling.events.Touch;
import starling.events.TouchEvent;
import starling.events.TouchPhase;
import starling.textures.Texture;
import starling.textures.TextureAtlas;
import test.pf.PageFlipContainer;
/**
* Starling实现的3D云彩效果
* @author shaorui
*/
public class Game extends Sprite
{
/**云彩的素材图片*/
[Embed(source="../assets/cloud10.png")]
protected const cloudImgClass:Class;
/**承载纹理用*/
protected var img:Image;
/**用批次处理来显示*/
private var quadBatch:QuadBatch;
/**存储云朵信息*/
private var imgArr:Vector.<CloudItem>;
/**创建多少个云朵*/
private var imgCount:int = 300;
/**屏幕宽度*/
private var screenWidth:Number = 960;
/**屏幕高度*/
private var screenHeight:Number = 640;
/**缩放的阈值*/
private var focal:Number=250;
/**屏幕可见区域*/
private var stageRect:Rectangle;
/**@private*/
private var vpX:Number;
/**@private*/
private var vpY:Number;
/**@private*/
public function Game()
{
super();
addEventListener(Event.ADDED_TO_STAGE,initGame);
}
/**初始化*/
private function initGame(...args):void
{
removeEventListener(Event.ADDED_TO_STAGE,initGame);
//计算Z轴用
vpX=stage.stageWidth/2;
vpY=stage.stageHeight/2;
stageRect = new Rectangle(0,0,stage.stageWidth,stage.stageHeight);
centerPoint = new Point(screenWidth/2,screenHeight/4*3);
//设置蓝天颜色
stage.color = 0x0008a7;
//创建一个注册点在中心的图片
img = Image.fromBitmap(new cloudImgClass(),false);
img.pivotX = img.width/2;
img.pivotY = img.height/2;
//批次用于渲染
quadBatch = new QuadBatch();
addChild(quadBatch);
//用数组存储云朵属性
imgArr = new Vector.<CloudItem>();
for (var i:int = 0; i < imgCount; i++)
{
var item:CloudItem = new CloudItem();
item.rotation = Math.random()*Math.PI;
setAShape(item);
imgArr.push(item);
}
addEventListener(Event.ENTER_FRAME,enterFrameHandler);
addEventListener(TouchEvent.TOUCH,onTouchHandler);
}
/**重置位置*/
private function setAShape(shape:CloudItem):void
{
shape.scale = 0.001;
shape.startX=screenWidth*2*Math.random()-screenWidth;
shape.startY=screenHeight/2+screenHeight/2*Math.random()-100;
shape.x = shape.startX;
shape.y = shape.startY;
shape.zpos = Math.random()*800+400;
}
/**Z排序*/
private function sortArray():void
{
imgArr.sort(zSortFunction);
}
/**排序方法*/
private function zSortFunction(a:CloudItem,b:CloudItem):Number
{
if(a.zpos > b.zpos)
return -1;
else if(a.zpos < b.zpos)
return 1;
else
return 0;
}
/**判断一个对象是否已经不在屏幕区域*/
private function shapeAvisible(shape:CloudItem):Boolean
{
var shapeRect:Rectangle = shape.getBounds(this);
return shapeRect.intersects(stageRect);
}
/**每帧调用*/
private function enterFrameHandler(event:Event=null):void
{
quadBatch.reset();
var xpos:Number;
var ypos:Number;
var item:CloudItem;
for (var i:int = 0; i < imgCount; i++)
{
item = imgArr[i];
//reset properties
item.zpos-=4;
var x1:Number = screenWidth-item.startX*2;
var y1:Number = screenHeight/2-item.startY;
if (item.zpos>-focal && shapeAvisible(item))
{
xpos=centerPoint.x-vpX-x1;//x维度
ypos=centerPoint.y-vpY-y1;//y维度
item.scale=focal/(focal+item.zpos);//缩放产生近大远小，取值在0-1之间；
item.x=vpX+xpos*item.scale;
item.y=vpY+ypos*item.scale;
}
else
{
setAShape(item);
}
}
//每次进行Z排序
sortArray();
for (i = 0; i < imgCount; i++)
{
item = imgArr[i];
img.x = item.x;
img.y = item.y;
img.scaleX = img.scaleY = item.scale;
img.rotation = item.rotation;
quadBatch.addImage(img);
}
}
/**@private*/
private var centerPoint:Point;
/**触碰处理*/
private function onTouchHandler(event:TouchEvent):void
{
var touch:Touch = event.getTouch(this);
if(touch == null)
return;
if(touch.phase == TouchPhase.HOVER)
{
centerPoint.x = touch.globalX/4+screenWidth/8;
centerPoint.y = touch.globalY/4+screenHeight/8+280;
}
}
}
}
import flash.geom.Rectangle;
import starling.display.DisplayObject;
/**
* 存储云朵属性的类
* @author shaorui
*/
class CloudItem
{
private var itemWidth:Number = 256;
private var itemHeight:Number = 256;
public var startX:Number;
public var startY:Number;
public var zpos:Number=0;
public var x:Number = 0;
public var y:Number = 0;
public var scale:Number = 1;
public var rotation:Number = 0;
public function getBounds(targetSpace:DisplayObject):Rectangle
{
var w:Number = itemWidth*scale;
var h:Number = itemHeight*scale;
var rect:Rectangle = new Rectangle(x-w/2,y-h/2,w/2,h/2);
return rect;
}
}
类中引用的图片下载：
原文链接 ： Starling实现的3D云彩效果