Apple Engine

Apple, iPhone, iOS, その周辺のことについて

iOS で SceneKit を試す(Swift 3) その12 - Scene Editor の UI

ざっくり Scene Editor の UI や操作周りご紹介。
Xcode 9 で若干設定項目が増えるけど。

SceneKit の Scene Editor で扱えるものは dae、obj、abc(alembic)などのオブジェクトファイルと パーティクル専用の scnp とシーンファイルである scn。

scn での表示を元にしているため、scn ファイルのでの UI から。

 

ひとまず Xcode の画面説明

Xcode で scn ファイルを開くと 左から Navigator、Scene Editor、Utilities エリアという表示になる。

f:id:x67x6fx74x6f:20170623171644p:plain

Xcode でソースを開いた時と同様に、左はプロジェクトのファイル群、中央はファイル内容、右はファイルに付随する情報の表示と編集となっている。

ちなみに、Navigator、Utilities エリアの表示・非表示はウインドウ右上のアイコンか、 Command + 0 or Command + Option + 0 でできる。

 

Scene Editor エリアの UI

下部の UI

f:id:x67x6fx74x6f:20170623172954p:plain

名称 機能
Scene Graph View Scene Graph View の表示・非表示。シーンのローとノードから階層的に表示される
Editting Space ノードを選択した時に出るマニュピレータの設定。設定値は local、parent、world、screen。screen は今表示しているカメラに対して正面を向く。
Point of View Scene Editor で表示したいカメラの選択する。ここにはルートノードにカメラを追加すると追加したものが列挙される。デフォルトで編集用の Free Camera が存在する
Lock Camera アイコンをクリックしロック状態にした場合、カメラの視点変更するとパラメータに反映することができる。
Play / Stop 通常、物理アニメーションの再生・停止を行う
Secondary Editor ここにクリックすると、アニメーション設定を行うタイムラインが表示される。

 

Point of View の補足

シーン内でカメラの視点を変えると Free Camera の状態が遷移しシーン内のカメラのパラメータは変わらないので注意。 視点操作で選択しているカメラの値を変更したい場合は Lock Camera のアイコンを押す。

また、Free Camera は Scene Editor しか存在せず、実際のアプリではルートノードに存在しないため使用することができない。

 

上部の UI

f:id:x67x6fx74x6f:20170623173121p:plain

Source Editor と同様にパンくずリストが表示される。 深いノードへアクセスした際、戻る時便利。

 

Scene Editor エリアのシーンの操作

マウスでのカメラ操作

操作 振る舞い
クリック + 移動 画面中心で回転
Option + クリック + 移動 画面を上下左右に移動
Shift + Option + クリック + 移動 カメラ位置を中心に回転

 

マウスでのオブジェクト選択

操作 振る舞い
クリック オブジェクトの選択
Shift + クリック オブジェクトの追加選択
Command + クリック オブジェクトの選択解除
Command + クリック + 移動 矩形選択

 

トラックパッドでのカメラ操作

操作 振る舞い
2本指スワイプ 画面を上下左右に移動
ピンチイン・ピンチアウト ズームイン・ズームアウト

 

SpriteKit の Scene Editor と異なり、ズームイン・ズームアウトがトラックパッドからしかできない。 やり方があった教えて欲しい。

 

ショートカットキー

操作 振る舞い
Command + C オブジェクト選択時にコピーができる
Command + X オブジェクト選択時に切り取りができる
Command + V オブジェクトをペースとする。他の scn ファイルのシーンでも可能
Backspace オブジェクトの削除

 

Scene Editor エリアのマニュピレータ

何かオブジェクトを選択するとマニュピレータが表示され 移動、回転ができる。

また、Option を押しながら移動や回転を行うとオブジェクトを複製できる。

 

通常選択時

f:id:x67x6fx74x6f:20170623174146p:plain

 

以下、黄色い部分がクリックでの動作

X 軸移動

f:id:x67x6fx74x6f:20170623174210p:plain

 

X 軸回転

f:id:x67x6fx74x6f:20170623174222p:plain

 

Y,Z 軸移動(X 軸を固定して移動)

f:id:x67x6fx74x6f:20170623174232p:plain 

 

Scene Graph View

Scene Graph View は Navigator エリアと同じような見た目で、オブジェクトの状態を一覧したり、オブジェクトの生成ができる。

f:id:x67x6fx74x6f:20170623174938p:plain

表示はシーンのルートノードであり、ウインドウ内に表示されているのはそのチルドノードとなる。

設定できるのは以下のもの。

  • 空のノード
  • ライト
  • カメラ
  • 物理アニメーション用の Physics Body
  • 物理アニメーション用の Physics Field
  • パーティクル

ジオメトリなどいくつかの機能は Scene Editor から作成はできず、他のファイルかコードからを行う。

 

Scene Graph View での操作

列挙されているものをクリックすると選択状態になり、何もないところをクリックすると選択が解除される。

ショートカットは Navigator エリアと同じ、オブジェクトをタブルクリックするとカメラがそのオブジェクトをフォーカスする。

 

Scene Graph View 下部の UI

f:id:x67x6fx74x6f:20170623175052p:plain

左から、空のノードの追加、ノードの削除、チルドノード等の追加、ノードのフィルタリングとなっている。

ノードを選択していない場合は、ノードの削除と歯車のアイコンは押せない。

 

Scene Graph View で選択しているノードを右クリックした場合

以下のものが表示される

  • チルドノードの追加
  • ノードの削除
  • ノードの複製
  • 階層化しているノードを1つにまとめる
  • ライトをチルドノードに追加
  • カメラをチルドノードに追加
  • 物理アニメーション用の Physics Body をチルドノードに追加
  • 物理アニメーション用の Physics Field をチルドノードに追加
  • パーティクルをチルドノードに追加

  [f:id:x67x6fx74x6f:20170623175232p:plain

 

Secondary Editor

アニメーション設定ができるタイムラインが表示される。

詳しい操作はまたいずれ。

f:id:x67x6fx74x6f:20170623180010p:plain

 

長くなってきたので、今回はここまで。