龍骨動畫in MV 事前準備篇

出自 RPG Maker MV Wiki
前往: 導覽搜尋

什麼是龍骨動畫?

他是骨骼動畫的一種,更是一種2D動畫解決方案,他不同於傳統動畫一張一張去畫,而是採用拼接零件的方式讓零件動起來。可以將2D圖片快速生成各種動畫。
比如說我這測試影片裡面的蜜蜂,他其實是內建的素材,一開始長這樣:

69fae4d23cfc3ab07f350e957cb01fca.PNG



材質檔是這樣的:

Ce0e5101639192a5e962c28534d5c991.PNG

動起來是像這樣,這是我的遊戲專案伊露莉可裡面的測試畫面:


龍骨則是一款動畫編輯軟體,目前只有龍骨有MV插件...所以沒得選。

龍骨其實很方便,中文,開源、免費、更新勤快、作者在知乎上很好找。
官網上有載點跟教學,官網的教學連結壞了,但Youtobe上有完整版。

提供者

遠山若葉 巴哈小屋

教學影片

安裝步驟

準備所需軟體

  • 1.RPGMAKER MV
  • 2.dragonbones[1]
  • 3.photoshop (必備),原始素材輸出用
  • 4.clipstudio (選配),我拿來畫原始素材用,也可以只用Photoshop

準備所需插件

先感恩一下YEP大神,然後依照順序安裝下列插件。

  • Battle Engine Core[2]
  • Action Sequence Pack 1[3]
  • Action Sequence Pack 2[4]
  • Action Sequence Pack 3[5]
  • Animated Sideview Enemies[6]
  • DragonBones Plugins[7]


下載龍骨函式庫

  • YEP龍骨插件[8]

把函式庫裡面的資料夾放在:\專案資料夾\js\libs\
53dc928561b1e63b05645061318d72cf.JPG

新增專用資料夾

新增龍骨動畫專用資料夾:\專案資料夾\dragonbones_assets\
此名稱與路徑可在插件內修改。

打開index檔案

打開專案資料夾裡面的index檔案,在

<script type=text/javascript src=js/libs/pixi-picture.js>

的下面加入下列兩行

<script type=text/javascript src=js/libs/dragonbones/dragonBones.js></script>
<script type=text/javascript src=js/libs/dragonbones/dragonBonesPixi.js></script>

以上作動環境已完成,可以下載YEP提供的範例檔案來玩玩看囉,範例檔案位於先前下載的函式庫裡面。

範例說明

以範例的Demon為例,會有三個檔案,分別是:

  • Demon_ske.json
  • Demon_tex.json
  • Demon_tex.png

三個都要放在dragonbones_assets資料夾(或自定義名稱)裡面。

最後在資料庫裡面新增一隻怪物,並在該怪物的note(註釋)欄位貼上以下語法:

<DragonBone Settings>
Battler: Demon
Replace Sprite
ScaleX: 0.3
ScaleY: 0.3
Width: 140
Height: 140
</DragonBone Settings>

進戰鬥打這隻怪物,就能看到龍骨動畫哩!
如果貼在角色的note欄位的話,那個角色在戰鬥中也會變成Demon哦~

追記

龍骨還有一個很棒的功能...就是把動畫再輸出成png檔案,輸出張數可自行設定。
比如說同一隻蜜蜂,最後變成這樣。

Fcae54ffdc895ca9cb7904fcd480a199.JPG

如果非MV的話,大概就只能這樣用了吧

資料來源

  1. dragonbones龍骨開源軟體載點 PS:(下載龍骨軟體時,要去歷史版本裡面下載5.5版,不能用最新的5.6)
  2. Battle Engine Core 插件載點
  3. Action Sequence Pack 1 插件載點
  4. Action Sequence Pack 2 插件載點
  5. Action Sequence Pack 3 插件載點
  6. Animated Sideview Enemies 插件載點
  7. DragonBones Plugins 插件載點
  8. YEP龍骨插件載點