游戏里面需要用到很多的位图文字,以增加美观。最近也尝试做了一个简单的实验版本,其中一种思路是采取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图片上传都出现了水印,真想吐槽一番这样的无聊设定。