Cocos2dx v3.0 から v3.2 正式版への移行メモ

Cocos2d-x v3.0 から v3.2 へ移行した時のメモを書き残します。
なお、前の投稿内容に書いた「移行メモ」を事前に実施しておいてください。
http://laboyukai.blogspot.jp/2014/07/cocos2dx-v32rc0-v32.html

iOS8で追加されるUIVisualEffectViewの使い方

こんにちは。京都ではそろそろ祇園祭ですが、そもそも祇園祭にそこまで思い出も思い入れもないので書き出しを完全に失敗したmatsumiです。

今回のお題は、７月１１日現在beta3公開中のiOS8で追加されている「UIVisualEffectView」というクラスの書き方についてです。

【※注意※】このエントリーはiOS8 beta3での仕様を基に書いています。今後のbeta版や正式版にて改変がかかる可能性がありますので、その点にご注意の上お読みください。

さて、この「UIVisualEffectView」ってクラスですが何をする物かと言うと、あるUIViewに対して磨りガラスのような効果をかぶせる事ができます。

iOSで磨りガラスっぽい画面というと、まず思い出されるのが、そう、通知センターとコントロールセンターですね。

このクラスを使えば、それらの背景で使っているような効果を簡単に実現できる訳です。
これは便利。

CIFilterのちょっと気の利いた書き方

こんにちは。京都に生まれ育ってン十年。京都の暑さに身体が全く順応せず、毎年クールビズのシーズン間で夏バテしているmatsumiです。

今回のお題は「CIFilterのちょっと気の利いた書き方」です。

CIFilterとはCore Imageで用意されている画像にフィルターをかけるクラスです。
要は、写真系のアプリとかで使われている加工用のいい感じのフィルターを作れますよーってクラスです。
詳しくはAppleのクラスリファレンスあたりをお読みください。

このCIFilter、ちょっと書き方にくせがあって、その辺まとめてる記事があまり無かった気がしたので書いてみます。


まずは、試しにCIFilterで用意してあるフィルターの一種CIVignetteを使った結果です。

元画像

フィルター適用

ビネット効果（トンネルエフェクト）と呼ばれるもので、トイカメラ風の周囲が暗い画像を作る事ができます。

Cocos2dx v3.0 で plugin-x / AdMob を利用する

Cocos2d-xフレームワークに入っているplugin-xのAdMobプラグインを利用してiOS/Android両方に対して広告掲載を行います。

試した環境は以下のようになっています。

• Cocos2d-x v3.0 final
• plugin-x (4a8c94a85a08cddbea5e1bc499c50cce7518fb15)

最新だとAdMobのiOS側で64bit対応が入っていたので、今回は最新のものを使っています。

Cocos2d-xでiOS向けアプリをSuspend／Resumeした時に音声再生されなくなる問題の解決方法

iOSでのみ、サスペンドしたあとにレジュームする事でアプリ復帰後、たまに音声再生されなくなる不具合が発生します。4, 5回に1回くらいの割合なので、何度か試してみてください。
なお、Cococs2d-x 3.0.0 final にて確認しましたが、フォーラムを読む限りだと問題自体は以前から発生していたようですね。

Cocos2d-x v3.0.0 の環境設定

ようやくv3.0.0の正式版がリリースされた事ですし、Cocos2d-x v3.0.0 で環境設定して iOS/Android向けにビルドするところまでのエントリーを書きます。
※Mac OS X でのセットアップ前提で書いています。

App Storeで「子ども向け」アプリを配信する方法

子ども向けアプリとして「たまぴんびゅーん」をリリース出来ましたので、子ども向けアプリとして配信するには何をする必要があるかを書きます。

iOSアプリを公開せず2回審査に通し、3回目で公開したい場合の申請フロー

仕事だといろいろ紆余曲折する事もあり、App Store公開までに以下のリリース手順を踏まざるを得ない状況になることが稀にあるかと思います。今回はその手順の説明を行います。

• v1.0.0：未公開
• v1.0.1：未公開
• v1.0.2：初公開

UIViewにCAGradientLayerを使ってグラデーションをかける

はじめまして。もうすぐ１年ですがピッチピチの新人と言い張るmatsumi（中年）です！

今回のお題は、iOS7がフラットデザイン風になったことで、
すっかり肩身の狭くなった感があるグラデーションについてです。

肩身が狭くなったとは言え、デザイン上なにかと必要になるグラデーションなのですが、
「CAGradientLayer」を使用すればUIViewに簡単にグラデーションをかける事ができます。

手順は、
１．「CGGradientLayer」を作る
２．サイズ、色、開始位置と終了位置を指定
３．UIViewのlayerにグラデーションのレイヤーを追加
これだけ。

Cocos2dxでターゲットをiOS7以上にした時に発生するエラーの解決方法

メインターゲット プロジェクトの Deployment Target を 7.0 以上にした際、ビルド時に以下のようなエラーが沢山発生します。
※Cocos2d-x 2.2.2 での内容となります。

Cocos2dxでSpineでのボーンアニメーションが上手くいかない解決方法

Spine 1.8.18 で出力した png/json/atlas を使い、 Cocos2d-x 2.2.2 でボーンアニメーションしようとした時に、CCEGLView::sharedOpenGLView()->setDesignResolutionSize を使うとテクスチャアトラスがそのまま表示されてしまいます。

最新のSpineにCocos2dxに入っているSpine Runtimeが対応出来ていない可能性があるので、今回はSpine Runtimeを入れ替えてみます。

iOSアプリ向けライブラリの探し方

iOSアプリ向けのライブラリを探す時、Cocoa Controls サイトで探すと楽です。でも、探し方が悪いと目的の機能を持ったライブラリは見つけ難いです。本エントリーはそんな人向けに簡単な探し方フローを書いています。

iOSの広告に関するまとめ

iOS向け広告について簡単にまとめて書きます。

iOSアプリの多言語対応サポートアプリ「Linguan」の使い方

多言語対応する際、Xcode上で行うのは凄く大変＆翻訳漏れをしてしまいがちです。そんな時にApp Storeで公開されているMac OS X向けアプリ「Linguan」を使うと楽に行えます。
Linguan
カテゴリ: 開発ツール, ユーティリティ

Xcode5からの新機能「Images.xcassets」の使い方について

Xcode5から画像リソースが管理しやすくなる機能「.xcassets」が追加されました。今回はこの機能の使い方について書きます。

Xcode5でQuickHelpを書く

Xcode5から実装したメソッドにQuickHelpを書く事が出来るようになったようです。ので、簡単に試してみました(公式ドキュメントほぼそのままですが...)。

メソッド

書き方は表示したいメソッドの上部へ記述に従って書くだけでOK。例えば以下のように。

/*! 社員の出社状況を設定
 * \param employeeNumber 社員番号
 * \param state 出社状況。YESなら出社で、NOならズル休み
 * \returns 出社状況がDBに保存されたかを返す
 */
- (BOOL)setEmployeeWork:(NSInteger)employeeNumber withState:(BOOL)state
{
    // 略
}

メソッドを呼び出している場所で、三点タップしてあげると以下のように表示される(これは公式メソッドのQuickHelp表示方法)。

メソッド上にカーソルが存在する際、Xcodeのプロパティに以下のように表示されもします。

クラス

メソッドと同じようにクラスに対してもQuick Help表示できます。例えば以下のように。

/*! ViewController
 * 存在価値のないクラス
 */
@interface ViewController : UIViewController

ViewControllerを三点タップすると以下のように表示されます。

ちなみにQuick Helpを追加しなかった場合、以下のように継承元クラスのQuick Helpが表示されます。

iOS6からiOS7への対応

社内で書き残していた内容をブログに書き写した内容となります。個人アプリをiOS7に対応させた時に書き残した内容なので掲載画像がアレですが気にしないでください。

①アイコンの追加対応

iPhoneで1種類、iPadで2種類増加されました。iPhoneが1種類しか必要ないのは対応バージョンに非Retinaが無いためです。

iPhone(120x120)
・Icon-60@2x.png

iPad(76x76/152x152)
・Icon-76.png
・Icon-76@2x.png

②storyboardで作成した箇所のレイアウトが崩れる対応方法

Xcode4.6以前で開発していたプロジェクトをXcode5で起動し、初めてstoryboardを開いた時にstoryboardで作成した全レイアウトを自動調整してくれる。もしくは警告にそれっぽいメッセージがあるのでクリックすると自動修正されます。それでも未だグチャグチャな場合は他に原因があり。

③UINavigationBarとStatusBarをUIViewに上被せで表示させたくない場合の対応方法

以下はUIViewControllerクラス等を継承したクラス上で使う想定のコード。もしTabBarだけは元の状態にしたいなら UIRectEdgeBottom を使う。

self.edgesForExtendedLayout = UIRectEdgeNone;

④StatusBarとUINavigationBar上の文字とが被る

StatusBarの上にUINavigationBarが被さる事が原因だが③の方法で解決しない。発生する原因はUINavigationController上にUINavigationBarが追加されていないからUIViewController側がUINavigationBarを一つのControllerと見なして自動調整してくれないからなので、対応方法は以下のようにUINavigationController側でStatusBarとTopBarを使うよう定義すれば良い。

⑤UIAlertViewがaddSubView出来なくなった問題への対応方法

TSAlertViewなどのUIViewを継承したカスタムAlertViewで代用。クラス名を置き換えるだけで対応出来るが、ダイアログの見た目はiOS6以前のものとなる。もしくはUIAlertView風に見せるのではなくUIViewControllerをモーダル表示する。
https://github.com/mindbrix/TSAlertView

⑥UI部品の背景色が変更されない問題への対応方法

色設定の仕様が以下のように変わりました。今まで背景色を変更するのに使っていたメソッドが文字色変更用となり、背景色を変えるメソッドが新たに追加されています。

// UI部品の文字色変更
setTintColor

// UI部品の背景色変更
setBackgroundColor

以下は具体的な背景色を変更する例。UISearchBarなどの特殊なUIに関してはメソッド名が違う点と色濃く表示される点に注意が必要、少し薄くするのがベターかもしれません。

UIColor color = [UIColor redColor];
// before
[self.navigationController.navigationBar setTintColor:color];
[self.navigationController.toolbar setTintColor:color];
[searchBar setTintColor:color];

// after1
[self.navigationController.navigationBar setBackgroundColor:color];
[self.navigationController.toolbar setBackgroundColor:color];
[searchBar setBarTintColor:color];

// after2(差分だけ)
[searchBar setBarTintColor:[color colorWithAlphaComponent:0.2f]];

⑦UI部品の一括色変更する対応方法

Window#対象メソッド で変更可能です。ただし、Window#setBackgroundColor で変更されるUIはUINavigationBarのみっぽく、UIToolBarなどは変更できませんでした。iOS7からデフォルト色が白から青に変更されているため注意が必要です。

// AppDelegateクラス上
UIColor color = [UIColor redColor];

[self.window setTintColor:color];
[self.window setBackgroundColor:color];

⑧ホーム上のアプリ名の省略されない最大文字数変更

iOS7からフォントが変更されたのに伴い、ホーム上のアプリ名の文字サイズが若干変わったようです。今までは半角13文字まで省略されずに表示されていましたが、iOS7では半角12文字までに変わっていました。

iOS6：半角MAX13文字
         ：全角MAX6文字

iOS7：半角MAX12文字
         ：全角MAX6文字

余談

この対応を入れたアプリを一週間以上前に申請したのですが未だにIn Reviewにすらステータスが変わらないので、今対応して申請してもしばらく待たされそうです。

2つのModalViewを切り替えて表示する方法

ModalViewを起動している時に、一度ModalViewを閉じてすぐに他のModalViewを起動したい事があるかと思います。今回はその方法を書きます。
※iOS5以上での方法となります。

storyboard

まずstoryboardで起動元画面を1画面、ModalView用の2画面作成します。
左から以下の名前で進めていきます。

• ViewController
• ModalView1Controller
• ModalView2Controller

ModalView2ControllerのStoryboardIDに「Modal2ViewController」と設定しておきます。

ModalView1Controller

1つ目のModalViewを実装していきます。
以下は ModalView1Controller.h

@protocol ModalView1ControllerDelegate
- (void)switchModalViewController:(UIViewController *)controller;
@end

@interface ModalView1Controller : UIViewController {
    id<ModalView1ControllerDelegate> myDelegate;
}

@property (nonatomic, retain) id myDelegate;
- (IBAction)showModalView2Controller:(id)sender; // storyboardに配置しているボタンのイベント
@end

次に ModalView1Controller.m

// 遷移するトリガー。ここではボタンクリックにしています
- (IBAction)showModalView2Controller:(id)sender
{
    UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"MainStoryboard_iPhone" bundle:nil]; // MainStoryboard_iPhone.storyboard
    UINavigationController *nc = [storyboard instantiateViewControllerWithIdentifier:@"Modal2ViewController"]; // StoryboardIDを指定
    [myDelegate switchModalViewController:nc];
}

ここではDelegateを使って、遷移元に次に表示したいModalViewのControllerを渡している点がポイントです。

ViewController

次に1つ目の画面であるModalView起動画面を実装します。
以下は ViewController.m

// 遷移直前に呼ばれる
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
    ModalViewController *controller = segue.destinationViewController;
    controller.myDelegate = self;

    // 上記はViewControllerに対して行う処理。Navigationとかは以下みたいにする
    // UINavigationController *navigationController = segue.destinationViewController;
    // MangaPageViewController *controller = (id)[[navigationController viewControllers] objectAtIndex:0];
}

#pragma mark - ModalView1ControllerDelegate
- (void)switchModalViewController:(UIViewController *)controller
{
    // 遷移先のModalViewを閉じて、次に表示させたいModalViewを起動
    [self dismissViewControllerAnimated:YES completion:^{
        [self presentViewController:controller animated:YES completion:NULL];
    }];
}

ポイント2つ。

1. 遷移する時にModalView1Controllerで実装してるmyDelegateにselfを設定しておく。
2. delegateメソッドが呼ばれたら表示中のModalView1Controllerを閉じ、閉じる処理が完了したらModalView2Controllerを起動させる。

完成

実装は終わりましたので確認してみてください。

iOS6以上でのstoryboard上のローカライズ対応

すっかりブログ書くことを忘れてたので初めての会社ブログへの投稿になります。鯱ブログだし休日に会社ブログ書くとらしい鯱れるね。

iOS6からstoryboard上のローカライズ対応が楽になりました！楽になった方法を書こうと思いますが、楽になったのは設定時であって前準備は非常にメンドウです。くじけぬ心を装備して臨みましょう。

Step1. プロジェクト作成

まずはXcodeでプロジェクトを作成してください。今回はiPhone/iPadのstoryboardを追加した状態で解説していきます。

Step2. Localizable.strings作成

Finderから「プロジェクト/en.lproj」ディレクトリに "Localizable.strings" ファイルを作成します。

今回の初期設定時に巻き込んで作ってしまうと楽なので含めている為、今回このファイルは使いません。不要ならこのStepは飛ばしてください。
コード上で以下のように記述する事で利用します。

NSLocalizedString(@"kye", @"comment");

Step3. Base.lproj作成

Xcodeで「Project > info> Localizations > + > Other > Base(Base)」を選択。

ローカライズ対象のファイルを選べというアナウンスがあるので、全てチェックが付いた状態で「Finish」を押します。

結果、Baseとenはこんな感じになります。

Step4. *.storyboard用の*.stringsファイル作成

ターミナルから「プロジェクト/Base.lproj」で以下のibtoolコマンドを実行します。それぞれstoryboardに対応したstringファイルなので、そのディレクトリにあるstoryboard名が異なれば内容変更して実施ください。

ibtool --export-strings-file MainStoryboard_iPhone.strings MainStoryboard_iPhone.storyboard 

ibtool --export-strings-file MainStoryboard_iPad.strings MainStoryboard_iPad.storyboard

こんな感じに*.storyboardに対し、*.stringファイルが増えていればOK。

Step5. *.stringsファイル移動

Base.lprojに作成した.*stringsファイルを、en.lprojディレクトリにFinder(実際のファイルをって事)で移動させます。
これでBase.lprojディレクトリに2ファイル、en.lprojディレクトリに4ファイルです。

Step6. Xcodeに今まで作成したファイルを追加

追加したLocalizable.stringsとstoryboardの*.stringファイルをXcode上に追加します。

Xcodeから「メニュー > Add Files to "プロジェクト名"」から"Base.lproj"と"en.lproj"を選択します。

Xcode上で*.storyboardとInfoPlist.stringsが重複して邪魔なので消します。

Step7. 対応言語の追加

英語以外の言語を追加していきます。今回は"Japanese(jp)"を選びます。

まローカライズ対象のファイルを選べというアナウンスがあるので、 *.storyboard以外の全てにチェックを付けた状態で「Finish」を押します。

"MainStoryboard_iPad.storyboard" や "MainStoryboard_iPhone.storyboard" ファイルにチェックを付けないのがポイントです。

これで、LanguageにJapaneseが増えます。

Xcode上で見ると "InfoPlist.strings", "Localizable.strings", "MainStoryboard_iPad.strings", "MainStoryboard_iPhone.strings" に▶印がついて、▼するとEnglishとJapaneseの2言語が設定出来る状態になりました。

これで前準備は終わりになります。慣れれば簡単なのかな？いあそんなことは...

Step8. storyboard上でUI作成

iPhoneのstoryboardを対応してみましょう。"MainStoryboard_iPhone.storyboard" を開いて適当にUI作成してください。

今回は以下のように作成してみました。

Step9. storyboardに表示するテキストをローカライズ対応

"MainStoryboard_iPhone.strings"ファイルの英語or日本語を開いて以下のようにkey-valueを設定していきます。

"key" = "value";

ここで重要なのはkeyの方です。keyは"MainStoryboard_iPhone.storyboard" を開いて、文字を表示させる対象の部品を選択し、storyboardの右Viewの左から3つ目にあるタブにある「Object ID」と値を設定したいプロパティ名になります。
もうひとつ大事なポイントとして、対象のプロパティには何かしらの文字を設定しておいてください。未設定だとkeyに対応したvalueが設定されません。


例えばUILabelの場合、私が作成したstoryboard上ではObject-IDが "udb-le-F0F" でした。これに表示させたい対象のプロパティ名 "title" を組み合わせた "udb-le-F0F.title" がkeyとなります。"MainStoryboard_iPhone.strings" 上には以下のように書きます。

"udb-le-F0F.title" = "Localize"; // 英語ファイル
"udb-le-F0F.title" = "ローカライズ"; // 日本語ファイル

なお、今回iPhoneだけstringファイルを弄りましたが、このままではiPad側のstringファイルに何も書かれていない為、エラーになってしまいます。たとえ未使用でも*.stringファイルには何か書いておく必要があるのでご注意を。
storyboard上に文字を挿入したい時はこのStepを毎回行う必要があります。

Step10. ローカライズされた事を確認

これでローカライズ対応は終わりました。言語表示が"英語"と"日本語"で検証してみてください。
切替方法は「Settingsアプリ > General > International > Language」となります。

もしうまく表示されない時はcleanするなり、アプリを一度削除する必要があります。

備考. 適当に試してみた

 

MainStoryboard_iPhone.strings(en.lproj)

/* UITabBarItem。Object-IDはUINavigationBar自体ではなく、Title部分のUIBarButtonItemな事に注意 */
"QxD-1d-LR4.title" = "Search";"hjG-GX-5Zj.title" = "Fav"; 

/* NavigationBar上のタイトル。Object-IDはUINavigationBar自体ではなく、Title部分のUIBarButtonItemな事に注意 */
"udb-le-F0F.title" = "Localize"; 

/* UIBarButtonItem */
"HHM-r4-1XD.title" = "Push";

/* UILabel */
"3b5-Va-UMR.text" = "subakolab Inc."; 

/* UITextField */
"beM-F3-IQy.placeholder" = "hogehoge";"VKy-Ty-8Nf.text" = "input"; 

/* UIButton */
"Lrt-NR-GvK.normalTitle" = "tararara"; 

MainStoryboard_iPhone.strings(ja.lproj)

/* UITabBarItem */
"QxD-1d-LR4.title" = "検索";"hjG-GX-5Zj.title" = "お気に入り";

/* NavigationBar上のタイトル */
"udb-le-F0F.title" = "ローカライズ"; 

/* UIBarButtonItem */
"HHM-r4-1XD.title" = "押して"; 

/* UILabel */
"3b5-Va-UMR.text" = "株式会社スバコラボ"; 

/* UITextField */
"beM-F3-IQy.placeholder" = "ほげほげ";"VKy-Ty-8Nf.text" = "入力"; 

/* UIButton */
"Lrt-NR-GvK.normalTitle" = "たららら";

余談

 ブログに書くのが途中で面倒くさくなって投げそうになったのをグッと我慢して書いたのでゼヒゼヒお試しください。
何が面倒臭かったかと言うと今現在Bloggerのデザイン変更権限がアカウントに付与されてないせいで、ソースコードを綺麗にハイライトしてくれるjsを組み込めなかったせいで自分でハイライトさせた事ですね。そのままだと見難いし、でも面倒くさいしの間でたゆたってました。

UIViewをtransformで回転させるときに気をつけること

例として、こんなラベルが定義されてるとして話を進めます。

UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 60, 30)];

label.text = @"ABCDE";

label.textColor = [UIColor whiteColor];

label.backgroundColor = [UIColor blueColor];

1.回転を行うとframeが変更される
次のようなコードで90度回転させるとします。
 

label.transform = CGAffineTransformMakeRotation(M_PI_2);

そうするとframeのCGRectは、

origine: x=15, y=-15

size: width=30, height=60

と変更されてしまいます。

また、対象が斜め向きになる角度（45度とか）で回転させると、回転後の対象がちょうど収まるCGRectに変更されます。

当然ですが、この時点で次のように元々と同じframeをセットしても回転状態はキープされているのでおかしな表示になっってしまいます。

label.frame = CGRectMake(0, 0, 60, 30);

2.回転後にビューのサイズを変更する場合は、boundsを再設定するか一度回転をリセットしてframeを再設定する

これは必ずしもと言うわけではないのですが、そうしておくと分かりやすくなることが多いと思います。

というのも、1の通り回転後はframeが変更されているので、frameを再設定して正確にサイズを変えようと思うと、に再設定するCGRectのサイズを計算する必要が出てきます。

（多分三角関数的なアレになると思うのですがそこまで調べてはいません。）

label.transform = CGAffineTransformMakeRotation(M_PI_2/2);

label.bounds = CGRectMake(0, 0, 90, 30);

あるいは

label.transform = CGAffineTransformMakeRotation(M_PI_2/2);

label.transform = CGAffineTransformMakeRotation(0);

label.frame = CGRectMake(0, 0, 90, 30);

label.transform = CGAffineTransformMakeRotation(M_PI_2/2);

boundsの場合は中心位置がリサイズ前のままになり、リセット＋frameの場合はリサイズ後の中心位置を基準に回転することになるので、その点は注意が必要です。

3.基準となるCGAffineTransformを指定しないと無回転状態を基準に回転する

連続して回転させる場合、以下のように現在のCGAffineTransformを基準として指定してやる必要があります。

label.transform = CGAffineTransformRotate(label.transform, M_PI_2)

label.transform = CGAffineTransformRotate(label.transform, M_PI_2)

以下のようにしてもずっと90度のままです。

label.transform = CGAffineTransformMakeRotation(M_PI_2);

label.transform = CGAffineTransformMakeRotation(M_PI_2);

transformに保持しているCGAffineTransformを設定し直すので当然と言えば当然ですね。