【Ornamenter】アイテムのサイズと軌道パスの編集 – その１

Ornamenterでアイテムが移動するアニメーションを作成する場合、軌道パスで移動経路を設定します。今回は、ストーリーボード編集画面におけるアイテムの「サイズと軌道パス」の編集方法について解説します。

サイズと軌道パスの編集開始

ストーリーボード編集画面で軌道パスは、青線で描画されています。この線の上をアイテムが移動します。アイテムは、赤線の矩形内に描画されます。
アイテムのサイズや軌道パスを編集する場合は、「サイズと軌道パス」をタップします。編集が可能な状態になると編集パネルが表示されます。

編集パネルは、ドラッグして移動出来ます。初期表示時は画面の左下隅に表示されますが、軌道パスやサイズ変更時に邪魔になる場合は、編集パネルをドラッグして表示位置を移動させる事が可能です。

軌道パスの編集

軌道パスは、１点以上のポイントで構成されています。１点（始点＝終点）の場合は、アイテムは移動出来ません。ポイントが２点以上ある場合は、始点から終点に向かって移動します。軌道パスは、各ポイントを曲線で補完して形成されます。ポイントの数や位置を変更する事で軌道パスを構築して行きます。
軌道パスを編集するには、編集パネルの上部で編集対象を「軌道パス」に設定します。
編集が可能になると軌道パスを構成しているポイント🟢が表示されます。カレント（編集対象となっている）ポイントは、で表示されます。

カレントポイントの切替

カレントポイントを切り替えるには、カレントにしたいポイント🟢をタップします。タップされたポイントは、🟢からに切り替わります。

ポイントの挿入

軌道パス上（又は近辺）でタップを行うとタップした位置にポイントが挿入されます。タップした軌道の両端にあるポイントの間に挿入されます。その際、挿入されたポイントにカレントが切り替わります。

ポイントの追加

軌道パス以外の場所でタップすると軌道パスの終端としてポイントが追加されます。その際、追加されたポイントにカレントが切り替わります。

ポイントの削除

削除したいポイントをダブルクリックすると削除出来ます。表示が小さい場合は、うまくダブルクリック出来ないかもしれません。その場合は、表示倍率を一時的に大きくすると操作しやすいです。

ポイントの移動

軌道パスを修正する場合は、ポイントの座標を変更します。ポイントをドラッグすると位置を変更できます。
編集画面がグリッド表示（格子が表示されている）の場合、ポイントはドラッグ位置に一番近い格子の座標に自動的に調整されます（グリッドにスナップされます）。自動調整を行わず、ドラッグした位置の座標にしたい場合は、をタップしてグリッドを非表示にします。

編集パネルによる軌道パス操作

編集パネルを利用して軌道パスを操作することも出来ます。先ずは、編集パネルの上部で編集対象を「軌道パス」に設定します。

カレントポイント切替

「始点へ」、「前へ」、「次へ」、「終点へ」の各アイコンでカレントポイントを切り替える事が出来ます。「センタリング」をタップするとカレントポイントが編集画面の中央に位置する様に表示位置が移動します。

カレントポイント座標編集

カレントポイントの座標を直接編集する場合は、X座標やY座標の数値を入力する事も出来ます。グリッド表示された状態で左右矢印や上下矢印をタップするとそれぞれの座標値に対してマイナス20pxやプラス20pxされます。グリッドが非表示の場合は、マイナス10pxやプラス10pxされます。
の状態だとカレントポイントの座標のみが対象となりますが、の状態だとカレントポイントの移動量に応じて相対的に移動パス全体が移動します。の状態では、ポイントは🟠で表示されます。この状態でポイントをドラッグすると軌道パス全体が移動します。

軌道パスリセット

軌道パスリセットをタップすると軌道パスのポイントは、編集画面の中央に１点のみ配置されます。

軌道パス反転

軌道パス反転をタップすると軌道パスのポイントの順番が逆転します。始点と終点が入れ替わり、移動方向が逆方向になります。

カレントポイント削除

削除をタップするとカレントポイントを削除出来ます。ダブルタップで上手く削除出来ない場合は、こちらの方法を利用して下さい。

サイズの編集

アイテムのサイズは、「アイテム」をタップしてアイテム編集画面でも設定出来ますが、実際の軌道パスとの大きさとの対比を見ながらデザインする方が分かりやすいと思います。
アイテムのサイズを編集するには、編集パネルの上部で編集対象を「サイズ」に設定します。
サイズの編集が開始されると赤色の矩形に白丸⚪️ハンドルが表示されます。は重心を表します。

縦辺の中点にある白丸⚪️ハンドルを左右にドラッグすると幅を変更できます。横辺の中点にある白丸⚪️ハンドルを上下にドラッグすると高さを変更出来ます。四隅にある白丸⚪️ハンドルを斜め方向にドラッグするとアスペクト比を維持しながら矩形のサイズを変更出来ます。
グリッド表示時は、幅や高さは20px単位で加算減算されますが、グリッド非表示の時はドラッグされた際の移動距離の値がそのまま反映されます。をタップしてグリッドを非表示に出来ます。

編集パネルによるサイズ操作

編集パネルを利用してアイテムサイズを操作することも出来ます。先ずは、編集パネルの上部で編集対象を「サイズ」に設定します。

幅と高さ

幅と高さは、値を直接入力しても設定出来ます。プラスアイコンやマイナスアイコンをクリックして値を加減算出来ます。グリッド表示時は、プラスマイナス20px単位で加減算されます。グリッド非表示の時は、10px単位で加減算されます。
の状態だとアスペクト比を維持しながら加減算されます。の状態だと同期されず、それぞれ修正した方の値のみが変更されます。

正方形

「◻︎正方形」アイコンをタップすると幅又は高さの小さい方の値で正方形に整形されます。

シートにフィット

「シートにフィット」アイコンをタップするとアイコンサイズにシートサイズが設定されます。

今回は以上です。次回は、引き続き軌道パス関連の話題について解説したいと思います。

詳しくはサイトで