このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

CocosStudio 1.6系 & 2系 Animationの表示 Armatureクラス、読み込み方まとめ

Cocos2d-x

2015.09.30

この記事は最終更新日から1年以上が経過しています。

引き続きCocosStudioについてです。

CocosStudio1.6では、このように「Animation Editor」「UI Editor」「Scene Editor」「Data Editor」

スクリーンショット 2015-09-29 7.20.27

と分かれていたのですが、2系ではこれらが統合されている様子。

今回は、CocosStudio1.6で言う、「Animation Editor」でのアニメーションの作成方法となります。

 

Cocos Studio 1.6系

CocosStudio1.6では、「Animation Editor」を用いてアニメーション作成を行います。

「Animation Editor」を選択して開くと

スクリーンショット 2015-09-30 4.42.45

このような画面が表示するかと。

新規で作成する場合はメニュー左側の「スタート」下の「新作」をクリック。

スクリーンショット 2015-09-30 4.46.13

データを格納する任意のディレクトリを指定。

スクリーンショット 2015-09-30 4.47.45

アニメエディターが表示します。

先ほど指定したディレクトリに素材を追加し、

スクリーンショット 2015-09-30 4.52.11

画面右側の「リソース」の更新ボタンを押すと、エディタ側にも反映されます。

スクリーンショット 2015-09-30 4.53.27

こちらの素材をドラッグ&ドロップで配置します。

NewAnimation--アニメエディター

左上の「アニメモード」をクリックするとアニメーション編集モードとなります。

スクリーンショット 2015-09-30 4.56.31

クリック。

スクリーンショット 2015-09-30 4.56.39

先ほど配置したオブジェクトをクリックすることで、ステータスを表示することができます。

アニメーション編集はエディタ下の「アニメフレーム」より編集。

スクリーンショット 2015-09-30 5.00.19

ここで、フレームを追加してアニメを作成します。

ループの設定、イージングなどもここで設定できます。

フレームアニメの作成の詳細については割愛させていただきます。

それぞれ作成したアニメはアニメ名を付けアクションリストにて管理できます。

スクリーンショット 2015-09-30 4.59.34

アクションリストを右クリックすることで「アニメを追加」や「アニメをコピー」などのメニューが表示します。

作成したら、ファイル>プロジェクトを出力

で、アニメデータを出力できます。

スクリーンショット 2015-09-30 5.03.12

今回は特に設定変更せず、プロジェクトをエクスポート。

スクリーンショット 2015-09-30 5.04.38

Exportディレクトリに「.ExportJson」「.plist」「.png」ファイルが書き出されました。

スクリーンショット 2015-09-30 5.05.54

 

Cocos2d-xでの読み込み

先ほどの出力ファイルをXcodeのResourceに追加します。

ArmatureDataManager::getInstance()->addArmatureFileInfo(xxx.ExportJson);
auto charactor = Armature::create("xxxx");
charactor->getAnimation()->play("xxxx");

ArmatureDataManagerクラスを用いて、アニメデータを事前に読み込んでおきます。

キャラクタの生成はArmatureクラスを用いて、指定は先ほどのファイル名。

アニメリストに追加したアニメ名を指定することによって個別のアニメを呼び出せます。

charactor->getAnimation()->play("アニメ名");

あとは、setPositionで位置調整、addChildでキャラクタを配置します。

charactor->setPosition(Point(0, 0));
addChild(charactor);

Cocos Studio 2.x系

CocosStudio1.6で作成したResourceもCocosStudio2.x系に

「xxx.xml.animationファイル」をImportすることによって、

CocosStudio2.x系で使用することができます。

Resource>右クリック>Import Resources..

スクリーンショット 2015-09-29 3.48.35

制作した「xxx.xml.animationファイル」を選択。

1.6系で作成した際、こちらで読み込むと便利でしょう。

基本的には1.6系と同じ感じです。

スクリーンショット 2015-09-30 5.20.31

Resourcesが左側にあったりとエディタのレイアウトなどで異なる点はあります。

スクリーンショット 2015-09-30 5.22.31

Cocos Studio1.6の左上の「アニメモード」は、右下のAnimationタブの「Begin to record frame」になっていたりします。

アニメを管理していたアニメリストはこちらのプルダウンになっていたりします。

 

スクリーンショット 2015-09-30 5.24.54

「+」でアニメ追加鉛筆アイコンクリックで編集となります。

スクリーンショット 2015-09-30 5.27.14

アニメフレーム箇所も基本同じなんですが、複数アニメを作成した際、フレーム全体が切り替わるのではなく、「0〜39フレーム」「40〜」とフレーム分けされるようですね。。

(フレーム全体が切り替わるようにできるのかは要調査)

アニメ作成したら、Project>Publish and Package

csbファイルを出力しましょう。

スクリーンショット 2015-09-30 5.31.29

 

Cocos2d-xでの読み込み

先ほどの出力ファイルをXcodeのResourceに追加します。

csbファイルの読み込みは、ArmatureDataManagerクラスは使用せず、

CSLoaderクラスでnodeを生成します。

また、アニメーションはcreateTimelineで生成します。

auto charactor = CSLoader::getInstance()->createNode("xxx.csb");
ActionTimeline* action = CSLoader::getInstance()->createTimeline("xxx.csb");
charactor->runAction(action);
action->play("アニメ名", true);

action->play(“アニメ名”, true);の第二引数は「ループさせるかどうか」になります。

また、フレーム数の指定ができ、「始まりのみ」、「始まりと終わり」などの指定が可能となっております。

action->gotoFrameAndPlay(10, false);
action->gotoFrameAndPlay(0, 39, true);

あとは、setPositionで位置調整、addChildでキャラクタを配置します。

charactor->setPosition(Point(0, 0));
addChild(charactor);

と、1.6と2系で出力ファイルが異なり、Xcode側での読み込みも異なります。

以上、Cocos Studioでのアニメ作成でした。

スクリーンショット 2015-09-30 5.40.40

 

Comment

Related Article

Cocos2d-x iPhone実機転送で「Xcode setting ENABLE_BITCODE」error

2015.11.28

CocosStudio 1.6系 & 2系 Animationの表示 Armatureクラス、読み込み方まとめ

2015.09.30

Cocos Studio 1.6系 & 2系 インストール、使い方まとめ

2015.09.27

Cocos2d-x スプライトの扱い まとめ

2015.09.26

Cocos2d-x インストール 開発環境構築

2015.09.01

CATEGORY LIST

LATEST NEWS

汎用 3D mesh/model viewerを求め。と、簡単に、FBXファイルをglTF(glb)に変換ツールを求め。

C++

2024.06.06

M1 Macで、OpenGL GLUTを使ってコンパイルする

C

2024.04.27

Rust - Actix Web mongo ユーザー登録 JWT認証

Rust

2024.03.24

Rust - Actix Web JWT 認証認可 APIの作成

Rust

2024.02.25

Rust - Actix Web × JSON 静的ファイルをAPIで返却

Rust

2024.01.19

Rust - Actix Web × MongoDB環境をサクッと起動

Rust

2024.01.18

5分で学ぶ RustでWave Function Collapse (波動関数崩壊アルゴリズム)

Rust

2024.01.15

LLaMAモデル GGMLフォーマット(llama.cpp)をRustフレームワーク Leptosを用いて M1MacMiniでサクッと動かす。

Rust

2024.01.11

2024年 狙っているモバイルノートPC

tool

2024.01.07

MacOS XcodeにSDL2を追加

tool

2023.12.26

php 7.4にアップデート

PHP

2023.12.24

5分で覚える Flutter Flameで作る Wave Function Collapse - 波動関数崩壊アルゴリズム

AI・Bot・algorithm

2023.12.20

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US