Jump to content
AJNR

Variable Bars (On Map)

Recommended Posts

Variable Bars

Gauges/Bars controlled by Variables that display in the map

 

1.0 Simple Horizontal Gauge

2.0 Advanced Horizontal Gauge

3.0 Simple Vertical Gauge

4.0 Advanced Vertical Gauge

5.0 Links and Resources

 


 

1.0 Version A (Simple Horizontal Gauge)

 

This will allow you to create bars that will initially move from left to right ( --> ) within the Game's Map through use of Variables.

Difficulty: difficulty.pngdifficulty.pngdifficulty0.pngdifficulty0.pngdifficulty0.png

 

1.1 Requirements

 

7 Variables, 1 Switch, 2 Images: 1 Bar, 1 Background Bar (Refer to 5.0 for Images)

 

1.2 Instructions

 

 

-2. Create the Master Switch that will enable the display and process of the Gauge (In this example, it will be Switch 50)

 

-1. Set up your Variables, all 7 of them:

  • Current Timer - The Value of the current Time (Example's Variable ID is 21)
  • Limit Timer - The Maximum Value of the Timer (Example's Variable ID is 22)
  • Timer Bar X - The X Coordinate of the Timer's Bar (Example's Variable ID is 23)
  • Timer Bar Y - The Y Coordinate of the Timer's Bar (Example's Variable ID is 24)
  • Timer BG X - The X Coordinate of the Timer's Background (Example's Variable ID is 26)
  • Timer BG Y - The Y Coordinate of the Timer's Background (Example's Variable ID is 27)
  • Timer Rate - The Rate of the Timer's Bar (Example's Variable ID is 38)

0. Create the Common Event that will hold the Event for the Timer

 

1. Create the Conditional Branch inside the Common Event checking if the Current Timer is (equal to or) greater than the

Timer Limit

 

2. Inside the "True" Segment of the Conditional Branch, you will enter the result of the Timer being complete along with

resetting all Variables back to the value 0.

 

With the past 4 instructions complete, your Common Event should look something like this:

image.png

 

3. Now we start with the "False" Segment of the Conditional Branch. The first thing to take precedence is to increase the

"Current Timer" Value by 1. Then control the "Timer Bar X" Variable with the following Script Operand:

Graphics.width - 200 

Where the "200" of "Graphics.width - 200" is the width of the image itself, the image in this example is 200 pixels wide.

 

4. Now we will create the formula for the more complex mathematical equation for setting where the bar will slide to (the

increasing and decreasing of the timer bar). Control the "Timer Rate" Variable by setting it's Value to "1". Then use

the Script Call command to insert the following:

$game_variables[38] += $game_variables[21] / 
$game_variables[22].to_f 

This will increase the Timer Rate's Value by the percentage of the Time left starting at 1.00

 

5. You will now multiply "Timer Bar X" Variable by "Timer Rate", then you will set the Bar's Y with the "Timer Bar Y" Variable. In

this example, it will be 20.

 

6. Control Variables "Timer BG X" and "BG Y" the same way you did for "Timer Bar X" and "Timer Bar Y". But do not involve it

with "Timer Rate" Variable and do not set it to equal "Timer Bar X" and "Timer Bar Y"

 

With the past 3 instruction completed, the "Else" of your Conditional Branch will look something like this:

image.png

 

 

7. Now you will start using the "Move Picture" Command, you will need to use 2 of these for the simple version of this Evented

System. It goes as follows:

  • Number +0 - Background Bar (Example's Number is 35)
  • Number +1 - Timer Bar (Example's Number is 36)

8. Using the "Move Picture" Command, you will set coordinates based upon Variables like so:

 

image.png

 

9. Now that you have the "Move Picture" Commands in use, you will need to go back to the true segment and insert the "Remove Picture" Commands with the corresponding numbers. It will look something like this:

 

image.png

 

10. We never used the "Show Picture" Command. But we will with the Event that starts this Common Event. You can use initialize

the Event as a Switch if you please. But you will need to start by setting the "Limit Timer" Variable and Show Pictures. The following is an Event that acts as a Switch and let's the Player input the Limit Value:

image.png

 

Notice that the Coordinates are set to 344 and 20. 344 is set because the Graphics.width of this (Vanilla) Project is 544 minus the Bar's width, which is 200 (544 - 200 = 344) along with the Y of 20 which is static. This is because the X and Y Coordinates are calculated after the Event is started, not before.

 

11. Test it and it will start as a Simple Gauge (tested in Vanilla Project).

 

 

1.3 Right to Left Variant ( <-- )

 

 

 

1, Follow the instructions from Section 1.2

 

2. Insert a Control Variable for Limit Timer that multiplies by negative 1 (-1) above the Conditional Branch

 

3. Change the Conditional Branch from (equal to or) Greater than to Less than ( < )

 

4. Change the Control Variable of "Current Timer" to be subtracted by 1 instead of added

 

5. Copy the Control Variable for Limit Timer that multiplies by -1 into the first line of the "Else" Segment

 

6. Change the Timer Bar X from "Graphics.width - 200" to "200"

 

7. Insert Control Variable for Timer Bar X, after it is multiplied by Timer Rate, to be subtracted by 200

 

8. Set "Timer BG X" Variable from "Graphics.width - 200" to "0"

 

image.png

 

9. In the Event that starts the Common Event, Insert a Control Variable as the first line of activating the Common Event

(Before Turning the Switch On) that sets Current Timer to Limit Timer. Make sure you have set the Limit Timer

before this.

 

10. In the Event that starts the Common Event, change the X coordinate in both Show Pictures to 0 instead of 344

(instead of 440 when using Yanfly Core)

 

image.png

 

11. Test it and it will start as a Simple Gauge on the left side of the screen (tested in Vanilla Project)

 

 

 


 

2.0 Version B (Advanced Horizontal Gauge)

 

This will allow you to create a more advanced bar that will initially start from left to right ( --> ) within the Game's Map

through use of Variables. This comes with additional features such as: Penalty Value, an extended cursor, a Shake

Effect, a Glow Effect, and Return Teleport effect.

 

Difficulty: difficulty.pngdifficulty.pngdifficulty.pngdifficulty.pngdifficulty0.png

 

2.1 Requirements

 

18 Variables, 1 Switch, 4 Images: 1 Bar, 1 Background, 1 Cursor, 1 Penalty

 

2.2 Instructions

 

Postponed to 00:00 EST on January 17

 

2.3 Right to Left Variant ( <-- )

 

Postponed to 00:00 EST on January 17

 


 

3.0 Version C (Simple Vertical Gauge)

 

This will allow you to create a more advanced bar that will initially start from bottom to top ( ^ ) within the Game's Map

through use of Variables.

 

3.1 Requirements

 

7 Variables, 1 Switch, 2 Images: 1 Bar, 1 Background

 

3.2 Instructions

 

Postponed to 00:00 EST on January 17

 

3.3 Right to Left Variant ( <-- )

 

Postponed to 00:00 EST on January 17

 


 

4.0 Version B (Advanced Veritical Gauge)

 

This will allow you to create a more advanced bar that will initially start from left to right ( --> ) within the Game's Map

through use of Variables. This comes with additional features such as: Penalty Value, an extended cursor, a Shake

Effect, a Glow Effect, and Return Teleport effect.

 

4.1 Requirements

 

18 Variables, 1 Switch, 4 Images: 1 Bar, 1 Background, 1 Cursor, 1 Penalty

 

4.2 Instructions

 

Postponed to 00:00 EST on January 17

 

4.3 Right to Left Variant ( <-- )

 

Postponed to 00:00 EST on January 17

 


 

5.0 Links and Resources

 

Section for default images and a vanilla project containing the current event version

 

5.1 Images

 

"Timer Bar"          Timer_Bar.png

"Timer BG Bar"    Timer_BG.png

"Timer Penalty"    Timer_Penalty.png

"Timer Cursor"    Timer_Cursor.png << Right Click "Save Image as..."

5.2 Vanilla Project

 

Vanilla Project (Contains Simple Bar, Simple Variant Bar, and Advanced Bar)

Does not contain Vertical Bars, Will be updated by 23:59 EST on January 15

 

5.3 Completion

 

 

Upon completion, your Variable Bars should look something like this:

 

image.png

 

image.png

 

image.png

 


Edited by AJNR

Share this post


Link to post
Share on other sites

Your content will need to be approved by a moderator

Guest
You are commenting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×