[Tutorial] Crash course in screen language/UI design
Forum rules
Do not post questions here!
This forum is for example code you want to show other people. Ren'Py questions should be asked in the Ren'Py Questions and Announcements forum.
Do not post questions here!
This forum is for example code you want to show other people. Ren'Py questions should be asked in the Ren'Py Questions and Announcements forum.
-
- Regular
- Posts: 27
- Joined: Wed Mar 07, 2012 7:52 am
- Completed: Tales of Atlantis
- Projects: LDVELH
- Location: France
- Contact:
Re: [Tutorial] Crash course in screen language/UI design
I risk to be not very original, but, very useful, excellent, Thanks a lot..
There are 10 sorts of people, those who understand the binary and the others..
Re: [Tutorial] Crash course in screen language/UI design
Thanks, great tutorial !
Re: [Tutorial] Crash course in screen language/UI design
:000 This is great! Bookmarked! *
Thanks so much, Camille! ><
Thanks so much, Camille! ><
"The two most important days of your life are
the day you are born, and the day you find out why."
[♦] Mark Twain
the day you are born, and the day you find out why."
[♦] Mark Twain
- Hijiri
- Eileen-Class Veteran
- Posts: 1519
- Joined: Sun Mar 25, 2012 6:35 pm
- Completed: Death Rule:lost code Overdrive Edition, Where the White Doves Rest-Tsumihanseishi
- Projects: Death Rule: Killing System
- Organization: MESI Games
- IRC Nick: Hizi
- Tumblr: mesigames
- Skype: kurotezuka
- itch: hijiri
- Location: Los Angeles
- Contact:
Re: [Tutorial] Crash course in screen language/UI design
You can either go into the developer's Menu (Shift+D) and select "Image Picker" and get the coordinates, or use the Square Select tool (GIMP) or Crop Tool (PS) to get the coordinates (Which go X, Y, Width, Height)EriksBlue wrote:How do you map hotspots?
- Camille
- Eileen-Class Veteran
- Posts: 1227
- Joined: Sat Apr 23, 2011 2:43 pm
- Completed: Please see http://trash.moe
- Projects: the head well lost
- Organization: L3
- Tumblr: narihira
- Deviantart: crownwaltz
- itch: lore
- Contact:
Re: [Tutorial] Crash course in screen language/UI design
Just a note that I've officially released all the Ristorante Amore .rpy files. Most of the tutorial is based on old versions of these files, so if you look through screens.rpy, you'll see that I've added a lot. If you guys have any questions whatsoever on how and why I did something, let me know and I'll do my best to help. RisAmo is a free game, so you can download it to see all the screens in action.
One such change is the save slot text:
I have a custom date/time format to overwrite the default Ren'Py date/time format and make things look a bit nicer. If you scroll down on this page, you can see all the variables for the different date things, ie: %H is the hour in a 24-hour clock and %I is the hour in a 12-hour clock.
One such change is the save slot text:
Code: Select all
$ file_text = "{size=+4}{i}%s{/i}{/size}\n%s: %s" % (
FileSaveName(number),
FileSlotName(number, 4),
FileTime(number, format='%B %d, %Y \n (%I:%M%p)', empty=_("Empty Slot."))
)
-
- Veteran
- Posts: 240
- Joined: Wed Apr 04, 2012 11:13 am
- Projects: Things Not Seen
- Location: Indonesia
- Contact:
Re: [Tutorial] Crash course in screen language/UI design
Waa, thank you very much for this!
I get it... I think. I haven't tried anything yet. But I'm sure this will come handy.
I get it... I think. I haven't tried anything yet. But I'm sure this will come handy.
Hiatus of hiatuses
- clua
- Miko-Class Veteran
- Posts: 537
- Joined: Sat Dec 12, 2009 1:38 pm
- Completed: Stormy Night /The Knife of the Traitor/Charlatans
- Projects: The Hurtful Wall /_Salomon/Infurubia
- Tumblr: notttt-che
- itch: chegovia
- Location: In a jar with pirañas
- Contact:
Re: [Tutorial] Crash course in screen language/UI design
I know another thank you may not make the difference but!! I can't thank you enough for making this tutorial ;_;
Now my GUI looks...Pretty ºqº
Thank you for your hard work on this!
Now my GUI looks...Pretty ºqº
Thank you for your hard work on this!
♦WIP♦
Infurubia
The hurtful wall
_Salomon
♦COMPLETE♦
+The Knife of the Traitor(Nanoreno 2012)
+Charlatans(Nanoreno 2015)
♦Dev tumblr♦
♦EVN Store♦
Infurubia
The hurtful wall
_Salomon
♦COMPLETE♦
+The Knife of the Traitor(Nanoreno 2012)
+Charlatans(Nanoreno 2015)
♦Dev tumblr♦
♦EVN Store♦
- MioSegami
- Regular
- Posts: 189
- Joined: Thu Nov 15, 2012 11:40 pm
- Projects: PATUKA PRIVATE PARADISE
- Organization: BlueAngelService
- Contact:
Re: [Tutorial] Crash course in screen language/UI design
Will be a great help! Glad you made one!! <3333
CLICK IT------------->viewtopic.php?f=43&t=40639&p=430149#p430149
Projects: PATUKA PRIVATE ISLAND
Story: 15% complete
Script: 0%
Art: 35%
Outline: 15%
Code: 10%
- MioSegami
- Regular
- Posts: 189
- Joined: Thu Nov 15, 2012 11:40 pm
- Projects: PATUKA PRIVATE PARADISE
- Organization: BlueAngelService
- Contact:
Re: [Tutorial] Crash course in screen language/UI design
So at the part add "Sl_save.png"
What does screen shot image look like?? I'm confused... >3<! But other than that it's super helpful!!!
What does screen shot image look like?? I'm confused... >3<! But other than that it's super helpful!!!
CLICK IT------------->viewtopic.php?f=43&t=40639&p=430149#p430149
Projects: PATUKA PRIVATE ISLAND
Story: 15% complete
Script: 0%
Art: 35%
Outline: 15%
Code: 10%
- Camille
- Eileen-Class Veteran
- Posts: 1227
- Joined: Sat Apr 23, 2011 2:43 pm
- Completed: Please see http://trash.moe
- Projects: the head well lost
- Organization: L3
- Tumblr: narihira
- Deviantart: crownwaltz
- itch: lore
- Contact:
Re: [Tutorial] Crash course in screen language/UI design
That's just adding the proper title to the page. On the save screen I add "Sl_save.png", which just adds the word SAVE in the upper left in nice font. Same for load except it says LOAD.MioSegami wrote:So at the part add "Sl_save.png"
What does screen shot image look like?? I'm confused... >3<! But other than that it's super helpful!!!
- MioSegami
- Regular
- Posts: 189
- Joined: Thu Nov 15, 2012 11:40 pm
- Projects: PATUKA PRIVATE PARADISE
- Organization: BlueAngelService
- Contact:
Re: [Tutorial] Crash course in screen language/UI design
That's just adding the proper title to the page. On the save screen I add "Sl_save.png", which just adds the word SAVE in the upper left in nice font. Same for load except it says LOAD.
Thanks soo much! I feel stupid T^T..But thanks again !
CLICK IT------------->viewtopic.php?f=43&t=40639&p=430149#p430149
Projects: PATUKA PRIVATE ISLAND
Story: 15% complete
Script: 0%
Art: 35%
Outline: 15%
Code: 10%
Re: [Tutorial] Crash course in screen language/UI design
Can anyone help me please?
For some reason the Window button on Preference screen is not changing state on selected_hover or selected_idle.
All other buttons are working correct, uncluding Fullscreen button.
I already deleted cache folder and deleted persistent data but didn't solve the problem.
For some reason the Window button on Preference screen is not changing state on selected_hover or selected_idle.
All other buttons are working correct, uncluding Fullscreen button.
I already deleted cache folder and deleted persistent data but didn't solve the problem.
Code: Select all
screen preferences:
tag menu
imagemap:
ground "image/ui/options idle.png"
idle "image/ui/options idle.png"
hover "image/ui/options hover.png"
selected_idle "image/ui/options selected idle.png"
selected_hover "image/ui/options selected hover.png"
alpha False #can click on transparent area
hotspot (473,192,248,38) action Preference("display", "window")
hotspot (752,192,248,38) action Preference("display", "fullscreen")
hotspot (473,336,248,38) action Preference("transitions", "all")
hotspot (752,336,248,38) action Preference("transitions", "none")
bar pos (763,454) value Preference("text speed") style "pref_slider"
bar pos (763,607) value Preference("music volume") style "pref_slider"
bar pos (763,681) value Preference("sound volume") style "pref_slider"
bar pos (763,760) value Preference("voice volume") style "pref_slider"
hotspot (1152,678,288,57) action Return()
hotspot (1152,744,288,57) action ShowMenu("load")
hotspot (1152,811,288,57) action Quit()
Re: [Tutorial] Crash course in screen language/UI design
Hello there, I have a problem, when I used imagemap for menu, vbox appears instead. Can you solve this?
Btw, below this is the code.
Btw, below this is the code.
Code: Select all
screen main_menu:
# This ensures that any other menu screen is replaced.
tag menu
imagemap:
ground "ui/mm_ground.png"
idle "ui/mm_idle.png"
hover "ui/mm_hover.png"
hotspot (346, 393, 129, 30) action Start()
hotspot (346, 436, 129, 32) action Showmenu("save")
hotspot (381, 490, 53, 26) action Quit()
hotspot (0, 578, 103, 22) action Showmenu("preferences")
hotspot (745, 578, 55, 22) action Help()
init -2 python:
# Make all the main menu buttons be the same size.
style.mm_button.size_group = "mm"
- Rinima
- Eileen-Class Veteran
- Posts: 1078
- Joined: Wed Jul 17, 2013 3:31 pm
- Projects: WtRF
- Organization: Harmonic Dreams
- IRC Nick: Rinima or Charlie
- Deviantart: Emlindes
- Location: England
- Contact:
Re: [Tutorial] Crash course in screen language/UI design
;~; I could kiss you! (but I won't)
Pronouns: They/them or He/him
Who is online
Users browsing this forum: No registered users