皆様お初です。
私はAmeba事業本部 Smart Phone Division所属
interaction designerの @sagarakun (30歳独身貴族)です。
今回は私が制作に当たった
つりポン！ by アメーバピグ
について書きます。
こんな感じのiPhoneアプリです。
弊社にはジギョつくという社内イベントがありまして、
そちらに「PiggでiPhoneのゲームやりたいんですけど！！」
という案を出したら、通りましてやらせてもらうことになりました。
とはいえ、AmebaPiggはFlashで作られているサービスなので、
iPhone用に最適化するためにいろいろやること多かったです。
こちらcocos2dというObjective-Cの2Dゲーム用フレームワークを採用して作りました。
他にもUnity3D使う案とかcoronaSDK使う案とか
そもそもAmeba PiggはFlashで出来ているので、
FlashのPackager for iPhoneを使う案とかあったんですが...
企画の発足当時(2011年3月時点)で
まだiPhoneで使うPiggAPIが出来てなくて
どこまで開いてもらえるかわからないという不安がありまして
多少無茶出来る環境で作らないと「できない」コトが増えるので
厳しいんじゃないかという予想と
Piggはゲームだけで使うには惜しいモチーフなので
今後色々使い回せるようにやっぱネイティブな感じで詰めといた方が良いよね
という試行錯誤の末
僕が元々はPiggのFlashDeveloperだったというのもあり
書式がActionScriptに似てて
iPhone用の2Dゲーム作るのに特化しているcocos2dフレームワークを
採用して制作することに決めました。
cocos2dに関しては私が始めた当時と違って
今はもう和書でこの本がでてるのでコレ読んでください。
コレ一冊でokです。
cocos2dで作る iPhone＆iPadゲームプログラミング/Steffen Itterheim
￥3,990
Amazon.co.jp
このFlashにめっちゃ似てる構造をうまいことなんとかして
FlashからPiggのアニメーションのデータ抜いてきてcocos2dで
再構成できたらすんごい楽なんだよなーと思って、抜き出す仕組みを考えました。
というかココできないと先進まなかったので一番始めにここに取り組みました。
あとになって色んな人に話を聞いてみたら、
割とポピュラーなやり方みたいなんですが、
Flash使ってる人がほとんどいなかったり、みんなAfterEffects使ってたり、
あんまソース落っこちてないし、ちゃんとやり方まで言及してるの見たことないんで、
これからObjective-CでiPhone用ゲームアプリつくるぞーって方の後押しになれば幸いです。
ちょっとてきとーかもしれないけどこーなります
TexturePacker
を使います。
こちら今はswfのアニメーションもまんま取り込んでくれるんですが、
swfそのまんまだとコマアニメの状態になり、あっという間にTextureがスゴい数になるので
あんまおすすめできません。
なのでFlashのPiggと同じように各部位のパーツだけTextureにします。
アプリの容量は20MB以内に押さえないと3G回線でのDownLoadができないので
小さいサイズにこしたことないです。
Flashがスクリーン座標(左上が基点)なのに対してcocos2dではデカルト座標(左下が基点)です。
なので左下を基点にした座標が欲しいので
こんな感じに入れ物にするMovieClipを作ってあげてそいつを左下座標に合わせてあげます。
Flashのx座標がx = 20の時cocos2dのx座標はx = 20で同じになりますが
Flashのy座標がy = 20の時cocos2dのy座標はy = -20になります。
だからFlashから持ってきたY座標値には-1をかけてあげる必要があります。
こんな感じのmethod一個噛ませてあげればokです。
ちなみに2で割ってる理由はcocos2dの特性で、retinaだろうが3gだろうが
Stageサイズを480*320として計算しちゃうというのがあって
座標のずれを最小限にしたいからFlash上では960*640のretinaDisplay用として配置して
小数点まで含んだ数値を２で割って480*320のDisplay上の計算に戻しているからです。
で、いちいち色々やるのめんどくさかったので、
Flashの構造から自動で配置状態まで
Objective-Cのクラスにしてくれる制作補助用AIRを作って使ってました。
こんな感じでやってました。
MovieClipの構造はroot/Container/PiggAvatar/
中身はこんな感じ。
で、中にはこんな感じのレイアウト変換用ASを使います。
※これは単に出力パネルに表示されるようにしただけのやつです。
仕様きまったらAIRにしちゃったほうが楽ですよ。
でそこから出力パネルに書き出されたのがコチラです。
これをcocos2dのソースにコピペしてやればFlashと同じ位置に配置されます。
同じようにして各bodyパーツ用のCCSpriteをインスタンス名のStringと連結したりあれこれして、自動生成してやってます。
で、出来上がりがこちら
これやっとけばこんだけの量のソースを書かないでも良くなるんです。
らくちんですよね。
全部のCCSpawnをCCSequenceに納めます。
詳細まで書くとすんごく長くなっちゃうのでCCActionのことはググってみてください。
motion用.mにこーいうmethod入れといた方がいいです。
理由はいれとかないと無駄にsrcが長くなるからです。
で、このmethodがある前提でこーいうASを書きますよ。
上記で使われてるPiggMotionParts.as
まとめた文字列を書き出すmethod
出来上がりはこんな感じになります。
このmethodが何をしてるのかというと
各間接パーツを任意の秒数でフレーム毎の座標にtweenしてます。
これをまとめて呼び出せばさきほどの動画みたいなアニメーションするといった感じです。
上記のすげーてきとーなソースでもpigg40体くらいはfps60～52くらいで動きますよ！
と、大分ざっくりになりましたが、
こんな感じでFlashからレイアウトとかアニメーションを抜き出して.mと.hを吐き出す
制作補助用AIRアプリを作って、cocos2dで使ってました。
今はこーいう静的なアニメーションは
チームの人が作ったCCNodeのinterfaceを維持した独自クラスを使ってて、
(CCSequenceは重い！！と言ってました。)
動的なアニメーションだけcocos2dの仕組みで動かしてたりします。
※pigg100体くらい動かしたいみたいです。すげーこと考えるなー。
cocos2dは簡単なので初心者でもすぐ始められて
タダだからお金かけないで試せるし
コードベースなのでsvn等での多人数開発ができるし
MITライセンスなので好きに使えるし
Objective-Cなのでいくらでも拡張出来るし
いいことづくめです。
これを見てFlash屋さんがcocos2dからiPhoneアプリの開発に興味持ってくれると嬉しいです。
長くなりましたがこんな感じでした！！！
iPhoneアプリ開発楽しいですよ！！
私はAmeba事業本部 Smart Phone Division所属
interaction designerの @sagarakun (30歳独身貴族)です。
今回は私が制作に当たった
つりポン！ by アメーバピグ
について書きます。
こんな感じのiPhoneアプリです。
弊社にはジギョつくという社内イベントがありまして、
そちらに「PiggでiPhoneのゲームやりたいんですけど！！」
という案を出したら、通りましてやらせてもらうことになりました。
とはいえ、AmebaPiggはFlashで作られているサービスなので、
iPhone用に最適化するためにいろいろやること多かったです。
こちらcocos2dというObjective-Cの2Dゲーム用フレームワークを採用して作りました。
他にもUnity3D使う案とかcoronaSDK使う案とか
そもそもAmeba PiggはFlashで出来ているので、
FlashのPackager for iPhoneを使う案とかあったんですが...
企画の発足当時(2011年3月時点)で
まだiPhoneで使うPiggAPIが出来てなくて
どこまで開いてもらえるかわからないという不安がありまして
多少無茶出来る環境で作らないと「できない」コトが増えるので
厳しいんじゃないかという予想と
Piggはゲームだけで使うには惜しいモチーフなので
今後色々使い回せるようにやっぱネイティブな感じで詰めといた方が良いよね
という試行錯誤の末
僕が元々はPiggのFlashDeveloperだったというのもあり
書式がActionScriptに似てて
iPhone用の2Dゲーム作るのに特化しているcocos2dフレームワークを
採用して制作することに決めました。
cocos2dについて
Flashに似てるObjective-Cのフレームワークです。cocos2dに関しては私が始めた当時と違って
今はもう和書でこの本がでてるのでコレ読んでください。
コレ一冊でokです。
cocos2dで作る iPhone＆iPadゲームプログラミング/Steffen Itterheim
￥3,990
Amazon.co.jp
このFlashにめっちゃ似てる構造をうまいことなんとかして
FlashからPiggのアニメーションのデータ抜いてきてcocos2dで
再構成できたらすんごい楽なんだよなーと思って、抜き出す仕組みを考えました。
というかココできないと先進まなかったので一番始めにここに取り組みました。
あとになって色んな人に話を聞いてみたら、
割とポピュラーなやり方みたいなんですが、
Flash使ってる人がほとんどいなかったり、みんなAfterEffects使ってたり、
あんまソース落っこちてないし、ちゃんとやり方まで言及してるの見たことないんで、
これからObjective-CでiPhone用ゲームアプリつくるぞーって方の後押しになれば幸いです。
ちょっとてきとーかもしれないけどこーなります
Flashからアニメーションを抽出する
1) : Textureの作り方
まず中で使う用のTextureを用意するのにはおなじみのTexturePacker
を使います。
こちら今はswfのアニメーションもまんま取り込んでくれるんですが、
swfそのまんまだとコマアニメの状態になり、あっという間にTextureがスゴい数になるので
あんまおすすめできません。
なのでFlashのPiggと同じように各部位のパーツだけTextureにします。
アプリの容量は20MB以内に押さえないと3G回線でのDownLoadができないので
小さいサイズにこしたことないです。
2) : 座標系の違い
Flashとcocos2dの間で決定的に違うのは座標系です。Flashがスクリーン座標(左上が基点)なのに対してcocos2dではデカルト座標(左下が基点)です。
なので左下を基点にした座標が欲しいので
こんな感じに入れ物にするMovieClipを作ってあげてそいつを左下座標に合わせてあげます。
Flashのx座標がx = 20の時cocos2dのx座標はx = 20で同じになりますが
Flashのy座標がy = 20の時cocos2dのy座標はy = -20になります。
だからFlashから持ってきたY座標値には-1をかけてあげる必要があります。
こんな感じのmethod一個噛ませてあげればokです。
ちなみに2で割ってる理由はcocos2dの特性で、retinaだろうが3gだろうが
Stageサイズを480*320として計算しちゃうというのがあって
座標のずれを最小限にしたいからFlash上では960*640のretinaDisplay用として配置して
小数点まで含んだ数値を２で割って480*320のDisplay上の計算に戻しているからです。
3) : Flashでのレイアウトを移植
つりポン！ではFlashをレイアウトのツールとして使いました。で、いちいち色々やるのめんどくさかったので、
Flashの構造から自動で配置状態まで
Objective-Cのクラスにしてくれる制作補助用AIRを作って使ってました。
こんな感じでやってました。
MovieClipの構造はroot/Container/PiggAvatar/
中身はこんな感じ。
で、中にはこんな感じのレイアウト変換用ASを使います。
※これは単に出力パネルに表示されるようにしただけのやつです。
仕様きまったらAIRにしちゃったほうが楽ですよ。
でそこから出力パネルに書き出されたのがコチラです。
これをcocos2dのソースにコピペしてやればFlashと同じ位置に配置されます。
同じようにして各bodyパーツ用のCCSpriteをインスタンス名のStringと連結したりあれこれして、自動生成してやってます。
で、出来上がりがこちら
これやっとけばこんだけの量のソースを書かないでも良くなるんです。
らくちんですよね。
4) : Flashのアニメーションを移植
上記と同じ方法で全フレーム分の座標を各レイヤー毎にCCSpawnにしてから全部のCCSpawnをCCSequenceに納めます。
詳細まで書くとすんごく長くなっちゃうのでCCActionのことはググってみてください。
motion用.mにこーいうmethod入れといた方がいいです。
理由はいれとかないと無駄にsrcが長くなるからです。
で、このmethodがある前提でこーいうASを書きますよ。
上記で使われてるPiggMotionParts.as
まとめた文字列を書き出すmethod
出来上がりはこんな感じになります。
このmethodが何をしてるのかというと
各間接パーツを任意の秒数でフレーム毎の座標にtweenしてます。
これをまとめて呼び出せばさきほどの動画みたいなアニメーションするといった感じです。
上記のすげーてきとーなソースでもpigg40体くらいはfps60～52くらいで動きますよ！
と、大分ざっくりになりましたが、
こんな感じでFlashからレイアウトとかアニメーションを抜き出して.mと.hを吐き出す
制作補助用AIRアプリを作って、cocos2dで使ってました。
今はこーいう静的なアニメーションは
チームの人が作ったCCNodeのinterfaceを維持した独自クラスを使ってて、
(CCSequenceは重い！！と言ってました。)
動的なアニメーションだけcocos2dの仕組みで動かしてたりします。
※pigg100体くらい動かしたいみたいです。すげーこと考えるなー。
cocos2dは簡単なので初心者でもすぐ始められて
タダだからお金かけないで試せるし
コードベースなのでsvn等での多人数開発ができるし
MITライセンスなので好きに使えるし
Objective-Cなのでいくらでも拡張出来るし
いいことづくめです。
これを見てFlash屋さんがcocos2dからiPhoneアプリの開発に興味持ってくれると嬉しいです。
長くなりましたがこんな感じでした！！！
iPhoneアプリ開発楽しいですよ！！