FC2ブログ

Entries

cocos2d 動作:アニメーション を調べるの巻その1

自分の英語能力の限界なのかはたまた

現在(いま)という時代(とき)が悪いのか

iPhone 2D ゲーム作成ライブラリ cocos2d プログラミングガイドの「cocos2d 動作:アニメーション」を訳していてあまりにもイメージが出来なさ過ぎたので、cocos2d 初心者ガイドレッスン1の巻 でダウンロードしたcocos2dのプロジェクト内にあるテストコードで調べてみようと思う。

百聞は一見にしかずですな。


どこにあるのか探す

まずは、cocos2d-ios.xcodeproj を Xcode から開きます。ここで使用している Xcode は 4.5.2 です。

cocos2d 動作:アニメーション」内の スプライトシートの使用方法というところがおそらく一番の手がかりだとおもわれますのでこれに沿ったかたちで調査してみます。

まずは CCSpriteBatchNode を構築する必要がありますとのことなので、それをプロジェクト内から探してみましょう。

CCSpriteBatchNode というだけあって、おそらく SpriteTest 内にあるのではないかとあたりをつけて、とりあえず Scheme を SpriteTest にして実行してみます。

※実行の方法は「cocos2dのデモプロジェクトをいじってみるの巻」あたりを参照ください

みどり色の右矢印をクリックすると



おお、いきなりありました。ちょっとみきれてますが、CCSpriteBatchNode でしょう。

オッサンが赤くなってる。。

赤いオッサンとしばらくたわむれたら、早速ソースコードの調査をしましょう。



ソースコードを見てみる

Schema 名とファイル名は対応しているとのことでしたよね。覚えていますか?

SpriteTest.m を Xcode で開いて、CCSpriteBatchNode を検索してみます。

探してみるといっぱいあるのでどれにしようか迷ってしまいます。

そこで、手順では CCSpriteBatchNode のあとに CCSpriteFrameCache を使用するということだったので、それも一緒に使っているところを探してみましょう。

SpriteBatchNodeReorderOneChild の -(id) init 関数内に見つかりました。

201302090002.png

animations/ghosts.png という PNG を読み込んでるみたいです。

Flash やら Photoshop で 連続画像へエクスポートします、って訳しましたが、実際の画像を見てみないとどんなものやらサッパリわかりませんよね。

画像ファイルは Resources フォルダに配置されているはずなので、その下の animations の ghosts.png を開いてみます。

ghosts.png
きゃーーーー!!


あー、ビックした。予想外です。連続画像ではないですねこれは。

でもせっかくなので、見てみます。

まず、画像サイズは 256×256 ですね。右と下に画像の余白があります。

OpenGL ES 1.1 は 2の階乗の大きさしか読み込めなかったからこのサイズなのでしょうか。

最新の cocos2d は OpenGL ES 2 ベースだから、今となっては大丈夫でしょうけれども。

次に、CCSpriteFrameCache で指定している、animations/ghosts.plist を見てみます。

プログラミングガイドによると、このファイルは、画像の中のフレームの範囲を定義するファイルのようです。

おそらくこのオバケ4人組の範囲を定義しているんでしょう。

201302090003.png

まず、texture っていうところで画像の幅と高さを指定していますね。

frames でそれぞれの画像の範囲を定義しているようです。

child1.gif、father.gif、sister1.gif、sister2.gif の四つが定義されています。ガイドによるとこの **.gif っていうのは、ただのフレームの名前で画像が存在する必要はない、とのことなので何でもいいんでしょうが、何故、PNG なのに GIF なんでしょうね。そのうちわかるかもしれませんし、わからないかもしれません。

中の X座標とか Y座標とかを見てみると、左から
child1.gif
father.gif
sister1.gif
sister2.gif

と定義されているようです。

child = 子供 ????

201302090004.png

( ゚д゚) ・・・
 
(つд⊂)ゴシゴシ
 
(;゚д゚) ・・・
 
(つд⊂)ゴシゴシゴシ
  _, ._
(;゚ Д゚) …!?

あれ?座標って右からだっけ・・・。うーんこっちも子供じゃないなぁ。

「細かいことが気になってしまう僕の悪い癖なんです。」と言いたいところですが、先に進みましょう。



plist を作れるソフトウェアを見てみる

plist には、なんやらいろんな項目があって、自分で設定するのは難しそうです。

プログラミングガイドの動作:アニメーション で、3つほどソフトが紹介されてました。

Mac 用のバイナリ(商用)Flash版(無料)がある Zwoptex と、基本機能は無料で使える TexturePacker でしたね。

まずは、Zwoptex を見てみよう。

201302090005_s.png

「Zwoptex で、ちょっとだけのクリックでスプライトシートを作ろう!スンゴイ機能とスーパーターボチャージャーなアルゴリズムとビックリするほどエレガントなインターフェースでスプライトシートが簡単に作れちゃうぜぇ!ワイルドだろぉ〜。」

なんだかとってもすごそうですね。

201302090006.png

おねだんは 15ドル かぁ・・・。

よし、無料のも見てみよう。Flash 版をクリックだ。

201302090007.png

「おおっと!君の探してるものを見つけることができなかった。」

リンク切れ…だと…‥。ざわ…ざわ…。

スミマセン。ちゃんと確認すればよかったっす。

で、もう一回、ウェブサイトをよく見てみると、

201302090008_20130209231211.png


あったぁ〜!!右下に、「↓ Flash Version」ってかいてある。

ポチッとな。

201302090009.png

「Zwoptex.html」をSafariでひらくと画面が表示されたので、「File」→「Import Images」でイメージをインポートしてみると・・・。

201302090012.png


TIFF はだめなんですね。 ファイル自体が選択できませんでした。PNG のみ OK のようです。

なんかいろいろ調べてると、バイナリ版も無料で使えるという書き込みが多数。

そこで最初に戻って Mac 版の Zwoptex をダウンロードして起動してみる。

201302090011.png

おー! Flash 版っとは安定感が違う。(※個人的な感想です)

これが無料で使えるといいなぁ。

早速、ファイルを読み込んでみる。左上の Import を選択すると、

201302090013.png

おお、Tiff もいけそうですね。最終的には PNG にするんだろうから PNG でもいいんだろうけど手持ちが Tiff しかなかったので Tiff にこだわった感じになってしまってます。

Open をタップ。
(※Mac Book Air のタッチパット使ってるので、正確にはクリックではなくタップですね。以後気をつけます)

201302090014.png

あれ?5個選択したのに一個だけ?っと思ったら、重なっているみたいですね。

201302090015.png

これを並べて、PNGにエクスポートすると、plist とかもできるんでしょう。

で、並べてみようとしたのですが、これが意外にめんどくさい。なんか1ビットずれたりとか、イライラしてきたぁ!

と思ってよく見ると、「layout」っていうのがあります。その中に、「Algorithm」っていうのもあります。

そこで、僕は、このWebサイトのホーム画面の説明を思い出しました。

「スンゴイ機能とスーパーターボチャージャーなアルゴリズムとビックリするほどエレガントなインターフェースでスプライトシートが簡単に作れちゃうぜぇ!ワイルドだろぉ〜。」

スーパーターボチャージャーでエレガントなソフトが、こんなちまちました作業を要求するわけがない!

物は試し、タップしてみました。すると・・・。



うごいたー!!すごい・・・。すごすぎる。科学の発展は素晴らしい。

これはたしかに、スーパーターボチャージャーでビックリするほどエレガントでした!!

Layout をタップすると、上からニュッてパネルが出てきてカウントダウンが始まります。

お金を払わないと、操作のたびに 3秒間かかるっていう仕様みたいです。こんな素晴らしい機能なら余裕で待てます。(感動したなら金を払えよな・・・。)

ただ、なんか隙間が開いたりしているので、このままだと嫌です。

そこで、Layout ってところを見てみます。

Algorithm:
 - Basic
 - Shelf
 - Tree
 - Max Rect

っていうアルゴリズムがあるみたいです。

説明が見当たりませんので、適当に使っていきたいと思います。

設定を、Basic、Name、Ascending に設定して、Bordar Padding と Sprite Spacing を 0px にすると、お好みの並びになるようなので、それで並べてみました。

サイズも 512px × 512px にしました。

201302090016.png

Background の Opacity を 0% にしておかないと背景が透過しないような気がするので、そう設定してみましょう。

そして、トンカチマークの Publish をタップ。

201302090017.png

「発行時の警告
発行は、発行設定内にある発行先によって設定したすべてのファイルパスを置換します。それによってデータを失う可能性があります。
□2度とこのメッセージを表示しない」

とのことなので、Publish Settings で設定を確認。

201302090018.png

変更したところ:
Texture
- Save To File: chikan_walk$(FORMAT_EXTENSION)

Coordinates
- Save To File: chikan_walk$(FORMAT_EXTENSION)
- Format: cocos2d(.plist)

であらためて、Publish をタップして、発行すると、エラーが出ます。

Zwoptex のプロジェクトを保存しておかないと、発行先のパスがわからないみたいですね。

なので、「File」→「Save as」でプロジェクトを保存して、

あらためて、Publish。。。。

成功したようです。保存先を見てみると。

201302090019.png

できとるできとる。

201302090020.png

これで、plist とそれの元になる画像の作り方もわかりました。

まとめると、
1.まず、アニメーション用の画像をひとつずつ用意します。
2.Zwoptex で取り込んで並べます。
3.Publish します。

という、3つのステップで完成ですね!!

ちょっと長くなってきたので、続きは次回としたいと思います。

cocos2d 動作:アニメーション を調べるの巻その2>>

スポンサード リンク

コメント

コメントの投稿

コメントの投稿

管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://miyachikantaro.blog.fc2.com/tb.php/20-a0ed62b3
この記事にトラックバックする(FC2ブログユーザー)

Appendix

出演ゲーム

みやちかんたろうの大冒険

↑インストールはこちらから
予告編

21面デモ

ステージ作成

検索フォーム

訪問者

Apple製品紹介

Apple MacBook Air 1.6GHz 13.3インチ MB003J/A

中古価格
¥59,800から
(2013/1/24 06:45時点)

QRコード

QR

メールフォーム

名前:
メール:
件名:
本文:

Extra

プロフィール

みやちかんたろう

Author:みやちかんたろう
種別:きいろいねこ
年齢:10歳
性別:オス
趣味:昆虫採集
twitter:@gatsupport

※このサイトはリンクフリーです。ご自由にリンクしてください。相互リンクもじゃんじゃん募集中です!!

最新記事

最新コメント

最新トラックバック

月別アーカイブ