TyranoBuilder Visual Novel Studio Guide

Buttons with hover effect for TyranoBuilder Visual Novel Studio

Buttons with hover effect

Overview

Hi guys.Bad English incoming~I’ve heard that some of you want a guide that explains how to add a hover effect on buttons.Skills requirement:- CSS- TyranoBuilder ScriptThis guide requires NO knowledge of Javascript.I hope it’s helpfully!

Create an Image Button

First, we need a button with TyranoBuilder Script:

  • button initializes the button code
  • name=”button_css” sets the CSS-Class (important for the guide)
  • storage=”scene.ks” sets the scene target
  • target=”*label” sets the label target
  • graphic=”button_name.png” sets the graphic
  • width=”300″ and height=”100″ sets the size
  • x=”120″ and y=”250″ sets the position

The css class name of the button must be unique (unless you want to apply the same css properties).

Prepare for CSS

Now we must load a css file.

[html]<link href=”custom.css” type=”text/css” rel=”stylesheet”>[endhtml]

This code is a html code that’s why we have to use the html tag ([html] [/html]).

  • href points to the target file. The css file is calling “custom.css” at this example.
  • The other code snippets are not necessary for us.

Important: This code have to be in front of the Image Button Code; in the same scene. Otherwise you’ll have to initialize the html code with macro:

[macro name=”css”] [html]<link href=”custom.css” type=”text/css” rel=”stylesheet”>[endhtml] [endmacro]

and use this code with:

[css]

Create an CSS file

Now we have to create a css file in an editor. I highly recommend notepad++.
[link]

1. Open the program
2. Use CSS

For example:
You want to move the image 20px to the right.

.button_css{} .button_css:hover{ margin-left: 20px; }
  • The dot initializes the following code as a css class
  • button_name is the name you gave the image button
  • The { and } are the beginning and the end of the statement

With the aid of the statement the picture moves 20 pixel to the right.

3. Save

Save the css file in your project main folder (where the index.html is)

At the end

Now it should work 😉

An hover effect with graphics:

You want to change a graphic with mouseover:

.button_css{ background-image: url(data/image/button1.png); } .button_css:hover{ background-image: url(data/image/button2.png); }

The first graphic will be replaced with the second graphic.

Important if you use this

The graphic of the image button have to be transparent!

Example project: buttons with hover effect[drive.google.com]

We used this method in our game on greenlight to create custom buttons for our title screen (first variant) and the decision buttons (second variant) which you can see here: [link]

SteamSolo.com