まだiOSでリッチな演出に疲弊してるの？
iOSオールスターズ勉強会 14,Feb,2015
面白法人 カヤック
布田隆介 @ryusukefuda

カヤックのアプリ事情

【自社開発】
【受託開発】

演出、機能ともに
様々なものがアプリに
求められる

例えば

疲弊…

弊社先輩
「どうしようもなくなって演出に
動画をつっこんだことあるよ。」

完全なる疲弊…

リッチな演出
・CoreAnimation？
・Unity？
・Cocos2d？
・Library？

・CoreAnimation
コード量増えるし、大量のオブジェクトを
動かすのとか大変….
・Unity・Cocos2d
演出は作りやすいけど、ネイティブの機能を
いちいちプラグインでかくの大変…
・Library
自分がしたい演出見つからない…

他の方法ないの？

うーん…

あっ!!

SpriteKit

ということで、
SpriteKitをアプリの
演出に使ってみました

SpriteKitとは
iOS 7 から追加された、
Appleが提供している
ゲーム用のフレームワーク

特徴
・インストール不要
・Xcodeでプレビューしながら
パーティクル編集可能
・UIKitと同じように記述できる

実際、SpriteKitを
ゲームではなく、
UIKitベースのアプリに
使えるのか？

DEMO

Code
https://github.com/ryusukefuda/SpriteKit-Demo

SKNode
SpriteKitのコアとなるクラス
NSObjectのようなもの
SKScene( .sks)
SKNodeを継承し、メインの処理を行う。
UIViewControllerのようなもの
SKView
SpriteKitを表示する専用のView
UIViewのようなもの

Step.1
!
パーティクルつくる

Step.2
SKSceneとSKSceneのサブクラスを用意し、
パーティクルなど演出を追加する
func fireHeart(point:CGPoint) {
let path = NSBundle.mainBundle().




pathForResource("heartSpark", ofType: "sks")
let sceneData = NSData(contentsOfFile: path!,

options: .DataReadingMappedIfSafe, error: nil)!
let particle = NSKeyedUnarchiver.unarchiveObjectWithFile(path!)






as SKEmitterNode
particle.position = point


self.addChild(particle)
}

Step.3
SKViewをつくり、
UIViewControllerのViewにSKViewをaddする
let skView = SKView(frame: self.view.bounds)
self.view.addSubview(skView)

Step.4
好きなタイミングでSKSceneクラスの演出を呼ぶ
@IBAction func tapFavoriteButton(sender: AnyObject) {
let scene = UIScene.unarchiveFromFile("UIScene") as UIScene!
let location = CGPointMake(sender.position.x - 50, sender.position.y)
scene.fireHeart(location)
}

Animation
SKActionでパーティクルにアニメーションをつける
let scale = SKAction.scaleTo(1.0, duration: 1.0)
let fadeout = SKAction.fadeOutWithDuration(0.5)
let remove = SKAction.removeFromParent()
let sequence = SKAction.sequence([scale, fadeout,remove])
particle.runAction(sequence)

UIKitベースのアプリにSpriteKit
を追加するときのポイント

UIViewの上に透明のSKViewをのせて
SKViewのタッチイベントを無効にする
skView.allowsTransparency = true
!
skView.userInteractionEnabled = false
SKView
UIView

UIViewの( 0,0 ) とSKViewの ( 0,0 ) は違う
override func touchesBegan(touches: NSSet, withEvent event: UIEvent) {
!
for touch: AnyObject in touches {

let location = touch.locationInView(self.view)

scene.tapCircle(CGPointMake(location.x, self.view.bounds.height - location.y))
}
}
!
( 0,0 )
UIView
SKView
( 0,0 )

SpriteKitを使ってみて
・Appleが提供している安心感
・既存のコードの邪魔をすることなく
導入できる
・デザイナーさんも使える

まとめ
SpriteKitをUIKitと
組み合わせるのはあり！

リッチな演出を
iOSネイティブで。

ありがとうございました。