アンケートご協力のお願いgihyo.jpでは,2010年度に向けて豪華プレゼントが当たる読者属性アンケートを実施しております。ご協力ください。

gihyo.jp » WEB+DESIGN STAGE » 連載 » ロクナナワークショップ NEWS & REPORT » フォローアップ「Try the ActionScript 3D 野中文雄のFlash CS4で学ぶ3次元表現」

ロクナナワークショップ NEWS & REPORT

フォローアップ「Try the ActionScript 3D 野中文雄のFlash CS4で学ぶ3次元表現」

野中文雄氏

野中文雄氏

本イベントでは、ロクナナワークショップの人気講座「野中文雄の応用力に差をつけるActionScript数学講座 」を担当され,Flash解説書籍の執筆など幅広く活躍されている野中文雄氏をゲストに,Flash CS4 Professionalより加わった3次元表現を可能にする3つのクラスとひとつのメソッドが紹介されました。

本稿では野中氏からの解説記事をご紹介します。

01:3次元座標空間の表現

Flash Player 10では,3次元の表現ができるようになった。これは,3次元空間のオブジェクトを2次元のスクリーンに投影するときの遠近法,いわゆる「パースペクティブ」(perspective)が採入れられたことを意味する。具体的には,奥行きが遠ざかるほど,物体は小さく,間隔は狭く表現する。

たとえば,Flash CS4 Professionalで,タイムラインに配置した長方形のインスタンスをY軸で[3D回転]させると,奥の辺が短くなって台形として表示される(図1)。

図1 インスタンスをY軸で[3D回転]させる

図1 インスタンスをY軸で[3D回転]させる

コンピュータグラフィックスでこのような表現をする場合,画像を複数の三角形に分けて,それぞれを変形してからつなぎ合わせるのが通常だ。もちろん,Flash Player 10/ActionScript 3.0では,インスタンスに3次元の設定を加えれば,パースペクティブは自動的に与えられる。しかし,必要があればその三角形分割による変形の機能を利用できるように,ActionScript 3.0のGraphicsクラスにメソッドがひとつ加えられた。

この機能を用いると,矩形などの平面に3次元の凹凸を加えたかのような表現ができる(図2)。なお,分割した三角形に面として設定する画像は「テクスチャ」ともいい,それぞれの三角形にテクスチャを貼りつける操作は「マッピング」と呼ばれる。

図2 矩形を分割した三角形にテクスチャマッピングして3次元の凹凸を表現する

図2 矩形を分割した三角形にテクスチャマッピングして3次元の凹凸を表現する

02:Graphics.drawTriangles()メソッド

複数の三角形を描いて,それぞれに塗りを変形して適用するのがGraphics.drawTriangles()メソッドだ[※1]。テクスチャを複数の三角形に分割して,変形したうえで合成することにより,3次元を2次元に投影できる。まずは,Graphics.drawTriangles()メソッドのシンタックスを確認しよう。

drawTriangles(頂点座標:Vector.<Number>, 頂点番号:Vector.<int> = null, uvtデータ:Vector.
<Number> = null):void 

3つの引数には,分割する三角形の頂点座標や頂点番号,テクスチャのマッピングの仕方(uvtデータ)などの情報を指定する。分割する三角形の数を増やせば,複雑で多彩な表現ができる(図2参照)。

メソッドの3つの引数は,データ型がFlash Player 10から備わったVectorクラスで定義されている。インスタンスの生成やデータ型の指定が少し変わっているので,先に簡単に説明しておこう。

Vectorクラス

Vectorクラスは,いわば最適化されたArrayクラス(配列) だ。Vectorインスタンスには,配列と同じように,複数の値にインデックスをつけて納められる。配列と違うのは,第1にエレメントに対して,データ型をひとつだけ指定する。そして第2に,エレメントのインデックスは連番でなければならない。

VectorクラスがArrayクラスと異なる点
  1. エレメントのデータ型をひとつだけ指定。
  2. エレメントのインデックスは連番。

Vectorクラスのコンスラクタメソッドは,以下のシンタックスでインスタンスを生成する。コンストラクタの後のドット(.)に続けて,山括弧<>の中にエレメントのデータ型(「ベース型」)を指定する。

Vector.<データ型>(長さ:uint = 0, 長さの固定:Boolean = false) 

インスタンスを代入する変数宣言のデータ型にも,山括弧<>でベース型を指定する。たとえば,変数myVectorにベース型が整数(int型)のVectorインスタンスを代入するのは,つぎのようなステートメントだ。

var myVector:Vector.<int> = new Vector.<int>(); 

Vectorインスタンスのエレメントにアクセスするには,配列と同様に配列アクセス演算子[]を用いる。また,Arrayクラスと同じく,Vector.lengthプロパティやVector.push()メソッドなども備えている。

塗りのビットマップの指定

Graphics.drawTriangles()メソッドで三角形にテクスチャマッピングするには, Graphics.beginBitmapFill()メソッドで塗りのビットマップを指定しなければならない。第1引数には,塗りに用いるビットマップのインスタンスを渡す。

beginBitmapFill(ビットマップ:BitmapData):void

メソッドの第1引数には,[ライブラリ]のビットマップを指定することができる。そのビットマップには,[ビットマッププロパティ]ダイアログボックスで[クラス]に任意の名前を設定する(図3)。

図3 [ビットマッププロパティ]ダイアログボックスで[クラス]を入力

図3 [ビットマッププロパティ]ダイアログボックスで[クラス]を入力

Graphics.beginBitmapFill()メソッドの引数に渡すのは,BitmapDataインスタンスだ。[ライブラリ]のビットマップは,デフォルトで[基本クラス]としてBitmapData クラスを継承する(図2)。よって,ビットマップのインスタンスを生成するには,[クラス]に入力したクラス名(Pen)をコンストラクタメソッドとして,以下のようにnew演算子で呼出す。なお,コンストラクタの引数には,幅と高さを意味するふたつの数値を指定する。値はともに0でよい。

var myTexture:BitmapData = new Pen(0, 0);   // ふたつの0を引数として渡す
mySprite.graphics.beginBitmapFill(myTexture);   // メソッドにBitmapDataインスタンスを渡す

生成したビットマップ(データ型はBitmapDataで指定)のインスタンスは,Graphics.beginBitmapFill()メソッドに引数として渡す。メソッドは,塗りの対象となるインスタンスのSprite.graphicsプロパティを参照して呼出す。これで,Spriteインスタンス(mySprite)への描画の塗りとして,ビットマップ(BitmapDataインスタンス)が設定された。あとは,Spriteインスタンスに描画メソッドでシェィプを描けば,その塗りにビットマップが適用される。

[※1]
Graphics.drawTriangles()メソッドについて詳しくは,Adobeデベロッパーセンターに寄稿した「三角形分割によるテクスチャマッピング - Graphics.drawTriangles()メソッド Part 1」および「角形分割によるテクスチャマッピング - Graphics.drawTriangles()メソッド Part 2」で解説している。

著者プロフィール

ロクナナワークショップ(ロクナナワークショップ)

アドビ認定トレーニングセンター ロクナナワークショップでは,Web業界の第一線で活躍中の講師陣による,実践的な講座を開講しています。全ての講座は最大6名・1日6時間で完結する,PCを操作しながらの集中トレーニングです。

また,各方面で活躍中のクリエイターをお迎えし,最新技術やアイデアをご紹介いただくイベントも開催しています。学生割引もありますので,是非一度参加してみてください。

URL:http://67.org/ws/

コメント

コメントの記入

パスサポ

多数の情報処理技術者試験対策書籍の発行実績を誇る技術評論社がお届けする,資格試験合格サイト「めざせ! 情報処理試験 パスサポ」が開設されました。

ピックアップ

サクセスストーリーに続く,快適サーバー運用管理のヒント!

データの増大,煩雑な管理,システムダウン,セキュリティなど,迫りくる課題からシステム管理者の負担を軽くするポイントを解説します。

gihyo.jp インフラエンジニア情報局

ネットワークやITにかかわるあらゆる業種で必要とされるインフラエンジニアに向けた技術情報や心構え,その魅力について多角的に紹介。

テストエンジニア ステーション

いま,ITに関わるあらゆる開発業務で注目されつつあるテスト系エンジニアをターゲットにしたコンテンツサイトを展開します。

一行クイックアンケート

gihyo.jpで取り上げてほしいネタは?

※検索はページ右上の検索ボックスをご利用ください。

その他の連載

使ってみよう! Windows Live SDK/API

Windows Liveサービスの一部にはAPIやSDKとして提供されているものがあります。本連載では各API・SDKの紹介とそれらを利用したアプリケーションを開発していきます。

Lifelog~毎日保存したログから見えてくる個性

コンピュータを使って,日常のさまざまなことの記録(ログ)をとり,それを分析して活用することで,もう一段階上の「楽な生活」をめざす日々の研究報告です。

もっと便利に!jQueryでラクラクサイト制作(実践サンプル付き)

本連載では,実践サンプルとともに,jQueryを上手に活用してサイト制作の品質向上・効率化を実現するための実践テクニックを解説します。

Ruby Freaks Lounge

Rubyに関わる,執筆者自身の旬なテーマを扱った,リレー形式の連載です。

これでできる! クロスブラウザJavaScript入門

JavaScriptはウェブ制作において避けては通れない重要な言語ですが,JavaScriptに苦手意識を持たれている方は少なくないようです。 その最大の原因がクロスブラウザ対応という課題であり,本連載ではクロスブラウザ対応のテクニックを詳細に解説します。

ビジネスで成功するためのシステム運用管理のポイント

システムの多様化,技術進歩に伴い,ITシステムの運用管理の必要性が年々高まっています。本連載では,システムの運用管理とは何かについて,現場のニーズと具体的な指針を押さえながらを解説します。

2010年版SEO体得講座

本連載では,いまや企業サイトの戦略の1つとして欠かすことのできないSEOについて,最新トレンドからすぐに使えるTipsまでを紹介します。

小型Linuxサーバの最高峰 OpenBlockS 600活用指南

搭載メモリの増加,CPUクロックの向上など,あらゆる面が強化された期待の新モデルOpenBlockS 600。この記事ではOpenBlockS 600の紹介から,活用するためのさまざまなノウハウを紹介していきます。

連載一覧

gihyo.jp

  • DEVELOPER STAGE
  • ADMINISTRATOR STAGE
  • WEB+DESIGN STAGE
  • LIFESTYLE STAGE
  • SCIENCE STAGE
  • NEWS & REPORT

書籍案内

  • 新刊書籍
  • 書籍ジャンル一覧
  • 書籍シリーズ一覧
  • 新刊ピックアップ
  • ロングセラー
  • 電脳会議

定期刊行物一覧

  • Software Design
  • WEB+DB PRESS
  • Web Site Expert
  • 組込みプレス