Advanced

Responsive design allows the game layout to dynamically adjust based on the player’s screen size.
For example, when switching between portrait and landscape on a smartphone, the screen usually looks like this:



With responsive support, it transforms like this:



In short, it adapts the layout for portrait or landscape modes, and for PC vs smartphone environments.

You can restructure things like message positions, backgrounds, font sizes, and system UI for great flexibility.

TyranoScript makes responsive support simple.

You can call a scenario file automatically when the screen aspect ratio changes.

That’s it!

So, when the user rotates their device or resizes the window, you can prepare a script to adapt the screen layout.

New Feature: "Responsive Layout"

Allows dynamic screen reconfiguration based on play environment. Easily support both PC and mobile with a single game project.

Coming in the next update.#TyranoScript pic.twitter.com/mDhMwni15k

— シケモクMK (@shikemokumk) February 1, 2022

First, create a single scenario file for layout settings.
Save it as `resizecall.ks`.

Here is a script example for making the default game responsive:

;resizecall.ks
;Determine whether width or height is larger

[iscript]
tf.larger_width = $.getLargeScreenWidth();
[endscript]

[iscript]
tf.chara_name_str = $(".chara_name_area").text();
[endscript]

;Portrait orientation ===========================

[if exp="tf.larger_width==false"]
;Portrait
[body scWidth=720 scHeight=1280]

;Character name display
[free layer="message0" name="chara_name_area"]
[ptext name="chara_name_area" text="&tf.chara_name_str" layer="message0" color="white" size=38 bold=true x=100 y=880]

;Message window config
[position layer="message0" left=60 top=840 width=580 height=400 page=fore visible=true opacity=222 border_size=3 border_color="white" radius=15 ]

;Adjust message area
[position layer=message0 page=fore margint="85" marginl="50" marginr="70" marginb="60"]

[iscript]
f.akane_left = 10;
f.akane_top = 250;
f.akane_width = 700;

f.select_common_x = 60;
f.select_common_width = 500;
f.select_y_array = [250,350,450,550];

f.font_size = 46;
[endscript]

[else]
;Landscape orientation ========================

[body scWidth=1280 scHeight=720]

;Character name display
[free layer="message0" name="chara_name_area"]
[ptext name="chara_name_area" text="&tf.chara_name_str" layer="message0" color="white" size=28 bold=true x=180 y=510]

;Message window config
[position layer="message0" left=160 top=500 width=1000 height=200 page=fore visible=true opacity=222 border_size=3 border_color="white" radius=15]

;Adjust message area
[position layer=message0 page=fore margint="45" marginl="50" marginr="70" marginb="60"]

[iscript]
f.akane_left = 450;
f.akane_top = 150;
f.akane_width = 400;

f.select_common_x = 360;
f.select_common_width = 500;
f.select_y_array = [150,250,350,450];

f.font_size = 28;
[endscript]
[endif]

;Common area

;If character is shown
[chara_move name="akane" left="&f.akane_left" top="&f.akane_top" width="&f.akane_width" time=0  ]

;If selections are displayed
[anim name="select_button" left="&f.select_common_x" width="&f.select_common_width" time=0 ]
[anim name="select_button_1" top="&f.select_y_array[0]" time=0 ]
[anim name="select_button_2" top="&f.select_y_array[1]" time=0 ]
[anim name="select_button_3" top="&f.select_y_array[2]" time=0 ]
[anim name="select_button_4" top="&f.select_y_array[3]" time=0 ]

[chara_move name="akane" left="&f.akane_left" top="&f.akane_top" width="&f.akane_width" time=10 ]

[iscript]
$(".message_inner").find("span").css("font-size",f.font_size+"px");
[endscript]

[deffont size="&f.font_size"]
[resetfont]

[wait time=500]

;Always use return since this is called with [call]
[return]

How does that look? This scenario configures the layout based on the current aspect ratio at the time it is called.
You should put all layout-specific logic in this one file.

[body scWidth=720 scHeight=1280]

The `[body]` tag changes the resolution. It updates `scWidth` and `scHeight` during gameplay, just like in Config.tjs.

Finally, configure it to call `resizecall.ks` when the aspect ratio changes.
Add the following during game initialization:

; Call once at start
[call storage="resizecall.ks"]

; Automatically call resizecall.ks when aspect ratio changes
[set_resizecall storage="resizecall.ks"]

The `[set_resizecall]` tag makes the game call the scenario file when the screen orientation changes.

You can do much more with this.
Be sure to check the tag reference and example scripts.

＞＞Tag Reference