First steps in responsive OTClient design

[MagicWall]

Similar to responsive web page design, I want make similar system in OTClient.
I was able to make functions similar to CSS:

width: 50% -> widthPercent(50)
height: 30% -> heightPercent(30)

Ok, so what they look like in real:

Why OTClient flash?
Because I resize application window and it's normal.
Try yourself if you don't belive


How it's working?
Similar to CSS, so I check "parent" width/height and compute percent from this value.
On gif you see that ingame window change they size, and element (child of ingame window -> top arrow) inside change size too. Because both elements ingame window and top arrow have percentagle paramether.

game window <- is parent of - ingame window <- is parent of - top arrow

Element have % of width/height his parent.

Probably I soon add this code to github.

 

[chupaescadatri]

Similar to responsive web page design, I want make similar system in OTClient.
I was able to make functions similar to CSS:

width: 50% -> widthPercent(50)
height: 30% -> heightPercent(30)

Ok, so what they look like in real:

Why OTClient flash?
Because I resize application window and it's normal.
Try yourself if you don't belive


How it's working?
Similar to CSS, so I check "parent" width/height and compute percent from this value.
On gif you see that ingame window change they size, and element (child of ingame window -> top arrow) inside change size too. Because both elements ingame window and top arrow have percentagle paramether.

game window <- is parent of - ingame window <- is parent of - top arrow

Element have % of width/height his parent.

Probably I soon add this code to github.

great, your mods are great, I'm waiting for when you launch the hotkeys touch bar

 

[BahamutxD]

Nice one! Tablet OTC made easier.

I've spent a good amount of time trying to do the resize thing no success to implement it in the mana/healthbars and perhaps inventory too. I feel jealous.

 

[MagicWall]

Nice one! Tablet OTC made easier.

Now I'm working on the touch friendly UI for Android phones/tablets. So I must implemented response OTClient design.
I think playing on mobile phone (5"+) may be easy, probably not like on a computer but exp may be enjoyable.
Now I have done CSS units:

%, vw, vh

Almost finished CSS units:

vmin, vmax

And now I will work on:

height, width (for example width: height / height: width)

And now I work in new UI design (easy response for change height/width):

(Still work) This UI want be like module, easy to add (put to mods/modules folder). But some OTUI files must be change to use this mod like a main UI.