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

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

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

shader_off shader_demo

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

void main() {
    // 中心からの位置を求める
    vec2 uv = v_tex_coord - vec2(0.5, 0.5);
    float len = length(uv);
    
    // 1秒で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エンジニアやってます。         *'``・* 。         |     `*。        ,。∩      *           + (´・ω・`) *。+゚       `*。 ヽ、  つ *゚*        `・+。*・' ゚⊃ +゚        ☆   ∪~ 。*゚         `・+。*・ ゚
Pocket