Posted September 20, 2023 by JayaKun Zone
#Documentation #RPG Maker MV Plugins #Interactive Animation
🍺Hello Everyone :D
Since a long time I wanted to look for a workaround to help me combine animations and interactive scenes with the popular engine of RPG Maker MV.
KunAnimations Plugin allows the user to use pictures as interactive animations and automated behaviors, including randomized chained animations and events.
ℹ There are great sprite animation editors such as ASEPRITE or LIBRESPRITE to create your own animated pictures, but you may even use your DAZ rendered animations to build your frames.
It's as easy as export the spritesheets and place them in the img/pictures folder so you can open KunAnimations plugin to create a scene for such picture.
⭐Install and Setup
As any RPG Maker MV/MZ plugin, just place KunAnimations.js in the js/plugins folder, then add it from RPG Maker MV Plugin Manager.
Be sure to set the status to ON (Activated)
ℹ Remember to install and activate KunSoundBanks plugin if you wish to enable the animation sound effects.
⭐Main Setup
⭐Add an Animation Scene (Animation Controller)
Animations are binded to Pictures. You may setup the animated pictures just like other picture in the game while the animation engine will play seamessly the logics aside from the plugin with this configuration.
Each Picture in the list will load a number of frames and layers or framesets to animate. By defaut, the first frameset defined in the list will be the first animation to play when loading the picture.
⭐Create an Animation Layer (FrameSet)
⭐Make an animation interactive I - Adding TouchSpots
Each Layer or FrameSet may contain a specific range of hotspots to interact with, each one with its own behaviour.
⭐Add a Sound Bank
A sound Bank will play a random selection from the list of SE, providen a specific set of custom parameters, such as pitch, pan and volume, which will be triggered in specific events of the interaction.
ℹ SoundBanks are now handled with an optional plugin. If the animation finds the SoundBank plugin active, it will request the required sound profile from it.
⭐Make an animation interactive II - Registering Event Hotspots
Now if you have designed and defined your animation logics within the plugin, you may just use the picture event command in any Event Page so you can start playing it 😃
⭐KunAnimations Plugin Commands
Here's the list of commands you can use for your events in RPG Maker MV. Wherever you add a picture which has a scene defined in the plugin setup, it will automatically start playing the first Animation Layer, then you can use these commands to update and change the animations, or even activate the interactive events to allow the plugin move through the logics you've defined for each animation.
⭐Animation Control
▶ KunAnimations set picture-name [animation-layer] [wait] [frames:offset-random-frames]
▶ KunAnimations reset picture-name [replay]
▶ KunAnimations fps picture-name [fps] [import]
▶ KunAnimations pause picture-name
▶ KunAnimations resume picture-name
▶ KunAnimations wait [frames:elapsed-frames]
⭐ Interactive Control
KunAnimations mode [ capture | touch | disabled ]
KunAnimations target [random]
KunAnimations alias [alias-name] [picture-name]
You may want to swap pictures in the event editor eventually while playing an animated scene. If you want to create different animation variations you could simply import 2 or more pictures with the same attributes, width, height, columns and rows, so you could change them as you need to progress with the scene. With an alias you can ease the use of the plugin commands registering with this option the current picture-name being played, which you may want to define close to the call of the show picture event on the event editor. This option will prevent you to attach more logics in the event editor and keep the scene clean and under control 😉
KunAnimations clear [targets | alias |all ]
Clear all touched spots in the queue and optionally, removes all aliases created for a scene. This is a good practice for the scene when it's about to end, or when you need to setup different stages within the interactive flow.
⭐How to register interactive spots using RPGMAKER MV Scene
Create a common event you can call running the test command (or CTRL+R) in the event editor and fill it with a code to handle the hotspot capture. You may use a code like this:
◆Comment:###################################################### ◆Label:SETUP ◆Show Picture:#2, dominate-alraune-1, Upper Left (300,100), (200%,200%), 255, Normal ◆Comment:use an alias if required to handle it easy ◆Plugin Command:KunAnimations alias alraune dominate-alraune-1 ◆Loop ◆Comment:define a capture timespan so you can define rect areas using mouse drag-drop over a spot ◆Plugin Command:KunAnimations mode capture ◆Wait:400 frames ◆Comment:when the timespan is done, disable capture mode to show an option menu to select next poses ◆Plugin Command:KunAnimations mode disable ◆Show Choices:Idle 1, Idle 2, Idle 3, Quit (Dim, Right, #1, -) :When Idle 1 ◆Comment:if your animation have different hotspots, define pose selection to handle hotspot creation ◆Plugin Command:KunAnimations set alraune idle1 :When Idle 2 ◆Plugin Command:KunAnimations set alraune idle2 :When Idle 3 ◆Plugin Command:KunAnimations set alraune idle3 :When Quit ◆Break Loop :When Cancel :End :Repeat Above ◆Jump to Label:EXIT
ℹ To create a hotspot output, is important to enable debug mode and open the debug console (F12).
Each time you drag over a spot area with the capture mode on, you'll get the coordinate definition in the debug console.
Get those coordinates and fill them in the scene's event hotspots. Hotspot names must be unique.
⭐Preparing the scene
Now with the animation registered in the plugin, anytime you want to add the picture you've added to the animation manager, it will play by default the first animation frameset. If you added more random animations on the next animations to play within the first animation layer, you'll see how the animation jumps to the next one as it completes the loop count and behaviours.
Using animated scenes is easy now and you may change manually in the scene manager by using the KunAnimations command:
KunAnimations set picture-name layer-name
ℹ You may even set a wait pause to watch the animation and pause the event interpreter for a while like this, adding a static number of frames, or even add a random extra offset of frames.
KunAnimations set picture-name layer-name wait 400:100
ℹ Moreover, you can define an alias to name the picture or select among different pictures with the same animation controller, so you don't have to add more logics in your event.
KunAnimations alias my-alias long-tedious-picture-name
KunAnimations set my-alias layer-name wait 400:100
⭐Now, let's prepare the event to play an animated picture!
That will depend on how do you want to handle these animations in the defined Animation Layers of your picture.
You can make them run alone following the rules you defined in the animation setup.
But...
how do you interact with such animations?😵
Interactions are defined in the Animation Layer TouchSpots, remember you were able to define:
The three first options are immediate, no more events required but just place your picture in the event editor, and then keep a loop to run the animation until a defined condition is met in your logics (countdown, game variable amount, switch ... your way)
◆Comment:###################################################### ◆Label:LOOP ◆Show Picture:#2, dominate-alraune-1, Upper Left (300,0), (200%,200%), 255, Normal ◆Plugin Command:KunAnimations mode touch ◆Control Variables:#0014 COUNT_DOWN = Random 10..14 ◆Loop ◆If:_TOUCH_STAGE < 2 ◆If:DOMINATION_POINTS ≥ DOMINATION_LEVEL ◆Jump to Label:UPDATE ◆ :End :End ◆If:COUNT_DOWN > 0 ◆Control Variables:#0014 COUNT_DOWN -= 1 :Else ◆Break Loop :End ◆Wait:60 frames :Repeat Above ◆Jump to Label:OPTIONS
The queue one is a bit more tricky though.
If you want to gain the control of what happens on the clicked hotspot, you need to handle the queue method with the target plugin command:
KunAnimations target
Use the random option to get randomly one of the clicked spots available in the queue:
KunAnimations target random
Then, you may need to create an specific logic in the Event Editor to handle such queue, which you may want to use, for example, to move another picture over the touched hotspot, just like a cursor.
Here is an approach:
◆Comment:###################################################### ◆Label:LOOP ◆Play SE:Recovery (90, 80, 0) ◆Plugin Command:KunNotifier Tickle her!!! ◆Plugin Command:KunAnimations mode touch ◆Control Variables:#0014 COUNT_DOWN = Random 4..8 ◆Loop ◆If:_TOUCH_GAUGE > 0 ◆Jump to Label:TOUCH ◆ :End ◆Wait:40 frames ◆If:COUNT_DOWN > 0 ◆Control Variables:#0014 COUNT_DOWN -= 1 ◆ :Else ◆Break Loop ◆ :End ◆ :Repeat Above ◆Jump to Label:OPTIONS
ℹ This code will watch for the value of _TOUCH_GAUGE variable, which is the Touch Counter Game Variable we define in the KunAnimations main setup. This variable is handled by the animation controller to count the interactive spots touched in the queue, and will be updated every time you call the target command described above.
When there's a spot in the queue, the event interpreter will jump to the TOUCH label, so it will resume with a code block like this:
◆Comment:###################################################### ◆Label:TOUCH ◆If:_TOUCH_GAUGE > 2 ◆Comment:get a random spot from the list ◆Plugin Command:KunAnimations target random ◆ :Else ◆Comment:get the first spot in the queue list ◆Plugin Command:KunAnimations target ◆ :End ◆Comment:POSX and POSY coordinates will be filled by the target command ◆Show Picture:#6, _cursortest, Upper Left ({POSX},{POSY}), (100%,100%), 255, Normal ◆If:SCORE ≥ LEVEL ◆Comment:if there are enough points to change or complete the scene we'll move to another block ◆Jump to Label:UPDATE ◆ :End ◆If:_TOUCH_GAUGE > 0 ◆Comment:if there are yet some spots in the queue, let's try it again ◆Jump to Label:TOUCH ◆ :End ◆Comment:once there are no more spots in the queue, let's just go back to the loop block ◆Jump to Label:LOOP
What's going on here?
From here' the options you can handle to create your own animated and interactive scenes are endless... 😉
It will depend on how to plan the touch events and the animation layer hierarchy, so you can build more living and interactive animations!
⭐ KunAnimationPacks
What happens when you want to add tons of animations to your game? Well, it's unpredictable, but it often may blow up something.
I had some issues and CTD in RPG Maker MV when attempting to register many animations in my projects, because several of these were complex interactive animations with lots of framesets. I like to live to the limit! 💪🏼
ℹ KunAnimationPacks is an extension of KunAnimations which will allow you to register more and more animations and interactive animations separated in collections.
When this plugin is active, KunAnimations will attempt to read all animation collections in, just like they were defined in the source KunAnimations plugin.
This way I was able to fix my CTD issues when too many interactive scenes. Maybe it would be handy for you too 😄
😄Feel free to give feedback or comment below for any question or bug you may find.