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 仮想メモリ設定のチュートリアルと実践

推薦する

JavaScript 戦略パターンを使用してフォームを検証する方法

目次概要戦略パターンを使用しないフォーム検証戦略パターンを使用して最適化する戦略パターンの利点要約す...

HTML CSS を使用して div またはテーブルを指定した位置に固定する方法

CSSコードコンテンツをクリップボードにコピー.bottomTable{背景色: rgb (249,...

CentOS 8にJenkinsをインストールする方法

CentOS 8 に Jenkins をインストールするには、root アカウントまたは sudo ...

PHP環境構築におけるDockerの柔軟な実装

Docker を使用して、柔軟なオンライン PHP 環境を構築します。場合によっては、他の人がすでに...

ウェブデザインにおけるカラーマッチングの優れた例30選

本日は、色彩の応用に関する優れた事例を 30 件集めて、皆さんにご紹介したいと思います。これらの事例...

nginx+uwsgi で Django プロジェクトを開始するための詳細な手順

Django で Web プロジェクトを開発する場合、開発およびテストのプロセスでは Django ...

Ubuntu 18.04 は mysql 5.7.23 をインストールします

以前、Ubuntu 16.04 に MySQL をスムーズにインストールしました。今回、Ubuntu...

Typescript での infer キーワードの使用に関する詳細な理解

目次推測する事例:理解を深める参照する後で忘れないように、キーワード infer をメモしておきます...

初心者がHTMLタグを学ぶ(2)

初心者は、いくつかの HTML タグを理解することで HTML を学習できます。この入門書は、初心者...

HTML メタの説明

導入メタタグは、HTML言語のHEAD領域にある補助タグです。 meta は、ページの説明、キーワー...

MySQL 5.7 と Mac 上の MySql の詳細なインストール図をダウンロードする

1.ブラウザに次のアドレスを入力します参考: 2. 次のインターフェースに入ります。下の場所をクリッ...

WeChatアプレット開発の実践スキル:データの転送と保存

日々の開発で遭遇した様々な問題と、その解決策を閲覧しながら、日々の開発でよく使用するスキルや知識ポイ...

WeChatミニプログラムがシームレスなスクロールを実現

この記事の例では、WeChatアプレットのシームレスなスクロールを実現するための具体的なコードを参考...

小さな三角形の実装コードを含む CSS ナビゲーション バー メニュー

多くの Web ページにはナビゲーション バーに小さな三角形があり、この機能を実装するのは実は非常に...

HTML マークアップ言語 - リファレンス

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...