VsLayeredDisplay - multi image display - bust/character graphics - "ani
VsLayeredDisplay + 1.2.0VsRpgDev
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
[*] 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.
[*] 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:
{
"fileMatch": ["VsLayeredDisplayJson.json"],
"url": "./data/vsLayeredDisplayConfig.schema.json"
}
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 \B \B
\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 \B \B
\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 \B[1,1:face:3
] \B \B
\B - 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 \B``\B
\B - 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 \B``\B
\B - resize display
Description: resize display
[*]Arguments:
[*]<display-id> id of the display
[*]<w> ':' new width
[*]<h> ':' new height
[*]examples: \B \B``\B
\B[<display-id>,<display-config>,<images>,,,] - 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
[*]<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 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 select display 0, set color tone
[*]\B 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 HistorySpoiler: Version 1.2.0
[*]Add Plugin Paramter: DrawInUpdate
[*]reworked redrawing of bitmaps to prevent not needed redraws
Spoiler: Version 1.1.0
[*]Add Methods: SubImageMove,SubImageMoveTo and SubImageResize
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/
页:
[1]