
今回は、オブジェクトの中心と座標、拡大率、回転の関係について紹介したいと思います。
オブジェクトの中心は様々なモーションを作るうえでとても重要な項目です。中心の位置で拡大率やXYZ回転がどのように動くのか見ていきたいと思います。
オブジェクトの中心


オブジェクトはデフォルトで標準描画になっています。標準描画のままだとオブジェクトの中心がどこにあるのか見ることができません。
設定ダイアログの右上にあるぐるぐるボタンからオブジェクトを拡張描画にします。

オブジェクトを拡張描画にすると中心XYZの項目が出てきて、中心を表す十字が表示されます。オブジェクトの中心はこの中心XYZを使って動かすことができます。

試しにサイズ200の四角形を出し、拡張描画にした後中心Yを100に設定してみます。中心を移動させるとそれに合わせてオブジェクトが上に移動します。


オブジェクトを元の位置に戻すには中心Yで動かした分だけY座標に足してあげます。これで中心を下にしつつオブジェクトは真ん中に配置することができます。
オブジェクトを拡張描画にして中心を移動、動かした分だけ座標にプラスというのが一連の流れです。
中心と座標

中心の動かし方を覚えたところで、中心の設定がどんなときに役立つのか座標、拡大率、回転の順で見ていきたいと思います。
まずは中心と座標から。
オブジェクトはデフォルトで(0,0)に中心座標があり、オブジェクトの領域の中央に据えられます。
いろんなサイズのオブジェクトであっても、真ん中に整列させる場合は中心がオブジェクトの中央にある方が良いですね。X座標を揃えてあげればぴったり整列します。

では、サイズの異なるオブジェクトを左に揃えたい場合はどうでしょうか。
オブジェクトの中央に中心がある場合、左に揃えようと思うとそれぞれのX座標で調節しなくてはならずちょっと大変ですね。

そこで中心Xを移動させて各オブジェクトの中心を左端に据えます。そうするとX座標を揃えてあげればぴったりと左側に揃えることができます。

こうした中心と座標の関係がよくわかるのがテキストの整列だと思います。
テキストオブジェクトを拡張描画にして左寄せ、中央寄せ、右寄せで中心が変わるのを是非確認してみてください。
テキスト以外のオブジェクトでも中心を左右の端に据えることで左揃え、右揃えにする際にX座標を一致させることで綺麗に整列させることができます。
中心と拡大率

続いては中心と拡大率の関係です。
オブジェクトの拡大縮小は中心を基準に行われます。デフォルトではオブジェクトの中央ですね。
中心(0,0)の場合。

拡大率は中心の位置を変えることで動きに違いを出すことができます。テキストアニメーションなどでは動きのバリエーションとして中心の位置が重要になることも多いです。
中心がオブジェクトの底にある場合。
中心を画面の下に据えた場合。座標は一切動かしておらず、中心の位置と拡大率だけでこのようなモーションが作れます。
オブジェクトの中央、端、角と中心の位置によって拡大縮小の動きが変わります。中心を変えるだけでも動きのバリエーションが増えますね。
中心と回転

回転にはX軸回転、Y軸回転、Z軸回転の三種類があります。

中心とともにオブジェクトを拡張描画にしたときにXYZ軸回転の項目が出てきます。ちなみに、標準描画の回転はZ軸回転のことです。
普段よく見る回転はこのZ軸回転ですね。
こちらはX軸回転。中心をオブジェクトのあたまに据えています。
そしてY軸回転となっています。こちらは中心をオブジェクトの端に据えています。

中心Zを移動させてみました。
中心Zを移動させてカメラ制御とともにXY軸回転をさせると奥行きのある回転を作ることができますね。
応用


サイズ20の四角形に斜めクリッピングをかけて細長い棒を作ります。


中心Yで中心を移動させます。ここでは中心Yを120に設定してみました。
この状態でZ軸回転を動かしてみてください。半径120の円の軌道上をオブジェクトが回っていると思います。
いわゆるオブジェクトの円形配置です。
中心XYを設定してZ軸回転で動かすと円形配置のスクリプトと同じように配置することができます。

オブジェクトを複製してZ軸回転を120ずつずらして配置したもの。
あとはグループ制御でZ軸回転させると円形配置されたオブジェクトを回すことができます。

他にも、いろんな要素を円状に配置する際に中心と回転が役に立ちます。

もうひとつ。Z軸回転でくるくる回しながら中心Yを移動させると、オブジェクトをらせん状に回転させることもできます。
いかがだったでしょうか。
オブジェクトの中心を動かすことで座標、拡大率、回転などで違いを生み出すことができます。いつもの動きも中心を変えてみると面白い動きになったりすると思います。
機会があれば是非試してみてください。