モーリーのメモスマートフォン用の表示で見るモーリーのメモアプリ開発等(プログラミング、CG作成)、興味を持ったことを実践してまとめるブログです。】DragonBonesを使ってアニメーションを作成します。Creatorで使用します。DragonBonesは、無料で使える2Dアニメーション作成ツールです。メッシュとボーンを使って、1枚の絵でアニメーションを作成することも出来ます。今回作成するアニメーションです。*画像をクリックすると再生します。Creator自体にもアニメーション作成機能はありますが、DragonBonesの方が機能は豊富です。複数の画像からアニメーションを作る際の階層の管理もしやすいです。Creatorには、DragonBones用のコンポーネントがあるので、作成したアニメーションを簡単に使用できます。私が使用している環境です。v5.6』をクリック『DragonBonesPro-v5.6.0.dmg』がダウンロードされます。『DragonBonesPro-v5.6.0.dmg』をダブルクリックして開く『DragonBonesProInstaller』を右クリックし、『開始』をクリック『開く』をクリックセキュリティの設定により、メッセージが表示されない場合があります。in』をクリック下図の情報を入力して『Register』をクリック『Next』をクリック登録したメールアドレスに『Code』が送付されるので、下図の項目を入力して『Register』をクリック『Confirm』をクリック登録完了!サンプルプロジェクトの素材を利用するDragonBonesにあらかじめ用意されているサンプルプロジェクトの素材を利用してアニメーションを作成します。Project』をクリック名前を変更して、『Finish』をクリック*別名で保存しないと、後で同じサンプルプロジェクトを開いた時に上書きされてしまいます。0)に『chibangR2』が配置されます。Bone』をクリックしてオンにする下図のようにボーンを配置する*gifです。画像をクリックすると再生します。ボーンの名前を下図のようにします。*自動割当される名前は、ボーンの位置や作成順で変わります。Edge』をクリック『現在のメッシュが削除されますが、メッシュを再作成して良いですか?』と聞かれるので『Confirm』をクリック*今後この確認が不要な場合は、チェックを入れます。画像のアウトラインをクリック*gifです。画像をクリックすると再生します。作業に邪魔なボーンは非表示または操作不可にすることが出来ます。(下記の補足を参考)*gifです。画像をクリックすると再生します。補足:Weightの調整方法ボーンと頂点をクリックし、描画エリアの何もない場所でドラッグ*gifです。画像をクリックすると再生します。頂点をクリックし、『Property』パネルで調整する*gifです。画像をクリックすると再生します。ボーンをクリックし、『option』を押しながら頂点をクリックして塗りつぶす*gifです。画像をクリックすると再生します。ボーンを動かしながら調整する*gifです。画像をクリックすると再生します。a』を押して、ボーンと画像を全選択するボーンを1つ(どれでも良い)を右クリックボーンだけが選択されます。回転のフラッグをクリック『Timeline』パネルに全てのボーンの現在の角度がキーフレームとして登録されます。Key』をクリックするボーンを動かすと、現在のフレームにキーフレームが登録されるようになります。何もない場所を右クリックして、選択状態を解除する『Rotate』をクリック各ボーンをそれぞれ回転させて動きを付ける*gifです。画像をクリックすると再生します。12フレーム目にキーフレームが登録されます。アニメーションの作成は以上です。Forward』をクリックして、アニメーションを再生*gifです。画像をクリックすると再生します。Project』をクリックExport』ウィンドウが開きます。プレビューボタンを押して、動作を確認して下さい。今回の作業は、以上です。あとがきボーンを動かした時に、伸び縮みさせたい場所と歪んでほしくない場所が思い通りになるようにメッシュを設定するのは難しいです。今回使用した画像もそうですが、画像の周囲に余白がないと、画像のアウトラインにメッシュを作成しにくいです。場合によってはボーンを動かした際に画像の境界が変な歪み方をします。自分で画像を用意する場合は周囲に余白を付けたほうが良いかも知れません。Creatorをインストールします。Studio2』です。2を使ってListViewを作成しました。(8)参加グループプログラミングリンクはてなブログブログをはじめる週刊はてなブログはてなブログProはてなブログをはじめよう!mmorleyさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。