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

7915 ワード
Swift SpriteKit ローラ SpriteKit テキストリンク

やりたいこと / 結果

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

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

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

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軸を変化させる という２つのアニメーションアニメーションを使うには、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)
// 上記２つの処理を並列で実行する
let roLathrowGroup = SKAction.group([throwAnim, scaleDownAnim])

Improvement

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

Reference

Node.js csrf攻撃防止
認証セキュリティ...クッキー...セッション...