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圖片上傳都出現了浮水印，真想吐槽一番這樣的無聊設定。