「モンスターを集めてまいれ！」というiPhoneアプリを
プロデュースしたんですが、イラストレーターのタスクが多く
ドット絵を自分で描く事になりました。

初ドット絵だったので
このノウハウ共有に何の意味も無いかもしれませんが
きっと何処かに需要はある！と、思い込んで記事を書いております。

使用ソフトはPhotoshopです。

余談ですが
バイトのドット絵得意な子に聞いたところ「Photoshopはやめておいたほうがいい」
との回答。

・・・・。

さあいってみよう！

まず下絵を準備
自分、ワンコしか描けないので
イラストレーターにさらっと描いてもらいました

モンスター画像は最終的に150×150px で使用するんですが、
ドット絵の荒さを出す為に50×50pxに縮めます。

輪郭の線をポチポチなぞっていきます。

レイヤーを分けて下地になる色を塗ります。

ここで
初心者の私はぽちぽちやるのに疲れ
楽な方法は無いものか考えました。

そして
ドット絵師達には邪道だと
言われそうな方法を思いつきました。

利用するのはレイヤー効果のソフトライト

ソフトライトに設定したレイヤーで影になる部分を黒で塗ります
色を変える必要がないので楽ちんこ

レイヤー増やしてソフトライトでもう一回影をヌリヌリ

レイヤー増やして白でハイライトの部分をヌリヌリ

最後に仕上げをぽちぽち

で
"ニアレストネイバー法！！"で150×150pxに拡大します。

"バイキュービック法！！！"だと
拡大した時に余計なグラデーションがつくので注意です。

最後に登場モンスターチラ見せ！全部同じ手法で描いてます

"モンスターを集めてまいれ!"では
5r4ce2のぱんかれさんが作成した
ファミコン風の"GD-DOTFONT-DQ"フォントを使用しています

ぱんかれさん快諾していただいてありがとうございました！
おかげさまでリリースする事ができました。
フォントをダウンロードする時はこちらから
この分かりやすい図を参考にどうぞ！

先日、『KOF ENCOUNTER』という、すれちがい対戦バトルゲームをリリースしました。

実際に街ですれちがった人とバトルが発生して、経験値がたまってキャラがどんどん強くなっていく！というゲームです。
無料！ かつ アカウント登録とか一切必要なし！ ですので、ぜひぜひお試しください！！

http://itunes.apple.com/jp/app/the-king-of-fighters-encounter/id449518556?mt=8

で、このアプリ、ゲームが進めていくと手持ちのキャラが増えていったり、地域ごとのランキングでのし上がっていったり、といった楽しさがあります。
TwitterとかFacebookをウォッチしてると、わざわざスクリーンショットを自分で撮影してアップしている人が多いことに気づきました。

そこで、『自分の手持ちキャラクターを一覧できる画面』と『自分がランクインしている地域のランキング画面』に、
「スクリーンショットを自動撮影してFacebookに投稿する機能」
をつけました。

今回はこの機能の実装方法についてご紹介させていただきます。

スクリーンショットの撮影

まずスクリーンショット撮影部分のコードはこうなっております。

+ (UIImage *)screenshotWithView:(UIView *)view
{
    CGSize imageSize = [view bounds].size;
    if (NULL != UIGraphicsBeginImageContextWithOptions)
        UIGraphicsBeginImageContextWithOptions(imageSize, NO, 0);
    else
        UIGraphicsBeginImageContext(imageSize);
    
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSaveGState(context);
    CGContextTranslateCTM(context, [view center].x, [view center].y);
    CGContextConcatCTM(context, [view transform]);
    CGContextTranslateCTM(context,
                          -[view bounds].size.width * [[view layer] anchorPoint].x - view.frame.origin.x,
                          -[view bounds].size.height * [[view layer] anchorPoint].y - view.frame.origin.y);
    
    [[view layer] renderInContext:context];
    
    CGContextRestoreGState(context);
    
    // Retrieve the screenshot image
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    
    UIGraphicsEndImageContext();
    
    return image;
}

撮影したいviewを引数に渡すとUIImageを返すシンプルなメソッドとなっています。
よろしければそのままご使用ください！
（位置合わせのところはケースによっては修正が必要かもしれません）

KOFでは広告部分を除外するためviewを撮影対象としていますが、keyWindow全体を撮影したい場合は、こんな感じになります。（一部抜粋）

for (UIWindow *window in [[UIApplication sharedApplication] windows]) 

{

    if (![window respondsToSelector:@selector(screen)] || [window screen] == [UIScreen mainScreen])

    {

        CGContextSaveGState(context);

        CGContextTranslateCTM(context, [window center].x, [window center].y);

        CGContextConcatCTM(context, [window transform]);

        CGContextTranslateCTM(context,

                              -[window bounds].size.width * [[window layer] anchorPoint].x,

                              -[window bounds].size.height * [[window layer] anchorPoint].y);

        

        [[window layer] renderInContext:context];

        

        CGContextRestoreGState(context);

    }

}

Facebookへのキャプション付き画像投稿

撮影したスクリーンショットのUIImageを、Facebookに投稿する部分のコードは下記のようになっています。

- (void)uploadPhoto:(UIImage *)image caption:(NSString *)caption {

    NSMutableDictionary *params = [NSMutableDictionary dictionaryWithObjectsAndKeys:

                                   image, @"picture",

                                   nil];

    

    if ([caption length] > 0) {

        [params setObject:caption forKey:@"caption"];

    }

    

    [facebook requestWithMethodName:@"photos.upload"

                          andParams:params

                      andHttpMethod:@"POST"

                        andDelegate:self];

}

上記コード内で、facebookという名前になっているのは、Facebook iOS SDKのFacebookクラスのインスタンスです。
captionという引数に文字列を渡すと、投稿時にキャプションが入ります。

認証部分やdelegateメソッドなど前後部分は割愛しています。
このあたりは私の個人ブログでも記事を書いているので、よろしければご参照ください！

・カメラアプリにFacebookへの写真投稿機能をつける
・Facebook iOS SDK を使用して近況の投稿やプロフィール取得を実装する

それではみなさま、『KOF ENCOUNTER』で楽しいすれちがいライフを！！

今月にリリースされた無料iPhoneアプリKOF ENCOUNTERが好調です！

みなさまこんにちは！tsutsumiと申します。

突然ですが、こちら、先日（2010年12月4日）とある勉強会にて発表した際の資料です。

iPhone SDKで利用できる音声認識ライブラリ（Pocket Sphinxのラッパー）VocalKitについて紹介しています。

中身を読むのが面倒な方のために、下記に内容を抜粋します！

『勇気をください』

「勇気をください」と言うと、勇気の出るエピソードが表示されるiPhoneアプリ。
音声認識を使っているので、ちゃんと「勇気をください」といわないと怒られます。

（AppBankさんへの寄稿記事）
（AppStore）

VocalKitとは？

オープンソースの音声認識エンジン、Pocket Sphinxのラッパー
https://github.com/KingOfBrian/VocalKit

使い方

録音を開始する

[vk startListening];

認識を開始する

[vk postNotificationOfRecognizedText];

認識結果を受け取る

（NSNotificationが飛んでくる）

単語辞書の記述方法

• 単語名 音素1 音素2 音素3 . . .
• 同じ単語を複数の発音で定義したい場合は(2)とか(3)とかつける

me	M IY

encourage	EH N K ER IH JH

encourage(2)	IH N K ER AH JH

認識結果

NSNotificationのUserInfoプロパティに認識結果が入ってくる。

NSDictionary *dict = [notification userInfo];	
NSString *phrase = [dict objectForKey:VKRecognizedPhraseNotificationTextKey];
NSNumber *score  = [dict objectForKey:VKRecognizedPhraseNotificationScoreKey];	

辞書作成のコツ

単語数が多いと、処理も重いし認識率も悪い

1. まず標準の辞書で、認識結果をためしてみる（sayコマンド便利）
2. 出てきた単語だけで辞書を再構成する

自分で作るとかなり大変な音声認識機能ですが、VocalKitを使うと超簡単にiPhoneに実装できてしまうので、ぜひぜひお試しください！

みなさまこんにちは、Google+の招待を心待ちにしているtsutsumiと申します！
今日は_level0では久しぶりのiOSの話題でございます。

「なるべくUIViewを使わず描画する」とか、「nibを使わない」とか、iOSアプリの動作を軽快にするためのTipsは数あれど、実際どれぐらい効果あるんだろう、ってことを調べたい、でもInstrumentsはめんどくさい、ってことでメモリ消費量やUIViewの数など、「負荷を示すパラメータ」をリアルタイム表示するクラスを作りました。
（イメージとしてはAS3でいうところのStats）

同梱のサンプルコードを実行すると、こんな感じで表示されます。（左上の黒いラベルがStats）

パラメータ内訳は後述しますが、メモリを約16MB使用し、ビューが合計5つ（UIView、UIButton、UIButton上のUILabel、UIImageView、Stats）になっていることがわかります。
また、draw imageボタンを連打するとCPU負荷の値が若干上がることも確認できます。
※シミュレータでの実行結果です。

パラメータの内訳と単位

上から順に、

• アプリのメモリ使用量の変動量[kB]
• アプリのメモリ使用量合計[kB]
• CPU時間の変動量[msec]
• UIViewサブクラスの総数

となっています。

使い方

githubにサンプル付きで置いてあります。 https://github.com/shu223/Stats

1. Stats.h, Stats.m をプロジェクトに追加
2. ヘッダで Stats.h をインポート
3. UILabelと同じように、好きな場所に貼り付ける（サンプルのようにappDelegateのwindowにaddSubviewしておくと常に一番上に表示されます）

self.stats = [[[Stats alloc] initWithFrame:CGRectMake(10, 30, 100.0, 60.0)] autorelease];
[self.view addSubview:stats];

その他

メモリ使用量取得部分のコードは全面的にこちらの記事を参考にさせていただきました。
自分のアプリが使用しているメモリサイズを取得するには

よろしければぜひご利用ください！