. FlashゲームPG講座 For AS3.0【Graphics クラスについて】
FlashゲームPG講座 For AS3.0【Graphics クラスについて】
FlashゲームPG講座 For AS3.0【Graphics クラスについて】

Graphics クラスについて

(0,1) (2,3) (4,5) | (6,7) (8,9) (10,11) | (12,13) (14,15) (16,17) .

この場合、第01引数の総数は、 6 の倍数 である必要があります。

■第02引数に「インデックスバッファ」を指定した場合

任意の格納位置にある座標を選んで、三角形とする事ができます。

同じ座標が存在するストリップ形状などで利用すると効果的です。

指定するインデックス値は、座標単位です。

例えば、4 を指定した場合、x:(8 番地の値) , y:(9 番地の値) となります。

例えば、10 を指定した場合、x:(20 番地の値) , y:(21 番地の値) となります。

第02引数の総数は、 3 の倍数 である必要があります。

(0,1,3) | (3,1,4) | (1,2,4) | (4,2,5) .

(第03引数) UVT データについて

UV 座標とは、テクスチャ上の座標です。

左上端を原点(0,0)、右下端を(1,1) とした座標系です。

U は、水平方向の位置 (0.0 ～ 1.0) です。

V は、垂直方向の位置 (0.0 ～ 1.0) です。

ピクセル値ではなく率値なので、解像度の違う画像に差し替えても、マッピングがずれないなどのメリットがあります。

■第03引数に「null」を指定した場合

面の描画スタイルは、そのまま動作します。

■第03引数に「UV データ」を指定した場合

テクスチャ塗りの行列は、無視されます。

テクスチャの姿勢は、UV 値によって決定します。（三角形ごとに）

■「UV データ」を用意する（２Ｄの場合）

２Ｄで動作する条件です。

(第03引数の総数) = (第01引数の総数)

第01引数の座標単位の順番で、「UV 座標」を格納します。

(u,v) | (u,v) | (u,v) | (u,v) | (u,v) .

■「UVT データ」を用意する（３Ｄの場合）

３Ｄで動作する条件です。

(第03引数の総数) = ((第01引数の総数) * 1.5)

第01引数の座標単位の順番で、「UV 座標と t 値 」を格納します。

(u,v,t) | (u,v,t) | (u,v,t) | (u,v,t) | (u,v,t) .

t 値は、「パースペクティブ座標系での、頂点座標の z 値 」から計算できます。

t 値は、 テクスチャの投影変換 にのみ作用します。

三角形の描画順序が変化したり、大きさが歪曲する事はありません。

(第04引数) カリングについて

カリングには、以下の種類があります。

デフォルトは、TriangleCulling. NONE です。

カリングなしカリングあり drawTriangles() メソッドの３Ｄの描画について

■一般的なプリミティブ描画との違い

drawTriangles() メソッドでは、最終的な２Ｄ座標系のデータを指定します。

３Ｄ関連の演算は、すべて自前で行う必要があります。

隠面消去のアルゴリズムは、「Zソート」となります。

「Zバッファ」はありません。

t 値の指定によって、三角形の描画順が変化する事はありません。

自前で、z 値を考慮しながら、格納順序を入れ替える必要があります。

線は、面塗りよりも必ず手前に描画されます。

面塗りによって、線が描き潰される事はありません。

使用例

２Ｄトライアングルリストの描画例

「頂点バッファ」を使って描画する

import flash.display.Shape; import flash.display.Graphics; import flash.display.TriangleCulling; // ------------------------------------------------------------ // Shape オブジェクトを作成 // ------------------------------------------------------------ var shape:Shape = new Shape(); // ステージに配置 stage.addChild(shape); // ------------------------------------------------------------ // Graphics オブジェクトを取得 // ------------------------------------------------------------ var g:Graphics = shape.graphics; // ------------------------------------------------------------ // 描画スタイルを指定する // ------------------------------------------------------------ // 線に「単一色塗り」スタイルを指定する g.lineStyle (5 , 0x000000 , 1.0); // 面に「単一色塗り」スタイルを指定する g.beginFill (0x808080 , 1.0); // ------------------------------------------------------------ // 頂点バッファを用意する // ------------------------------------------------------------ var vertices:Vector. = Vector.([ // １つ目の三角形 35.0, 50.0, // １つ目の座標 (x,y) 205.0, 35.0, // ２つ目の座標 (x,y) 135.0, 165.0, // ３つ目の座標 (x,y) // ２つ目の三角形 325.0, 35.0, // １つ目の座標 (x,y) 405.0, 145.0, // ２つ目の座標 (x,y) 225.0, 165.0 // ３つ目の座標 (x,y) ]); // ------------------------------------------------------------ // トライアングルリストを描画する // ------------------------------------------------------------ g.drawTriangles ( vertices , null , null , TriangleCulling.NONE );

「頂点バッファ」と「頂点インデックスバッファ」を使って描画する

import flash.display.Shape; import flash.display.Graphics; import flash.display.TriangleCulling; // ------------------------------------------------------------ // Shape オブジェクトを作成 // ------------------------------------------------------------ var shape:Shape = new Shape(); // ステージに配置 stage.addChild(shape); // ------------------------------------------------------------ // Graphics オブジェクトを取得 // ------------------------------------------------------------ var g:Graphics = shape.graphics; // ------------------------------------------------------------ // 描画スタイルを指定する // ------------------------------------------------------------ // 線に「単一色塗り」スタイルを指定する g.lineStyle (5 , 0x000000 , 1.0); // 面に「単一色塗り」スタイルを指定する g.beginFill (0x808080 , 1.0); // ------------------------------------------------------------ // 頂点バッファを用意する // ------------------------------------------------------------ var vertices:Vector. = Vector.([ 35.0, 35.0, // 0 番目の座標 (x,y) 165.0, 40.0, // 1 番目の座標 (x,y) 330.0, 30.0, // 2 番目の座標 (x,y) 45.0, 180.0, // 3 番目の座標 (x,y) 185.0, 185.0, // 4 番目の座標 (x,y) 335.0, 165.0, // 5 番目の座標 (x,y) 55.0, 310.0, // 6 番目の座標 (x,y) 180.0, 320.0, // 7 番目の座標 (x,y) 345.0, 315.0 // 8 番目の座標 (x,y) ]); // ------------------------------------------------------------ // 頂点インデックスバッファを用意する // ------------------------------------------------------------ var indices:Vector. = Vector.([ 0,1,3, // １つ目の三角形 3,1,4, // ２つ目の三角形 1,2,4, // ３つ目の三角形 4,2,5, // ４つ目の三角形 3,4,6, // ５つ目の三角形 6,4,7, // ６つ目の三角形 4,5,7, // ７つ目の三角形 7,5,8 // ８つ目の三角形 ]); // ------------------------------------------------------------ // トライアングルリストを描画する // ------------------------------------------------------------ g.drawTriangles ( vertices , indices , null , TriangleCulling.NONE );

３Ｄトライアングルリストの描画例

import flash.display.Shape; import flash.display.BitmapData; import flash.display.BitmapDataChannel; import flash.display.Graphics; import flash.display.TriangleCulling; import flash.display.StageScaleMode; import flash.display.StageAlign; import flash.geom.Vector3D; import flash.geom.Matrix3D; import flash.events.Event; // ------------------------------------------------------------ // ステージの設定 // ------------------------------------------------------------ stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT; // ------------------------------------------------------------ // ３Ｄのデータ // ------------------------------------------------------------ var mesh_obj:Object = < vertex:< data:Vector.([ -1.0, -1.0, -1.0, 1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, 1.0 ]), indices:[ 0,1,2, 2,1,3, 2,3,6, 6,3,7, 1,5,3, 3,5,7, 1,0,5, 5,0,4, 5,4,7, 7,4,6, 0,2,4, 4,2,6 ] >, uv:< data:[ < u:0.0, v:0.0 >, < u:0.5, v:0.0 >, < u:1.0, v:0.0 >, < u:0.0, v:0.5 >, < u:0.5, v:0.5 >, < u:1.0, v:0.5 >, < u:0.0, v:1.0 >, < u:0.5, v:1.0 >, < u:1.0, v:1.0 >], indices:[ 0,1,3, 3,1,4, 3,4,6, 6,4,7, 0,2,6, 6,2,8, 1,2,4, 4,2,5, 4,5,7, 7,5,8, 0,2,6, 6,2,8 ] > >; // ------------------------------------------------------------ // テクスチャを用意する // ------------------------------------------------------------ var bitmap_data:BitmapData = (function():BitmapData< // BitmapData オブジェクトを作成する var bitmap_data:BitmapData = new BitmapData( 16 , 16 , true , 0x00000000 ); // ノイズを描画する bitmap_data.noise( Math.floor(Math.random() * 0x7FFFFFFF), 0, 255, (BitmapDataChannel.ALPHA), true ); return bitmap_data; >)(); // ------------------------------------------------------------ // Shape オブジェクトを作成 // ------------------------------------------------------------ var shape:Shape = new Shape(); // ステージに配置 stage.addChild(shape); // ------------------------------------------------------------ // Graphics オブジェクトを取得 // ------------------------------------------------------------ var g:Graphics = shape.graphics; (function():void< var i:int; var j:int; var k:int; var p:int; var mtx:Matrix3D; var vtx:Vector.; // メッシュの行列 var mesh_mtx:Matrix3D = new Matrix3D(); // カメラ行列 var view_mtx:Matrix3D = new Matrix3D(); // ３Ｄデータの参照 var vertex_data:Vector.// ------------------------------------------------------------ // 毎フレーム実行されるイベント // ------------------------------------------------------------ stage.addEventListener(Event.ENTER_FRAME , function (e:Event):void< // ------------------------------------------------------------ // 少しずつ回転 // ------------------------------------------------------------ mesh_mtx.prependRotation (0.05, Vector3D.Z_AXIS); mesh_mtx.prependRotation (0.1 , Vector3D.X_AXIS); mesh_mtx.appendRotation (1.0 , Vector3D.Y_AXIS); mesh_mtx.position = new Vector3D(0.0 , 0.0, 4.0); // ------------------------------------------------------------ // 頂点データをカメラ座標系に変換 // ------------------------------------------------------------ vtx = new Vector.(); mtx = view_mtx.clone(); mtx.invert(); mtx.prepend(mesh_mtx); mtx.transformVectors(vertex_data , vtx); // ------------------------------------------------------------ // 投影変換とビューポート変換 // ------------------------------------------------------------ var fov:Number = 60; // 視野角 var ofs_x:Number = stage.stageWidth * 0.5; var ofs_y:Number = stage.stageHeight * 0.5; var scale:Number = 1 / Math.tan(fov * 0.5 * Math.PI / 180) * ofs_y; var num:int = vertex_data.length / 3; for(i=0;i < num;i++)< p = i * 3; vtx[p + 0] = (vtx[p + 0] / vtx[p + 2]) * scale + ofs_x; vtx[p + 1] = (vtx[p + 1] / vtx[p + 2]) * scale + ofs_y; >// ------------------------------------------------------------ // Z ソート // ------------------------------------------------------------ var depths:Array = new Array(); num = vertex_indices.length / 3; for(i=0;i < num;i++)< p = i * 3; depths.push(< z:( vtx[vertex_indices[p + 0] * 3 + 2] + vtx[vertex_indices[p + 1] * 3 + 2] + vtx[vertex_indices[p + 2] * 3 + 2] ) / 3.0 >); > depths = depths.sortOn("z" , (Array.NUMERIC | Array.DESCENDING | Array.RETURNINDEXEDARRAY)); // ------------------------------------------------------------ // 奥から順番にバッファに出力 // ------------------------------------------------------------ var vertices:Vector. = new Vector.(); var uvt_data:Vector. = new Vector.(); num = vertex_indices.length / 3; for(i=0;i < num;i++)< for(j=0;j < 3;j++)< k = (depths[i] * 3) + j; p = vertex_indices[k] * 3; var uv:Object = uv_data[uv_indices[k]]; vertices.push(vtx[p + 0]); // x vertices.push(vtx[p + 1]); // y uvt_data.push(uv.u); // u uvt_data.push(uv.v); // v uvt_data.push(1 / vtx[p + 2]); // t > > // ------------------------------------------------------------ // 描画済みグラフィックをすべてクリアする // ------------------------------------------------------------ g.clear(); // ------------------------------------------------------------ // 描画スタイルを指定する // ------------------------------------------------------------ // 線に「単一色塗り」スタイルを指定する g.lineStyle (0 , 0x000000 , 1.0); // 面に「テクスチャ塗り」スタイルを指定する g.beginBitmapFill (bitmap_data , null , true , false); // ------------------------------------------------------------ // トライアングルリストを描画する // ------------------------------------------------------------ g.drawTriangles ( vertices , null , uvt_data , TriangleCulling.NONE ); >); >)();

GraphicsData について (Flash Player 11.6 以降)

■ GraphicsData のリストを取得する

readGraphicsData() メソッドを使用します。

ベクター関連の実際のデータを取得できます。

Adobe Flash にて描いた絵などの解析もできます。

Graphics.readGraphicsData( 再帰？ ) :Vector.

第01引数(略可)Boolean取得結果に、子孫表示オブジェクトもすべて含めるか？ 戻り値 Vector. GraphicsData のリストが得られる

GraphicsData のリストを取得する

import flash.display.Shape; import flash.display.Sprite; import flash.display.Graphics; import flash.display.IGraphicsData; // ------------------------------------------------------------ // Document オブジェクト（メインタイムライン）を取得する // ------------------------------------------------------------ var document_obj:Sprite = stage.getChildAt(0) as Sprite; // ------------------------------------------------------------ // Shape オブジェクトを作成 // ------------------------------------------------------------ var shape:Shape = function ():Shape< // Shape オブジェクトを作成 var shape:Shape = new Shape(); // Graphics オブジェクトを取得 var g:Graphics = shape.graphics; // 線に「単一色塗り」スタイルを指定する g.lineStyle (5 , 0x000000 , 1.0); // 面に「単一色塗り」スタイルを指定する g.beginFill (0x808080 , 1.0); // 矩形を描画する g.drawRect ( 0.0 , 0.0 , 100.0 , 100.0 ); return shape; >(); // Document（メインタイムライン）に配置 document_obj.addChild(shape); // ------------------------------------------------------------ // Graphics オブジェクトを取得 // ------------------------------------------------------------ var g:Graphics = document_obj.graphics; // ------------------------------------------------------------ // GraphicsData のリストを取得する // ------------------------------------------------------------ var graphics_data_list:Vector. = g.readGraphicsData(true); // 出力テスト trace(graphics_data_list); ■ GraphicsData のリストを使って描画する

drawGraphicsData() メソッドを使用します。

Graphics.drawGraphicsData( graphicsData ) :void

第01引数(略可)Vector. GraphicsData リストを指定 戻り値 voidなし

GraphicsData のリストを取得する

import flash.display.Shape; import flash.display.Graphics; import flash.display.IGraphicsData; import flash.display.GraphicsStroke; import flash.display.GraphicsSolidFill; import flash.display.GraphicsPath; import flash.display.GraphicsEndFill; // ------------------------------------------------------------ // Shape オブジェクトを作成 // ------------------------------------------------------------ var shape:Shape = new Shape(); // ステージに配置 stage.addChild(shape); // ------------------------------------------------------------ // GraphicsData リストを用意する // ------------------------------------------------------------ var graphics_data_list:Vector. = function ():Vector.< // ------------------------------------------------------------ // 線の「単一色塗り」スタイル // ------------------------------------------------------------ var style_stroke:GraphicsStroke = new GraphicsStroke(); style_stroke.thickness = 5; style_stroke.fill = new GraphicsSolidFill(0x000000 , 1.0); // ------------------------------------------------------------ // 面の「単一色塗り」スタイル // ------------------------------------------------------------ var style_fill_solid:GraphicsSolidFill = new GraphicsSolidFill(); style_fill_solid.color = 0x808080; style_fill_solid.alpha = 1.0; // ------------------------------------------------------------ // 描画パスのコマンドと座標データ // ------------------------------------------------------------ var draw_path:GraphicsPath = new GraphicsPath(); draw_path.moveTo(219.9 , 123.5); draw_path.lineTo(147.5 , 216.1); draw_path.lineTo( 37.1 , 175.9); draw_path.lineTo( 41.2 , 58.4); draw_path.lineTo(154.2 , 26.0); draw_path.lineTo(219.9 , 123.5); // ------------------------------------------------------------ // 描画パスを閉じて、塗りつぶしを確定 // ------------------------------------------------------------ var end_fill:GraphicsEndFill = new GraphicsEndFill(); // ------------------------------------------------------------ // GraphicsData リストを作成 // ------------------------------------------------------------ var list:Vector. = new Vector.(); list.push(style_stroke); list.push(style_fill_solid); list.push(draw_path); list.push(end_fill); return list; >(); // ------------------------------------------------------------ // Graphics オブジェクトを取得 // ------------------------------------------------------------ var g:Graphics = shape.graphics; // ------------------------------------------------------------ // GraphicsData のリストを使って描画する // ------------------------------------------------------------ g.drawGraphicsData(graphics_data_list); ■ GraphicsData のサブクラス一覧

IGraphicsData を継承するクラスは、以下の種類があります。

■面の描画スタイル（線の塗りスタイル）

■ GraphicsStroke クラスについて

GraphicsStroke クラスは、線の描画スタイルに該当します。

GraphicsStroke クラスでは、線の基礎的な設定を行います。

線の塗りは、別のクラスから設定します。

new GraphicsStroke( thickness , pixelHinting , scaleMode , caps , joints , miterLimit , fill ) :GraphicsStroke

第01引数(略可)Numberthickness プロパティと同等。 第02引数(略可)BooleanpixelHinting プロパティと同等。 第03引数(略可)StringscaleMode プロパティと同等。 第04引数(略可)Stringcaps プロパティと同等。 第05引数(略可)Stringjoints プロパティと同等。 第06引数(略可)NumbermiterLimit プロパティと同等。 第07引数(略可)IGraphicsFillfill プロパティと同等。 戻り値 GraphicsStrokeGraphicsStroke オブジェクトが得られる

■線の塗りの設定（fill プロパティ）

線の塗りを設定します。

IGraphicsFill を継承するクラスは、以下の種類があります。

■ GraphicsSolidFill クラスについて

GraphicsSolidFill クラスは、面の描画スタイルの一種です。

単一色塗りに該当します。

new GraphicsSolidFill( color , alpha ) :GraphicsSolidFill

第01引数(略可)uintcolor プロパティと同等。 第02引数(略可)Numberalpha プロパティと同等。 戻り値 GraphicsSolidFillGraphicsSolidFill オブジェクトが得られる ■ GraphicsGradientFill クラスについて

GraphicsGradientFill クラスは、面の描画スタイルの一種です。

グラデーション塗りに該当します。

new GraphicsGradientFill( type , colors , alphas , ratios , matrix , spreadMethod , interpolationMethod , focalPointRatio ) :GraphicsGradientFill

第01引数(略可)Stringtype プロパティと同等。 第02引数(略可)Arraycolors プロパティと同等。 第01引数(略可)Arrayalphas プロパティと同等。 第02引数(略可)Arrayratios プロパティと同等。 第01引数(略可)Matrixmatrix プロパティと同等。 第02引数(略可)StringspreadMethod プロパティと同等。 第01引数(略可)StringinterpolationMethod プロパティと同等。 第02引数(略可)NumberfocalPointRatio プロパティと同等。 戻り値 GraphicsGradientFillGraphicsGradientFill オブジェクトが得られる ■ GraphicsBitmapFill クラスについて

GraphicsBitmapFill クラスは、面の描画スタイルの一種です。

テクスチャ塗りに該当します。

new GraphicsBitmapFill( bitmapData , matrix , repeat , smooth ) :GraphicsBitmapFill

第01引数(略可)BitmapDatabitmapData プロパティと同等。 第02引数(略可)Matrixmatrix プロパティと同等。 第03引数(略可)Booleanrepeat プロパティと同等。 第04引数(略可)Booleansmooth プロパティと同等。 戻り値 GraphicsBitmapFillGraphicsBitmapFill オブジェクトが得られる ■ GraphicsShaderFill クラスについて

GraphicsShaderFill クラスは、面の描画スタイルの一種です。

シェーダー塗りに該当します。

new GraphicsShaderFill( shader , matrix ) :GraphicsShaderFill

第01引数(略可)Shadershader プロパティと同等。 第02引数(略可)Matrixmatrix プロパティと同等。 戻り値 GraphicsShaderFillGraphicsShaderFill オブジェクトが得られる ■ GraphicsPath クラスについて

GraphicsPath クラスは、drawPath() メソッドに該当します。

描画パス(線関連)をまとめて高速描画します。

new GraphicsPath( commands , data , winding ) :GraphicsPath

第01引数(略可)Vector. commands プロパティと同等。 第02引数(略可)Vector. data プロパティと同等。 第03引数(略可)Stringwinding プロパティと同等。 戻り値 GraphicsPathGraphicsPath オブジェクトが得られる

以下の出力用メソッドを呼び出すと、リストデータを生成できます。

commands、data プロパティの最後尾に、１回分のデータが追加されます。

■ GraphicsTrianglePath クラスについて

GraphicsTrianglePath クラスは、drawTriangles() メソッドに該当します。

トライアングルリストを描画します。

new GraphicsTrianglePath( vertices , indices , uvtData , culling ) :GraphicsTrianglePath

第01引数(略可)Vector. vertices プロパティと同等。 第02引数(略可)Vector. indices プロパティと同等。 第03引数(略可)Vector. uvtData プロパティと同等。 第04引数(略可)Stringculling プロパティと同等。 戻り値 GraphicsTrianglePathGraphicsTrianglePath オブジェクトが得られる ■ GraphicsEndFill クラスについて

GraphicsEndFill クラスは、endFill() メソッドに該当します。

描画パスを閉じて、面の塗りつぶしを確定します。

new GraphicsEndFill( ) :GraphicsEndFill

引数 voidなし 戻り値 GraphicsEndFillGraphicsEndFill オブジェクトが得られる 2002-2018 / 解像度1024×768以上 / IE8.0以上推奨 / by Hakuhin
📎📎📎📎📎📎📎📎📎📎