やっぱギークでナイト！

前回に引き続き、今回もPapervision3Dのお勉強。
(勉強というよりは既成ファイルの中身をいじっているだけなので恐縮ですが。)

「前回のHelloWorldファイルを元にしながら、何か作ってみなさい」 by 先生
との事だったので、今回は自分から自分へお題を課しました。

* * * * * * * * * * * * * * * * * * * * * * * * * * *
お題：犬を歩かせてみましょう。

オブジェクトの表示方法、アニメーションの貼り付け方を知ってみようというお題です。
以下を作りました： 今回は、犬 改め おやじ を歩かせています。


＊実際の swf ファイル（歩くおやじを角度を変えて見ることが出来ます）はこちらからどうぞ。


課題をすすめる上でのメモとソースは下記に記しました。

* * * * * * * * * * * * * * * * * * * * * * * * * * *

まずは下図のように配置するため、次に挙げた２つの素材を用意します。

　 ■ 町並みの背景（ 静止画：1コマのMovieClip ）
 　■ 歩くおやじ（ 足踏みをしているアニメーション：2コマから成るMovieClip ）

　

背景画像を円柱に貼り付け、それを回転させ、
その前方に足踏みアニメーションのおやじを配置します。
おやじが歩いているかのように見せるためです。

素材が用意出来たら、次はmain.asの中身です。
課題をこなす上で、今回学習した点は大きくは以下の点です。

1．MovieClipをテキスチャとして使用する

　前回、地球儀やその背景（宇宙）に貼り付ける用の画像テキスチャを作成した際は、
　Bitmapライブラリから画像を読み込んだので "BitmapAssetMaterial" クラスを使用しましたが
　今回テキスチャとして使用する素材はMovieClipです。
　MovieClipをテキスチャとして使用する時は、"MovieAssetMaterial" クラスを使用します。

1－1．MovieClip内で描画されていない部分 及び 透明部分を透過させる場合：

　MovieClipの描画部分以外もしくはアルファ値0の部分が黒く映ってしまう現象があります。

　今回のおやじを例にして説明すると･･･
　おやじの可動範囲がそのままMovieClipの大きさになっており、
　MovieAssetMaterialインスタンスとして読み込んだ際に
　実際におやじが描画されている部分以外が、下図のように黒くなってしまいます。

　　　

　この現象を防ぐためには、MovieAssetMaterial型のインスタンスを作成する時に、
　第二引数（ transparent：Boolean ）で透明・不透明を設定する必要があります。
　第二引数を "true" にすると、透明になります。
　
　おやじの場合：　

var materialOyaji :MovieAssetMaterial = new MovieAssetMaterial( "oyaji2",true,null );

   更に詳しく：

MovieAssetMaterial(id:※, transparent:Boolean = false, initObject:Object = null)

　■ id：MovieClip ライブラリid
　■ transparent：trueは透過、falseは透過なし（デフォルトではfalseに設定されています）
　■ initObject：色、アルファ、線などを設定出来ます。

　　※initObjectについては閃光的網站・弛緩複合体さんのページで分かりやすく説明されております。
　　　閃光的網站・弛緩複合体：Papervision3D の Materials(2) ～ graphics コマンド系 ～


1－2．MovieClipのアニメーションを反映させる場合：

　テキスチャとしてMovieClipを使用すると、デフォルトではアニメーションが反映されません。
　
　MovieClipのアニメーションを反映させるためには、MovieAssetMaterialインスタンスの
　パブリックプロパティanimated：Boolean を "true" にする必要があります。

　例：おやじの場合　

materialOyaji.animated =true;

2．Cylinderクラス

　円柱を作成、表示できます。
　新しいCylinderオブジェクトを作成する時のメソッドは下記の通り。

Cylinder(material:MaterialObject3D = null, radius:Number = 100, height:Number = 100, segmentsW:int = 8, segmentsH:int = 6, topRadius:Number = 0, initObject:Object = null)

　■ material：
　■ radius：底面の半径
　■ height：高さ
　■ segmentsW：円の分割数
　■ segmentsH：高さの分割数
　■ topRadius：上面の半径
　■ initObject：色、アルファ、線などを設定出来ます。

　　※ここで注意：
　　topRadiusを０にしたら、円錐になるのかな？と思いますよね。
　　ところが、topRadiusはデフォルトで0に設定されています。
　　topRadiusが0である場合は底面の半径＝上面の半径とするという設定があるからだそうです。
　　参照したページ：
　　throw Life：Papervision3Dのプリミティブ・オブジェクト - Cone, Cube, Cylinder, Sphere　　


* * * * * * * * * * * * * * * * * * * * * * * * * * *

main.asの中身です。

package
{
import flash.display.*;
import flash.events.*;

// Import Papervision3D
import org.papervision3d.scenes.*;
import org.papervision3d.cameras.*;
import org.papervision3d.objects.*;
import org.papervision3d.materials.*;

public class main extends Sprite
{
    // ______________________________________________ vars3D

    var container :Sprite;
    var scene     :Scene3D;
    var camera    :Camera3D;
    var wall3D      :Cylinder;
    var oyaji          :Plane;

    // ______________________________________________ main

    function main()
    {
        init3D();

        // onEnterFrame
        this.addEventListener( Event.ENTER_FRAME, loop3D );
    }

    // ______________________________________________ init3D

    function init3D():void
    {
        // Sprite型のcontainerを作成しステージに配置します。
        container = new Sprite();
        addChild( container );
        container.x = 280;
        container.y = 200;

        // sceneを作成
        scene = new Scene3D( container );

        // cameraを作成
        camera = new Camera3D();

        // おやじを配置
        addOyaji();
        
        // 背景を配置
        addSpace();

}

    // ______________________________________________ loop

    function addOyaji():void
    {
        // OyajiWalking.flaライブラリ内のMovieClipでおやじテキスチャ作ります。
        // MovieClipを使用するので、BitmapAssetMaterialではなく、MovieAssetMaterialです。
        // 第二引数をtrueにすると描画されている部分以外を透過にします。
        var materialOyaji :MovieAssetMaterial = new MovieAssetMaterial( "oyaji2",true,null );

        // MovieAssetMaterialインスタンスのプロパティanimatedをtrueにし、アニメーションを再生させます。
        materialOyaji.animated =true;

        // おやじをロードします。おやじは平面に貼り付けるのでPlane型です。
        oyaji = new Plane( materialOyaji, 500, 900, 8, 8);

        // おやじの配置を設定します。
        oyaji.rotationX = 0;
        oyaji.y= -450;
        oyaji.z=-200;

        // おやじをsceneに配置します。
        scene.addChild( oyaji );
       
    }

    // ______________________________________________ loop
   
    function addSpace():void
    {
        // OyajiWalking.flaライブラリ内のMovieClipで背景テキスチャ作ります。
        var materialSpace :MovieAssetMaterial = new MovieAssetMaterial( "wall",true,null);

        // 背景をロードします。背景は円柱に貼り付けるのでCylinder型です。
        wall3D = new Cylinder( materialSpace,3000,2000,100,6,0,null);

        // 背景の位置を設定します。
        wall3D.z = 3100;

        // 背景をsceneに配置します。
        scene.addChild( wall3D );
    }

    // ______________________________________________ loop

    function loop3D(event:Event):void
    {
        //カメラの移動範囲の指定
        camera.x = -container.mouseX*3;
        camera.y = container.mouseY*4;

        // 背景を回転させます。
        wall3D.yaw( -2);

        // Render the scene
        scene.renderCamera( camera );
    }
}
}