calendar

S M T W T F S
     12
3456789
10111213141516
17181920212223
24252627282930
<< November 2019 >>

categories

archives

Flashで3D基本編:ぅブジェクトの移動・回転

0
    さてさて、3D基本編も4回目です。シリーズ連載ですので3回目までご覧になってない方は以下をまず参照ください。
    Flashで3D基本編:ヾ超を作る
    Flashで3D基本編:▲汽鵐廛襪鯑阿す
    Flashで3D基本編:オブジェクト表示の基本3ステップ


    第4回目は3Dオブジェクトを移動したり回転したりさせてみたいと思います。今回紹介する手順では、Tweenerというクラスを使います。これは元々3D以外でも使えて、あらゆる数字の項目を時間と共に変化させる事ができるので、覚えておくと色々な表現ができちゃいます拍手 第3回目までのサンプルプログラムでも、表示されているオブジェクトがぐりんぐりん回転していますが、これはsample3d.asの中にあるTweener.addTween....となっている行で行っています。

    Tweenerの説明に入る前に、3Dオブジェクトの位置に関する数値を説明したいと思います。通常のFlash上で作るMovieClipやグラフィックなんかの位置情報を表す場合、以下のような数値で設定しています。

    横方向の位置の値:x
    縦方向の位置の値:y
    回転の値:rotation

    これが3Dになると、zという奥行の概念が加わります。
    回転も、x軸回転、y軸回転、z軸回転と3つの回転要素に増えます植物

    横方向の位置の値:x
    縦方向の位置の値:y
    奥手前の位置の値:z
    x軸を中心にした回転の値:rotationX
    y軸を中心にした回転の値:rotationY
    z軸を中心にした回転の値:rotationZ

    基本的に3Dオブジェクトの位置情報を決めるには、これら6つのパラメータを意識する必要があるのです。

    では、Tweenerの説明に入りたいと思います。通常、最初にオブジェクトを作成した時は、初期値として6つの位置パラメータは全て0になっています。Tweenerを使って、時間経過と共にこれらのパラメータの値を徐々に変化させていきたいと思います。sample3d.asの下の方にあるTweenerの行を以下のように変更して、実行してみてください。

    変更前:Tweener.addTween(object, {rotationX:2000, rotationY:1500, time:60, transition:"linear"});
    変更後:Tweener.addTween(object, {rotationX:6000, time:60, transition:"linear"});



    この行によって、rotationXを60秒かけて6000度まで回転させる、という事をやっています。rotationXを回転させるということを、視覚的に感じ取ってください。



    同様に、rotationY,rotationZについてもやってみるとより理解が深まると思います。

    Tweener.addTween(object, {rotationY:6000, time:60, transition:"linear"});


    Tweener.addTween(object, {rotationZ:6000, time:60, transition:"linear"});




    上記3パターンを試したら、次のように変更して、2種類の回転の組み合わせを改めてみてみましょう。
    Tweener.addTween(object, {rotationX:6000, rotationY:6000, time:60, transition:"linear"});


    回転がわかったら、今度は移動をさせてみます。Tweenerの行を以下のように変更して実行してみてください。

    Tweener.addTween(object, {x:400, time:5, transition:"linear"});



    同様にy,zについてもやってみます。
    Tweener.addTween(object, {y:-400, time:5, transition:"linear"});



    Tweener.addTween(object, {z:-400, time:5, transition:"linear"});




    原点(0,0,0)は画面の中心であり、xyz座標のプラス・マイナス方向がどっちなのかは覚えましょう。
    まあ色々作ってる内に勝手におぼえちゃいますけどひらめき

    今度は、回転と移動を同時にやってみます。
    Tweener行を以下のように変更してみてください。

    Tweener.addTween(object, {z:-600, rotationX:1000, rotationZ:700, time:10, transition:"linear"});


    Tweenerではこんな感じで、指定するパラメータを増やせば増やすほど、同時にその動きを実行してくれるんですね。

    今度は、一旦左に行ってから、右に行く、という動きをやってみます。
    Tweener行は2行になります。

    Tweener.addTween(object, {x:-400, time:2, transition:"linear"});
    Tweener.addTween(object, {x: 0, time:2, delay:2, transition:"linear"});


    二行目には、delay:2という記述があります。つまり、この行は2秒待ってから実行する、という意味です。
    このように何行も追加していけば、いろいろな動きを表現できますね。
    更に回転しながら上の動きをやらせてみます。
    下記の3行目を追加します。

    Tweener.addTween(object, {x:-400, time:2, transition:"linear"});
    Tweener.addTween(object, {x: 0, time:2, delay:2, transition:"linear"});
    Tweener.addTween(object, {rotationX:600, rotationZ:400, time:4, transition:"linear"});


    上の2行で、2秒で左に行って、2秒で右に行く、という事をやっています。
    3行目で、4秒かけて回転させる、という事をやっています。


    最後に、ただ一定速度で動くのではなく、緩急をつけた動かし方をやっていみます。
    下記のように、上2行の"linear"となっているところを"easeInOutSine"と変えてみてください。

    Tweener.addTween(object, {x:-400, time:2, transition:"easeInOutSine"});
    Tweener.addTween(object, {x: 0, time:2, delay:2, transition:"easeInOutSine"});
    Tweener.addTween(object, {rotationX:600, rotationZ:400, time:4, transition:"linear"});


    左右の動きが、「加速→減速、加速→減速」になりました拍手。transitionの設定で、このように動きの度合を変化させる事ができます。easeInOutSine以外にも色々な動き方を指定できるので、下記URLを参考にしていろいろ試してみてください。
    http://hosted.zeh.com.br/tweener/docs/en-us/

    自分でTweenerの設定をいろいろいじりながら、楽しみながら覚えるといいと思いますよ〜。でわ温泉

    コメント
    管理者の承認待ちコメントです。
    • -
    • 2018/04/23 1:04 PM
    コメントする








       
    この記事のトラックバックURL
    トラックバック