SpriteKitでパラパラ漫画（Swift）

はじめに
準備
アニメーション処理
おわりに
参考

はじめに

SpriteKit でパラパラ漫画をつくる方法についてです。

ほぼこちらのサイト通りやったらできました。
SpriteKit Animations and Texture Atlases in Swift

こんな感じです。

SpriteKitでパラパラ漫画できた🙌 pic.twitter.com/pFMicCtjbK

— am10 (@am103141592) July 26, 2022

準備

Texture Atlas という複数画像をいい感じに管理してくれるやつを使うのでまず Texture Atlas を用意します。

xcassets -> AR and Textures -> New Sprite Atlas で追加できます。

ここにパラパラ漫画で使う画像を入れます。

アニメーション処理

あとは下記のようにコードを書くだけです（SKView は Storyboard で設定しています）。

import UIKit
import SpriteKit

final class ViewController: UIViewController {

    @IBOutlet private weak var skView: SKView!

    override func viewDidLoad() {
        super.viewDidLoad()

        let scene = FirstScene(size: skView.frame.size)
        skView.presentScene(scene)
    }
}

final class FirstScene: SKScene {

    override func didMove(to view: SKView) {
        // 背景設定
        let backNode = SKSpriteNode(imageNamed: "back")
        backNode.size = frame.size
        backNode.position = .init(x: frame.midX, y: frame.midY)
        addChild(backNode)

        // アニメーションさせるノードの設定
        let atlas = SKTextureAtlas(named: "Cats")
        let animationFrames = (1...atlas.textureNames.count).map { atlas.textureNamed("\($0)") }
        let targetNode = SKSpriteNode(texture: animationFrames.first!)
        targetNode.position = .init(x: frame.midX, y: frame.midY)
        addChild(targetNode)

        // アニメーション処理
        targetNode.run(.repeatForever(.animate(
            with: animationFrames,
            timePerFrame: 0.2,
            resize: false,
            restore: true)),
                       withKey:"animation")
    }
}

import UIKit

import SpriteKit

final class ViewController: UIViewController {

@IBOutlet private weak var skView: SKView!

override func viewDidLoad() {

super.viewDidLoad()

let scene = FirstScene(size: skView.frame.size)

skView.presentScene(scene)

}

final class FirstScene: SKScene {

override func didMove(to view: SKView) {

// 背景設定

let backNode = SKSpriteNode(imageNamed: "back")

backNode.size = frame.size

backNode.position = .init(x: frame.midX, y: frame.midY)

addChild(backNode)

// アニメーションさせるノードの設定

let atlas = SKTextureAtlas(named: "Cats")

let animationFrames = (1...atlas.textureNames.count).map { atlas.textureNamed("\($0)") }

let targetNode = SKSpriteNode(texture: animationFrames.first!)

targetNode.position = .init(x: frame.midX, y: frame.midY)

addChild(targetNode)

// アニメーション処理

targetNode.run(.repeatForever(.animate(

with: animationFrames,

timePerFrame: 0.2,

resize: false,

restore: true)),

withKey:"animation")

}

おわりに

SpriteKit でキャラクターを画像を変えて歩かせたりするアニメーションはどうやるんだろうと思って調べてみましたがなかなかわからずつまずきました。とりあえず動くものはできました。

はじめに

準備

アニメーション処理

おわりに

参考

コメント