Eventing Tutorial for Creating custom Text Windows

じ☆ve冰风

The reason for this tutorial is because i can't find any good script around that actually do what I want and how I want the windows to be displayed on screen. Those "pop up windows" scripts that can be found out there are pretty stiff and almost all of them doesn't allow the user to interact with the message boxes/windows, this means they are all turned off automatically on a timer.

So... Here's a tutorial for those who wish to create a window/windows with text/icons/faces/pictures in it and want to position and size the windows to their likings on the screen using only eventing.

Most will be wondering how is it possible to do this with only eventing. Well, we will be using the "script call" method here.

And NO, we don't need to install any scripts to do this.


The lines we will be using are really few and easy. We will be creating 3 separate script calls in this case so we get more "spacing" to add our text part.

Quick Example to make a text window:

SpoilerThese 3 script calls are all you need to make a text window













Quick Example to make message display with face, icon and name:

SpoilerEvent page:

Top script call:



Bottom script call:







How to use script calls

Spoiler1st, create a new event (double click on the map).

Next, create a new command (double click on the new event's page),

Then, go to the last tab and find the button with "Script..." on it.

Finally, click that and a new window will be opened, this allows you to type in script calls.
 






Creating Windows

SpoilerIn the 1st part of the script call, type in this:
@win = Window_Base.new(X,Y,Width,Length)@win.z = number #optional@win.opacity = number #optionalAnd that's all for the 1st part.


 
@win allows you to create one window, if you wish to make more, add a new line with @win2 = (the rest is the same), @win3 and so on..
X is the X position(number) on screen
Y is the Y position on screen
Width and Length is the size of the window box.

the below are optional, you don't have to type them in if you are not using their functions:

@win.z allows you to set the display layer of the window. this is useful when you have more than 1 windows and want to display one above another.

@win.opacity allows you to control the opacity of the window. 0 = fully transparent. useful if you want to display text/picture without the window frame.







 
 
In the 2nd part of the script call, type in this:
Spoiler@text = "Your Text Line 1Your Text Line 2Your Text Line 3and so on, or until you fill the message box"@text will be use in @win later, if you add @win2 and so on, add a complete new script call with @text2 = "your text" and so on..



If one script call isn't enough for you to add all your text, you can add a new script call and type in this:

@text += "Extra Text"

Text(escape) commands should works the same as your normal message box but you will need to add an extra \ to it.
eg. \\V[1] for Variable 1, \\C[0] for Colour 1, \\I[12] for Icon 12.

That's all for part 2.



 
 
In the 3rd part of the script call, type in this:
SpoilerFont.default_name = ["Your Custom Font Name"] #optionalFont.default_size = number #optional@win.draw_text_ex(X,Y,@text)And that's all for part 3.

For those adding @text2 and so on, make sure you add a new line with @win2.draw_text_ex(X,Y,@text2) and so on.
X and Y is the position of the text inside the window. @text is the part where you pre-typed in the script call above. You can add @text2 and so on in the same window but different position too. It's all up to your own design skill.    

eg. @win.draw_text_ex(X,Y,@text2)



If you use custom fonts in other parts of the game(eg, menu), add that first 2 lines to the script,

if not, you can ignore them (don't type them in)

Continue here if you use custom font:

Font.default_name allows you to set the font type in the window.

Font.default_size allows you to set the font size in the window.

To display different font and text in the same window, all you need is to have a separate @text, @text2.

then set the font/size before each draw_text_ex

eg.

Font.default_name = ["Font Name 1"]Font.default_size = 48@win.draw_text_ex(X,Y,@text)Font.default_name = ["Font Name 2"]Font.default_size = 24@win.draw_text_ex(X,Y,@text2)If you are using other size and font in the window, remember to set the font and size back to default after your last draw_text_ex

Just add new font change lines below the last draw_text_ex will do.

Font.default_name = ["Your Custom Font Name"]Font.default_size = number





That's all for the create windows part.
 
The windows will stay on screen until you do another script call to dispose it or until you re-enter the game.
Note that the windows will not be saved.
 
Players will still be able to move around and do stuffs with the windows showing. (To prevent them from walking around, check extras below for how to use Loop)




Disposing Windows

SpoilerSo, now to the part where we dispose the windows. 
 
Use this script call in your design toclose the windows:

@win.dispose@win closes the 1st windows, if you have more than one, eg @win2, make sure you add those lines too!

and if you use pictures inside the windows(check extras below), make sure you dispose the pictures before closing the windows.




 
If nothing goes wrong, your event editor should look something like this:
SpoilerThis is the example of how the top post picture is done.

(The Japanese part in the picture is Loop+Condition on button pressed, so when player press the C button, the windows are closed)



 
That's all for the Creating/Closing window part! Have fun designing your own unique layouts!



Hide/Show Windows

SpoilerThis is for those who wish to temporary hide/show window without disposing the window/its contents.

to hide the window, use:

@win.hideto show the hidden window, use:

@win.show






Condition Checks

SpoilerCondition checks will allow certain script call to run only when the condition is met. This is useful if you don't want the windows to be created more than once. Or want to ensure the lines only run when the window exist(to prevent crash).

Putting "if @win" behind a line will ensure it to run when @win exist.

@win.draw_text_ex(0,0,@text) if @winPutting "if !@win" behind a line will ensure it to run when @win is NOT exist.

@win=Window_Base.new(0,0,200,200) if !@winThis will ensure the window is created only once, but if you pair this with a dispose window, trying to create the same window again will result in error. So if you are using this check and want to close the window, use hide instead. Check Hide/Show Window above for details.

Putting "if SceneManager.scene_is?(Scene_Map)" behind a line will ensure it to run only in Scene_Map

To make more than one condition checks for a line, use "&&" to join them up.

eg "if SceneManager.scene_is?(Scene_Map) && @win"





Extras: (Pictures, Faces, Key Pressed, Constant Update)

Spoiler[1]For those who wish to use this as a message or show info box, and want to remove it when the player pressed a button. This is how you do it.
 

1st, create a Loop from the event command button, Loop is in 1st page under the Condition button.
Inside loop,
[1]Add Wait(1 frame)
[2]Make a Condition to run when the player pressed a button.(Last tab, 2nd last button)
Inside the condition,
[1]Add the close windows script call
[2]Stop the Loop. (The button below loop in the event command editor)
 
This will stop the player from doing anything else until that button is pressed.



 
 
[2]For those who wish to use this as a temporary pop-up window.
 
SpoilerAdd Wait(the frames you wish the pop-up to wait) after part 3 script call and add the close windows part after that.
 
This will creates a temporary pop-up window.



 
 
[3]For those who wish add pictures to their window.
 
Although the event editor has a way to show picture, i am adding this here in case anyone wish to add a picture INSIDE a window.
I am assuming those that read this has gone through the top 3 parts of the tutorial on how to create a window, so details are not included. 
SpoilerUse this code for picture
win=Window_Base.new(X,Y,Width,Length)@pic=Bitmap.new("Graphics/Pictures/YourPicture.png")@src=Rect.new(0,0,@pic.width,@pic.height)@ret=Rect.new(0,0,@pic.width,@pic.height)@win.contents.stretch_blt(@ret,@pic,@src)@win.opacity = 0
                Code:        

1. @win=Window_Base.new(X,Y,Width,Length)

复制代码

is the same as Part 1 in the tutorial above.

@pic=Bitmap.new("Graphics/Pictures/YourPicture.png")is where you enter the path and name of your picture

@src=Rect.new(0,0,@pic.width,@pic.height)is where you decide the crop size of the bitmap (example above is showing full size)

rect.new(x, y, width, height)bitmap

+---------------------------------------+

|                                                   |

|       x,y                                        |

|        +--------------+width              |

|        |                    |                      |

|        |                    |                      |

|        +--------------+height            |

|                                                   |

+---------------------------------------+

@ret=Rect.new(0,0,@pic.width,@pic.height)is the size to show in the window (you can resize the bitmap to fit the window here)

@win.contents.stretch_blt(@ret,@pic,@src)creates the bitmap and stretch it to fit in the window.

@win.opacity = 0opacity is set to 0 to make the windows behind the picture transparent.


If you are using more than one window/picture. The trick is the same as text.

a new pic should be named pic2, and src2 and ret2, and make sure you change those in the brackets () too.
Make sure you keep everything on the same line.
 

To close the window, check close window in the tutorial above.

And remember to add @pic.dispose to make sure the bitmaps are disposed before you dispose the windows.

eg,

@pic.dispose@win.dispose

For more example of how to crop a certain bitmap. Check this comment here.





For informations to make a mini map, click here.

Spoiler






[3.5]For those who wish add actor's face pictures to their window.

SpoilerAnd to show an actor's picture, skip part 2 and part 3 and use this script call after part 1
win.draw_face("facefilename", index_number, x, y, true)facefilename = the file name you use for face eg, "Actor1"

index_number = the index number of the face file

0 1 2 3

4 5 6 7

x,y is the position you want it in the window, if you want it to start at the top left corner of the window, use 0, 0

true/false in the last part is whether you want it to be semi-transparent. true = no transparent, false = semi-transparent

To show a specific actor's face, try this:

$game_actors[1].face_name in the "filename" area.

$game_actors[1].face_index in the index_number area.

1 means actor with id 1, if you want another actor, simply change 1 to fit the actor's id.

eg

@win = Window_Base.new(0,0,120,120)@win.draw_face($game_actors[1].face_name, $game_actors[1].face_index, 0, 0, true)



[4]For those who wanted a window on the screen that constantly shows info that updates itself. eg,(player's x,y position) or player's current HP

SpoilerI am assuming those that are reading this has gone through the tutorial above and understands how to create your own windows with text in it and know how to create a parallel event.
The trick for this to work is easy, what we need is the basic 3 script call lines from the tutorial above
win=Window_Base.new(X,Y,Width,Length) if !@win@text="\\V[id]" #id is where you put your variable's id@win.draw_text_ex(0,0,@text) if @winThe difference is, we need a new line to clear the windows content before re-drawing it on the screen

@win.contents.clear if @winAnd we will be using a Parallel event + Loop to achieve this.
 
 
To create the updating window:
Have this on the 1st part of the event:

@win=Window_Base.new(X,Y,Width,Length) if !@win 
Below it, create a loop, and inside the loop:

Add a Wait and wait for 1 frame (Without this, all other processes will stop running and you will be stuck in the loop)
Have your event update the variable you used to show in the window.
eg, Variable[1] = Player's HP
And put these lines below it

@win.contents.clear if @win@text="\\V[id]" #id is where you put your variable's id@win.draw_text_ex(0,0,@text) if @winThat's it!
Your event should look something like this if you do it right:
 

 
If you use a parallel event on the map, the windows should go away after the player changes his map. If you use it in a common event, it should stay up all the time until you turn off the parallel process.

To avoid errors, remember to use condition checks on the lines, because if you save/load your game, the windows will be disposed and there's a chance the game tries to dispose a window that doesn't exist or tries to draw text into a window that doesn't exist resulting in error.




 


Possible ideas for this eventing:

Spoiler[1] Creates a pop-up window anywhere you like on the screen
[2] Custom tiny windows on screen to show informations like, sub-currency, character infos, etc.
[3] Large information page with complicated layouts.
[4] Mini Score Counter on screen
[5] Learn skill/Lv Up/Map name pop up.
[6] Fill the screen with message without the message box, good for cut-scene/opening/ending if you don't like the scroll text.[7] Make a mini map window
[8] Imagination's your limit



 
Update Log:

Spoiler01-04-2015 - Added Picture Instruction for those who wish to add pictures to their window
06-04-2015 - Added Informations on how to make an auto-update window13-09-2015 - Added Informations on conditional checks if windows exist or not.

14-09-2015 - Added Informations on how to show actor's face

10-10-2015 - Added Informations on how to crop/resize pictures, Added Mini Map instructions.






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