そのような単純な効果。 カットソースの下で、いくつかの場所でコメントと説明。
これまたはその特殊効果がどのように機能するかを考えると、多くの考えが頭に浮かびますが、特殊効果を使用した経験が少ないことを考えると、常に実装に来るとは限りません。 状況を修正する時が来たと思いました。 少し考えてみると、そのようなことはどうなるかという簡単なアイデアが浮かびました。 彼は、まるでピクセル溶接によって印刷されたかのように、テキストの外観の効果を作成するタスクを設定し、溶接点から散在する粒子。 そして同時に、それを記事の形で説明してください。 筆者は本当に役に立たないが、この記事が誰かの利益になることを願っている。
アルゴリズムの説明
効果に基づいて、これはテキストで指定された輪郭に従って切り取られたパーリンノイズ（
doc ）です。 テキストの上にはマスクがあり、軸OXに沿って右に移動し、テキストを開きます。 メインループでは、マスクの右端がどこにあるかを判断し、Yごとに、テキストを含むビットマップの高さによって、不透明ピクセルを取得し、アニメーションを開始します。 さらに、ここで「溶接」ポイントがどこにあるかを示します。
実装
テキストは
BlendMode.ERASEを使用してカットされます。これは、混合オブジェクトのアルファ値に基づいて背景オブジェクトのピクセルを消去します。 つまり、アルファが0xFFに等しい場合、背景のアルファチャネルの値は0x00になります。
テキスト付きのビットマップを準備する方法。
コードprivate function GetMaskedText(text:String):BitmapData { var tf:TextField = new TextField(); var format:TextFormat = new TextFormat("Arial", 60, 0xFFFFFF, true); tf.defaultTextFormat = format; tf.text = text; tf.width = tf.textWidth + 4.0; tf.height = tf.textHeight + 4.0; tf.filters = [new GlowFilter(0xFFFFFF, 1.0, 2, 2, 4, 3)]; var w:int = tf.width; var h:int = tf.height; var noiseBdata:BitmapData = new BitmapData(w, h, true, 0xFFFFFFFF);
次に、テキストをシーンに追加し、マスクを上に配置する必要があります。
コード private var textBdata:BitmapData; private var textBmp:Bitmap; private var txtMask:Shape; private var btnRestart:MiniButton; private function InitalizeLayout():void { screen = new BitmapData(W, H, true, 0x00000000); addChild(new Bitmap(screen)); textBdata = GetMaskedText("..Hello world.."); textBmp = new Bitmap(textBdata); textBmp.x = (W - textBmp.width) * 0.5; textBmp.y = (H - textBmp.height) * 0.5; addChild(textBmp); txtMask = new Shape(); txtMask.graphics.beginFill(0xFFFFFF); txtMask.graphics.drawRect(0, 0, 4, textBmp.height); txtMask.graphics.endFill(); txtMask.x = textBmp.x; txtMask.y = textBmp.y; textBmp.mask = txtMask; addChild(txtMask); btnRestart = new MiniButton("restart"); btnRestart.x = (W - MiniButton.W) * 0.5; btnRestart.y = 10.0; addChild(btnRestart); }
画面変数は、パーティクルが描画される大きな
BitmapDataです。 すぐに小さな警告があります。パーティクルを保存するために、
Vectorの代わりに単純にリンクされたリストを使用することにしました。パーティクルを頻繁に削除してvector.spliceを作成する必要があるためです。 また、リストから要素を削除する方が簡単です。要素を除外し、近隣からのリンクを変更するだけです。
クラス
粒子コード class Particle { private static const GRAVITY:Point = new Point(0, 0.2); private var speed:Point; public var position:Point; public var color:int; public var next:Particle; public function Particle(x:Number, y:Number, color:int) { position= new Point(x, y);
アニメーションを再開するには、再起動ボタンが必要です。 ボタンには2つの状態があります-ホバー中とハイライト中に強調表示されます。
コード class MiniButton extends Sprite { private var tf:TextField; public static const W:int = 100; public static const H:int = 24; public function MiniButton(text:String) { tf = new TextField(); var format:TextFormat = new TextFormat( "Arial" , 16 , 0x676767 , true , null, null, null, null , TextFormatAlign.CENTER); tf.defaultTextFormat = format; tf.mouseEnabled = false; tf.text = text; tf.width = W; tf.height = H; Redraw(0xB3F7B6); this.filters = [new GlowFilter(0xFFFFFF, 0.5, 14, 14, 3, 3)]; mouseChildren = false; buttonMode = true; addEventListener(MouseEvent.ROLL_OVER, HandleRollOver); addEventListener(MouseEvent.ROLL_OUT, HandleRollOut); } private function Redraw(color:int):void { graphics.clear(); graphics.beginFill(0xB3F7B6); graphics.drawRoundRect(0, 0, W, H, 16); graphics.endFill(); } private function HandleRollOut(e:MouseEvent):void { Redraw(0xB3F7B6); } private function HandleRollOver(e:MouseEvent):void { Redraw(0x37EC41); } }
アニメーションを再開および停止する方法。
コード private function Reset():void { btnRestart.visible = false; txtMask.width = 4; isRunning = true; addEventListener(Event.ENTER_FRAME, HandleEnterFrame); } private function Stop():void { btnRestart.visible = true; isRunning = false; removeEventListener(Event.ENTER_FRAME, HandleEnterFrame); }
必要な機能が準備できました。 コンストラクターで、
InitializeLayoutを呼び出してアニメーションを開始します。
コード public function Main() { InitalizeLayout(); Reset(); btnRestart.addEventListener(MouseEvent.CLICK, HandleResetClick); }
これがメインサイクルですが、やや面倒なことがわかりました。
コード private var firstParticle:Particle; private function HandleEnterFrame(e:Event):void { if (!isRunning) return;
PS。 念のため、完全なソース
コード package { import flash.display.Bitmap; import flash.display.BitmapData; import flash.display.BitmapDataChannel; import flash.display.BlendMode; import flash.display.Shape; import flash.display.Sprite; import flash.display.StageAlign; import flash.display.StageScaleMode; import flash.events.Event; import flash.events.MouseEvent; import flash.filters.BlurFilter; import flash.filters.GlowFilter; import flash.geom.ColorTransform; import flash.geom.Point; import flash.text.TextField; import flash.text.TextFormat; public class Main extends Sprite {