はじめに

以前、ARKitでの3Dアニメーション切り替えについて書いたけど、別のやり方が見つかったので、そのメモ。今回はSceneKitベースだけど、基本的には同じです。

実行環境

Xcode 11.2.1
MagicaVoxel 0.99.4
Mixamo

やりたいこと

ボタンタップでアニメーションを切り替える。

3Dアニメーションの準備

MagicaVoxelで作ったモデルを Mixamo にアップロードして、いくつかのアニメーションを設定して個別にCollada（.dae）形式で書き出しておきます。

※このとき「In Place」のチェックボックスがあるものは、チェックしておくと同じ位置でアニメーションしてくれるので、切り替え時に位置がズレなくていいかもしれません。

※また、ベースとして使う .scn ファイルにはrootNode を作って名前を付けておきます。＋ボタンでノードを追加して名前（今回は「idle」にしました）を付け、その下に「unamed」「mixamorig_Hips」を移動します。

3Dアニメーションの切り替え（差し替え）

以前の方法では、アニメーションを含む3Dのノード自体を差し替えていましたが、「3Dモデル（アニメーションつき）の再生速度を変更する」という記事を書いたときに、node.addAnimationPlayer で node のアニメーションを再設定できるということに気がついたので、その方法で切り替えてみました。

1.ベースにするDaeファイルを.scnに変換
2.上記1.の.scn から 3Dモデルのnodeを取り出す。
3.daeファイルから SCNAnimationPlayerr.loadAnimation でアニメーションを取り出す。
4.上記3.で取りだしたアニメーションを上記2.のnodeに node.addAnimationPlayer で再設定する。

で、上記2.で取り出すアニメーションを事前に配列化しておいて、SegmentedControl が押されたときに、selectedIndexで配列から、アニメーションを取りだして再設定するようにします。

アニメーションの初期化

        let scene = SCNScene(named: "art.scnassets/idle.scn")!
        
        //アニメーション用配列；初期化
        danceAnimationArray.append(SCNAnimationPlayer.loadAnimation(fromSceneNamed: "art.scnassets/Box Idle.dae"))
        danceAnimationArray.append(SCNAnimationPlayer.loadAnimation(fromSceneNamed: "art.scnassets/Cross Jumps Rotation.dae"))
        danceAnimationArray.append(SCNAnimationPlayer.loadAnimation(fromSceneNamed: "art.scnassets/Hip Hop Dancing.dae"))
        danceAnimationArray.append(SCNAnimationPlayer.loadAnimation(fromSceneNamed: "art.scnassets/Jazz Dancing.dae"))
        danceAnimationArray.append(SCNAnimationPlayer.loadAnimation(fromSceneNamed: "art.scnassets/Northern Soul Spin.dae"))

        danceControl.selectedSegmentIndex = 0
        
        // create and add a camera to the scene
        let cameraNode = SCNNode()
        cameraNode.camera = SCNCamera()
        scene.rootNode.addChildNode(cameraNode)
        
        // place the camera
        cameraNode.position = SCNVector3(x: 0, y: 1, z: 5)
        
        // create and add a light to the scene
        let lightNode = SCNNode()
        lightNode.light = SCNLight()
        lightNode.light!.type = .omni
        lightNode.position = SCNVector3(x: 0, y: 10, z: 10)
        scene.rootNode.addChildNode(lightNode)
        
        // create and add an ambient light to the scene
        let ambientLightNode = SCNNode()
        ambientLightNode.light = SCNLight()
        ambientLightNode.light!.type = .ambient
        ambientLightNode.light!.color = UIColor.darkGray
        scene.rootNode.addChildNode(ambientLightNode)
        
        // ノード作成
        let node = scene.rootNode.childNode(withName: "idle", recursively: true)!
        
        //アニメーションを配列から取りだして再設定する
        danceAnimation = danceAnimationArray[danceControl.selectedSegmentIndex]
        
        //speed：1
        danceAnimation.speed = 1

        danceAnimation.stop() // stop it for now so that we can use it later when it's appropriate
        node.addAnimationPlayer(danceAnimation, forKey: "dance")
        
        //スピード用スライダーの初期化
        initSlider(val: Float(danceAnimation!.speed))

        // アイテムの配置
        node.position = SCNVector3(0, 0, 0)
        node.scale = SCNVector3(1, 1, 1)
        scene.rootNode.addChildNode(node)

        // set the scene to the view
        self.mySceneView!.scene = scene

        // configure the view
        self.mySceneView!.backgroundColor = UIColor.clear

※初回は、scene を .scn ファイルから取り出し、SCNView（self.mySceneView）へ追加する。

アニメーションの切り替え

    //アニメーションの変更
    @IBAction func actionSegmentedControl(_ sender: UISegmentedControl) {
        print("actionSegmentedControl",sender.selectedSegmentIndex)
        
        // ノード作成
        let node = self.mySceneView.scene!.rootNode.childNode(withName: "idle", recursively: true)!
        
        //アニメーションを配列から取りだして再設定する
        danceAnimation = danceAnimationArray[sender.selectedSegmentIndex]
        danceAnimation.speed = CGFloat(speedSlider.value)

        danceAnimation.stop() // stop it for now so that we can use it later when it's appropriate
        node.removeAllActions()
        node.addAnimationPlayer(danceAnimation, forKey: "dance")
        if (isPlay){
            danceAnimation.play()
        }
    }

※アニメーション切り替え時は、node を SCNView の scene（self.mySceneView.scene）から取り出し、その node へアニメーションを追加する。

完成

SegmentedControlをタップすることで、割り当てられたアニメーションに切り替わります。

また前回の「【SceneKit】3Dモデル（アニメーションつき）の再生速度を変更する」をベースにしているため、再生ボタンでのアニメーションを再生／停止。スライダーでアニメーションの再生速度変更にも対応しています。

ViewContoller.swift全体のコードです。

ViewContoller.swift

//
//  ViewController.swift
//  CahngeVariousDances
//
//  Created by c-geru on 2020/04/17.
//  Copyright © 2020 c-geru. All rights reserved.
//

import UIKit
import SceneKit

class ViewController: UIViewController {

    @IBOutlet weak var mySceneView: SCNView!
    
    @IBOutlet weak var playButton: UIBarButtonItem!
    
    @IBOutlet weak var speedSlider: UISlider!
    
    @IBOutlet weak var toolBar: UIToolbar!
    
    @IBOutlet weak var danceControl: UISegmentedControl!
    
    var danceAnimation: SCNAnimationPlayer!
    var isPlay: Bool = false
    
    var danceAnimationArray:[SCNAnimationPlayer?] = []
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        let scene = SCNScene(named: "art.scnassets/idle.scn")!
        
        //アニメーション用配列；初期化
        danceAnimationArray.append(SCNAnimationPlayer.loadAnimation(fromSceneNamed: "art.scnassets/Box Idle.dae"))
        danceAnimationArray.append(SCNAnimationPlayer.loadAnimation(fromSceneNamed: "art.scnassets/Cross Jumps Rotation.dae"))
        danceAnimationArray.append(SCNAnimationPlayer.loadAnimation(fromSceneNamed: "art.scnassets/Hip Hop Dancing.dae"))
        danceAnimationArray.append(SCNAnimationPlayer.loadAnimation(fromSceneNamed: "art.scnassets/Jazz Dancing.dae"))
        danceAnimationArray.append(SCNAnimationPlayer.loadAnimation(fromSceneNamed: "art.scnassets/Northern Soul Spin.dae"))

        danceControl.selectedSegmentIndex = 0
        
        // create and add a camera to the scene
        let cameraNode = SCNNode()
        cameraNode.camera = SCNCamera()
        scene.rootNode.addChildNode(cameraNode)
        
        // place the camera
        cameraNode.position = SCNVector3(x: 0, y: 1, z: 5)
        
        // create and add a light to the scene
        let lightNode = SCNNode()
        lightNode.light = SCNLight()
        lightNode.light!.type = .omni
        lightNode.position = SCNVector3(x: 0, y: 10, z: 10)
        scene.rootNode.addChildNode(lightNode)
        
        // create and add an ambient light to the scene
        let ambientLightNode = SCNNode()
        ambientLightNode.light = SCNLight()
        ambientLightNode.light!.type = .ambient
        ambientLightNode.light!.color = UIColor.darkGray
        scene.rootNode.addChildNode(ambientLightNode)
        
        //-----
        // ノード作成
        let node = scene.rootNode.childNode(withName: "idle", recursively: true)!
        
        //アニメーションを配列から取りだして再設定する
        danceAnimation = danceAnimationArray[danceControl.selectedSegmentIndex]
        
        //speed：1
        danceAnimation.speed = 1

        danceAnimation.stop() // stop it for now so that we can use it later when it's appropriate
        node.addAnimationPlayer(danceAnimation, forKey: "dance")
        
        //スピード用スライダーの初期化
        initSlider(val: Float(danceAnimation!.speed))

        // アイテムの配置
        node.position = SCNVector3(0, 0, 0)
        node.scale = SCNVector3(1, 1, 1)
        scene.rootNode.addChildNode(node)

        // set the scene to the view
        self.mySceneView!.scene = scene

        // configure the view
        self.mySceneView!.backgroundColor = UIColor.clear
    }

    //スライダー：初期化
    func initSlider(val:Float){
        speedSlider.minimumValue = 0.1
        speedSlider.maximumValue = 3.0
        speedSlider.value = val
    }

    @IBAction func dragSlider(_ sender: UISlider) {
        
        print("+++value:",sender.value)
        
        // ノード作成
        let node = self.mySceneView.scene!.rootNode.childNode(withName: "idle", recursively: true)!
        
        //speed：2
        danceAnimation.speed = CGFloat(sender.value)

        danceAnimation.stop() // stop it for now so that we can use it later when it's appropriate
        node.removeAllActions()
        node.addAnimationPlayer(danceAnimation, forKey: "dance")
    }
    
    @IBAction func touchUpSlider(_ sender: UISlider) {
        if (isPlay){
           danceAnimation.play()
        }
        
    }
    
    @IBAction func tapPlayButton(_ sender: UIBarButtonItem) {
        if (isPlay){
            danceAnimation.stop()
            isPlay = false
        } else {
            danceAnimation.play()
            isPlay = true
        }
        
        //開始ボタン：表示切替
        changePlayButton()
    }
    
    //アニメーションの変更
    @IBAction func actionSegmentedControl(_ sender: UISegmentedControl) {
        print("actionSegmentedControl",sender.selectedSegmentIndex)
        
        // ノード作成
        let node = self.mySceneView.scene!.rootNode.childNode(withName: "idle", recursively: true)!
        
        //アニメーションを配列から取りだして再設定する
        danceAnimation = danceAnimationArray[sender.selectedSegmentIndex]
        danceAnimation.speed = CGFloat(speedSlider.value)

        danceAnimation.stop() // stop it for now so that we can use it later when it's appropriate
        node.removeAllActions()
        node.addAnimationPlayer(danceAnimation, forKey: "dance")
        if (isPlay){
            danceAnimation.play()
        }
    }
    
    //開始ボタン：表示切替
    func changePlayButton() {
        var items = toolBar.items!
        var btnItem: UIBarButtonItem!

        if (isPlay) {
            print("----pause")
            btnItem = UIBarButtonItem(barButtonSystemItem: .pause, target: self, action: #selector(self.tapPlayButton(_:)))
        } else {
            print("----play")
            btnItem = UIBarButtonItem(barButtonSystemItem: .play, target: self, action: #selector(self.tapPlayButton(_:)))
        }

        items[0] = btnItem
        toolBar.setItems(items, animated: false)
    }

}

extension SCNAnimationPlayer {
    class func loadAnimation(fromSceneNamed sceneName: String) -> SCNAnimationPlayer {
        let scene = SCNScene( named: sceneName )!
        // find top level animation
        var animationPlayer: SCNAnimationPlayer! = nil
        scene.rootNode.enumerateChildNodes { (child, stop) in
            if !child.animationKeys.isEmpty {
                animationPlayer = child.animationPlayer(forKey: child.animationKeys[0])
                stop.pointee = true
            }
        }
        return animationPlayer
    }
}

まとめ

これでdaeからアニメーションを取得して、切り替えることができるようになりました。
もっといい方法があるよ！という方はご指摘頂けるとありがたいです。