スマートフォン版ピグカジノ・スロットゲーム

はじめまして。
サイバーエージェント・ピグディビジョンでflash/javascriptによる開発をしております畑山（wonderfl・jsdo.it)です。

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

スマートフォン版ピグカジノ・スロットゲーム (http://casino.pigg.ameba.jp/) の開発を担当させて頂きました。
今回は使用したツール・ライブラリ・参考サイトに的を絞ってご紹介していこうと思います。

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

ツール

texturepacker

言わずと知れた有名ソフトです。
iPhone開発などで良く耳にするソフトですが、ブラウザ開発でも相当な威力を発揮します。

画像読み込みによる負荷軽減の為、バラバラの画像を最終的に一枚の大きな画像にまとめるのですが、それを全自動で簡単にやってくるソフトです。
さらに、位置・サイズ情報を記述したCSSの書き出しまで自動で行ってくれます。

また、ピグカジノ・スロットゲームはもともとFlashのゲームですので、既にあるFlashの資産をうまく活用したいという思いがありました。

TexturePackerはswfファイルをドラッグ&ドロップするだけで、Flashアニメーションをスプライトシートに変換してくれます。もちろん位置・サイズ情報の書き出しも同時に行います。

SWFSheet

今のところ、TexturePackerはflash IDEのrootで展開されるアニメーションにしか対応していません。
入れ子になったアニメーションのスプライトシート化はこちらを使用しました。
TexturePackerのupdateで対応される事を望みます。最新版はこちらから。

WebStorm

javascriptエディターはこちらを使用しました。
コード補完・解析機能が優秀で、これにより相当な数のバグを回避し、開発負荷を抑えスピードを出す事が出来たと思っています。
ブレークポイントをエディタ上で設定することも可能で、ブラウザが検出しないエラーを発見する事もありました。

Google Chrome

実機での確認までは主にChromeで動作確認しつつ開発を行いました。
Safariの方がよりモバイル端末の挙動に近いのですが、デバッグ関係の使い勝手の良さからChromeを使っています。
ただこまめに実機で確認しないと想定外の挙動をしている事が多々あるので、注意しなければいけません。

iOSシミュレータ

Xcodeに入っているiOSシミュレータを使う為、xcodeをインストールします。
単体で使用したい場合の注意点があります。
Xcode4.3からシミュレーターの場所に変更があったようで、

/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/Applications/iOSシミュレータ.app

にあります。Xcode.appを右クリックし、「パッケージの内容を表示」を選択した中にあります。spotlightの検索で出てこなくなったので注意して下さい。

■デバッグ機能をONにする
iOSシミュレーターでこれが出来るとかなりdebugの幅が広がります。

cssアニメーション作成サイト

css3からcssの記述によりアニメーションをつける事が可能になりました。
最初から用意されているアニメーションの種類は

ease、linear、ease-in、ease-out、ease-in-out

です。しかしこれだけではメリハリに欠けるので自分で作成する事ができるのですが、その際に便利なサイトがコチラです。
css3の仕様では4つしかコントロールポイントが使えないので詳細な動きは作れないのが残念ですが…。

この際、Flashでの動きが参考になります。
実際にこういったグラフを参考に、Flashと同様の動きを作成しました。

ただ一点問題があります。
Safari(モバイル用含む)では値を0から1の範囲に収めないと表示がおかしくなります。
上記で挙げたサイトでは警告が出ますね。

この制限が無ければバウンドする動きなどが簡単に付けられるので、早く一般的に使えるようになってほしいですね。

Chromeでは問題なかったので、気付かずに酷い目に会いました。
お気をつけを…。

Charles、Fiddler

プロキシソフトです。
CharlesはMac用、FiddlerはWindows用のソフトです。
デバッグに威力を発揮します。
サーバーにファイルをアップロードせずとも動作確認が可能になります。

こちらのサイトを読んで頂くと、どんなソフトか分かって頂けると思います。
どちらも出来る事はほぼ同じですが、個人的にFiddlerの方が使いやすく、高機能だと感じました。しかも無料というのが素晴らしいです。

ImageOptim

画像軽量化ツールです。

Fireworks、Photoshop等などの画像操作ソフト

多少画質は落ちますが、png32ではなくpng8などのフォーマットで書き出し直すだけで劇的に軽くなったりします。
ただpng8ではalphaが50%のような半透明は使用できません。100%か0%かです。
半透明も使用可能です。(2012/05/10 10:50訂正)

ライブラリ

AutoReloader-js

html、css、jsファイルを監視し、更新があったら自動でリロードしてくれるライブラリです。
CodeKitなどにも同様の機能がありますが、こちらはjsでのみ動作しているので、スマートフォン上でも動作します。
手元でファイルを更新すると自動でスマートフォン端末のページがリロードされるのはなかなか面白いです。
常にajaxでファイルを監視しているので、通信が発生するのだけ注意が必要です。

LimeJS

スロットゲームにはこのライブラリを使用しました。

レンダリングをcanvasとDOMから選べるのがポイントです。
canvasはスマートフォンで使用するにはまだまだ動作が重いです。
DOMが使えるライブラリということで使用を決めました。

Flash・Action Scriptでの制作に慣れた方でしたら、かなり取っ付き易いライブラリです。
html、cssの記述が必要ありません。jsのみで完結できます。

ただ、まだまだ開発途上の為にバグも多く、苦労することも多々あります。
Androidへの対応もステータスは「Soon」です。

沢山のdiv要素が作成され、動的に要素をバリバリ書き換える為、そのコストが大きいと感じました。
ですので、html、cssで事前にきっちりとレイアウトしてアニメーションを外部CSSで記述し、要素の変更を最小限に抑えた場合と比べてしまうと、どうしてもパフォーマンスが出せない、というのが現時点での見解です。

PC向けの作成であればパフォーマンスは全く問題無いと思います。

Closure Library

LimeJSはClosure Libraryを元にして作成されています。

jsでの開発はコードがぐちゃぐちゃになりがちな気がするのですが、Closure Libraryはそれを改善するライブラリだと感じました。
書き方を強制されるので、それにより整合性が保たれます。(それでも自由に書けはしてしまいますが。)

そのぶん冗長な記述が必要になるので、サクッと書くのには全く向いていません。
そういった点でjavascriptらしくないライブラリです。

また、最終的に一つのファイルに圧縮して使うのが前提なので、それまでは大量のファイルを読み込むなどの欠点もあります。

しかし多人数での開発には向いているのではないでしょうか。

CofeeScriptのClosure Libraryモードがあるようで、ネックである冗長な記述が解決されていて非常に興味があります。

参考サイト

スマートフォンのブラウザ向けに作成するにあたり、動きのパフォーマンスが出ているサイトを探しました。
下記の2つのサイトはネイティブアプリのように滑らかに動作し、かなり参考にさせて頂きました。
2つともアニメーションにはcss3の-webkit-transitionを使用し、細かな座標移動はtranslate3dを使用しています。
もかなりのパフォーマンスを出す事が出来るようです。

まとめ

いかがでしたでしょうか。
ピグカジノの他にも、サイバーエージェントではたくさんのスマートフォン向けゲーム・アプリが現在鋭意製作中です！

今後も新たなノウハウを共有して行きたいと思っております。
ご期待ください！