読者です 読者をやめる 読者になる 読者になる
無料で使えるシステムトレードフレームワーク「Jiji」 をリリースしました!

・OANDA Trade APIを利用した、オープンソースのシステムトレードフレームワークです。
・自分だけの取引アルゴリズムで、誰でも、いますぐ、かんたんに、自動取引を開始できます。

Flex SDK + Papervision3Dで球を描く&回転させるチュートリアル

Flex SDK + Papervision3Dで、ワイヤーフレームの球を描いて 回転させるまでのチュートリアルです。Flex SDK 4 + Papervision3D 2.1の組み合わせで試してみましたが、特に問題なくビルドできましたよと。お手軽にFlash 3Dで遊べます。

サマリ

  1. Flex SDKのダウンロード
  2. Papervision3Dのダウンロード
  3. ビルドに必要なファイルの準備
  4. スクリプトを書く
  5. ビルド用設定ファイルを書く
  6. コンパイル!
  7. 補足:参考にしたサイトなど

1.Flex SDKのダウンロード

まずは、Flex SDKのインストールから。Flex 4 Downloads - Adobe Open Sourceより、現時点で最新の「4.1.0.16076」をダウンロードして、任意のディレクトリに展開します。

展開後、「/bin」を環境変数PATHに追加。コマンドプロンプトを開き、

> mxmlc -version

でバージョンが表示されればOKです。

2.Papervision3Dのダウンロード

Papervision3D - Google CodeからPapervision3Dのswcをダウンロードします。
今回は最新のコンパイル済みバイナリ「Papervision3D_2.1.920.swc」を取得して使用しました。

3.ビルドに必要なファイル/フォルダの準備

次に「*-config.xml」などビルドに必要なファイル/フォルダを用意します。必要なものは以下の3つです。

Sample.as
Flashソースコード。今回は1クラスなのでファイルも1つです。
Sample-config.xml
コンパイラに渡すオプションを定義するファイルです。
Papervision3D_2.1.920.swc
↑でダウンロードしたPapervision3Dのライブラリです。

これらを以下の構成で配置。

<root>
├lib
│ └Papervision3D_2.1.920.swc
└sample
  ├Sample.as
  └Sample-config.xml

「sample2」とか作ったときのことを考えて、Papervision3D_2.1.920.swcだけ別のディレクトリに置いています。

4.スクリプトを書く

ファイルができたら、Sample.asにサンプルコードを書きます。ポイントは、ざっくりと以下。

  • (Spriteの代わりに) BasicViewを継承してメインとなるクラスを作る。
  • BasicViewが準備してくれる「シーン」オブジェクトに、表示したい3Dオブジェクト(以下の例ではSphere)を生成して追加。
  • 「startRendering()」でレンダリング開始。
  • 「onRenderTick」をオーバーライドして、定期的に球を回転する操作を追加する。
package {
 
  import flash.events.Event;
  import org.papervision3d.materials.*;
  import org.papervision3d.materials.utils.*;
  import org.papervision3d.objects.primitives.Sphere;
  import org.papervision3d.view.BasicView;
  
  /**
   * 球を表示して回転させるサンプル。
   */
  public class Sample extends BasicView { // SpriteではなくBasicViewを継承する。
    
    // 表示する3Dオブジェクト(球)
    private var sphere:Sphere;
    
    /**
     * コンストラクタ
     */
    public function Sample() {
      
      // オブジェクトをワイヤーフレームで表示するマテリアルを作成
      var material:WireframeMaterial = new WireframeMaterial(0xFF0000);
      // 表示する3Dオブジェクト(球)を作成。引数でマテリアルを指定する。
      sphere = new Sphere( material );
      
      // シーンに3Dオブジェクトを追加。
      scene.addChild(sphere);
      
      // レンダリング開始
      startRendering();
    }
    
    /**
     * レンダリング時に定期的に呼ばれる関数?をオーバーライド
     */
    override protected function onRenderTick(event:Event = null):void {
      // 球を回転
      sphere.yaw(2);
      super.onRenderTick(event);
    }
 }
}

5.ビルド用設定ファイルを書く

次に、Sample-config.xmlを書きます。内容は以下のとおりです。

<flex-config>
  <output>bin/sample.swf</output>
  <default-size>
    <width>500</width>
    <height>500</height>
  </default-size>
  <default-frame-rate>24</default-frame-rate>
  <default-background-color>0xFFFFFF</default-background-color>
  <static-link-runtime-shared-libraries>true</static-link-runtime-shared-libraries>
  <compiler>
    <debug>true</debug>
    <library-path append="true">
      <path-element>../lib</path-element>
    </library-path>
  </compiler>
</flex-config>
  • swfは、bin/sample.swfとして保存
  • 高さや幅、背景色などステージの基本設定を定義

しているほか、

  • Papervision3D_2.1.920.swcを読み込む為のライブラリ置き場のパス(library-path)を指定

しています。library-path要素は、「append="true"」にしておかないと上書き設定になってデフォルトのライブラリがロードされなくなってしまうのでご注意。

6.コンパイル!

あとは、sampleディレクトリで以下のコマンドを実行すればOK

> mxmlc Sample.as

「bin/sample.swf」に以下のようなswfが生成されるはずです。
生成されるswfのサンプル

んー、初めてダイアログが表示できたよ!的な感動があるな。ちょい楽しい。