その後のその後

iOSエンジニア 堤 修一のブログ github.com/shu223

ゲームアプリ向け UI コンポーネントセット "UIKitForGame" を公開しました

最近はゲームアプリをつくることが多いのですが、その中で自分でもよく使う UIKit のカテゴリ/サブクラスの詰め合わせを Github にアップしました。


https://github.com/shu223/UIKitForGame


以下に概要と使い方を紹介させていただきます。


DamageValueLabel

某ファイナルなファンタジーのバトルを彷彿とさせるダメージ値のアニメーションが簡単に行えるようになる UILabel のサブクラスです。



手軽にゲームっぽい雰囲気を出せるので、モック等によく使っています。

使い方

表示したい文字列を UILabel の text プロパティにセットし、

[self.label startAnimation];

このように startAnimation メソッドをコールするだけ!

More
self.damageLabel.textColor = [UIColor redColor];

このように UILabel に元からある textColor プロパティで色を変更すればそれも反映されますし、フォント(とフォントサイズ)も UILabel の font プロパティからの変更が反映されるようになっています。


UIImageView+effects

UIImageView にセットされた画像を白く光らせるエフェクトです。内部で動的に白く塗りつぶした画像を生成しています。


自分はデモにあるようにダメージを受けたときや、登場シーンなどによく用いています。

使い方

whiteFadeInWithDuration:delay:block: メソッドをコールするだけです。

[self.charaImgView whiteFadeInWithDuration:0.3
                                     delay:0.0
                                     block:^(void) {
                                     	 // エフェクト完了後の処理
                                     }];
注意点など

動的に画像を生成しているので、対象となる画像のサイズが大きい場合や、パフォーマンスが要求される場合などには不向きかもしれません。


自分はそういったケースでは本カテゴリをそのまま用いず、生成した画像をキャッシュして再利用したり、元からそういう素材を用意しておいたりしています。

More

UIImageView+effects から UIImage+fill という自作カテゴリをインポートしているのですが、こちらもなかなか便利かもしれません。


UIImageView+effects からは UIImage+fill カテゴリの次のメソッドを使っています。

- (UIImage *)imageFilledWhite;

画像を白く塗りつぶした UIImage を生成するメソッドです。


他に、下記のようなメソッドを持っていて、

- (UIImage *)imageFilledWithColor:(UIColor *)color;

引数に指定した任意の色で塗りつぶした UIImage を生成することができます。



UIView+shake

ダメージを与えた/受けたときなどに、グラグラと揺らすエフェクトです。


UIView のカテゴリとして実装してあるので、UIImageView で表示している画像を揺らす、コンテナビューごと揺らす、等幅広く使用することができます。

使い方

shakeWithCount:interval:をコールします。

    [self.charaImgView shakeWithCount:10 interval:0.03];

引数には揺らす回数、揺れの早さを指定します。


サンプル

UIKitForGameDemo プロジェクトで上記の機能が一通り試せますので、ビルドして実行してみてください。



今後の更新予定

今はまだ3つしかありませんが、自分でよく使い回しているクラスやカテゴリはまだまだあるので、ソースが整い次第、随時追加していきたいと思っております。


また実装のイケてない部分などあると思いますが、pull request いただければ反映させていただきます!