News:Starling Spool

Starling默认的显示对象都是四边形，但我们可以改变顶点位置和纹理的UV坐标，来实现不规则形状的显示，再配合动画的话，可以实现比如下面的三角形卷轴地图滚动的效果：

效果演示: http://www.todoair.com/754-2012-11-09/

这个例子里面，把索引是1的顶点移动到了中心点，实现了三角形显示。您可以根据自己的需要，移动4个顶点（需要的话甚至可以继续添加顶点）。

下面是代码实现过程：

TrangleImage.as

package test
{
	import flash.display.Bitmap;
	import flash.geom.Point;
	import flash.geom.Rectangle;
 
	import starling.animation.IAnimatable;
	import starling.display.Image;
	import starling.textures.Texture;
	import starling.utils.VertexData;
	/**
	 * 继承Image类，但修改第2个顶点坐标，改为三角形显示
	 * 实现IAnimatable接口，控制UV坐标，实现卷轴滚动效果
	 * @author shaorui
	 */	
	public class TrangleImage extends Image implements IAnimatable
	{
		/**
		 * 根据传入的位图对象创建一个包含纹理的Image。
		 * @param bitmap	位图对象
		 * @return 
		 */
		public static function fromBitmap(bitmap:Bitmap):TrangleImage
		{
			return new TrangleImage(Texture.fromBitmap(bitmap));
		}
		/**@private*/
		public function TrangleImage(texture:Texture)
		{
			super(texture);
			if (texture)
			{
				var frame:Rectangle = texture.frame;
				var w:Number  = frame ? frame.width/2  : texture.width/2;
				var h:Number = frame ? frame.height/2 : texture.height/2;
				//重置纹理的UV坐标
				resetTexCoords();
				//将第二个顶点（索引是1）移动到中心点的位置
				mVertexData.setPosition(1,width*0.5,height*0.5);
				//因为只需要显示整个纹理1/4的区域，索引将宽度和高度都除以2
				width = w/2;
				height = h/2;
				onVertexDataChanged();
			}
			else
			{
				throw new ArgumentError("Texture cannot be null");
			}
		}
		/**设置纹理的UV坐标为整个纹理左下角1/4的区域*/
		private function resetTexCoords():void
		{
			mVertexData.setTexCoords(0, 0.0, 0.5);
			mVertexData.setTexCoords(1, 0.25, 0.75);//注意这个点，因为是三角形，这个点也在1/4区域的中心点上
			mVertexData.setTexCoords(2, 0.0, 1.0);
			mVertexData.setTexCoords(3, 0.5, 1.0);
		}
		/**时间驱动的动画*/
		public function advanceTime(time:Number):void
		{
			//将4个点的UV坐标累加或累减，实现动画效果
			var cp:Point = this.getTexCoords(0);
			this.setTexCoords(0,new Point(cp.x+0.001,cp.y-0.001));
			cp = this.getTexCoords(1);
			this.setTexCoords(1,new Point(cp.x+0.001,cp.y-0.001));
			cp = this.getTexCoords(2);
			this.setTexCoords(2,new Point(cp.x+0.001,cp.y-0.001));
			cp = this.getTexCoords(3);
			this.setTexCoords(3,new Point(cp.x+0.001,cp.y-0.001));
			if(cp.x > 1)
				resetTexCoords();
		}
 
	}
}

使用方式：

[Embed(source="../assets/bg.jpg")]
protected const bgClass:Class;
var img:TrangleImage = TrangleImage.fromBitmap(new bgClass() as Bitmap);
addChild(img);
Starling.juggler.add(img);