【Egret Engine】DragonBones の基本操作と使い方

投稿者: | 2019年1月15日

はじめに

2Dアニメーション作成エディタのDragonBonesの基本的な使い方を紹介します。

 

フィア
Animate CCとかを触ったことがあるなら結構簡単!
カレン
サクッと習得しちゃおうね!

 

スポンサーリンク

 

目次

 

準備

1、DragonBonesを起動

Egret Launcherを起動して、ToolsタブよりDragonBonesをOpenしてください。

 

2、プロジェクトを起動

新規にプロジェクトを作成する場合は「New Project」をクリック。

今回は動作確認を行いたいので「Armature Demo」をクリックして開いてください。

 

3、エディタウィンドウの調整

「Armature Demo」を開くと以下のような画面が表示されます。

右上の「Scene」と「Draw Order」タブを矢印の方向へドラッグ&ドロップして「Liblary」の横に並べてください。

 

 

DragonBones の基本操作と使い方

スクロール:画面拡大

右クリック+ドラッグ:画面の移動

 

 

新しいモデルの作成

Library上で右クリックして、「New Symbol」をクリック。

モデルの名前を「TestModel」にしてFinishしてください。

 

Boneの追加

LibraryのTestModelの左にある▽をクリックして、textureを展開し、parts/bodyをエディタにドラッグしてください。

 

Create Boneクリックして、エディタ上でドラッグしてください。ボーンが追加できます。

ボーンを追加すると、bodyという名前のBoneが追加されるので、適当な名前に変えてください。今回は「Body」にしました。

これを繰り返して適当なモデルを作成してください。

 

 

設置した画像を手前に表示したいときは、Draw OrderのUp やDownでレイヤーを移動させてください。

一番上の画像が一番手前にきます。

 

最後に、Scene上にある各BoneをBodyの上にドラッグし、Bodyの子オブジェクトにしてください。

 

Boneを動かす

Selectツールを選択してください。

 

以下の画像の赤で囲んだアイコンをクリックして、移動や回転、スケールの変更を行ってください。

 

 

おわりに

フィア
次回はアニメーションの作成を行うよ!
カレン
UnityとかMMDのアニメーションエディタと似てるから、

意外と簡単だったね

 

HTML5 Egret Engine入門へ戻る

 

すくまりゲームズの人気記事