Cocos2d-x v3 チュートリアル 4

プレーヤーが走るアニメーション

元記事はこちらです。
Parkour Game with JavaScript (Cocos2d-JS v3.0) Chapter5

紹介

前のチュートリアルでは、プレーヤーはある地点から別の地点へ移動しました。しかし、この動きは少し変です。ここでは、プレーヤーをどのように走らせるかを紹介します。プレーヤーの動きはよりリアルになります。

その前に、 TexturePacker という便利なツールを紹介しましょう。

TexturePackerの紹介

TexturePackerは、スプライトシートを作成するためのクロスプラットフォームな GUIとコマンドラインツールです。
詳しく内容はここ にあります。

ここでは、このゲームで使うアニメーションファイルを作成するためのTexturePackerを簡単な使い方を紹介します。

TexturePackerを使ったオリジナルアニメーションの作成

手順は次のとおりです。

  1. TexturePackerを開いて、TexturePacker を TexturePackerのスプライト領域の中のres/TexturePacker にドラッグします。

DragTheResource

TexturePacker フォルダに、画像を追加すると、TexturePackerは自動的に変更を変出して、画像をロードします。

  1. TextureSettingsパネルで、”data format” は “cocos2d”、 “texture format” は “png”を選択します。(デフォルト)
  2. Data fileTexture file パスを指定します。ここで、Resources ディレクトリへのパスを設定し、データファイル名を”running.plist”にし、テクスチャファイルを”running.png”にします。
  3. Free版では、Png Opt Level0 に、Algorithm を BasicTrim modeNone にする必要があります。

Specifypath

  1. publish をクリックします。ダイアログが現れて、エラーがなければ、”running.png” と “running.plist” が指定した場所に作成されます。

Generating

これで、走るアニメーションファイルができました。では、作成されたアニメーションファイルを使っていきましょう。

Cocos2d-xでのアニメーションファイルのロード

準備

最初に、running.plist と running.png を Resources フォルダに追加します。

プレーヤーアニメションの作成

アニメーションは次のように作成できます。

アニメーションは、スプライトシートの中で小さな画像の集まり(runner0.png から runner7.png まで)で構成されています。

Cocos2d-xでアニメーションを作成するには次のようにします。

  1. スプライトシート(plistファイル)をSpriteFrameCacheクラスにロードする。
  2. アニメーションフレームを animFrames リストに追加する。
  3. アニメーションフレームリストと時間を指定して、 Animation オブジェクトを作成する。
  4. 最後に Animate オブジェクトを作成して、RepeatForever アクションでラップする。これで、永久的に実行する。

実行すると、ゲーム画面中でプレーヤーは永久に走り続けます。

Finalresult

まとめ

ここでは、アニメーションを作成するためのTexturePackerの使い方とスプライトアニメーションの方法を学びました。

Digiprove sealCopyright secured by Digiprove © 2014

Cocos2d-x v3 チュートリアル 4」への1件のフィードバック

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください