[Tutorial] Crash course in screen language/UI design

A place for Ren'Py tutorials and reusable Ren'Py code.
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.
Message
Author
Atlantis
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

#16 Post by Atlantis »

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..

blakjak
Veteran
Posts: 224
Joined: Fri Dec 21, 2007 2:36 pm
Location: France
Contact:

Re: [Tutorial] Crash course in screen language/UI design

#17 Post by blakjak »

Thanks, great tutorial !

User avatar
Aurehan
Regular
Posts: 47
Joined: Fri Nov 25, 2011 9:19 pm
Location: USA
Contact:

Re: [Tutorial] Crash course in screen language/UI design

#18 Post by Aurehan »

:000 This is great! Bookmarked! *
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

User avatar
EriksBlue
Regular
Posts: 36
Joined: Tue Jul 19, 2011 3:56 pm
Projects: Torn Apart
Location: California
Contact:

Re: [Tutorial] Crash course in screen language/UI design

#19 Post by EriksBlue »

How do you map hotspots?
Image

User avatar
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

#20 Post by Hijiri »

EriksBlue wrote:How do you map hotspots?
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)
Image Image
"Perfection goal that always changes. Can pursue, cannot obtain."

User avatar
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

#21 Post by Camille »

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:

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."))
                        )
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.

Egressus
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

#22 Post by Egressus »

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.
Hiatus of hiatuses

User avatar
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

#23 Post by clua »

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!
♦WIP♦
Infurubia
The hurtful wall
_Salomon

♦COMPLETE♦
+The Knife of the Traitor(Nanoreno 2012)
+Charlatans(Nanoreno 2015)

Dev tumblr
EVN Store

User avatar
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

#24 Post by MioSegami »

Will be a great help! Glad you made one!! <3333
Image
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%

User avatar
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

#25 Post by MioSegami »

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!!!
Image
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%

User avatar
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

#26 Post by Camille »

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!!!
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.

User avatar
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

#27 Post by MioSegami »

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 :)!
Image
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%

User avatar
Kaen
Regular
Posts: 148
Joined: Tue Oct 16, 2012 10:49 pm
Contact:

Re: [Tutorial] Crash course in screen language/UI design

#28 Post by Kaen »

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.

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()

abu123
Newbie
Posts: 1
Joined: Sat Jul 27, 2013 2:11 pm
Contact:

Re: [Tutorial] Crash course in screen language/UI design

#29 Post by abu123 »

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.

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"

User avatar
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

#30 Post by Rinima »

;~; I could kiss you! (but I won't)
Pronouns: They/them or He/him

Post Reply

Who is online

Users browsing this forum: No registered users