SpritekitテクスチャアトラスのNSMutableArrayを使わないアニメ実装

アイフォーンアプリ開発に於いてSDゲーム用フレームワークの SpriteKit を用いてアニメーションを実現するにあたり テクスチャアトラスを用いたアニメーションの実装方法 でテスト的に歩くウパンダをアニメーションさせてみたりしました。 この時コードとしては2016年7月21日の記事( ゲームオーバー画面で表示されるアニメが重複描画される問題 )に見られるように NSMutableArray を利用していましたが配列に簡単に収める必要性から連番画像を用意していました。

歩くウパンダのナンバリング・アニメ

此処で画像を使い回す、即ち同じ画像を複数回使うのはセルアニメでは効率化の主要なテクニックですが 同じ画像は番号を振れば同じ番号となり連番とはなりません。 同じ画像に異なる番号を振れば実現は出来ますが無駄に容量を喰ってしまいます。 従って配列に収めるにあたり効率的に for 文で addobject する訳にも行かなくなります。 其の様な場合の難しく考えずごく簡単に一枚一枚の画像に対して 其々インスタンスを用意する記述をする実装法であれば 言って見れば生の実装法にも近く勉強の意味も予て実装してみることにしました。

スポンサーリンク
日付:2014年4月11日
開発機:MacBook Air(11-inch, Mid 2013)
MacOSバージョン:OS X 10.9.2
Xcodeバージョン:5.1
言語:Objective-C
主関連アプリ:うさ犬が行く
[iOS 7] Sprite Kit の Texture Atlas を使ってみた

この際にはサイト Developers.IO の2013年9月19日の上記リンクの記事が参考になります。 参考記事のコードがほぼ其の侭使えますが リピート回数が1回だけになってしまうので 手元の環境に合わせて奈辺を修正したコードが以下になります。

/* 歩くウパンダのアニメーション */
// テクスチャアトラスからテクスチャを取得
SKTextureAtlas *wUpandaAniAtlas
   = [SKTextureAtlas atlasNamed:@"uPandaWalking"];
SKTexture *uPandaWalkFrame01
   = [wUpandaAniAtlas textureNamed:@"upanda_walking-1-5"];
SKTexture *uPandaWalkFrame02
   = [wUpandaAniAtlas textureNamed:@"upanda_walking-2-4"];
SKTexture *uPandaWalkFrame03
   = [wUpandaAniAtlas textureNamed:@"upanda_walking-3"];
SKTexture *uPandaWalkFrame04
   = [wUpandaAniAtlas textureNamed:@"upanda_walking-2-4"];
SKTexture *uPandaWalkFrame05
   = [wUpandaAniAtlas textureNamed:@"upanda_walking-1-5"];
SKTexture *uPandaWalkFrame06
   = [wUpandaAniAtlas textureNamed:@"upanda_walking-6-8"];
SKTexture *uPandaWalkFrame07
   = [wUpandaAniAtlas textureNamed:@"upanda_walking-7"];
SKTexture *uPandaWalkFrame08
   = [wUpandaAniAtlas textureNamed:@"upanda_walking-6-8"];
NSArray *uPandaWalkFrames
   = [NSArray arrayWithObjects:uPandaWalkFrame01,
       uPandaWalkFrame02,
       uPandaWalkFrame03,
       uPandaWalkFrame04,
       uPandaWalkFrame05,
       uPandaWalkFrame06,
       uPandaWalkFrame07,
       uPandaWalkFrame08,
       nil
   ];
// 歩くウパンダを配置
SKSpriteNode *uPandaWalk
   = [SKSpriteNode spriteNodeWithTexture:uPandaWalkFrame01];
uPandaWalk.position
   = CGPointMake(self.frame.size.width / 2, 58.0);
[uPandaWalk runAction:[SKAction repeatActionForever:
   [SKAction sequence:
      @[
         [SKAction moveToX:- CGRectGetWidth(self.frame) / 2 duration:8.0],
         [SKAction moveToX:CGRectGetMaxX(self.frame) / 2 duration:0.0]
         ]
      ]
   ]
];
[self addChild:uPandaWalk];
// アニメーションを実行
// SKAction *exeUpandaWalk
//   = [SKAction animateWithTextures:uPandaWalkFrames timePerFrame:0.3f];
// [uPandaWalk runAction:exeUpandaWalk]; // 此方参考サイトのコードが1回で終わり
[uPandaWalk runAction:[SKAction repeatActionForever:
   [SKAction animateWithTextures:uPandaWalkFrames
      timePerFrame:0.1f
      resize:NO
      restore:YES]] withKey:@"walkingInPlaceUpanda"];

以上を以てエキストラ的なテストアニメーションではありますが どうやらウパンダも其の様な役割にも関わらず機嫌良く歩いてくれました。

うさ犬が行く
無料:カテゴリ: ゲーム:4+ 評価
バージョン: 1.0(リリース: 2015年10月16日)
サイズ : 19.7 MB
互換性: iOS 7.1 以降。iPhone、iPad、および iPod touch に対応。
スポンサーリンク