SpriteKitのSKShaderを試してみた【iOS8〜】

SKShaderを使うことで、SpriteKitにもフラグメントシェーダを実装できるってことで、SKShaderクラスを試してみました。
サンプルコードはこちら

こんなことができる（左：デフォルト表示　右：カスタムシェーダ実行）

とりあえずは、プロジェクトにフラグメントシェーダのソースを追加してください。
Xcodeでは追加ファイルにシェーダが無いみたいなので、Other -> Empty ファイルを追加しました。
（サンプルではdemo.fshで追加）
以下のコードが、demo.fshの内容です。

void main() {
    // 中心からの位置を求める
    vec2 uv = v_tex_coord - vec2(0.5, 0.5);
    float len = length(uv);
    
    // 1秒で１周期
    float time = mod(u_time, 1.0);
    
    // sinの値から参照するテクスチャのカラーを取得
    float sinVal = 1.0 + sin( 2.0 * 3.1415 * (len / 0.1 - time)) * 0.1;
    uv *= sinVal;
    vec4 texel = texture2D( u_texture, uv + vec2(0.5, 0.5));
    
    gl_FragColor = texel;
}

次にSpriteKitで画像を表示するコードは以下のとおり。
（プロジェクトはiOS->Application->Gameで作成しています）

import SpriteKit

class GameScene: SKScene {
    override func didMoveToView(view: SKView) {
        
        let bgNode = SKSpriteNode(imageNamed:"bg")
        bgNode.size = CGSize(width: 311, height: 407)
        bgNode.position = CGPoint(x:CGRectGetMidX(self.frame), y:CGRectGetMidY(self.frame))

//        let shader = SKShader(fileNamed: "demo.fsh")
//        bgNode.shader = shader;
        
        self.addChild(bgNode)
    }
}

上記のコードのカスタムシェーダ追加部分のコメントを外すとカスタムシェーダに対応したSKSpriteNodeになります。

        // demo.fshの読み込み
        let shader = SKShader(fileNamed: "demo.fsh") 
        // bgNodeにカスタムシェーダを適用 
        bgNode.shader = shader;

シェーダを使うとSpriteKitでの表現の幅が広がるので色々楽しそうな感じです

この記事を書いた人

なかの: アプリ開発チームで、iOSエンジニアやってます。　　　　　　　　*'``・* 。　　　　　　　　|　　　　 `*。　　　　　　,｡∩　　　　　* 　　　　　　　　　+　(´･ω･`)　*｡+ﾟ　　　　　　`*｡ヽ、　つ *ﾟ* 　　　　　　　`・+｡*・' ﾟ⊃ +ﾟ　　　　　　　☆　　 ∪~ ｡*ﾟ　　　　　　　`・+｡*・ﾟ