[RMMV] DragonBones 2d Animation Integration

Discussion in 'JS Plugins In Development' started by TheGreenKel, Jul 9, 2017.

  1. TheGreenKel

    TheGreenKel Villager Member

    Messages:
    16
    Likes Received:
    31
    First Language:
    English
    Primarily Uses:
    RMMV
    2D Skeletal Animation with DragonBones 1.0.0
    TheGreenKel

    Introduction
    DragonBones is a free 2D animation tool similar to Spine 2D. DragonBones also has a couple of libraries that allows it to play inside of game engines. This plugin integrate the full Javascript libraries and support all DragonBones features. Require RPGMaker MV 1.5.0 or higher.



    Update Version 3
    - Add a lot of polish with collaboration with Yanfly.
    - Rename the Yanfly compatibility plugin into 'KELYEP_DragonBones.js'
    - Add more option to note tags.
    - Check out Yanfly for a detailed breakdown. http://yanfly.moe/2017/08/04/yep-150-dragonbones-integration-rpg-maker-mv-2/


    Update Version 2
    - Add compatibility to Yanfly Action Sequence. You can now play any Dragonbones animation using the 'motion' command. Add this plugin after all Yanfly plugins.

    - You now have to assign a blank image for enemy and actors. This change is to make this plugin more compatible with other plugin that changes the UI. Two sample blank images is supplied named 'Actor0_Empty'

    - This plugin will look for the 18 default animations inside your Dragonbones armature. So if you name an animation 'walk' inside the Dragonbones Editor then that animation will be used automatically without having to be assigned using 'dragonbone_ani_' note tag. This change is to lessen the clutter inside the Notes section. 'dragonbone_ani_' note tag can still be used if you want to assign 1 animation to multiple states like having 1 attack animation to play when the game request swing/thrust/spell.

    - You can now control whether an animation is looping or not by setting the "Play Times" variable inside the Dragonbones Editor. Play Times equal to zero means looping.

    - I included the Dragonbones source files, so you can open it up and see how to properly set stuff up.


    Features
    - Full DragonBones integration
    - Support skeletal animation and FFD
    - Replace Enemy/Actor sprite and animations using Notes
    - Export and preload workflow
    - Support Yanfly plugins


    Download for Free on Itch.io
    Plugin: https://thegreenkel.itch.io/dragonbones-rpg-maker-mv-plugin
    Demo Project: https://thegreenkel.itch.io/dragonbones-rpgmaker-mv-demo
    DragonBones Software: http://dragonbones.com/en/index.html


    Extra Links
    - Yanfly Link + Documentation: http://yanfly.moe/2017/08/04/yep-150-dragonbones-integration-rpg-maker-mv-2/
    - Battlers in Dragonbones format from Aekashics: http://www.akashics.moe/uncategorized/librarium-dragonbones-animated-megapack/


    License for Plugin
    Codes inside 'js' folder is MIT license.
    Art assets inside 'dragonbones_assets' folder is All Right Reserved by Egret Technologies.

    Screenshots
    QuickStart
    Install plugin into new project
    1. Create a new RPG Maker MV project
    2. Copy over content from plugin into main folder
    3. Overwrite Index.html

    FAQ
    Post question and answers to common question here in the following format:

    Q: The demo won't open, how to open it?
    A: Download Winrar and try again.

    Credit and Thanks
    - TheGreenKel

    Author's Notes
    This is optional.

    DragonBones Info
     
    Last edited: Aug 5, 2017
    #1
    plim, EZaxess, DangDut and 25 others like this.
  2. JohnOminae

    JohnOminae Villager Member

    Messages:
    28
    Likes Received:
    14
    Location:
    [Redacted]
    First Language:
    English
    Primarily Uses:
    RMMV
    This is really cool! Hopefully you can get this fully working with relative ease.
     
    #2
  3. TheGreenKel

    TheGreenKel Villager Member

    Messages:
    16
    Likes Received:
    31
    First Language:
    English
    Primarily Uses:
    RMMV
    It is fully working. Right now, it is just seeing if people report any bugs or want more features.
     
    #3
    phamtruong1992 likes this.
  4. TomatoKing

    TomatoKing Veteran Veteran

    Messages:
    50
    Likes Received:
    67
    First Language:
    Spanish
    Primarily Uses:
    RMMV
    What about replacing map sprites?
     
    #4
    Shake0615 likes this.
  5. TheGreenKel

    TheGreenKel Villager Member

    Messages:
    16
    Likes Received:
    31
    First Language:
    English
    Primarily Uses:
    RMMV
    @TomatoKing Yeah it is possible to replace the map sprites, but I don't have the animation assets to test it, so it is not something I am adding anytime soon.
     
    #5
  6. ShellFlare

    ShellFlare Veteran Veteran

    Messages:
    81
    Likes Received:
    14
    First Language:
    English
    What's missing that this is in Js Plugins in development instead of the Released plugin forums?

    It looks amazing and i'm so excited to test some stuff fusing this and yanfly's action sequences.

    I think its a wonderful plugin.


    Now I just need to suck less at animating.
     
    #6
  7. TomatoKing

    TomatoKing Veteran Veteran

    Messages:
    50
    Likes Received:
    67
    First Language:
    Spanish
    Primarily Uses:
    RMMV
    @TheGreenKel

    EDIT: I made you a blocky guy, it's not pretty or particularly well animated but has all the basic map animations: https://cdn.discordapp.com/attachments/255057871547400192/336301060778098699/testassets.rar

    It's a compiled Spine file, you have to import it into dragonbones, I did it myself and worked ok for the most part, I found out DB doesnt support animatable IK weights so I had to remove the IKs. It has 4 directional idle, walk and run animations.

    I can provide test assets for anything you might need, just make a list, I can whip up anything quick for test purposes.

    I was asking for support for Spine a while ago, since Pixi.js already supports part of it, but if it has full support of dragonbones then all the better, I can always import spine files into dragon bones and export in dragonbones format.

    Of the top of my head, stuff that would make this plugin to have everything I could use:
    -Replace map sprites with skeletal animations
    -Replace the default visual effects (sparks and such) with skeletal animations (stuff like tints and flashes could be handed via events in the implementation has event listener)
    -And on a distant third the ability to have an event display an skeletal animation as a map asset (for example, a tree swinging in the wind).

    Have you tested performance? as in how many assets you can have on screen before you start dropping frames?
     
    Last edited: Jul 17, 2017
    #7
  8. TheGreenKel

    TheGreenKel Villager Member

    Messages:
    16
    Likes Received:
    31
    First Language:
    English
    Primarily Uses:
    RMMV
    @TomatoKing For performance, I tested created a bunch of animating DragonBoy armatures and check the frame rate. My CPU is an i7-720QM (old quad core).

    1) 150-200 animating DragonBoy on the main menu at 60 fps
    2) 150 animating DragonBoy during Battle Scene at 48 fps.
    3) There are some hitches when starting animation, haven't narrow down why yet.
    4) I have code inside the plugin in order to test performance. I should make an event so everyone can test and see for themselves.

    As for Features:
    1) Replacing map sprites is possible, I remember seeing the code that draw it on the map so it should be doable. The trick is to figure out how the game system handle up, down, left, right state.
    2) Playing visual effect is creating a new armature dynamically so that should be possible.
    3) Replacing map assets ( I assume these are 'Event') is possible. The code to draw it is in the same place as the map sprites. The problem is coming up with a way of only drawing stuff on the screen.
     
    #8
  9. TheGreenKel

    TheGreenKel Villager Member

    Messages:
    16
    Likes Received:
    31
    First Language:
    English
    Primarily Uses:
    RMMV
    @ShellFlare I like to leave this plugin in development stage for 1-2 weeks before considering it solid for release. Can't really tell when it comes to bugs.

    I am also working on integrating it with Yanfly's Battle Sequence. I am planning to create another plugin version just for Yanfly's battle sequence. I got one roughly working so far, but I am still trying to figure out a way to integrate it without overwriting his code. I am planning 2 extra features with the Yanfly compatiblity plugin:

    1) The game has 18 default animations (walk, swing, spell, etc), if you have an animation with the same name inside the Dragonbones armature then it will just play it by default. You can still overwrite using Notes tags. Currently, there are no default and you have to assign everything inside the Notes section.

    2) Being able to call any Dragonbones animation using the "MOTION" command. For example, if you assign "motion dance: user" to a skill then when an enemy/actor use that skill. The game will check if that enemy/actor is a Dragonbone armature then play the requested 'dance' animation if possible.
     
    #9
  10. Plueschkatze

    Plueschkatze Veteran Veteran

    Messages:
    513
    Likes Received:
    1,509
    First Language:
    German
    Primarily Uses:
    N/A
    This sounds awesome. Would love on map support, too! <3
     
    #10
  11. ShellFlare

    ShellFlare Veteran Veteran

    Messages:
    81
    Likes Received:
    14
    First Language:
    English
    Hey so just fun fact, I decided to export the demo as an apk and test it on android and it is totally working.

    I just exported the base demo (well with one tiny change to the rpgmaker_core.js because its bugged with android atm).

    Both on map and in battle armatures function smoothly.
     
    #11
  12. Kilitar

    Kilitar Veteran Veteran

    Messages:
    141
    Likes Received:
    38
    First Language:
    czech
    Primarily Uses:
    RMMV
    Hello, by a chance - any way to use this for Spriter Pro animations? Or any way to convert them somehow into Dragonbone to be useable with this plugin?
     
    #12
  13. TheGreenKel

    TheGreenKel Villager Member

    Messages:
    16
    Likes Received:
    31
    First Language:
    English
    Primarily Uses:
    RMMV
    No, this plugin doesn't work for Spriter. I haven't found a way to convert Spriter Pro into Dragonbones.
     
    #13
  14. ?????

    ????? Developer?? Veteran

    Messages:
    40
    Likes Received:
    24
    Location:
    toronto Canada
    First Language:
    English
    Hi, I'm using a 2 directional script (where the sprites only go left and right even when moving up and down, kind of like retro games). And I'm also using quasi abs and quasi sprite for battle animation. Would it be possible in the future to set up this script for on map characters?
     
    #14
    Shake0615 likes this.
  15. The Magic Circle

    The Magic Circle Listen to my Soundcloud fam? Veteran

    Messages:
    37
    Likes Received:
    13
    First Language:
    English
    Primarily Uses:
    RMMV
    This looks really cool. Here's hoping it becomes Yanfly-compatible in the future!
     
    #15
  16. TheGreenKel

    TheGreenKel Villager Member

    Messages:
    16
    Likes Received:
    31
    First Language:
    English
    Primarily Uses:
    RMMV
    @????? For the distance future, I am planning to add the ability to replace map sprites this include player characters and events. Right now, I am not sure how I want to make that accessible for users. If there is a way you would like to work with map sprites, then type it out. I am always curious on how people want to work with animations.
     
    #16
  17. KaYsEr

    KaYsEr Koruldia Veteran

    Messages:
    208
    Likes Received:
    441
    Location:
    London
    First Language:
    French
    Primarily Uses:
    RMMV
    It looks impressive, I tried it and so far so good, highly compatible with many other plugins (even special fx plugins on enemies from Mog). Of course, you have to put this plugin at the right hierarchy on the list or you can get an error when starting a fight.

    The only missing thing I noticed is that when you target an enemy in MV you are supposed to see a blinking/flashing effect on the sprite to tell you what enemy you are currently selecting, and we can't see it anymore with this plugin.
    It wouldn't be a problem if that thing wasn't visible on other regular enemies (in the event of a fight mixing normal sprites and this).

    So far there is no way to turn this blinking thing OFF, we have an option close to that in Yanfly Core Engine, but this is just to make the blinking effect look bright all the time when selecting a target. Maybe we could ask for an option to really get rid of it.
    …Or maybe it’s possible for you to fix that in your plugin. Excellent work by the way!!
    (You say the code in the JS folder is under MIT license, what about your plugin? Simply put, is everything OK for a commercial game?)
     
    #17
  18. fizzly

    fizzly Veteran Veteran

    Messages:
    394
    Likes Received:
    271
    Location:
    Poland
    First Language:
    Polish
    Primarily Uses:
    N/A
    Woah, really impressive...
     
    #18
  19. TheGreenKel

    TheGreenKel Villager Member

    Messages:
    16
    Likes Received:
    31
    First Language:
    English
    Primarily Uses:
    RMMV
    @KaYsEr Yeah everything is OK to release for a commercial game. As for the blinking select effect, I don't have a plan for changing that yet. Right now, I am doing a collaboration Aekashics and Yanfly to get the plugin very polish for the majority of the people. Until we get to release another version, all new features or changes is on hold.
     
    #19
  20. Cinnamon

    Cinnamon Veteran Veteran

    Messages:
    605
    Likes Received:
    209
    First Language:
    English
    Amazing job!

    Would you happen to know if there's been a similar way to do this for Unity?

    As it is, I think you have to export the animation in *.png which creates a massive filesize.
     
    #20

Share This Page