CocosCreator スケルトンアニメーション ドラゴンボーン

CocosCreator スケルトンアニメーション ドラゴンボーン

CocosCreator バージョン 2.3.4

ドラゴンボーンアニメーション

キールアニメーションを Cocos アセットの下に配置します。ここでのドラゴンボーンアニメーションは、Dragonbones によってエクスポートされたバイナリアニメーションです。

キールアニメーション(骨のアイコン)をステージに直接ドラッグします

スケルタルアニメーション、DragonAtlasAsset イメージ、アニメーションアクション、PlayTime ループ再生などのプロパティを設定します。

コード生成キールアニメーション

ドラゴンボーンのリソース パスは、assets/resources/dragonbones であり、loadResDir では dragonbones のみを入力する必要があります。

//パスに従ってリソースをロードします cc.loader.loadResDir("dragonbones",cc.Asset,null,(err, resource)=>{
      console.log("リソース:",リソース);
      // スケルトンアニメーションを生成 let node:cc.Node = new cc.Node();
      アーマチュアディスプレイを追加します:dragonBones.ArmatureDisplay = node.addComponent(dragonBones.ArmatureDisplay);
      アーマチュアディスプレイ.ドラゴンアセット = リソース[0];
      armatureDisplay.dragonAtlasAsset = リソース[3];
      アーマチュアディスプレイ.アーマチュア名 = "role3";
      armatureDisplay.playAnimation("move",0);
      ノードx = 100;
      ノードy = 100;
      ノードに子を追加します。
});

スキンの交換

//リソースをロードcc.loader.loadResDir("dragonbones",cc.Asset,null,(err, resource)=>{
     console.log("リソース:",リソース);
 
    //アニメーション1を生成
    node:cc.Node = new cc.Node(); とします。
    アーマチュアディスプレイを追加します:dragonBones.ArmatureDisplay = node.addComponent(dragonBones.ArmatureDisplay);
    アーマチュアディスプレイ.ドラゴンアセット = リソース[0];
    armatureDisplay.dragonAtlasAsset = リソース[3];
    アーマチュアディスプレイ.アーマチュア名 = "role3";
    armatureDisplay.playAnimation("move",0);
    ノードx = 100;
    ノードy = 100;
    ノードに子を追加します。
 
    //アニメーション2を生成
    node2:cc.Node = new cc.Node(); とします。
    armatureDisplay2:dragonBones.ArmatureDisplay = node2.addComponent(dragonBones.ArmatureDisplay); を追加します。
    armatureDisplay2.dragonAsset = リソース[4];
    armatureDisplay2.dragonAtlasAsset = リソース[7];
    アーマチュアディスプレイ2.アーマチュア名 = "role4";
    armatureDisplay2.playAnimation("move",0);
    ノード2.x = 150;
    ノード2.y = 150;
    ノード2に子を追加します。
     
 
    //アニメーション 2 のスキンをアニメーション 1 に適用します。let factory = dragonBones.CCFactory.getInstance();
    factory.replaceSkin(armatureDisplay.armature(), (armatureDisplay2.armature() を dragonBones.Armature).armatureData.defaultSkin, true として)。
});

以上がCocosCreatorスケルトンアニメーションDragonBonesの詳細な内容です。CocosCreatorスケルトンアニメーションDragonBonesの詳細については、123WORDPRESS.COMの他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • Unity は物理エンジンを使用してマルチロータードローンの飛行をシミュレートします
  • Android 向け 2D 物理エンジン Box2d を使用する簡単な例
  • CocosCreator ソースコードの解釈: エンジンの起動とメインループ
  • CocosCreator 一般的なフレームワーク設計リソース管理
  • CocosCreatorでリストを作成する方法
  • CocosCreator の新しいリソース管理システムの分析
  • CocosCreatorでシューティングゲームを作る詳しい解説
  • CocosCreatorでクールなレーダーチャートを描く方法
  • CocosCreator MVCアーキテクチャの詳細な説明
  • CocosCreator で物理エンジン ジョイントを使用する方法

<<:  MySQL の一般的な SQL ステートメントの概要

>>:  Linux 仮想メモリ設定のチュートリアルと実践

推薦する

Vue CLI のモードと環境変数の詳細な説明

序文実際のプロジェクトの開発では、通常、プロジェクト開発フェーズ、テストフェーズ、最終オンラインフェ...

Linux環境でOpenSSL証明書を生成する

1. 環境: CentOS7、OpenSSL1.1.1k。 2. コンセプト:ルート証明書: サーバ...

Linux での wget コマンドの基本的な使い方

目次序文1. wgetを使用して単一のファイルをダウンロードする2. wget -Oを使用してダウン...

Vueのイベント処理とイベント修飾子の詳細な説明

<div id="ルート"> <h2>頑張れ、{{na...

初心者向け入門講座⑧:記事サイトを簡単に作る

前回の投稿では、Web ページの作成方法について説明しました。Web サイトは多くの Web ページ...

1分でVueが右クリックメニューを実装

目次レンダリングインストールコードの実装カスタムスタイル要約する効率的に要件を満たし、車輪の再発明を...

MySQL よく使われる関数の詳細な概要

目次MySQL 共通関数1. 数値関数文字列関数3. 時間機能4. システム機能5. 集計関数MyS...

WeChatミニプログラムでのマップの正しい使用例

目次序文1. 準備2. 実際の戦闘2.1 ミニプログラムの権限を設定する2.2 カプセル化ツールの機...

HTMLでは、全体的なスタイルとレイアウトを崩さずに、部分的に強制スクロールバーを使用できます。

まずはエフェクト画像を投稿します:全体的なスタイルとレイアウトが崩れないように、スクロール バーがロ...

mysql5.7のインストールとNavicateの長期無料利用の実施手順

(I) mysql5.7のインストール: ❀詳細:無料のグリーンバージョン5.7のインストール方法は...

Vue プロジェクトで axios リクエストを使用する方法

目次1. インストール2. カプセル化に問題はない3. ファイルを作成する4. アドレス設定をリクエ...

Windows での MySQL 5.7.10 のインストールと設定のチュートリアル

MySQL は、ユーザーごとに 2 つの異なるバージョンを提供します。 MySQL コミュニティ サ...

vue + Electron でデスクトップ アプリケーションを作成するためのサンプル コード

1.vueパッケージングここでは、vueネイティブパッケージングコマンドを使用してvueプロジェクト...

Ubuntu の MySQL のパラメータ ファイル my.cnf の詳細な分析

序文MySQL に関する私の理解に基づくと、パフォーマンスの最適化作業やマスター スレーブ レプリケ...

ウェブページ(ウェブサイト)のデザインと制作に関する考えや経験の共有

まずは投稿する前に! 「I Want to Study on My Own!」に改めて感謝します。た...