Advanced Techniques

TyranoScript includes built-in system features such as save and load screens by default.

These system screens can be customized quite freely.

In addition, overall game settings are concentrated in the file: system/Config.tjs.
This file contains detailed explanations, so be sure to check it out.

The settings that affect the entire TyranoScript game are configured by editing:

[Project Folder]/data/system/Config.tjs

This file itself contains thorough explanations, so please refer to it as you edit.

Especially important settings that can be configured in Config.tjs include the following:

・Title settings (displayed on the browser or app window)
・projectID (If distributing multiple games from the same host, this needs to be unique)
・ScreenRatio (Settings for whether to scale the game screen to fit or maintain aspect ratio)
・scWidth, scHeight (Set the screen resolution)
・Menu feature visibility and position settings
・Maximum number of lines stored in the backlog
・Settings for progress tracking
・Enabling debug mode — be sure to disable it before release
・Line break processing settings
And more…

In TyranoScript, a button with functions like save and load is displayed at the bottom right of the screen.

Since it includes essential features for visual novels such as save/load, it can be very useful.



TyranoScript allows you to customize not only the position and image of the menu button but also to trigger save/load screens from custom buttons.

■ Change the menu button image

The image used to call up the menu screen can be freely changed.

Project folder/tyrano/images/system/button_menu.png

Replace this image with one of your choice.

■ Hide the menu button
You can also choose to hide the menu button.
Open the file /system/Config.tjs in your project folder.

// ◆ Config (Menu) Function Display


// Set whether to display the suite of functions such as save/load, return to title, etc.


;configVisible = true;  // Display config icon


;configLeft    = -1     // Specify the left position of the config icon. -1 means bottom right


;configTop     = -1     // Specify the top position of the config icon. -1 means bottom right

By setting `configVisible = false`, the menu button will be hidden.
Also, by specifying both `configLeft` and `configTop`, you can place the menu button anywhere you like.

■ Calling menu, save, and load screens from a custom button
The tags [showload], [showsave], and [showmenu] are available.
You can display each respective screen by calling these tags after a button click.

Next, let’s look at how to customize various screens. You can easily personalize the menu screen by replacing the following images with ones you like.

In your project folder, open `tyrano/images/system` and replace the following files:

・button_menu.png (Menu launch button)
・menu_bg.png (Menu screen background)
・menu_load_bg.jpg (Load screen background)
・menu_save_bg.jpg (Save screen background)
・menu_button_close.png (Close button on the menu screen)
・menu_button_load.png (Load button)
・menu_button_save.png (Save button)
・menu_button_skip.png (Skip button)
・menu_button_title.png (Return to title button)
・menu_message_close.png (Button to hide the window)



☆Depending on the screen size, saved data might be cut off. In that case, open tyrano/tyrano.css and adjust the following section:

/* Customize the style of the date text in the save/load screens */
.save_menu_date_font {
    font-size:10px;
}

/* Customize the style of the main text in the save/load screens */
.save_menu_text_font{
    font-size:14px;
}

/* Adjust spacing and layout for save/load slots */
.save_display_area{
    margin-top:20px;
}

In addition to images, you can also change the layout of various elements.
However, please note that this requires basic knowledge of HTML and CSS.

Screens such as the save screen and menu screen are built using HTML and CSS.
HTML files are located in the following folder, and by editing them, you can completely redesign these screens.

[Project Folder]/tyrano/html/

・backlog.html (Backlog screen)
・load.html (Load screen)
・menu.html (Menu screen)
・save.html (Save screen)

By editing these files, you can freely customize the screen layout.
Specific HTML elements are assigned class names that correspond to their functionality. By assigning these class names, functionality is automatically linked to the corresponding HTML.

menu_close: Close button
log_body: This is the area where the backlog text will be displayed
menu_save: Navigates to the save screen
menu_load: Navigates to the load screen
By checking the files directly, you’ll get a clearer understanding of the role each class plays.

There may be cases where you want to place buttons like skip or save on the game screen.
With TyranoScript, creating such a system interface is very easy.



First, disable the default system buttons by setting `;configVisible` to false in `config.tjs`.

Next, place your buttons in a common part of your game, such as `first.ks`.

[button name="role_button" role="skip" graphic="button/skip.gif" x=350 y=400]
[button name="role_button" role="save" graphic="button/save.gif" x=430 y=400]
[button name="role_button" role="load" graphic="button/load.gif" x=510 y=400]
[button name="role_button" role="backlog" graphic="button/log.gif" x=590 y=400]
[button name="role_button" role="window" graphic="button/close.gif" x=670 y=400]
[button name="role_button" role="menu" graphic="button/menu.gif" x=750 y=400]

By specifying the `role` parameter in the `button` tag as shown above, you can place buttons with special functions.

Functions of Each Role Button:
・skip: Starts skipping
・save: Opens the save screen
・load: Opens the load screen
・backlog: Displays the backlog
・window: Hides the message window
・menu: Opens the menu screen

Simple, right?

Be sure to save and reload your game to confirm that the buttons still appear properly.

It's helpful to allow players to freely adjust the message display speed and toggle music playback. You can control it like this:

[iscript]
/* Change message speed – lower values make it faster */
TG.stat.ch_speed = 30;


/* Disable BGM playback */
TG.stat.play_bgm = false;


/* Disable sound effects */


TG.stat.play_se = false;


[endscript]

When playing a game, players might want to go back and re-read some parts of the story, right? In such cases, implementing a backlog feature makes your game more user-friendly.

To enable the backlog in TyranoScript, open system/config.tjs and set the maximum number of lines to save using maxBackLogNum.

// ◆ Backlog feature


// You can set the maximum number of text lines to keep for the backlog feature.


// The saved data will be stored as an array in tf.system.backlog.


// If set to 0, saving is disabled.


;maxBackLogNum = 200;

Once this is set, the text will be stored in the `tf.system.backlog` variable as an array during gameplay.
You can then access that data to implement a custom backlog.

For an even easier way to implement backlog:

・Use the [showlog] tag
・Use the `role` parameter with the `button` tag
These methods let you immediately use TyranoScript’s built-in backlog feature.