VsLayeredDisplay - multi image display - bust/character graphics - "ani

じ☆ve冰风

VsLayeredDisplay + 1.2.0
VsRpgDev​

Introduction
This plugin allows you to display and manage multi-layered graphics, such as character displays, scenes, animations etc. It supports plugin commands, scripting, and escape character commands in "Show Text" messages.

This is my first real RPG Maker plugin. I deliberately chose not to look at other similar existing plugins before starting mine because I wanted to see what I could accomplish on my own. I would greatly appreciate constructive feedback, especially regarding user-friendliness


Demo Link (https://cloudd.zapto.org/examples/VsLayeredDisplay/)

Github link
Download (Single File, Plugin only)

Features

• create, modifiy and display multi image displays
  

1. Dependencies​

• Plugin vsrpgdev/VsConvertEscapeCharacters v1.2+
  
• Plugin vsrpgdev/VsUtils v1.2+
  
• Plugin vsrpgdev/VsContainer v1.0+
  

2. Installation​

2.1. fast​

• create a new rpg maker project or choose an existing one.
  
• copy everything from the demo directory into your rpg maker project directory
  be mindfull of what you overwrite if you copy into an existing project
  make sure you dont already have a jsonconfig.json in your project
  

2.2. manual​

• install and activate VsConvertEscapeCharacters from github
  
• install and activate VsUtils from github
  
• install and activate VsContainer from github
  
• Copy VsLayeredDisplay.js into your plugin directory
  
• Activate the Plugin in RPG Maker
  
• make your configuration for the plugin
  
• [Optional] if you want to use vscode IntelliSense also copy VsLayeredDisplay.d.ts and Vs.d.ts into your plugins directory
  Additionally, if you don’t already have one, copy jsconfig.json into you js directory (not the plugin directory).
  to fully use IntelliSense you also ned type files for the rpg maker core files. you can use your own or copy the types folder into your js directory.
  
• [Optional] to get IntelliSense/Autocompletion for VsLayeredDisplayJson.json copy VsLayeredDisplayConfig.schema.json into your data directory and .vscode/settings.json int your root/.vscode/settings.json if you already have a settings.json add these lines\
  

                JSON:       

1. {
2. "fileMatch": ["VsLayeredDisplayJson.json"],
3. "url": "./data/vsLayeredDisplayConfig.schema.json"
4. }

复制代码

3. Configuration​

3.1. Plugin Configuration​

Plugin Configuration link​

---

3.2. Json Configuration​

• data/VsLayeredDisplayJson.json​
  
  

  Json Schema (VsLayeredDisplayConfig.schema.json)​
  
  
  Click to expand...
  
  

  json file containing a list of VsLayeredDisplayConfig configurations
  

4. Usage​

to use LayeredDisplays you ned have

• a VsMultiImageContainer from one or more of theses sources
  
  
  
  • Plugin Configuration Autocreate in scene
    
  • Plugin Configuration Autocreate in window
    
  • (plugin developers) create your own container where you want it to be
    
  
  
• create a new display with an existing or new configuration
  
  
  
  • load configuration from data/VsLayeredDisplayJson.json
    
  • load configuration from Plugin Paramter display configuration
    
  • create a new configuration from one of the plugin or script commands
    
  
  
• move the display to where you want it
  
• set images of the display
  

4.1. RPG Maker Usage​

you can use the plugin via plugin commands, show text commands or via the script command

4.1.1. Plugin Commands​

SelectContainerSource​

Description: Selects which container should be used for drawing.

• Arguments:
  
  
  
  • containerSource (number, default: 0, min: 0, max: 2) - Defines the container source (0: scene, 1: message background, 2: message foreground).
    
  
  

---

ClearDisplays​

Description: Removes all displays.

---

AddDisplay​

Description: Creates a new display (overwrites existing one).

• Arguments:
  
  
  
  • displayId (number, default: 0) - Sprite ID (0 - infinity).
    
  • config (struct<VsLayeredDisplayConfig>) - Display configuration.
    
  
  

---

AddDisplayByName​

Description: Creates a new display with a named config (overwrites existing one).

• Arguments:
  
  
  
  • displayId (number, default: 0) - Sprite ID (0 - infinity).
    
  • configName (string) - Display config name.
    
  
  

---

ChangeMessagePlacement​

Description: Changes the position and size of the message window.

• Arguments:
  
  
  
  • messagePlacement (struct<Rect>) - The new placement configuration.
    
  
  
• Example:
  ChangeMessagePlacement(0.2,-1,0,8,-1)
  
  
  This changes only x and width.
  

---

RemoveDisplay​

Description: Removes a display.

• Arguments:
  
  
  
  • displayId (number, default: 0) - Sprite ID (0 - infinity).
    
  
  

---

EnsureDisplay​

Description: Ensures the display is created with a named config if it does not exist. already existing display remain unchanged

• Arguments:
  
  
  
  • displayId (number, default: 0) - Sprite ID (0 - infinity).
    
  • configName (string) - Config name.
    
  
  

---

SetImage​

Description: Sets an image for a display.

• Arguments:
  
  
  
  • displayId (number, default: 0) - Sprite ID (0 - infinity).
    
  • imageId (number, default: 0) - ID of the subimage (0 is the main image used for scaling).
    
  • bitmap (string) - Bitmap name.
    
  • tileIndex (number, default: 0) - Index from the grid. use 0 for files with no grid/tile
    
  
  

---

SetImages​

Description: Sets multiple images for a display.

• Arguments:
  
  
  
  • displayId (number, default: 0) - Sprite ID (0 - infinity).
    
  • images (struct<ShowDisplay>[]) - List of images to set.
    
  
  

---

SetImagesEx​

Description: Sets multiple images with extended options.

• Arguments:
  
  
  
  • displayId (number, default: 0) - Sprite ID (0 - infinity).
    
  • configName (string) - Image config name.
    
  • images (struct<ShowDisplay>[], default: []) - List of images to set.
    
  • flipped (boolean, default: false) - Whether to flip the image.
    
  • opacity (number, default: 255, min: 0, max: 255) - Opacity level.
    
  • colorTone (struct, default: {"r":0,"g":0,"b":0,"gray":0}) - Color tone configuration.
    
  
  

---

DrawBitmaps​

Description: redraws the bitmaps for a display

• Arguments:
  
  
  
  • displayId (number, default: 0) - Sprite ID (0 - infinity).
    
  
  

---

ShowDisplay​

Description: Shows a display.

• Arguments:
  
  
  
  • displayId (number, default: 0) - Sprite ID (0 - infinity).
    
  
  

---

HideDisplay​

Description: Hides a display.

• Arguments:
  
  
  
  • displayId (number, default: 0) - Sprite ID (0 - infinity).
    
  
  

---

FlipDisplay​

Description: Flips a display.

• Arguments:
  
  
  
  • displayId (number, default: 0) - Sprite ID (0 - infinity).
    
  • flipped (boolean, default: false) - Whether to flip the display.
    
  
  

---

SetSmoothScaling​

Description: Enables or disables smooth scaling for a display.

• Arguments:
  
  
  
  • displayId (number, default: 0) - Sprite ID (0 - infinity).
    
  • SmoothScaling (boolean, default: false) - Enable or disable smooth scaling.
    
  
  

---

SetDisplayOpacity​

Description: Sets the opacity of a display.

• Arguments:
  
  
  
  • displayId (number, default: 0) - Sprite ID (0 - infinity).
    
  • opacity (number, default: 255) - Opacity level.
    
  
  

---

SetDisplayColorTone​

Description: Sets the color tone for a display.

• Arguments:
  
  
  
  • displayId (number, default: 0) - Sprite ID (0 - infinity).
    
  • colorTone (struct) - Color tone configuration.
    
  
  

---

MoveToDisplay​

Description: Moves an object to a display.

• Arguments:
  
  
  
  • displayId (number, default: 0) - Sprite ID.
    
  • x (number, default: 0, min: 0, decimals: 6) - X coordinate.
    
  • y (number, default: 0, min: 0, decimals: 6) - Y coordinate.
    
  
  

---

MoveDisplay​

Description: Moves a display.

• Arguments:
  
  
  
  • displayId (number, default: 0) - Sprite ID.
    
  • x (number, default: 0, min: 0, decimals: 6) - X coordinate.
    
  • y (number, default: 0, min: 0, decimals: 6) - Y coordinate.
    
  
  

---

SubImageMove​

Description: Moves a sub image.

• Arguments:
  
  
  
  • displayId (number, default: 0) - Sprite ID.
    
  • imageId (number, default: 0) - sub image ID
    
  • x (number, default: 0, min: 0, decimals: 6) - X coordinate.
    
  • y (number, default: 0, min: 0, decimals: 6) - Y coordinate.
    
  
  

---

SubImageMoveTo​

Description: moves a sub image to

• Arguments:
  
  
  
  • displayId (number, default: 0) - Sprite ID.
    
  • imageId (number, default: 0) - sub image ID
    
  • x (number, default: 0, min: 0, decimals: 6) - X coordinate.
    
  • y (number, default: 0, min: 0, decimals: 6) - Y coordinate.
    
  
  

---

SubImageResize​

Description: resizes a sub image

• Arguments:
  
  
  
  • displayId (number, default: 0) - Sprite ID.
    
  • imageId (number, default: 0) - sub image ID
    
  • width (number, default: 0, min: 0) - width
    
  • height (number, default: 0, min: 0) - height
    
  
  

---

RotateDisplay​

Description: Rotates a display.

• Arguments:
  
  
  
  • displayId (number, default: 0) - Sprite ID.
    
  • degrees (number) - Rotation angle in degrees.
    
  
  

---

ResizeDisplay​

Description: Resizes a display.

• Arguments:
  
  
  
  • displayId (number, default: 0) - Sprite ID.
    
  • w (number, default: 0, min: 0, decimals: 6) - Width.
    
  • h (number, default: 0, min: 0, decimals: 6) - Height.
    
  
  

---

SetPivot​

Description: Sets the pivot point of a display.

• Arguments:
  
  
  
  • displayId (number, default: 0) - Sprite ID.
    
  • x (number, default: 0, min: 0, max: 1, decimals: 6) - X pivot point.
    
  • y (number, default: 0, min: 0, max: 1, decimals: 6) - Y pivot point.
    
  
  

---

4.1.2. Show Text Commands​

you can also use layere displays in show text commands through escape characters if enabled the escaped character can be selection in the plugin configuration, default is B paramters ar marked with <>, [] arguments are optional

\B[<source-id>] - select container source​

Description: selects which container is the target for your display commands.

• Arguments:
  
  
  
  • <source-id> (0: scene, 1: message background, 2: message foreground).
    
  
  
• examples: \B[0] \B[1] \B[2]
  

---

\B[!<display-id>] - remove display​

Description: removes a display

• Arguments:
  
  
  
  • <display-id> id of the display
    
  
  
• examples: \B[!0] \B[!1] \B[!2]
  

---

\B[.<display-id>] - hide display​

Description: hides a display

• Arguments:
  
  
  
  • <display-id> id of the display
    
  
  
• examples: \B[.0] \B[.1] \B[.2]
  

---

\B[+<display-id>] - show display​

Description: hides a display

• Arguments:
  
  
  
  • <display-id> id of the display
    
  
  
• examples: \B[+0] \B[+1] \B[+2]
  

---

\B[<display-id>,<display-visible>] - hide display or show display​

Description: sets visibility of a display

• Arguments:
  
  
  
  • <display-id> id of the display
    
  • <display-visible> true/false (show/hide display)
    
  
  
• examples: \B[0,true] \B[1,false] \B[2,true]
  

---

\B[<display-id>,<images>] - sets images​

Description: sets images

• Arguments:
  
  
  
  • <display-id> id of the display
    
  • <images> ':' sperated list of image id and bitmap pairs (0:image1:1:image2:3:image3) you can leave bitmap empty to clear an image
    
  
  
• examples: \B[0,0:body:1:face] \B[1,1:face:3
  ] \B[2,0::1:face] \B[2,1::2::3:clothing]
  

---

\B[M<display-id>,<x>,<y>] - move display​

Description: move display by

• Arguments:
  
  
  
  • <display-id> id of the display
    
  • <x> ':' x alter x coordinate by x
    
  • <y> ':' y alter y coordinate by x
    
  
  
• examples: \B[M0,0.2,0] \B[M1,0.3,0.5]``\B[M1,0.0,0.25]
  

---

\B[T<display-id>,<x>,<y>] - move to display​

Description: move display to

• Arguments:
  
  
  
  • <display-id> id of the display
    
  • <x> ':' new x coordinate by x
    
  • <y> ':' new y coordinate by x
    
  
  
• examples: \B[T0,0.2,0] \B[T1,0.3,0.5]``\B[T1,0.0,0.25]
  

---

\B[R<display-id>,<w>,<h>] - resize display​

Description: resize display

• Arguments:
  
  
  
  • <display-id> id of the display
    
  • <w> ':' new width
    
  • <h> ':' new height
    
  
  
• examples: \B[R0,0.2,0] \B[R1,0.3,0.5]``\B[R1,0.0,0.25]
  

---

\B[<display-id>,<display-config>,<images>,[flip],[opacity],[color-tone]] - set images ex​

Description:ensures the display is created with config sets iamages, flip,opacity and color tone

• Arguments:
  
  
  
  • <display-id> id of the display
    
  • <display-config> configuration name
    
  • <images> see \B[R<display-id>,<w>,<h>]
    
  • <flip> true/false should display be flipped
    
  • <opacity> 0-255 opacity of the display
    
  • <color-tone> red:green:blue:grey color tone of the display
    
  
  
• examples:
  
  
  
  • \B[0,my-config,0,0:body:1:face] select display 0, ensure my-config, set image 0 to body and 1 to face
    
  • \B[0,my-config,0,0:body:2
    ,true] select display 0, ensure my-config, set image 0 to body and 2 to beard, set flip to true
    
  • \B[1,my-config,0,2
    ,,120] select display 1, ensure my-config, set image 2 to beard, set opacity to 120
    
  • \B[1,my-config,0,2
    ,false,210,10:0:0:0] select display 1, ensure my-config, set image 2 to beard,set flip to false set opacity to 210 , set color tone
    
  • \B[0,,,,,10:0:0:0] select display 0, set color tone
    
  • \B[3,,,,155] select display 3, set opacity to 155
    
  
  

---

4.2 Plugin Development & Scripting​

for developer infos look at the typescript files (.d.ts) or the included custom-layered-display plugin

6. How does the plugin work​

the plugin creates two new DisplayObject (VsMultiImageContainer and VsLayeredDisplayContainer) which handle all the image operations. depending of your configuration these Objects gets inserted into every Scene or Message Window. For every new Display a new bitmap gets created (the same size as the main image) on which the main image and all sub images gets drawn to. These bitmap can now with the help of the plugin commands be changed, sized, moved etc on the scene.

7. Changes to the core script​

here you can look for possible conflicts with other plugins which change the same files

• rmmz_windows.js​
  
  
  
  
  • Window_Message​
    
    
    
    
    • updatePlacement​
      
      method override, orignal gets called
      method gets overidden to update the VsMultiImageContainer position and size to fit the message window
      
    • _createAllParts​
      
      method override, orignal gets called
      add an instance of VsMultiImageContainer to the window
      
    • _createContainer​
      
      method override, orignal gets called
      add an instance of VsMultiImageContainer to the window
      
    
    
  
  
• rmmz_managers.js​
  
  
  
  
  • DataManager​
    
    
    
    
    • _databaseFiles​
      
      entry added to the list
      VsLayeredDisplayJson.json get added to the loading list of the DataManager
      
    • DataManager_onXhrError​
      
      method override, orignal gets called VsLayeredDisplayJson.json missing file error gets ignored
      
    • DataManager_onXhrLoad​
      
      method override, orignal gets called
      update the VsLayeredDisplayConfig from the json file
      
    
    
  
  
• rmmz_sprites.js​
  
  
  
  
  • Spriteset_Base​
    
    
    
    
    • createPictures method override, orignal gets called
      add an instance of VsMultiImageContainer to the scene
      
    
    
  
  

8. Updates​

Spoiler: Update History

Spoiler: Version 1.2.0

• Add Plugin Paramter: DrawInUpdate
  
• reworked redrawing of bitmaps to prevent not needed redraws
  

Spoiler: Version 1.1.0[quote]

• Add Methods: SubImageMove,SubImageMoveTo and SubImageResize
  

[/quote]9. Troubleshooting​

for more information go to Github or ask me directly
10. Disclaimer​

stable diffusion was used to create the images for the example project.
11. License​

Terms and Credits
VsLayeredDisplay is marked with CC0 1.0 Universal. To view a copy of this license, visit https://creativecommons.org/publicdomain/zero/1.0/
This plugin can be used in any project, commercial or otherwise. no credit needed.


本贴来自国际rpgmaker官方论坛作者:VsRpgDev处,因国际论坛即将永久关站,为了存档多年珍贵资料,署名转载到本论坛存档,由于官方帖子为英文原帖，需要中文翻译请点击论坛顶部切换语言为中文就可以将帖子翻译成中文浏览,方便大家随时查看,原文地址：https://forums.rpgmakerweb.com/threads/vslayereddisplay-multi-image-display-bust-character-graphics-animated-scenes.175102/