FC2ブログ

Entries

cocos2d 動作:アニメーション を日本語訳の巻

iPhone 2Dゲーム作成用ライブラリのcocos2dプログラミングガイドの日本語訳です。

今回はアニメーションについて。

実際にガイドの内容の調査もしてみましたので、こちらをご覧あれ。
--------------------------------
cocos2d プログラミングガイド

<目次
アニメーション

スプライトとスプライトバッチノードの扱い

Flash(CS4) でのアニメーションと連続画像のエクスポート

Flash は、特にキャラクターアニメーションの様な2次元アニメーションでは明らかに動作が重くなります。

アニメーションが所有するそれぞれの.fla ファイルにアニメーションを作ってください。そして、メインのタイムラインで確実に動作させてください。

メインのタイムラインでエンター(リターン)キーを押した際にアニメーションが動作するのであれば、連続画像にエクスポートする準備ができているということです。

File → Export → Export Movie とたどってください。フォーマットを 連続する PNG 画像に変換し、保存を押して連続画像を作成しましょう。

Photoshop でのアニメーションと連続画像へのエクスポート

最近のバージョンのPhotoshopであれば、アニメーションを作成するのに適しています。古いバージョンはアニメーションを作成するのに Image Ready というプログラムが必要な場合があります。

ツールバーで Window → Animate とたどると、アニメーションツールバーがあります。

ここでアニメーションを作ることができ、スプライトシートにエクスポートできます。

アニメーションが完成したら、File → Export → Render to Video とたどってください。

ファイルオプションで、「連続画像」のチェックを外し、ファイルフォーマットとして PNG を使用してください。

それから、レンダーオプションでアルファチャネルに Straight - Unmatted を設定してください。

出力先を選び、render を押下して、作成したアニメーションから連続画像を作成してください。

スプライトシートの作成

スプライトシートと .plist 作成のためのツールの使用

Zwoptex は、画像からスプライトシートを作成できるソフトウェアです。

このソフトは、ダウンロード可能な商用版の Mac OS 用バイナリだけではなく、無料のFlash アプリもあります。

TexturePacker はもうひとつの別のツールで、Mac OS と Windows で使用可能です。基本機能は無料で、拡張機能は商用ライセンスが必要です。

これら3つのツールはテクスチャの空間をより良く使用させるために、画像を自動的にアレンジする機能があります。他にもスプライトをトリムしたり回転したりできます。

さあ、テクスチャと座標(plist)をエクスポートしましょう。そしてそれらをプロジェクトに追加しましょう。

シートを作成するもうひとつの方法は、cocos2d のツールフォルダにある mkatlas.pl を使用することです。

スプライトシートの使用方法

CCSpriteBatchNode
すべてのフレームのための実際の画像を持つ CCSpriteBatchNode オブジェクトを構築する必要があります。

このオブジェクト自身では何も描画しないとしても、シーンに追加します。描画パイプラインに組み込むために必要なのです。

例:
        // バッチノードの構築 -- 必要に応じて小さく分割するための
// ひとつの大きな画像を指定
CCSpriteBatchNode *batch = [CCSpriteBatchNode batchNodeWithFile:@"grossini.png" capacity:50];
 
// バッチノードを親に追加します。(それ自身は何も描画しませんが、
// 描画パイプラインに組み込むために必要です。)
[self addChild:batch];


CCSpriteFrameCache

次に、どのフレーム名がフレームの範囲と一致するかを記録する CCSpriteFrameCache シングルトンを使用する必要があります。

例:
        // スプライトのフレーム(スプライトシート内のイメージに沿って 
// 定義された名前付きの四角形の集まり)の読み込み。
[[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:@"grossini.plist"];


フレームの表示方法
いったんスプライトシートとフレームが読み込まれ、スプライトシートがシーンに追加されると、「spriteWithSpriteFrameName」という便利なメソッドを使用することによりそれらのフレームを使ってスプライトを構築することができ、そしてスプライトシートの子ノードとして追加することができます。

        // 最後に、フレームキャッシュ内の名前を使ってスプライトを構築します。
sprite1 = [CCSprite spriteWithSpriteFrameName:@"grossini_dance_01.png"];
 
// シートの子ノードとしてスプライトを追加します。どこからイメージデータを取得するかを知らせるためです。
[sheet addChild:sprite1];


後でスプライトが表示する画像を変更したい場合は、以下のように、共有フレームキャッシュから新しいフレームを取得し、スプライトに設定します。

    CCSpriteFrame *frame = [[CCSpriteFrameCache sharedSpriteFrameCache]
spriteFrameByName:@"grossini_dance_02.png"];
[sprite1 setDisplayFrame:frame];


重要:ここでのフレーム名とはXMLファイル内の任意の文字列のことで、ファイル名のことではありません。元の画像名をフレーム名として使用することはよくありますが、必須ではありません。上記の例の中では、「grossini_dance_02.png」という画像はプロジェクト内に不要です。

簡単な例
スプライトテストのコード:
		CGSize s = [[CCDirector sharedDirector] winSize];
// 重要:
// スプライトフレームはキャッシュされ Retain されます。
// [[CCSpriteFrameCache sharedSpriteFrameCache] removeUnusedSpriteFrames]; を呼び出すまでリリースしないようにしてください。
// を呼び出すまでリリースしないようにしてください。
// メモ:
// .png and .plist は同じ名前でなければなりません。
[[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:@"animations/grossini.plist"];
//
// スプライトを使用したアニメーション
//
CCSprite *sprite = [CCSprite spriteWithSpriteFrameName:@"grossini_dance_01.png"]; //"grossini_dance_01.png" comes from your .plist file
sprite.position = ccp( s.width/2-80, s.height/2);
 
CCSpriteBatchNode *batchNode = [CCSpriteBatchNode batchNodeWithFile:@"animations/grossini.png"];
[batchNode addChild:sprite];
[self addChild:batchNode];
 
 
NSMutableArray *animFrames = [NSMutableArray array];
for(int i = 1; i < 15; i++) {
 
CCSpriteFrame *frame = [[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:[NSString stringWithFormat:@"grossini_dance_%02d.png",i]];
[animFrames addObject:frame];
}
CCAnimation *animation = [CCAnimation animationWithName:@"dance" delay:0.2f frames:animFrames];
[sprite runAction:[CCRepeatForever actionWithAction: [CCAnimate actionWithAnimation:animation restoreOriginalFrame:NO] ]];



以下のコードを dealloc に必ず記述してください。メモリリークが発生してしまいます。

dealloc のコード:
-(void) dealloc
{
[[CCSpriteFrameCache sharedSpriteFrameCache] removeUnusedSpriteFrames];
[super dealloc];
}


ひとつの大きなスプライトシート(最大 以前のデバイス:1024×1024、iPhone4とiPad:2048×2048)にアニメーションを設定すると、より良いパフォーマンスが得られます。ツールは自動的にそのようにしてくれます。

----------------------------------
最初に書きましたが、実際にガイドの内容の調査もしてみましたので、こちらをご覧あれ。

スポンサーサイト



スポンサード リンク

cocos2d 動作:特殊アクション を日本語訳の巻

iPhone の 2Dアクションゲームを簡易に開発できるライブラリ、cocos2d のプログラミングガイドを日本語訳しています。

今回は、特殊なアクション。

こういうのを頭の片隅に入れながら作成すると、ここでこれだ!!ってなるんでしょうね。

------------------------------------
cocos2d プログラミングガイド

<目次
特殊アクション

CallFunc / CallBlock 関連 Action

CallFunc

CCCallFunc アクションを使うと、アクションからメソッドを呼び出すことができるようになります。

連続アクションの最後に有効に使用することができます。

例:
id actionTo = [CCMoveTo actionWithDuration: 2 position: ccp(s.width-40, s.height-40)];
id actionBy = [CCMoveBy actionWithDuration: 2 position: ccp(80,80)];
id actionCallFunc = [CCCallFunc actionWithTarget:self selector:@selector(doATask)];
 
id actionSequence = [CCSequence actions: actionTo, actionBy, actionCallFunc, nil];
 
-(void) doATask
{
//何かしらのコード
}


CallFuncN と CallFuncND アクション

CCCallFunc には、2種類のアクションがあります。CCCallFuncN と CCCallFuncND です。

CCCallFuncN は引数としてノードを取ります。CCCallFuncND はノードとデータのポインタを取ります。

id actionCallFuncN = [CCCallFuncN actionWithTarget:self selector:@selector(doATaskN:)]; // make sure you notice the trailing :
id actionCallFuncND = [CCCallFuncND actionWithTarget:self selector:@selector(doATaskND:data:) data:pointerToSomeData];
 
- (void) doATaskN: (id)node
{
//何かしらのコード
}
 
- (void) doATaskND: (id)node data:(void*)d
{
//何かしらのコード
}


CallBlock / CallBlockN

v0.99.2 から有効

// BCA は Block Copy Autorelease の略で cocos2d のマクロです
 
// CCCallBlock (引数なし)
id blockAction = [CCCallBlock actionWithBlock:BCA(^{
[label setString:@"Called Block!"];
})];
 
// CCCallBlockN (引数としてノードを渡す)
void (^block)(CCNode*) = BCA(^(CCNode *n) {
// ノードで一般的な処理を行う
CCLOG(@"called block for %@", n);
});
id blockAction2 = [CCCallBlockN actionWithBlock:block]


CCFollow

v0.99.2 から有効

『カメラ」をシュミレートします。フォローされたノードが中心になります。

// create an sprite
id sprite = [CCSprite xxxx];
 
[self addChild:sprite];
 
[self runAction: [CCFollow actionWithTarget:sprite worldBoundary:CGRectMake(0, 0, (winSize.width*2)-100, winSize.height)]];


CCPropertyAction

v0.99.2 から有効

Objective-C のすべてのクラスのどんなプロパティも変更できる、「包括的な(generic)」アクションです。

 // rotation プロパティを 0 から −270 へ、2秒間かけて変更します。それから、逆回りします。
id rot = [CCPropertyAction actionWithDuration:2 key:@"rotation" from:0 to:-270];
id rot_back = [rot reverse];
id rot_seq = [CCSequence actions:rot, rot_back, nil];


-------------------------
うーん、英語が少ない。

次行ってみましょう!
スポンサード リンク

cocos2d 動作:効果 を日本語訳の巻

iPhoneの2Dゲーム作成用ライブラリの cocos2d のプログラミングガイド日本語訳です。

今回は、いろいろな効果に関して訳してみました。

これを使用することにより、いろんな場面での効果的な効果が実現できて

ゲームの表現がより深くなることでしょうね。

では、読んでみましょう。

------------------------------
<目次
効果

はじめに

効果(Effects)は、特別なアクションです。透過、位置、回転、サイズといった普通のプロパティを変更する代わりに、グリッドを変更します。

グリッドは格子のようなもので、正方形や長方形の連なりを形づくる、互いに交差した線のつながりです。

この特別なアクションは、にいかなる CCNode オブジェクト(CCLayer、CCScene、CCSpriteなど)をグリッド内に描写します。そして、頂点を動かすことによりグリッドを変化させることができます。

タイル化されたグリッド(tiled grid) と、タイル化されていないグリッド(non-tiled grid) の2種類のグリッドがあります。タイル化されたグリッド(tiled grid) は個別のタイルからなり、タイル化されていないグリッド(non-tiled grid) は頂点からなる、という違いがあります。



グリッドは行と列の2つの次元を持ちますが、それぞれの頂点は3つの次元、x、y、z を持ちます。

それで、タイル化された3次元グリッド(tiled-grid-3D grid)または3次元グリッド(grid-3D grid) を変化させる事により、2次元または3次元効果を作り出すことができます。

どのように動作するのか

スクリーンのそれぞれのフレームはテクスチャ(FBO)内に描写されます。

このテクスチャは頂点配列に変換され、そしてこの頂点配列(グリッド)はグリッドの効果によって変換されます。最終的に頂点座標はスクリーンに描写されます。

内部動作のさらなる詳細は、以下を参照してください。

タイル化されたグリッド(tiled grid):CCTiledGrid3D and CCTiledGrid3DAction
タイル化されていないグリッド(non-tiled grid):CCGrid3D and CCGrid3DAction

例えば、このような画像を描画するシーンやレイヤーがあったとします。



CCRipple3D アクションを使用するとこのように画像を変換することができます。

線で表された画像を見るとわかると思いますが、これは32×24のます目のタイル化されていない(すべてのグリッドがつながっている)グリッドを使用しています。



また、CCFadeOutTRTiles アクションを使用するとこのように画像を変換することができます。

線で表された画像を見るとわかると思いますが、これは16×12のます目のタイル化された(すべてのタイルはバラバラにできる)グリッドを使用しています。



3次元動作

末尾に 3D と付いたアクションは、グリッドの Z 座標を変更することにより3次元の視覚効果を生み出すことを意味します。

3D アクションを使用する場合、物体の奥行き情報を保持するためのバッファ(depth buffer)を使用すると思います。

以下の呼び出しにより簡単に設定できます。

// 注意:この関数は、最初のシーンを開始する前の、一番最初に呼び出してください。
// 24 ビット奥行き情報保持用バッファを構築
// openGL の z オーダー が考慮されることを意味します
[[CCDirector sharedDirector] setDepthBufferFormat:kDepthBuffer16];


そして、いくつかの状況で RGBA8888 ピクセルフォーマット も使用すると思います。

これにより透過の効果を得ることが可能です。

// 注意: この関数は、最初のシーンを開始する前の、一番最初に呼び出してください。
// 透過用のバッファのためにこのピクセルフォーマットを使用します
[[CCDirector sharedDirector] setPixelFormat:kPixelFormatRGBA8888];


グリッド効果の索引

以下の CCGrid3DAction アクションが使用可能です。

CCFlipX3D
CCFlipY3D
CCLens3D
CCLiquid
CCRipple3D
CCShaky3D
CCTwirl
CCWaves
CCWaves3D

以下の CCTiledGrid3DAction アクションが使用可能です。

CCFadeOutBLTiles
CCFadeOutTRTiles
CCFadeOutUpTiles
CCFadeOutDownTiles
CCJumpTiles3D
CCShakyTiles3D
CCShatteredTiles3D
CCShuffleTiles
CCSplitCols
CCSplitRows
CCTurnOffTiles
CCWavesTiles3D

使用例

いくつかの使用例を示します。

// スプライト1 上で、波の動作を実行
id waves = [CCWaves actionWithWaves:5 amplitude:20 horizontal:YES vertical:NO grid:ccg(15,10) duration:5];
[sprite1 runAction: [CCRepeatForever actionWithAction: waves]];
 
// そして、スプライト2上で Shaky3D アクションを実行
id shaky = [CCShaky3D actionWithRange:4 shakeZ:NO grid:ccg(15,10) duration:5];
[sprite2 runAction: [CCRepeatForever actionWithAction: shaky]];
スポンサード リンク

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

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

最新記事

最新コメント

最新トラックバック

月別アーカイブ