タイトル画面でぱらぱらアニメを実装する

居眠りするウパンダ

iPhoneに限らずアップル社の製品ではアニメーションが多用され ユーザーインターフェースの一部となりユーザーの操作把握の大きな助けとなっています。 一般のアプリにおいてすら然るべくあれば況やゲームに於いてをや、 開発中のアプリはブロック崩しにて特別に大きなアニメーションは必要ありませんが タイトル画面ではプレイ画面でボール足るキャラクター ウパンダ のボールとして呼び出される前に呑気に居眠りしている様子を表現したく思いました。

而してウパンダのぱらぱらアニメを実装すべく目論んだのでしたが但し タイトル画面ではプレイ画面で利用しているアップル社純正の2Dゲーム用フレームワークの SpriteKit は読み込ませていませんから最も基本的な Cocoa TouchUIKit フレームワークでぱらぱらアニメを実装しなければなりません。

スポンサーリンク
日付:2014年3月30日
開発機:MacBook Air(11-inch, Mid 2013)
MacOSバージョン:OS X 10.9.2
Xcodeバージョン:5.1
言語:Objective-C
主関連アプリ:uPanda Breaks Out Fruits

実はぱらぱらアニメは其れこそiPhoneアプリ開発の為に Xcode を触り始めた当初から試験的なプロジェクトを作成して 其の中で矯めつ眇めつ動かしてみたりしていました。 其の際に参考にしたのが以下の両サイトです。

上記両サイトを参照しながら実装した結果上手くウパンダが 転寝うたたね アニメーションをしてくれたのが以下コードになります。

// アニメーション用イメージビューの用意
CGRect sleepingUpandaRect = CGRectMake(0, 0, 320, 568);
UIImageView *sleepingUpandaView = [[UIImageView alloc]initWithFrame:sleepingUpandaRect];
sleepingUpandaView.image = [UIImage imageNamed:@"upanda_ttl-0.png"];
[self.view addSubview:sleepingUpandaView];
// アニメーション用画像を配列にセット
NSArray *sleepingUpandaImageList =
  [NSArray arrayWithObjects: // 画像を登録
    [UIImage imageNamed:@"upanda_ttl-0.png"],
    [UIImage imageNamed:@"upanda_ttl-1.png"],
    [UIImage imageNamed:@"upanda_ttl-2.png"],
    [UIImage imageNamed:@"upanda_ttl-2.png"],
    [UIImage imageNamed:@"upanda_ttl-1.png"],
    [UIImage imageNamed:@"upanda_ttl-0.png"],
  nil];
// アニメーション用画像をセット
sleepingUpandaView.animationImages = sleepingUpandaImageList;
// アニメーションの速度
sleepingUpandaView.animationDuration = 2.5;
// アニメーションのリピート回数
sleepingUpandaView.animationRepeatCount = 0;
// アニメーションのスタート
[sleepingUpandaView startAnimating];

此の時取り敢えずは目論見通りの動きをウパンダは示しましたが 本当を言えば画像の配列を上記両サイトの後者側に示されていた情報を参考に 以下コードの如く配列を利用して書きたくはありました。

// アニメーション用画像を配列にセット
NSMutableArray *imageList = [NSMutableArray array];
for (NSInteger i = 1; i < 4; i++) {
  NSString *imagePath = [NSString stringWithFormat:@"image%02d.png", i];
  UIImage *img = [UIImage imageNamed:imagePath];
  [imageList addObject:img];
}
目の回るウパンダ

処が転寝うたたねでは上手くことが運びませんで アニメーション用各画像ファイル名をベタ書きにした儘済ませましたが、 此の際今後の宿題とした後に一週間も経ない2014年4月5日には 再びウパンダをアニメーションさせたく目論んだゲームオーバー画面で ボールとなって回り過ぎた為目を回している様子を表す際に採用し首尾よく実装がなりました。 現在実際のアプリではウパンダは機嫌良く目を回してくれています。

uPanda Breaks Out Fruits
無料:カテゴリ: ゲーム: 4+ 評価
バージョン: 4.12
リリース: 2014年9月15日
更新: 2022年4月20日
サイズ : 10.7 MB
互換性: iOS 14.4 以降のiPhone、iPod touch に対応。および、macOS 11.0以降とApple M1 チップを搭載したMac に対応。

1件のコメント

コメントは受け付けていません。