yukku++

[SWF] DistortImageTest.swf

Flash Player 9 が必要です。

Matrix クラスを使えばどんな形にでもなると思ったけど、台形変形は一筋縄には行かないのね。
ってわけでいろんな人のブログのエントリーを見るうちに DistortImageクラス にたどり着く。
リンク先の demo より、四角形の四頂点を自在に扱って、変形が出来るようになるクラス。
原理としては四角形を三角形に分割してどーのこーのしているらしい。
下部のスライドバーで分割数を変更できるので、その様子がわかる。
もとは Sandy という3Dを表現するためのクラス群のひとつだったらしいのだが、最新版には含まれていなかった。
何かに統合かなんかされたのだろうか？ってか Sandy のサンプル見てるとすごいな…。
下手すると Flash だけで初期のプレステくらいのゲーム作れちゃうんじゃないか…？
3Dにはまだクビを突っ込んでないけど(突っ込めるほどスキルはないが)やってみたいな。
さて、長くなったがテストサンプルとソース。これもサンプルのソースを参考。
頂点に mx:button をそのまま利用でカコワルイ。画像はウチのねこちゃん。
四頂点を設定するだけで変形できるからすごく簡単だなぁ。
あと、せっかくフルスクリーンも試したかったのに、SWFだけで設定できないみたい。
HTMLに埋め込んで、タグの allowFullScreen を true にしないとダメみたい。
マンドクセー。ので、Enter を押してもフルスクリーンになりません。エラー出ます。
保留ってことで。

// @Main.as
import mx.controls.*;
import flash.display.*;
import flash.events.*;
import flash.ui.Keyboard;
import DistortImage;

[SWF (backgroundColor = "#FFFFFF", width = "640", height = "480", frameRate = "12")]
[Embed(source = 'assets/testimg.jpg')]
private var myImg:Class; 
private var bmp:Bitmap = new myImg();
private var shape:Shape = new Shape();
private var di:DistortImage = new DistortImage(320, 240, 2, 2);

public function Init():void
{
	stage.addChild(shape);
	// ついでにフルスクリーンモードのテストも兼ねておこう。
	stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDown);
}

private function keyDown(evt:KeyboardEvent):void
{
	switch (evt.keyCode)
	{
		case Keyboard.ENTER:
			stage.displayState = StageDisplayState.FULL_SCREEN
		break;
	}
}

private function onEnterFrame():void
{
	shape.graphics.clear();
	shape.graphics.lineStyle(1, 0xEEEEEE, 0.3);
	// setTransform を使って四頂点を point で指定するだけで変形できる
	di.setTransform(shape.graphics, 
	bmp.bitmapData, 
	// 上から左上、右上、右下、左下の順
	getObjectCenter(tl), 
	getObjectCenter(tr), 
	getObjectCenter(br), 
	getObjectCenter(bl)
	);
}

private function getObjectCenter(btn:DisplayObject):Point
{
	// 各ボタン(ドラッグポイント)の中心を求めて point を返す関数
	var center:Point = new Point()
	center.x = btn.x + btn.width / 2;
	center.y = btn.y + btn.height / 2;
	return center
}

<?xml version="1.0" encoding="utf-8"?>
<!-- @DistortImageTest.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" applicationComplete="Init()" enterFrame="onEnterFrame()" layout="absolute">
    <mx:Script source="Main.as" />
    <mx:Button id="tl" x="20" y="20" width="24" height="24" buttonMode="true" mouseDown="tl.startDrag()" mouseUp="tl.stopDrag()" />
    <mx:Button id="tr" x="340" y="20" width="24" height="24" buttonMode="true" mouseDown="tr.startDrag()" mouseUp="tr.stopDrag()" />

    <mx:Button id="bl" x="20" y="260" width="24" height="24" buttonMode="true" mouseDown="bl.startDrag()" mouseUp="bl.stopDrag()" />
    <mx:Button id="br" x="340" y="260" width="24" height="24" buttonMode="true" mouseDown="br.startDrag()" mouseUp="br.stopDrag()" />
</mx:Application>