LoginSignup
2
2

More than 5 years have passed since last update.

SpriteKit を用いてローラを遠くに飛ばす feat. Playground

Posted at

やりたいこと / 結果

  • ボールが遠くに飛んでいるアニメーションを表現したい。
  • ちょっと試したが結構難しいことが分かった

コードを書く前にやったこと

  • 実際に紙を丸めて投げてみて、観察してみる
    • あまり 横幅が変わらないことが分かった
  • デザイナの @d-mikita に相談して以下のアドバイスを貰った
    • 「例えばゆらしてみるとかブレるアニメがいいのでは?」 とか
    • 「ボールを投げる距離によって自ずと変わってくるのでは?」 とか

Gifアニメ

ローラ.gif

コード

ローラ.swift
import SpriteKit
import XCPlayground


let sceneWidth = 500
let sceneHeight = 500

func shootRola(scene: SKScene) -> Void {
    let roLa = SKSpriteNode(imageNamed: "OK")
    let throwAnim = SKAction.moveBy(CGVector(dx: 0.0, dy: 400), duration: 0.5)
    let scaleDownAnim = SKAction.scaleTo(0.75, duration: 0.5)
    let roLathrowGroup = SKAction.group([throwAnim, scaleDownAnim])

    roLa.position = CGPoint(x: 280, y: 0)
    roLa.runAction(roLathrowGroup)
    scene.addChild(roLa)
}

let skView = SKView(frame: CGRect(x: 0, y: 0, width: sceneWidth, height: sceneHeight))
let skScene = SKScene(size: CGSize(width: sceneWidth, height: sceneHeight))

shootRola(skScene)
skView.presentScene(skScene)

XCPShowView("Live SKView : Rola", view: skView)

ポイント

  • X幅を小さくしつつ、Y軸を変化させる という2つのアニメーションアニメーションを使うには、SKAction.group の API を用いる
  • 上記コードで言うと、以下がポイントになる
ローラ.swift
// y 座標を400移動しつつ、0.5ずつつ、変更してみる
let throwAnim = SKAction.moveBy(CGVector(dx: 0.0, dy: 400), duration: 0.5)
// 0.75 倍の大きさに0.5秒で作る
let scaleDownAnim = SKAction.scaleTo(0.75, duration: 0.5)
// 上記2つの処理を並列で実行する
let roLathrowGroup = SKAction.group([throwAnim, scaleDownAnim])

Improvement

  • もうちょっと複雑なアニメーションを表現する必要がある
  • ブレるアニメーションをいかにして表現するか

Reference

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2