こんにちは!

アメーバ事業本部スマートフォンコンテンツグループ でデザインを担当している近藤です。



みなさんも、 「iPhoneのゲームアプリ、1ヶ月でつくって☆」なんて言われること、よくありますよね!?

もしなくても、ツールを使ってデザイナーもデベロッパーも効率よくプロジェクトを進められたらいいですよね。

今回はiOSのライブラリ「cocos2d」を使ってアプリを作成する場合に役立つツールを、 「COINPLAZA」の制作事例をもとに、紹介いたします。



「cocos2d」とは?


「cocos2d」とは、iOS(iPhone/iPod touch/iPad)やMac OS X向けのゲームなどで、グラフィカルなアプリ開発をするためのライブラリです。

構文がActionScriptsに近く、Flashを触っている人でしたら比較的容易に使えます。

cocos2dに関しては「PiggをiPhoneアプリで動かすまで」をお読みください。



「GlyphDesigner」でビットマップフォントを作成


http://glyphdesigner.71squared.com/


ビットマップフォントを扱いたいが、一文字ずつPNGに書き出して座標配置するの面倒だな...

そんな問題を解決してくれるのが「GlyphDesigner」です。

出力した.fntファイルと.pngファイルを組み込めば、テキストとして扱ってくれます。


【特徴】
  • macにインストールされているフォントから、ビットマップフォントを作成してくれる

  • サイズ、塗り、アウトライン有無、シャドウ有無などの設定ができる

  • cocos2dで扱える.fntファイル出力ができる - Unityで扱えるEZ GUI txt ファイルを出力できる

  • 価格:$29.99


1 pixel|サイバーエージェント公式クリエイターズブログ


1 pixel|サイバーエージェント公式クリエイターズブログ




「ParticleDesigner」でエフェクトを作成


http://particledesigner.71squared.com/


パーティクルでエフェクトを作って実機に取り込みたい!

そんな時は「ParticleDesigner」がオススメです。


【特徴】
  • パーティクルをリアルタイムにプレビューしながら作成できる

  • cocos2dで扱えるplistでファイルを出力できる

  • テクスチャをplistに埋め込むことができる

  • 価格:$7.99


1 pixel|サイバーエージェント公式クリエイターズブログ


1 pixel|サイバーエージェント公式クリエイターズブログ




「TexturePacker」で減色・圧縮・テクスチャアトラス、さらにiPhone4サイズの画像を3GSサイズに変換!


http://www.texturepacker.com/


iOSアプリで面倒なのが、iPhone4サイズと3GSサイズの両方を用意しないといけないこと。。。

そんな問題を解決してくれつつ、減色・圧縮、さらに複数画像を1枚の画像にまとめてくれる(テクスチャアトラス)「TexturePacker」を使わない手はありません!


【特徴】
  • 複数画像を1枚の画像にまとめる(テクスチャアトラス作成)

  • cocos2dで使える.pvrファイルを減色・圧縮して出力できる

  • 価格:$24.95


1 pixel|サイバーエージェント公式クリエイターズブログ




「ImageOptim」で画像の最適化!


http://imageoptim.pornel.net/


減色してファイルサイズを小さくしたつもりの.pngファイルでも、実はまだまだサイズは小さくできるのです。

お手軽操作で余計な情報を削除、ファイルサイズをさらに小さくしてくれるのが「ImageOptim」です。


【特徴】
  • Drag & Drop のみのシンプル操作

  • 一度処理しても、何度も処理することでさらにファイルサイズが小さくなることがある

  • 価格:Free


$1 pixel|サイバーエージェント公式クリエイターズブログ




iPadもiPhone4もiPhone3GSも!画像の座標配置・アニメーションは「AfterEffects」で管理


Adobe AfterEffects


画像の座標配置・アニメーションツールは「Flash」「cocoshop」「CocosBuilder」などありますが、どれも一長一短です。

iPadもiPhone4など異なる解像度のデザインも1つのファイルで一元管理でき、アニメーション設定も容易な「AfterEffects」はおすすめです。

「COINPLAZA」はiOS/Android両対応しているので様々な解像度のデザインを作る必要がありましたが、すべて1ファイルで管理しています。


【特徴】

  • 読み込んだ画像をそのままアニメーション素材として扱える

    • 比較:Flashではシンボル化する必要があり、素材名が分かりづらい



  • アンカーポイントがセンターにあるので画像をレイアウトして座標を調べやすい

    • 比較:アニメーションツールによっては左上がアンカーポイントとなっている



  • アニメーションをタイムライン上で編集できる

    • 比較:cocoshopはアニメーションのタイムライン編集ができない

    • 比較:CocosBuilderはレイアウト配置はできるがアニメーション機能がない



  • 一つのプロジェクトファイルで複数サイズのアニメーションを管理できる

    • 比較:Flashでは画面サイズが固定されているため、1プロジェクト1サイズとなる




$1 pixel|サイバーエージェント公式クリエイターズブログ




「SoundConverter」で音声ファイルを変換


http://dekorte.com/projects/shareware/soundconverter


音データをcocos2dで扱えるCAFフォーマットにDrag & Drop変換してくれます。

価格:$9.99 ※500KB以下のファイルなら無料版で変換可能


対応フォーマット



4xm, 8svx, aac, ac3, aif, aifc, aiff, al, amr, ape, asf, au, aud, auto, avi, avr, bics, c, caf, cdr, cvs, dat, dv, fap, ffm, flac, flsh, flv, gsm, h263, hcom, ircam, ksf, l, la, lu, m3u, m4a, m4b, m4p, m4v, mat, mat4, mat5, maud, mka, mkv, mmf, mov, mp1, mp2, mp3, mp4, mpc, mpc8, mpeg, mpeg1, mpg, mpg2, mpg4, next, nist, nul, nut, nvf, ogg, paf, pcm, pls, prc, pvf, r, ra, raw, rawNVF, rm, sb, scm, sd2, sd2f, sf, sf2, sffd, shn, siff, sl, smp, snd, sndt, sol, son, sph, spx, svx, sw, tta, txw, ub, ul, uw, vb, vdu, vms, voc, vorbis, vox, vqa, w64, wav, wma, wv, wve, xi


$1 pixel|サイバーエージェント公式クリエイターズブログ


以上、簡単ですが私達が活用してるツールを紹介させていただきました。

資料


cocos2d

コインプラザ