Objective-C:Sprite Kit Texture Atlas を使用しアニメーションを表示する

SpriteKit の Texture Atlas を使用すれば、驚くほど簡単にアニメーションを作成することができます。

今回は Texture Atlas でアニメーションを実装する手順と注意点を説明したいと思います。

Texture Atlas を使用しアニメーションを表示する

概要

  1. Texture Atlas フォルダの準備
  2. アニメーション画像の準備
  3. フォルダを Xcode プロジェクトにコピー
  4. プロジェクトの設定
  5. コードの記述

手順の詳細

  1. Texture Atlas のフォルダを Finder 上で新規作成します。フォルダ名の末尾は必ず .atlas にします。ここでは ball.atlas としました。

    img_textureatlas_01
  2. Photoshop等で画像を作成します。ボールがバウンドする画像を作成し ball.atlas フォルダ内に書き出します。画像ファイル名は任意のもので結構です。

    img_textureatlas_02
  3. Texture Atlas のフォルダをドラッグし、Xcode のプロジェクトに追加します。

    Destination の Copy items… にチェックCreate Groups… を選択し、Add to targets をチェックFinish をクリックします。

    img_textureatlas_03
  4. SpriteKit のプロジェクト新規作成()し、プロジェクトの設定の BuildSettings から、SpriteKit Deployment Target > Enable Texture Atlas GenerationYes にします。先に Texture Atlas のフォルダをプロジェクトに追加しておかないと Enable Texture Atlas Generation 項目は表示されません。

    img_textureatlas_04

    ※プロジェクトファイルが置かれているパスに日本語が入っていると Texture Atlas が表示されないので注意。

  5. タッチした場所でボールアニメーションが実行されるように、touchesBegan デリゲートに以下のコードを記述します。

    -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
        
        // Texture Atlas を作成しテスクチャを定義
        SKTextureAtlas *atlas = [SKTextureAtlas atlasNamed:@"ball"];
        SKTexture *ball01 = [atlas textureNamed:@"ball_01"];
        SKTexture *ball02 = [atlas textureNamed:@"ball_02"];
        SKTexture *ball03 = [atlas textureNamed:@"ball_03"];
        SKTexture *ball04 = [atlas textureNamed:@"ball_04"];
        SKTexture *ball05 = [atlas textureNamed:@"ball_05"];
        SKTexture *ball06 = [atlas textureNamed:@"ball_06"];
        
        // キャラクターをSceneに配置
        SKSpriteNode *ball = [SKSpriteNode spriteNodeWithTexture:ball01];
        ball.position = [touches.anyObject locationInNode:self];
        [self addChild:ball];
        
        // アクションを定義しアニメーションを実行
        SKAction *bound =
        [SKAction animateWithTextures:@[ball01,ball02,ball03,ball04,ball05,ball06]
                         timePerFrame:0.1];
        SKAction *boundForever = [SKAction repeatActionForever:bound];
        [ball runAction:boundForever];
    }
  6. ビルドして画面をタッチするとアニメーションが実行されます。とても簡単です。

    img_textureatlas_05

まとめ

Sprite Kit は楽しいですね。Swift の学習と並行しながら Sprite Kit で遊んでみようと思います。

この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

siro:chro 無料ゲーム SQN をリリースしました

img_sqn_00

sirochro 初の無料ゲームアプリ SQN をリリースしました。
記事:SQN: iOS 無料ゲームアプリ SQN - Sequential Numbers をリリース
ちょっとした時間に楽しめる完全無料のゲームなっていますので、是非ダウンロードして遊んでみてください。

↓SQN のダウンロードはこちらから

Related Contents

Pickup Contents