描画する三角形の座標をマウスクリックで動かす
今回の最後は，
図3 4つに分けた三角形の中央座標をマウスクリックした位置に動かす
Shapeインスタンスはマウスクリックを受け取れない。そこで，
スクリプト3 三角形の頂点座標のひとつをマウスクリックした位置に動かしてテクスチャマッピング
// フレームアクション
var nCenterX:Number = stage.stageWidth / 2;
var nCenterY:Number = stage.stageHeight / 2;
var mySprite:Sprite = new Sprite();
var myGraphics:Graphics = mySprite.graphics;
var myTexture:BitmapData = new Image();
var nHalfWidth:Number = myTexture.width / 2;
var nHalfHeight:Number = myTexture.height / 2;
var vertices:Vector.<Number> = new Vector.<Number>();
var indices:Vector.<int> = new Vector.<int>();
var uvData:Vector.<Number> = new Vector.<Number>();
mySprite.x = nCenterX;
mySprite.y = nCenterY;
// 頂点座標
vertices.push(0, 0); // 頂点0: マウスクリックで動かす座標
vertices.push(-nHalfWidth, -nHalfHeight);
vertices.push(nHalfWidth, -nHalfHeight);
vertices.push(nHalfWidth, nHalfHeight);
vertices.push(-nHalfWidth, nHalfHeight);
// 頂点番号
indices.push(0, 1, 2);
indices.push(0, 2, 3);
indices.push(0, 3, 4);
indices.push(0, 4, 1);
// uv座標
uvData.push(0.5, 0.5);
uvData.push(0, 0);
uvData.push(1, 0);
uvData.push(1, 1);
uvData.push(0, 1);
myGraphics.beginBitmapFill(myTexture);
myGraphics.drawTriangles(vertices, indices, uvData);
myGraphics.endFill();
addChild(mySprite);
mySprite.addEventListener(MouseEvent.MOUSE_DOWN, xDraw);
function xDraw(eventObject:MouseEvent):void {
// 頂点0の数値エレメント書替え
vertices[0] = eventObject.localX;
vertices[1] = eventObject.localY;
myGraphics.clear();
myGraphics.beginBitmapFill(myTexture);
myGraphics.drawTriangles(vertices, indices, uvData);
myGraphics.endFill();
}
Spriteインスタンスをマウスクリック
[ムービープレビュー]でSpriteインスタンスをクリックすると，
図4 クリックした位置がテクスチャの中心になるように変形される
ようやく次回から，
- ※3
- 頂点座標は，
ビットマップ （クラスImage） のインスタンス （myTexture） から変数 （nHalfWidthとnHalfHeight） に取り出して， Vectorオブジェクト （vertices） の数値エレメントに加えている。しかし， 前掲図3左図のとおりに座標値を決め打ちしても結果は変わらない。
今回解説した次のサンプルファイルがダウンロードできます。
スクリプト1～3のサンプルファイル(CS5形式/約106KB)
