「モンスターを集めてまいれ！」という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が好調です！