やっぱギークでナイト！

新たにでんすけとサッチー（たま）のMovieClipを作成したので
前回の歩くおやじに付け加えてみました。



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

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

でんすけとサッチー（たま）の描画については
前回のおやじを描画する時と同様の処理をしており
main.asファイルの中身は、追加の描画部分以外においてはほぼ前回と同じです。

今回作成したファイルは以下のふたつです。

Download:
Densuke_Oyaji_Tama_Walking.fla
main.as

注）動作させるにはPapervision3Dのライブラリが必要です。
　　ライブラリを含めて上記2ファイルをzipさせたものはこちら。

前回に引き続き、今回も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 );
    }
}
}
 

先生から「物理エンジン、アニメーション、３D、どれがいい？」と聞かれ
「３Dやってみたい」と答えたところ
Papervision3Dに少し挑戦してみることになりました。

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

Papervision3Dとは：
Flash ( flash8とflash9 ) で動作する３Dエンジンで、
ActionScriptを使っての３D表現が可能になります。
http://papervision3d.org

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

① それでは早速 作業開始

まずはPapervision3Dをダウンロードしましょう。

※実際に作業する際には、
 Papervision3Dのライブラリを作業するファイルと同じディレクトリ下へ用意します。
(もしくはパスを通します。)

■ Papervision3D 1.5   from Google code
   http://code.google.com/p/papervision3d/

■ API documents
   http://www.papervision3d.org/docs/as3/


② exampleファイルをいじりながら習うより慣れろ

Papervision3d の Google code ダウンロードリストに
Papervision3D_sourc_docs_examples_rev28.zip
というファイルがあるのでそれをダウンロードします。

examplesの中にHelloWorldというフォルダがあるので、
HelloWorldフォルダの中に①のPapervision3dのライブラリをコピペします。
(もしくはパスを通す）

HelloWorld.fla、main.asを開きます。
(スクリプトはmain.asに記述されています)


③ HelloWorld ならぬ HelloEarth


実際のswf ファイル（地球を角度を変えてみることが出来ます）はこちらからどうぞ。

分からなかった部分にコメントアウトを追加しましたが
間違っていたり等、指摘して頂けると幸いです。

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 sphere    :Ase;　//3Dモデリングされた球体


    // ____________________________________________ main

    function main()
    {
        init3D();

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


    // ____________________________________________ init3D

    function init3D():void
    {
        // Create container sprite and center it in the stage
        container = new Sprite();
        addChild( container );
        container.x = 320;
        container.y = 240;

        // Create scene
        scene = new Scene3D( container );

        // Create camera
        camera = new Camera3D();

        // Add Earth sphere
        addEarth();

        // Add space plane
        addSpace();
    }


    // _____________________________________________ loop

    function addEarth():void
    {
        //惑星に貼り付けるBitmap画像(flaファイル・ライブラリ内)を引数に入れる
        var materialEarth :BitmapAssetMaterial = new BitmapAssetMaterial( "Earth" );

        //惑星のロード、第三引数は惑星の遠さ；数が１より小さいほど遠い
        sphere = new Ase( materialEarth, "world.ase", 0.7);

        //rotationXはX軸に対して回転
        //yawはY軸に対して回転
        //参照したサイト：http://blog.livedoor.jp/takaaki_bb/archives/50614075.html
        sphere.rotationX = 0;
        sphere.yaw( -30);

        // Add to scene
        scene.addChild( sphere );
    }


    // _____________________________________________ loop

    function addSpace():void
    {
        //宇宙に貼り付けるBitmap画像(flaファイル・ライブラリ内)を引数に入れる
        var materialSpace :BitmapAssetMaterial = new BitmapAssetMaterial( "Space" );

        // 宇宙画像を貼り付けるPlane型のオブジェクトを作る；Planeは表示オブジェクト
        //引数はそれぞれ横の長さ、縦の長さ、セグメント（ゆがみ？：小さい値ほどゆがむ）8が丁度良さそう
        //参照したサイト：http://aquioux.blog48.fc2.com/blog-entry-177.html
        //参照したサイト：http://aquioux.blog48.fc2.com/blog-entry-191.html
        var plane:DisplayObject3D = new Plane( materialSpace, 6400, 4800, 8, 8);

        // Position plane
        plane.z = 500;

        // Add to scene
        scene.addChild( plane );
    }


    // ____________________________________________ loop

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

        // Rotate sphere around its own vertical axis
        sphere.yaw( 0.2 );

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

地球の画像を自分の顔に変えてみました。
HelloWorld.flaのライブラリに画像を追加し、貼り付けるBitmap画像を変更します。




















これはとても楽しい！