ActionScript 3.0で始めるオブジェクト指向スクリプティング

第46回 分割した三角形にビットマップを変形して塗る

この記事を読むのに必要な時間:およそ 4 分

描画する三角形の座標をマウスクリックで動かす

今回の最後は,テクスチャマッピングに簡単なインタラクションを加える。下図3のように正方形を4つの三角形に分け,インスタンス上をマウスクリックしたとき中央の座標をその位置に動かしてみる。ちょっとしたモーフィング効果だ。

図3 4つに分けた三角形の中央座標をマウスクリックした位置に動かす

画像 画像

Shapeインスタンスはマウスクリックを受け取れない。そこで,Spriteインスタンスに替えてビットマップを塗ることにする。あとは初めの描画については,三角形が4つに増えたこと以外,前掲スクリプト2と考え方は同じだ※3⁠。マウスクリックで動かす頂点座標は,頂点番号0に設定している。

スクリプト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インスタンスをマウスクリックInteractiveObject.mouseDownイベントしたときのリスナー関数(xDraw())は,クリック位置のxy座標でVectorオブジェクト(vertices)の頂点0の数値エレメントを書替えたうえで,Graphics.drawTriangles()メソッドに渡して再描画している。クリック時のSpriteインスタンスの基準点から見たマウスポインタのxy座標は,MouseEventオブジェクトのMouseEvent.localX/MouseEvent.localYプロパティで得られる。

[ムービープレビュー]でSpriteインスタンスをクリックすると,その位置がテクスチャの中心になるように変形して描かれる図4⁠。テクスチャの中心になっている頂点0の座標は,前掲図3のとおり4つの三角形すべてに共通している。もし,Graphics.drawTriangles()メソッドの第2引数で頂点番号の組を定めなければ,頂点0の座標が4つ重複し,マウスクリックのリスナー関数(xDraw())でも第1引数のVectorエレメントを4座標分書き替えなければならなかったはずだ。第2引数を用いたことにより,その書替えがひと組のxy座標で済んだのである。

図4 クリックした位置がテクスチャの中心になるように変形される

画像 画像

ようやく次回から,3次元空間座標を2次元平面に透視投影したうえで,その面にテクスチャマッピングする方法の解説に入る。

※3
頂点座標は,ビットマップ(クラスImage)のインスタンス(myTexture)から変数(nHalfWidthとnHalfHeight)に取り出して,Vectorオブジェクト(vertices)の数値エレメントに加えている。しかし,前掲図3左図のとおりに座標値を決め打ちしても結果は変わらない。

今回解説した次のサンプルファイルがダウンロードできます。

スクリプト1~3のサンプルファイル(CS5形式/約106KB)

著者プロフィール

野中文雄(のなかふみお)

ソフトウェアトレーナー,テクニカルライター,オーサリングエンジニア。上智大学法学部卒,慶応義塾大学大学院経営管理研究科修士課程修了(MBA)。独立系パソコン販売会社で,総務・人事,企画,外資系企業担当営業などに携わる。その後,マルチメディアコンテンツ制作会社に転職。ソフトウェアトレーニング,コンテンツ制作などの業務を担当する。2001年11月に独立。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。株式会社ロクナナ取締役(非常勤)。

URLhttp://www.FumioNonaka.com/

著書