Easy “hover” effect for buttons!

Overview

Do not dispair my dudes, there *is* a way to add hover effects over buttons without using CSS, only good ol’ Tyranoscript.

Tiny Introduction

Waddup my desperate dudes, you must be reading this guide because you want to add a nice looking hover effect to your buttons in order to make your project look way, way better, but the ONLY god darn guide out there showing this uses an old CSS method, and even worse, it’s written in horrible English.

Don’t worry. This three-section guide will show you how to add this using only Tyranoscript inside the software, lol.

UPDATED: Now I show you how to make them appear slowly using opacity!

HOW THE HECK DO I DO THIS

Easy fam.
Use this code right here in a Tyranoscript component.

[locate x=662 y=9]

So it looks like this:

Slightly experienced dudes should understand this perfectly, but let’s break it down for ya’ll newb dudes:

[locate x=662 y=9]
This “locate” tag is the localization in the screen of your button. The numbers in x and y can be changed with whatever numbers you want.

– “button graphic” is the button’s original, “idle” image. When the mouse is not over the button, this is the image that will display. Change “button.png” with the image you want. Note that the images must be in the “image” folder inside your project’s folder.
Also, if you have another folder inside the “image” folder specifically for buttons (to keep things organized, which I recommend), it should look something like this:
(The name of the folder, “boto”, can be changed to whatever you want. Do not be afraid to change names).

Inside that folder are your button’s images, right? In that case, your Tyranoscript should look something like this:
(Notice the “boto/button.png”. That’s how you specify the folder your button’s image is).

– “target” is the objective of the button, the “label” it gets you to. In this case, the label I want this button to use is “button_objective”. ALWAYS keep the * sign before the label’s name, it doesn’t work otherwise.

– “enterimg” is the button’s hover image, when the mouse is over it.

I assume you want your button to be invisible at first and then appear, right? That way they don’t just appear out of nowhere, so it doesn’t feel weird.
This is easy, you just gotta add a few things in your Tyranoscript component.

Your code should look like this now:

[locate x=644 y=0]

[anim name=butt opacity=0 wait time=0]
[anim name=butt opacity=255 wait time=200]
[wa]

Notice the difference?
There’s a new tag called “name” after “button” and before “graphic”. Call it however you want, in this case I just called it “butt”.
Also, there’s a few new lines added. Those “anim” tags are the animation, from opacity 0 to opacity 255 (full opacity).
Let’s break down the new code:

– “anim name” initializes an animation process, and it is also where you write the name you gave your button.
– “opacity” is the opacity of the button. There are two anim tags in there, so the first opacity tag must be set to 0 so the button is invisible at first, and then, in the second opacity tag, set it to 255 so it sets the button to full opacity.
– “wait time” is the amount of time (in milliseconds) each animation step takes. Obviously, the first step is zero so it is completely invisible at first, and 200 (200 milliseconds) in the second animation step, which is kinda fast. Remember, 1000 milliseconds is one full second. Play with it and see what time feels right.
– “wa”, the last and most lonely tag, is the end of the animation process.

You got your button with your hover effect, no CSS, no Javascript, no pain in the ba(ss)ck.
Please, take a look over the “Tips” section for some useful tips.

Tips

Alright! Get ready for some useful tips!
Read carefully and open your mind, okay? Okay!

• Tip #1:

If you don’t want to suffer trying to find the correct coordinates for your button, add your button temporarily with the “Image Button” component.

Put the button where you want it to be with the “Positioning Tool”:

Then, use the x Position and the y Position in your Tyranoscript component.

• Tip #2:

You can also add an image for when you click the button, and even add sound effects for hovering the mouse over the button and another for pressing it. Read the “[ button ] Display Graphical Button” section of Tyranobuilder’s website “tag” section right here: click![tyranobuilder.com]

• Tip #3:

If your button doesn’t appear no matter where you place it, please check twice and make sure the button’s image is correctly set in the Tyranoscript component. Remember how folders work.

• Tip #4:

To keep things free of confusion, your button’s idle image should be the original name, and the hover one should have a “_hover” added to the name, so it’s something like:
“button.png” = idle
“button_hover.png” = hover

Thanks for reading, hope this worked for all of you!
Post comments and suggestions down below, xoxo