Home > 梅原 > BetweenAS3を使ってみる1（はじめに）

BetweenAS3を使ってみる1（はじめに）

20091026
Category:梅原 /Tags:

umhr_betweenas3AS3のTweenライブラリ、BetweenAS3を使ってみる。

▼ BetweenAS3使用例（Wonderfl）

Tweenライブラリの代名詞、Tweenerはもちろん良くできていのでたくさんの人が使っている。開発が終了しちゃったけど、実績豊富でドキュメントも整備されているし、バグ出しも相当されていて良い意味で枯れているから安心できる。ただ、AS2時代の構造を残していて、AS3のメリットを生かしきれていないそうだ。パーティクル表現のような、多数のオブジェクトを管理すると処理が重くなってしまう。

そこで、注目されているのがBetweenAS3。
Tweenerより（他のTweenライブラリよりも）軽い。メモリの消費量も少ない。
上のBetweenAS3使用例では、1万個のtweenを管理している。Tweenerでこれをやったらもっとずっと重くなる。大変優秀。
ただし、絶賛開発中のためドキュメントが揃ってないし、解決されていないバグもあるみたい。っていうか、未実装機能も少なくないアルファ版なので細かいところで変更される可能性はまだまだあるらしい。

なので、使う際は要注意。現状は必要な時のみ使うのが正解だと思う。

▼ここからダウンロード
http://www.be-interactive.org/?itemid=505

▼開発者のBeInteractive!新藤さんによる発表資料（パフォーマンス比較デモ）が凄い
http://www.be-interactive.org/?itemid=510

▼紹介ページ（昔の説明なので、今では変わってしまった部分もある）
http://www.be-interactive.org/index.php?itemid=449

▼プロジェクトページ
http://www.libspark.org/wiki/BetweenAS3/en

▼ Wonderfl上のTutorial
http://wonderfl.net/tag/BetweenAS3Tutorial

▼ActionScript AS3(FP9)

/*
 * 元ネタは↓これ。見た目もロジックもほぼ同じだけど、全面的に書き換えた。
 * http://wonderfl.net/code/7566bce97625f61df3085809d5903b42657137ab
 * */
package
{
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.PixelSnapping;
	import flash.display.Sprite;
	import flash.display.StageQuality;
	import flash.events.Event;
	import flash.geom.ColorTransform;
	import org.libspark.betweenas3.BetweenAS3;
	import org.libspark.betweenas3.easing.Quart;
	import org.libspark.betweenas3.tweens.ITween;
	import net.hires.debug.Stats;
	import flash.geom.Point;

	public class Main extends Sprite
	{
		private const NUM_PARTICLES:int = 10000;
		private const FADE:ColorTransform = new ColorTransform(1, 1, 1, 1, -0x2F, -0x2F, -0xF);

		private var _particles:Array;
		private var _bitmapData:BitmapData;
		private var _bitmap:Bitmap;

		public function Main()
		{
			setupParticles();
			setupScreen();
			setupStage();
			addChild(new Stats());
			addEventListener(Event.ENTER_FRAME, enterFrameHandler);
		}

		private function setupParticles():void {
			_particles = [];
			for (var i:int = 0; i < NUM_PARTICLES; i++) {
				_particles[i] = new Point();
				var angleRadians:Number = i / NUM_PARTICLES * Math.PI * 2 * Math.random() * 32;
				var dx:Number = Math.cos(angleRadians) * 465 * 0.7273 + 465 / 2;
				var dy:Number = Math.sin(angleRadians) * 465 * 0.7273 + 465 / 2;
				var t:ITween = BetweenAS3.tween(_particles[i], { x:dx , y:dy }, { x:465 / 2, y:465 / 2 }, 3 + 2 * (Math.random() + i / NUM_PARTICLES), Quart.easeIn);
				t.stopOnComplete = false;
				t.play();
			}
		}

		private function setupScreen():void {
			_bitmapData = new BitmapData(465, 465, false, 0x000000);
			_bitmap = new Bitmap(_bitmapData, PixelSnapping.NEVER);
			this.addChild(_bitmap);
		}

		private function setupStage():void
		{
			stage.quality = StageQuality.LOW;
		}

		private function enterFrameHandler(e:Event):void
		{
			var bitmapData:BitmapData = _bitmapData;

			bitmapData.lock();
			bitmapData.colorTransform(_bitmapData.rect, FADE);
			for (var i:int = 0; i < NUM_PARTICLES; i++) {
				bitmapData.setPixel(_particles[i].x , _particles[i].y, 0xFFFFFF*i/NUM_PARTICLES);
			}
			bitmapData.unlock();
		}
	}
}

関連記事:

Comments are closed.