iOS で SceneKit を試す(Swift 3) その11 - Scene Editor を使ってみる

今まではコードから SCNScene のクラスを使用してシーンを作成していたが、SceneKit にはもう1つ作成方法があり今回はそちらのご紹介。

Xcode に Scene Editor というツールがあり、Unity のエディタのようなもの。 オブジェクトを視覚的置いたり、アニメーションを確認したりできる。

Xcode の Game テンプレートでこちらを使用している

プロジェクトの作成

ということで、今回も Single View Application のテンプレートからつくる。

名前は何でも良いが、とりあえず SceneEditor という名前にした。

Storyboard の編集

以前と同様に Main.storyboard を開き、
View を SCNView に変更する。

ViewController.swift の編集

こちらも、以前と同様に SceneKit をインポートして、
まず、空のシーンを置き、タップジェスチャーを追加してみる。

import UIKit
import SceneKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        // シーン設定
        let scene = SCNScene()
        
        // SCNView 設定
        let scnView = self.view as! SCNView
        scnView.backgroundColor = UIColor.black
        scnView.scene = scene
        scnView.showsStatistics = true
        scnView.allowsCameraControl = true
        
        // タップジェスチャー
        let tapGesture = UITapGestureRecognizer(target: self, action: #selector(handleTap(_:)))
        scnView.addGestureRecognizer(tapGesture)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    func handleTap(_ gestureRecognize: UIGestureRecognizer) {
        
        print("タップされました")
        
    }
}

ビルドすると下にっ統計情報が表示される

新規で SceneKit Scene（scn）ファイルをつくり編集してみる

新規作成 (Command + N) から iOS タブの「SceneKit Scene File」を選択。
今回はファイル名を main.scn にしてみた。

するとこんな画面が表示される。

そのままだと、構造がわからないので Editor > Show Document Outline か、左下のアイコンをクリック。

Outline にカメラがあることが確認できる。

シーンエディターに球とライトを配置する

球を配置してみる

右下のから Object Library (Commnd + Option Control + 3)を開き、「Shpere」 探し、シーンへドラッグする。

白く丸い球体が表示されたと思う。

そのままだと適当な位置に配置されてしまうので、Object Library の上にある立方体のアイコン Node Inspector (Commnd + Option Control + 3)を押して、ノードの情報を表示。 X、Y、Z を 0 にしてみる。

ライトを配置してみる

手順は同じ。

Object Library から Omni Light をドラッグして、Node Inspector で Y を 10 にしてみる。

X	Y	Z
0	10	0

準備完了したのでソースから scn ファイルを読み込んでみる

ViewController.swift を再編集して scn ファイルを読み込む

SCNScene から先程つくった scn ファイルを読み込んで表示させる。 1行変えるだけ。

こちらを

let scene = SCNScene()

こちらに変更。今回名前を main.scn にしたので、この名前で読み込む。

let scene = SCNScene(named: "main.scn")!

ビルドする scn ファイルに配置したものが表示されるかはず。

Scene Editor の中のものが表示されるのでわかりやすいかと。

今回はここまで。