KC_CompositeBitmaps - Layered Images (Faces, Sprites, Pictures, etc.)

[KelIy]

KC_CompositeBitmaps 1.1.1
by Kelly Chavez​

Introduction
Hello. Today, I am releasing a plugin that I've been developing on-and-off since March or April of this year. The long and short of this plugin is that it lets the developer dynamically build graphics on the fly by layering them. I originally built this to use for a "paper doll" (character customization) system in a personal project, so the included demo is a simplified version of that system that I pulled from said project.

Features
Basically, this plugin allows the developer to replace top view character files, side view actor files, face files, and picture files with layered ones that are generated via plugin commands. These new images are built from existing ones in their respective directories.

This plugin works by substituting existing image files with composite bitmaps. These substituted files are known as proxies. So, if the proxy file's name is Actor1.png, for example, whenever the game tries to load Actor1.png, the composite bitmap will be returned instead.

For convenience, the developer can also set up composite bitmaps that are created upon a new game being started. This feature is used to set up the main character's sprite set in the demo.

Additionally, this plugin can be used to generate emote sets from faces without the need to have many duplicate art assets in your games folder. This is done by designating "static" face parts, and these static parts are copied to every slot in the resultant composite bitmap. So, it is possible to, for example, keep all of your clothes in a single file, which can make organizing your art assets easier if you choose to use this feature. Look at the demo to see this feature in action.

Example Media

Spoiler: Screenshots

How to Use
To use, download and place this plugin below PluginCommonBase and PluginBaseFunction in your plugin manager and enable it. From there, follow the instructions in the help section of the plugin and the descriptions of each command.

Plugin Commands

Spoiler: Plugin Commands

• Add Face Layers
  • Replaces a face file with a composite bitmap or adds new layers onto an existing composite bitmap
• Remove All Face Layers
  • Removes the composite bitmap and allow the proxy filename to be loaded normally
• Add Top View Character Layers
  • Replaces the character at a particular index in a top view character image with a character built on a composite bitmap or adds layers onto an existing composite bitmap
• Remove All TV Character Layers
  • Removes the composite bitmap currently replacing the proxy file and allows the proxy file to load normally
• Add SV Character Layers
  • Replace a side view actor image with a composite bitmap or add onto an existing composite bitmap
• Remove all SV Layers
  • Remove the composite bitmap replacing the proxy file and allow the proxied filename to be loaded normally
• Add Picture Layers
  • Replace a picture with a composite bitmap or add onto an existing composite bitmap
• Remove All Picture Layers
  • Remove the composite bitmap associated with the proxy filename and allow the proxied name to be loaded normally
• Save Graphic
  • Debug feature that dumps bitmaps to local storage, also dumps composites

Demo
Current Version (1.1.1) - Google Drive
Old Version (1.1.0) - Google Drive
Old Version (1.0.0) - Google Drive

Download
GitHub (Right-click 'Raw' and select 'Save link as...')

Known Issues

• This plugin does not play well with custom save screens. This is due to the way RPG Maker MZ handles saving, loading, and displaying the actors' images on the save file screen. Your game will not crash, but any images using composite bitmaps will likely not be properly displayed without a manual compatibility patch for this plugin. My apologies.
• "Exclude Unused Files" on deployment does not take into account files called in the plugin commands. I cannot figure out why this occurs, but I will release an update if I find the cause.

Changelog

Spoiler: Changelog

• 2023/04/19 - v1.1.1
  • Fixed bug where sprites would disappear when this plugin is used with Core Engine VisuStella MZ
  • Plugin image cache is now cleared when ImageManager.clear is called
  • Internal plugin structure updated to be more in-line with current coding practices (this also exposes a few functions that were previously inaccessible)
• 2022/08/13 - v1.1.0
  • Added ability to clear layers with a new parameter in all add layer plugin commands
  • Fixed picture composite bitmap plugin parameters
  • Updated help section to include a small section explaining the use of game variables as plugin command arguments
• 2022/08/08 - v1.0.0
  • Initial release

Terms and Credits
I've released this plugin under the MIT license. So, you can include this plugin in any project as long as you include the license with your distribution. For most projects, this requirement is fulfilled as long as you keep the license text that is at the top of the plugin's js file intact.

Also, though not strictly required, I would appreciate being credited as K. Chavez or Kelly Chavez in your games' credits.

 

[xabileug]

wow, very nice!

 

[KoriCongo]

This is super great!
Quick note: your demo project is in your Trash folder, can't download it from there.

 

[KelIy]

This is super great!
Quick note: your demo project is in your Trash folder, can't download it from there.

I must've forgotten to update the link when I deleted an old version. The right one should be there now. Thanks so much for pointing that out!

 

[sunhihi]

that's amazing !
I have also developed a set of similar
I use equipment to replace parts
The general concept is the same
I bind the fur color to the character
Certain characters will be automatically dyed when equipped with different hairstyles

 

[otkus]

It's Beautiful I've Looked At This For Five Hours Now

“It's Beautiful I've Looked At This For Five Hours Now” is a memorable quote uttered by Tom Haverford (played by Aziz Ansari) from the 20099 TV sitcom Parks and Recreation. The quote is used alongside a still from the scene as a reaction image to an above caption or screenshot, typically when...

knowyourmeme.com

Thanks, this is totally amazing! Why isn't stuff like this included with RMMZ in the first place??

Just a quick question: could you shed some light on what source the generated emote face sets are based on and where I could set/edit those?

 

[KelIy]

It's Beautiful I've Looked At This For Five Hours Now

“It's Beautiful I've Looked At This For Five Hours Now” is a memorable quote uttered by Tom Haverford (played by Aziz Ansari) from the 20099 TV sitcom Parks and Recreation. The quote is used alongside a still from the scene as a reaction image to an above caption or screenshot, typically when...

knowyourmeme.com

Thanks, this is totally amazing! Why isn't stuff like this included with RMMZ in the first place??

Just a quick question: could you shed some light on what source the generated emote face sets are based on and where I could set/edit those?

Emote face sets are based on images in your faces folder. In general, here is how composite faces work:

Firstly, consider the Add Face Layers plugin command. You will see this when you select the command.

Spoiler: Add Face Layers Command

The Proxy File is simply the stand-in face file. For the demo, the proxy face file is named peter.png, and whenever the game wants to draw a face from peter.png, it will instead draw from the composite bitmap. Below, you will see peter.png.

Spoiler: peter.png

Truthfully, it does not matter what is actually in peter.png. It could be completely blank for all the plugin cares. Why use an entire faceset then? This is purely to make my life as the developer easier. You see, I have the demo set up such that, when the composite bitmap is assembled, it is built such that the order of expressions in that composite ends up the same as the one in the proxy. Eyes are closed on the bottom right, the third expression is happy, the second expression is anger, and so on.

So you've chosen a proxy file. Now what? Next, you'll add a layer to your composite by adding a layer to that Layer Images array. Upon clicking through to add another layer, you will eventually be greeted by this window.

Spoiler: Layer Parameter

The source image, as the name implies, is the image that will be drawn from when compiling the composite face bitmap. This image will either be interpreted as "dynamic" or "static". If the index is -1, it is interpreted as dynamic. Otherwise, it is static.

Dynamic images are layered in whole onto the current composite bitmap. Nothing fancy. These are useful for images that change from index to index. For emote sets, this is where you want your mouths, eyebrows, and so on:

Spoiler: Dynamic Face Sets

The other mode of interest is static, where index is 0 or greater. In this mode, the face at the index specified is copied over onto every face slot in the composite bitmap. Consider the following face file.

Spoiler: static face file example

Say we want to add the eyepatch to our emote set. Then, we use this as the source file and set the index value to 3 (remember, the first slot is index 0!). This tells the plugin to copy that eyepatch onto every face in the composite bitmap. This is the basis of how the demo handles most parts of the emote set. The head shape, neck, clothes, accessories, etc. are compiled into organized face files and have their indexes set to which part should be appearing. The dynamic images are set up to match the expressions I wanted to appear in my emote set, and the proxy is more of a guideline; my plugin does not change which index is drawn, only the base image that index is pulled from. So, in the editor, all of my face expressions match the composite bitmaps that are built.

I hope I explained all of that okay. I admit it isn't the most plug-n-play approach.

 

[otkus]

Thanks a lot for the kind explanation! I already was able to understand the process, that's why I like this plugin so much.

For the emote face sheets: I realize now that you are supposed to merge a pre-made png layers that already has all 8 parts of the expressions in place on the sheet, e.g. 8xmouth, 8xeyes. I mistakenly thought you had to define each emotion face seperately in code/text array and I couldn't locate where, hehe. I see that this method also makes sense. Anyway, thanks for explaining.

Anyway, awesome plugin! Is there any way let the plugin functions use variables as source? This would save some time coding/setting up each change of face/sv/tv all at once, e.g. via a common event. Direct script calls to the functions would also work

Also, another small suggestion, maybe make the deletion of the previous used layer the default/implied as this always seems to happen? This would save another line of code/plugin-in function call

Thanks so much for this, this saves me making TONS of tilesheets!

 

[KelIy]

Thanks a lot for the kind explanation! I already was able to understand the process, that's why I like this plugin so much.

For the emote face sheets: I realize now that you are supposed to merge a pre-made png layers that already has all 8 parts of the expressions in place on the sheet, e.g. 8xmouth, 8xeyes. I mistakenly thought you had to define each emotion face seperately in code/text array and I couldn't locate where, hehe. I see that this method also makes sense. Anyway, thanks for explaining.

Anyway, awesome plugin! Is there any way let the plugin functions use variables as source? This would save some time coding/setting up each change of face/sv/tv all at once, e.g. via a common event. Direct script calls to the functions would also work

Also, another small suggestion, maybe make the deletion of the previous used layer the default/implied as this always seems to happen? This would save another line of code/plugin-in function call

Thanks so much for this, this saves me making TONS of tilesheets!

Plugins which use PluginCommonBase's plugin manager, like this one, allow you to use variables in the plugin commands. I actually use this in my private project quite a bit. Though, you do have to edit the parameter as text to access this functionality.



Take this image as an example. As far as this plugin is concerned, if you have a face name in variable 21 and a number in game variable 46, the plugin command will execute as expected.

It's not the most elegant solution, but I do want to keep the GUI intact for this plugin where I can. I'm glad MZ lets the developer directly enter text if they choose.

Also, another small suggestion, maybe make the deletion of the previous used layer the default/implied as this always seems to happen?

Also, regarding your suggestion, that's not a bad idea. To maintain backwards compatibility, I will do this by adding a new parameter to the add layers command that clears old layers if enabled.

 

[otkus]

Awesome, thanks for both replies!

 

[Neptrone]

Amazing stuff...

 

[strangedreamer57]

This is incredible! I've been looking everywhere for something like this! I'm still pretty new to all of this and I'm trying to get visual changes for individual pieces of equipment on equip and unequip. Does anyone know how/have any recommendations on how to do this with each party member/different actors?

 

[KelIy]

This is incredible! I've been looking everywhere for something like this! I'm still pretty new to all of this and I'm trying to get visual changes for individual pieces of equipment on equip and unequip. Does anyone know how/have any recommendations on how to do this with each party member/different actors?

My demo is built around the one player, but in theory, it wouldn’t be too hard to build a system that works with multiple. If I were to do that, my approach would be to have a set of “placeholder” layers for each party member. Then, I’d build a common event that replaces graphics based on equipment ID. I’d build that event such that the layers being overwritten are stored in variable names. Finally, I’d run the common event for each party member, replacing the variable names each time with the respective party member’s placeholder graphics. This could be done entirely with standard editor+event commands, but the equipment ID lookup would be a monster of if-else branches if there’s a lot of equipment hahaha, so for that at least, I’d write some custom code that maps each equipment ID to a set of particular face, TV, and SV graphics, but that would be fairly simple to implement if you have decent a knowledge of JavaScript.

Basically, my system would do something like Get actor ID -> store actor’s placeholder graphics names in variables -> do equipment ID lookup -> store equipment graphics details in variables -> run my graphic replacing common event -> repeat for each remaining party member

Apologies if that sounds somewhat complicated. I’m not great at getting my ideas across.

 

[strangedreamer57]

My demo is built around the one player, but in theory, it wouldn’t be too hard to build a system that works with multiple. If I were to do that, my approach would be to have a set of “placeholder” layers for each party member. Then, I’d build a common event that replaces graphics based on equipment ID. I’d build that event such that the layers being overwritten are stored in variable names. Finally, I’d run the common event for each party member, replacing the variable names each time with the respective party member’s placeholder graphics. This could be done entirely with standard editor+event commands, but the equipment ID lookup would be a monster of if-else branches if there’s a lot of equipment hahaha, so for that at least, I’d write some custom code that maps each equipment ID to a set of particular face, TV, and SV graphics, but that would be fairly simple to implement if you have decent a knowledge of JavaScript.

Basically, my system would do something like Get actor ID -> store actor’s placeholder graphics names in variables -> do equipment ID lookup -> store equipment graphics details in variables -> run my graphic replacing common event -> repeat for each remaining party member

Apologies if that sounds somewhat complicated. I’m not great at getting my ideas across.

Awesome! tbh I have practically no knowledge of Javascript haha. but at the very least I'm encouraged to know that it's possible. Thanks so much for taking the time to reply!

 

[Creiz]

So can we use this with normal pictures? To make something like a paperdoll system? If I want to display character pictures with different layers for clothes, etc?

 

[KelIy]

So can we use this with normal pictures? To make something like a paperdoll system? If I want to display character pictures with different layers for clothes, etc?

Pictures are supported, yes. Use the "Add Picture Layers" and "Remove Picture Layers" commands.

 

[bbvmhh]

great ! !. character layers can used in events ?

or If character switches actions like pick up, layers still work？

 

[KelIy]

great ! !. character layers can used in events ?

or If character switches actions like pick up, layers still work？

Composite bitmaps can be used in all* situations where character images are supported. If you want to switch the character set for different animations, you can. Events and the like are also supported.

*save file list excluded if you’re using a custom one

 

[julbob]

Hi Kelly!

Thanks for the lovely plugin! I really dig the idea of being able to have different layers on top of the player actor!

Though I wouldn't mind a feature where you could add a single image layer to the existing ones by simply activating a switch or a variable... Would that be a feature that's within scope to include?

Have a great day!

 

[KoriCongo]

So is there a method to remove or alter individual layers? It seems a little extreme to constantly rebuild the entire sprite every time you want to change one layer.