KC_CompositeBitmaps - Layered Images (Faces, SV Sprites, etc.) + Demo with Paper Doll System

KelIy

Villager
Member
Joined
Jul 8, 2022
Messages
20
Reaction score
31
First Language
English
Primarily Uses
RMMZ
KC_CompositeBitmaps 1.1.0
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, I 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
cmpbitdemosave.png


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
  • 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.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
  • 8/13/2022 - 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
  • 8/8/2022 - 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.
 
Last edited:

KoriCongo

Villager
Member
Joined
Jul 19, 2012
Messages
27
Reaction score
27
First Language
English
Primarily Uses
This is super great!
Quick note: your demo project is in your Trash folder, can't download it from there.
 

KelIy

Villager
Member
Joined
Jul 8, 2022
Messages
20
Reaction score
31
First Language
English
Primarily Uses
RMMZ
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

Veteran
Veteran
Joined
May 10, 2021
Messages
40
Reaction score
63
First Language
Chinese
Primarily Uses
RMMZ
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

未命名.png
未命名1.png
 

otkus

Warper
Member
Joined
Mar 11, 2022
Messages
3
Reaction score
0
First Language
Kin Dza Dza
Primarily Uses
RMMZ

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?
 
Last edited:

KelIy

Villager
Member
Joined
Jul 8, 2022
Messages
20
Reaction score
31
First Language
English
Primarily Uses
RMMZ

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.
Untitled.png
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.
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.
Untitled2.png

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:
eyeset0.pngmouthset0.png

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.
eyewear.png
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

Warper
Member
Joined
Mar 11, 2022
Messages
3
Reaction score
0
First Language
Kin Dza Dza
Primarily Uses
RMMZ
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 :LZSangel:

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! :biggrin:
 

KelIy

Villager
Member
Joined
Jul 8, 2022
Messages
20
Reaction score
31
First Language
English
Primarily Uses
RMMZ
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 :LZSangel:

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! :biggrin:
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.

params_vars.png

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.
editastext.png

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.
 
Last edited:

otkus

Warper
Member
Joined
Mar 11, 2022
Messages
3
Reaction score
0
First Language
Kin Dza Dza
Primarily Uses
RMMZ
Awesome, thanks for both replies!
 

strangedreamer57

Villager
Member
Joined
May 6, 2019
Messages
6
Reaction score
1
First Language
English
Primarily Uses
RMMZ
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

Villager
Member
Joined
Jul 8, 2022
Messages
20
Reaction score
31
First Language
English
Primarily Uses
RMMZ
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

Villager
Member
Joined
May 6, 2019
Messages
6
Reaction score
1
First Language
English
Primarily Uses
RMMZ
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

Villager
Member
Joined
Aug 13, 2014
Messages
6
Reaction score
3
First Language
English
Primarily Uses
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

Villager
Member
Joined
Jul 8, 2022
Messages
20
Reaction score
31
First Language
English
Primarily Uses
RMMZ
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

Warper
Member
Joined
Oct 15, 2021
Messages
4
Reaction score
0
First Language
eng
Primarily Uses
RMMV
great ! !. character layers can used in events ?

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

KelIy

Villager
Member
Joined
Jul 8, 2022
Messages
20
Reaction score
31
First Language
English
Primarily Uses
RMMZ
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
 

Latest Profile Posts


Clarn Hold
(No storylines)
There was a tutorial on how to draw anime eyes. Just draw Among Us. So I tried.
Screenshot_107.jpg
DamageActor3_7.png added!
index.php

Making a "characters first appearance" drawing for my game. Now I just have to finish the sprite art animation for her grand entrance.​
ScreenShot_9_24_2022_7_56_24.png
New area being started today. It leads to one of the games 2 optional bosses.

Forum statistics

Threads
125,537
Messages
1,171,798
Members
164,608
Latest member
royeventcompany
Top