flash与游戏笔记：滚动数字

       

 

         游戏里面需要用到很多的位图文字，以增加美观。最近也尝试做了一个简单的实验版本，其中一种思路是采取tweenlite的 endArray 来刷新位图的做法来尝试滚动一下数字。

使用的基础类是bitmap，最简单直接的办法就是copy像素值了。

下面是一个比较简单的实验，可以尝试玩玩这种简单的效果。

 

package
{
	import flash.display.Sprite;
	import com.greensock.TweenLite;
	import com.greensock.plugins.TweenPlugin; 
	import com.greensock.plugins.EndArrayPlugin; 
	import flash.events.MouseEvent;
	
	
	public class Main extends Sprite
	{
		private var rollText:RollTextField;
		public function Main()
		{
			
			TweenPlugin.activate([EndArrayPlugin]);
			rollText=new RollTextField();
			addChild(rollText);
			rollText.x=200;
			rollText.y=200;
			rollText.init(new nums(0,0),10);
			stage.addEventListener(MouseEvent.CLICK,onClick);
			
		}
		
		private function onClick(event:MouseEvent):void
		{
			
			rollText.text=Math.random()*5000;
			
		}
		
		
	}
	
	
}

 实验的素材我们随意准备一下数字，制作素材的时候需要进行平均的分成，以便裁剪的时候每一个数字都可以得到平均一点。

 

 

制作完成后，我们在flash cc预览一下，其中我们随意准备一张数字素材进行裁剪预览。

 

package 
{

	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.Sprite;
	import flash.geom.Point;
	import flash.geom.Rectangle;
	import flash.text.TextField;
    import com.greensock.TweenLite; 
 
	public class RollTextField extends Bitmap
	{

		private var source:BitmapData;
		private var w:int;
		private var h:int;
		private var rect:Rectangle;
		private var pt:Point;
		private var copyImg:BitmapData;
		private var curValue:int = 0;
		private var offX:int = 0;
		public var endFun:Function;
		public function RollTextField()
		{
			
		}


		public function init(source:BitmapData,len:int,offX:int=0):void
		{
			this.source = source;
			this.offX = offX;
			w = source.width / len;
			h = source.height;
		}

		public function set text(value:int):void
		{
			if (! source || value == curValue)
			{
				return;
			}

			var myArray:Array = [curValue];
			this.curValue = value;

			if (! rect)
			{
				rect = new Rectangle(0,0,w,h);
			}
			if (! pt)
			{
				pt=new Point();
			}

			TweenLite.to(myArray, 1, {endArray:[value],onUpdate:onUpdateView,onComplete:onComplete});

			function onUpdateView():void
			{
				var myNewStr:String = String(int(myArray[0]));
				var len:int = myNewStr.length;
				if (copyImg)
				{
					copyImg.dispose();
					copyImg = null;
				}

				copyImg =new BitmapData(len*w,h,true,0x0);

				for (var i:int=0; i<len; i++)
				{
					var num:int = int(myNewStr.charAt(i)) + offX;
					rect.x = num * w;
					rect.y = 0;
					rect.width = w;
					rect.height = h;
					pt.x = i * w;
					pt.y = 0;
					copyImg.copyPixels(source,rect,pt);
				}

				bitmapData = copyImg;
			}

			function onComplete():void
			{
				if (endFun!=null)
				{
					endFun.apply(null,null);
				}
			}
		}

	}
}

 

 注意：最近csdn图片上传都出现了水印，真想吐槽一番这样的无聊设定。