[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
User avatar
Camille
Eileen-Class Veteran
Posts: 1224
Joined: Sat Apr 23, 2011 2:43 pm
Completed: Please see http://trash.moe
Projects: Spirit Parade
Organization: Cyanide Tea
Tumblr: narihira
Deviantart: crownwaltz
Skype: thievinghearts
Contact:

[Tutorial] Crash course in screen language/UI design

#1 Post by Camille » Wed Mar 07, 2012 12:54 pm

I've had many people ask me for a tutorial or to explain how to do this and that with their GUIs using screen language... I'm not sure how to approach a tutorial, not being used to it, so I thought I'd just post up bits of my code and try to explain what does what. For licensing reasons I can't share the actual images used, but I can show you guys basically what they look like so you can see my screen layers without, y'know, using the images for yourself. Most people have asked me about the map screen from BCM... I can't exactly post up the code for that since it's a commercial game and all, but using the code/tactics described in this post, you can basically create the same thing yourself.

The code for Ristorante will actually be left unarchived so you can see the finished result once the game is done. I just thought that doing this might help out others doing NaNoRenO right now. :O

Code: Select all

##############################################################################
# Main Menu 
#
# Screen that's used to display the main menu, when Ren'Py first starts
# http://www.renpy.org/doc/html/screen_special.html#main-menu

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"
        
        if not persistent.beaten:
            hotspot (0, 40, 378, 85) action Start()
        else:
            hotspot (0, 40, 378, 85) action Start("real")
        hotspot (0, 136, 360, 89) action ShowMenu("load")
        hotspot (0, 235, 341, 85) action ShowMenu("preferences")
        hotspot (0, 325, 320, 93) action Quit(confirm=False)
        hotspot (0, 423, 295, 86) action Help()
        if persistent.beaten:
            hotspot (816, 16, 207, 67) action Start()
            hotspot (790, 88, 233, 61) action ShowMenu("bonus")
Image Image Image

I basically use imagemaps for everything because that way I can fully customize how my screens look in Photoshop before coding them for Ren'Py. This is the main menu used in Ristorante… 100% imagemap. I have a main menu that changes depending on whether or not the prologue has been cleared or not. In my prologue, at the end, there is this variable trigger:

Code: Select all

    $ persistent.beaten = True
This is a persistent variable. To put it simply, it's a variable that will not change its value even when outside of the game. (whereas other values, like affection points, will change during the game and then reset once that particular playthrough is over) So when this variable is true, it means the prologue has been beaten. In this case, the main menu looks different. There is now a bonus button, the original start button is moved to another location, and the previous start button location now takes you to a different starting script label when clicked. Obviously not all games will require that start button switch, but you can use this method to add more buttons or whatever when certain variables have been cleared. Just make sure you indent properly!

Code: Select all

##############################################################################
# Input
#
# Screen that's used to display renpy.input()
# http://www.renpy.org/doc/html/screen_special.html#input

screen input:

    window:
        xalign 0.5
        yalign 0.5
        has vbox
        

        text prompt:
            yoffset 36
            style "say_dialogue"
            xoffset 82
        input:
            id "input"
            style "say_dialogue"
            color "#8e6439"
            yoffset 36
            xoffset 107
This is Ristorante's input screen. Basically, though, I just centered it. I did this by setting both the xalign and yalign of the window to 0.5, meaning the box will be aligned halfway down and halfway to the left—the center of the screen. I used the yoffset and xoffset to move the text over a little/indent and space it out the way I wanted, as well as change the color of the input text. (which is a bright yellow by default) Text in a screen can take many different properties… Play around with your text and see what kind of effects you can achieve in style and positioning.

Code: Select all

##############################################################################
# Save, Load
#
# Screens that allow the user to save and load the game.
# http://www.renpy.org/doc/html/screen_special.html#save
# http://www.renpy.org/doc/html/screen_special.html#load

# Since saving and loading are so similar, we combine them into
# a single screen, file_picker. We then use the file_picker screen
# from simple load and save screens.
    
screen load_save_slot:
    $ file_text = "%2s. %s\n  %s" % (
                        FileSlotName(number, 4),
                        FileTime(number, empty=_("Empty Slot.")),
                        FileSaveName(number))

    add FileScreenshot(number) xpos 61 ypos 69 
    text file_text xpos 215 ypos 92 size 18 color "#261d0c"
    
screen file_picker:
    key "w" action FileLoad(1, page="quick", confirm=True, newest=False)
    key "m" action MainMenu(confirm=True)
    key "p" action ShowMenu("preferences")
    key "mouseup_3" action ShowMenu("keys_map")
    key "K_ESCAPE" action Return()
    
    imagemap:
            ground "ui/sl_ground.png"
            idle "ui/sl_idle.png"
            hover "ui/sl_hover.png"
            selected_idle "ui/sl_idle.png"

            hotspot (528, 39, 14, 23) clicked FilePage(1)
            hotspot (566, 40, 22, 23) clicked FilePage(2)
            hotspot (611, 39, 18, 23) clicked FilePage(3)
            hotspot (653, 40, 18, 21) clicked FilePage(4)
            hotspot (694, 40, 17, 22) clicked FilePage(5)
            hotspot (735, 41, 21, 20) clicked FilePage(6)
            hotspot (776, 39, 22, 23) clicked FilePage(7)
            hotspot (819, 39, 20, 23) clicked FilePage(8)
            hotspot (860, 39, 23, 24) clicked FilePage(9)
            hotspot (900, 39, 27, 23) clicked FilePage(10)

            hotspot (22, 121, 444, 235) clicked FileAction(1):
                use load_save_slot(number=1)
            hotspot (483, 121, 444, 235) clicked FileAction(2):
                use load_save_slot(number=2)
            hotspot (22, 356, 444, 235) clicked FileAction(3):
                use load_save_slot(number=3)
            hotspot (483, 356, 444, 235) clicked FileAction(4):
                use load_save_slot(number=4)
                
            hotspot (523, 68, 62, 31) action ShowMenu("load")
            hotspot (589, 70, 59, 29) action ShowMenu("save")
            hotspot (653, 70, 60, 31) action Help()
            hotspot (787, 72, 62, 27) action Quit()
            hotspot (718, 71, 65, 27) action MainMenu()
            hotspot (877, 69, 62, 29) action Return()
    
screen save:
    key "s" action Return()
    # This ensures that any other menu screen is replaced.
    tag menu

    use file_picker
    add "ui/sl_save.png"

screen load:
    key "l" action Return()
    # This ensures that any other menu screen is replaced.
    tag menu

    use file_picker
    add "ui/sl_load.png"

init -2 python:
    style.file_picker_frame = Style(style.menu_frame)

    style.file_picker_nav_button = Style(style.small_button)
    style.file_picker_nav_button_text = Style(style.small_button_text)

    style.file_picker_button = Style(style.large_button)
    style.file_picker_text = Style(style.large_button_text)
    config.thumbnail_width = 75
    config.thumbnail_height = 42
Image Image Image

This is Ristorante's save/load screen—another imagemap! You can think of it as being in layers… The file_picker screen is the save/load screen itself. I put the navigation there, but I also defined where the save slots are.

In the case of Ristorante, there are four save slots per page. So I figured out the coordinates/sizes of each save slot and made those into the FileAction hotspots you see above. You also have to assign each slot a number, which is what the "use load_save_slot()" thing is. So then basically no matter which page of the save/load you're on, this code will be repeated. Even though we only define 1-4, Ren'Py will automatically know that on page 2, the slots are 5, 6, 7, and 8, so don't worry about that. You can use the developer tools to figure out the proper hotspot coordinates of your save slots. I personally just use the slice tool in Photoshop and copy the coordinates out of that, but you should do whatever works for you.

Moving on, the load_save_slot screen basically defines what each save/load slot looks like. You've already placed where each slot is on the page, but this screen tweaks each save slot. You can change the text, for example, or add in another variable like [chapter] or something. I changed the position/color of the text and changed the size/position of the thumbnail to fit my box. (I changed the thumbnail size in the init block at the bottom of this code, though) Be sure that instead of "FileSlotName(number, 4)", the 4 is however many slots you have per page. (it's 4 in my case)

You might notice that underneath the file_picker screen I have a number of codes that start with "key". This is how you create binding keys. I have another screen like this that basically is my own set of keybindings. (the same ones used for BCM minus quick save/load) Looks like this:

Code: Select all

##############################################################################
# Keymap screen
#
screen keys:
    zorder 100
    key "K_PAGEUP" action Rollback()
    key "K_PAGEDOWN" action RollForward()
    key "K_TAB" action Skip()
    key "s" action ShowMenu("save")
    key "l" action ShowMenu("load")
    key "m" action MainMenu(confirm=True)
    key "p" action ShowMenu("preferences")
And then at the beginning of my script…

Code: Select all

label start:
    show screen keys
So during the game at all times (I disable it during the main menu), these keys are there. It's a quicker way for players to save or load or whatever.

Code: Select all

##############################################################################
# Preferences
#
# Screen that allows the user to change the preferences.
# http://www.renpy.org/doc/html/screen_special.html#prefereces

screen display_pref:
    add "mouseovers/prefs_display.png"

screen transitions_pref:
    add "mouseovers/prefs_transitions.png"

screen skip_pref:
    add "mouseovers/prefs_skip.png"

screen after_pref:
    add "mouseovers/prefs_after.png"

screen text_pref:
    add "mouseovers/prefs_text.png"

screen auto_pref:
    add "mouseovers/prefs_auto.png"

screen bgm_pref:
    add "mouseovers/prefs_bgm.png"

screen se_pref:
    add "mouseovers/prefs_se.png"

screen preferences:

    tag menu

    key "s" action ShowMenu("save")
    key "l" action ShowMenu("load")
    key "w" action FileLoad(1, page="quick", confirm=True, newest=False)
    key "m" action MainMenu(confirm=True)
    key "p" action Return()
    key "K_ESCAPE" action Return()
    
    mousearea:
        area (0,30,332,119)
        hovered Show("display_pref", transition=sdissolve)
        unhovered Hide("display_pref", transition=sdissolve)
    
    mousearea:
        area (0,151,306,117) #transitions
        hovered Show("transitions_pref", transition=sdissolve)
        unhovered Hide("transitions_pref", transition=sdissolve)
    
    mousearea:
        area (0,273,285,118) #skip
        hovered Show("skip_pref", transition=sdissolve)
        unhovered Hide("skip_pref", transition=sdissolve)

    mousearea:
        area (0,395,283,131) #after choices
        hovered Show("after_pref", transition=sdissolve)
        unhovered Hide("after_pref", transition=sdissolve)
        
    mousearea:
        area (607, 29, 325, 129) #text speed
        hovered Show("text_pref", transition=sdissolve)
        unhovered Hide("text_pref", transition=sdissolve)
        
    mousearea:
        area (587, 162, 293, 124) #auto-forward
        hovered Show("auto_pref", transition=sdissolve)
        unhovered Hide("auto_pref", transition=sdissolve)
        
    mousearea:
        area (565, 289, 288, 123) #bgm volume
        hovered Show("bgm_pref", transition=sdissolve)
        unhovered Hide("bgm_pref", transition=sdissolve)
        
    mousearea:
        area (540, 416, 329, 126) #se volume
        hovered Show("se_pref", transition=sdissolve)
        unhovered Hide("se_pref", transition=sdissolve)
        
    imagemap:   
        ground "ui/prefs_ground.png"
        idle "ui/prefs_idle.png"
        hover "ui/prefs_hover.png"
        selected_idle "ui/prefs_selected.png"
        selected_hover "ui/prefs_selected_hover.png"
        alpha False
        
        hotspot (127, 92, 120, 56) action Preference("display", "fullscreen")
        hotspot (2, 92, 118, 56) action Preference("display", "window")
        hotspot (128, 333, 152, 60) action Preference("skip", "seen")
        hotspot (4, 331, 104, 61) action Preference("skip", "all")
        hotspot (2, 206, 108, 62) action Preference("transitions", "all")
        hotspot (128, 206, 108, 62) action Preference("transitions", "none")
        hotspot (125, 461, 157, 65) action Preference("after choices", "stop")
        hotspot (2, 462, 110, 59) action Preference("after choices", "skip")
        bar pos (675, 129) value Preference("text speed") style "pref_slider"
        bar pos (636, 510) value Preference("sound volume") style "pref_slider"
        bar pos (627, 385) value Preference("music volume") style "pref_slider"
        bar pos (634, 257) value Preference("auto-forward time") style "pref_slider"

    imagemap:
        ground "ui/prefs_menu_ground.png"
        idle "ui/prefs_menu_idle.png"
        hover "ui/prefs_menu_hover.png"
        
        hotspot (949, 279, 61, 30) action ShowMenu("load")
        hotspot (946, 315, 66, 31) action ShowMenu("save")
        hotspot (947, 354, 65, 31) action Help()
        hotspot (948, 427, 64, 31) action Quit()
        hotspot (947, 392, 64, 27) action MainMenu()
        hotspot (944, 500, 68, 31) action Return()

init -2 python:
    style.pref_slider.left_bar = "ui/slider_left.png" #full
    style.pref_slider.right_bar = "ui/slider_right.png" #empty

    style.pref_slider.xmaximum = 162    # width of your left_bar image.
    style.pref_slider.ymaximum = 30    # height of your left_bar image.  Probably will be the height of the red part of the bar plus the slider's height.

    style.pref_slider.thumb = "ui/pixel.png"
    style.pref_slider.thumb_offset = 1    # Half of your thumb's width in pixels
    style.pref_slider.thumb_shadow = None
Image Image Image Image Image Image Image Image

Time for the gargantuan preferences screen. >_> I'll just start from the top and go down. Each of those _pref screens was made for the mouseovers. It's kind of a waste since each one is just an image, but I can't think of an easier way to do it, so whatever. Scroll down and you see the keymap again.

Scroll down some more and you see each mousearea. I have it set so that when you hover over a certain preference (both the title and the buttons), it'll trigger the mouseover. This will make the "image tooltip" pop up at the bottom of the screen to explain what that particular preference does. I actually will use this for the main menu and bonus menus, too, I just haven't coded them in yet because I'm lazy. Anyway, mouseovers are a lot like hotspots, just that you use "area" instead of hotspot. You then define actions for what happens when that hotspot is hovered over or unhovered. I use this in BCM, too, for the dropdown menu. So whenever you hover over the top part of the screen, the little dropdown menu slides down so you can save/load/etc. (on top of the keymap xD)

Here we get to the actual preferences imagemap once you scroll down some more. Because I've made idle/hover/selected transparent, I went ahead and added the "alpha False" property. This makes it so that you can click the entirety of a hotspot area. If alpha were true, you could only click on the parts of the hotspot that weren't transparent. @_@ This makes it kind of a pain when you're using a thin font or something… The player then has to click right on the text, which can be difficult and frustrating.

I put the navigation on its own imagemap/layer because I thought I'd be reusing it, but then it turned out I didn't. XD; So I could've put all that navigation on the original imagemap if I combined the layers, but oh well.

You will notice that on the imagemap are things that say "bar pos". Well, the bars I use on the preferences screen aren't built in to the imagemap, but what you can do is define where on the imagemap they would show up. That's why there's only two coordinates instead of four like for the hotspots. So you position each bar where you want it to show up and define what preference it's for—and voila! A bar will show up in each one of those spots. Of course, it will be the Ren'Py default bar, so that's why at the bottom I changed how the bar looks under the init block. Aleema's style tutorial has good explanations on how to customize that, though.

Code: Select all

screen nagasaki_map:
    zorder 50
    add "ui/map_ground_inner.png"
    add "map_clouds"
    add "ui/map_ground_border.png"
    add "ui/map_ornament.png"
When in doubt, use lots of layers. I broke up BCM's map screen into many different image layers and put them one on top of the other. The "lower down" your layer is in your screen code, the closer to the "top" it is on the actual screen. For example, in Ristorante's preferences screen, the imagemap for the navigation is below the imagemap for the actual preferences. This conversely layers the navigation on top. A similar method is used to put the name window on top of the dialogue window when using a two-window dialogue box.

Also remember that you can have lots of actions assigned to a button. I link to a tutorial for that at the end of this post, but for example here's one of the buttons on the BCM map:

Code: Select all

    imagebutton:
        idle "ui/map_markers_03.png"
        hover "ui/map_markers_hover_03.png"
        action Return("dorms")
        xpos 279
        ypos 127
        hovered Show("nagasaki_map_zoom_dorms", transition=dissolve)
        unhovered Hide("nagasaki_map_zoom_dorms", transition=sdissolve)
See how much you can do? You can set what the button looks like, its position, what happens when you click on it, and even what happens when you hover/unhover! Using lots of image layers, imagemaps, and imagebuttons, it's possible to make up lots of very interesting screens and use them throughout your game. There's really no need to use the "default Ren'Py look" unless you really want to.

Aaaaaaand I think that just about covers all of my GUI "secrets"… Using imagemaps and screens, you can do a whole lot of stuff. Every one of my menus in BCM is a screen rather than a label that you jump to. (just make sure that you add "tag menu" so that the Return() will work properly) You can easily add text, images, mouseareas, imagemaps, bars, and buttons to your GUIs using screen language. n_n This post was pretty much just a crash course, but if you have any questions I can try to answer them? I didn't go super in depth because I don't really know what all to put in a tutorial…

Here are some of my LSF bookmarks that are related to GUI/customization in no particular order (also the SL documentation goes a LONG way):

Change the music played when viewing a screen
Detailed instructions on making your own CG gallery
Aleema's customizing menus tutorial (REQUIRED READING)
Aleema's customizing textbox tutorial (ALSO REQUIRED READING)
Making an inventory with screen language
How to gray out previously chosen choices
Having an imagemap remember what you've already clicked
Allow players to reset preferences to default
Gray out skip button while skipping
Making HP/MP/etc bars with SL
Display percent (of game) complete
Changing menus based on variable
Assigning several actions to a hover/click/whatever
Custom preferences using SL
Stop textbox from disappearing during transitions

Note that some of these might be outdated so you'll have to change %(variable)s to [variable] or make other tweaks where necessary. Reading documentation, searching the forums, and doing lots of trial and error in your own game goes a very long way. Also, INDENTATION IS KEY. I think improper indentation is responsible for like 80% of errors* or something. (*percentage possibly made up)

I hope this was useful to people and that I posted it in the right place orz.
1/2 of Cyanide Tea | Break Chance Memento (BL) | Spirit Parade (Otome) | Portfolio/List of Works/Contact
I'm not around LSF very much these days; please contact me via Skype/Twitter. Ask me things!

User avatar
Deji
Cheer Idol; Not Great at Secret Identities
Posts: 1592
Joined: Sat Oct 20, 2007 7:38 pm
Projects: http://bit.ly/2lieZsA
Organization: Sakevisual, Apple Cider, Mystery Parfait
Tumblr: DejiNyucu
Deviantart: DejiNyucu
Location: Chile
Contact:

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

#2 Post by Deji » Wed Mar 07, 2012 1:20 pm

Thanks for taking the time for putting this together for us, Camille! <3
It's really helpful!! :D
Image
Tumblr | Twitter
Forever busy :')
When drawing something, anything, USE REFERENCES!! Use your Google-fu!
Don't trust your memory, and don't blindly trust what others teach you either.
Research, observation, analysis, experimentation and practice are the key! (:

User avatar
saguaro
Miko-Class Veteran
Posts: 555
Joined: Sun Feb 12, 2012 9:17 am
Completed: Locked-In, Sunrise, The Censor
Projects: ?
Organization: Lucky Special Games
Tumblr: saguarofoo
itch: saguarofoo
Location: USA
Contact:

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

#3 Post by saguaro » Wed Mar 07, 2012 7:43 pm

This is awesome. Bookmarking now! Thank you very much.

User avatar
OokamiKasumi
Eileen-Class Veteran
Posts: 1767
Joined: Thu Oct 14, 2010 3:53 am
Completed: 14 games released -- and Counting.
Organization: DarkErotica Games
Deviantart: OokamiKasumi
Location: NC, USA
Contact:

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

#4 Post by OokamiKasumi » Wed Mar 07, 2012 9:06 pm

What an awesome tutorial!
-- However, some of your images are too small to read their text. Example:
Image

I understand the need to not post them at full size, (you don't need them stolen,) could you at least either make the images just a little bigger, or write under them what the text on the image says?
Ookami Kasumi ~ Purveyor of fine Smut.
Most recent Games Completed: For ALL my completed games visit: DarkErotica Games

"No amount of great animation will save a bad story." -- John Lasseter of Pixar

User avatar
Camille
Eileen-Class Veteran
Posts: 1224
Joined: Sat Apr 23, 2011 2:43 pm
Completed: Please see http://trash.moe
Projects: Spirit Parade
Organization: Cyanide Tea
Tumblr: narihira
Deviantart: crownwaltz
Skype: thievinghearts
Contact:

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

#5 Post by Camille » Wed Mar 07, 2012 9:27 pm

@OokamiKasumi: I put the images just so people could see how my layers/imagemaps are set up. You don't actually need to be able to read what's in the images for that--I just put the different imagemap images in so people could see the transparent layers and the need for the "alpha False" part. XD You can see the full size of the "complete" screens in the actual Ristorante Amore thread, though. (most of this tutorial uses coding from that game)

Anyway, glad you guys find this useful. :3
1/2 of Cyanide Tea | Break Chance Memento (BL) | Spirit Parade (Otome) | Portfolio/List of Works/Contact
I'm not around LSF very much these days; please contact me via Skype/Twitter. Ask me things!

HigurashiKira
Miko-Class Veteran
Posts: 832
Joined: Mon Nov 01, 2010 9:10 pm
Contact:

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

#6 Post by HigurashiKira » Wed Mar 07, 2012 9:46 pm

Wow, so that's how you do full customizations. I knew how to do for Save/Load and Menus, but I never knew how to do for preferences.
<.<
>.>
*swipes code and runs away*
I have moved to a new account. Please contact me here from now on. T/Y~

User avatar
vociferocity
Regular
Posts: 92
Joined: Sat Jun 12, 2010 11:27 am
Projects: Rogue of Heart, Valkyrie
Contact:

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

#7 Post by vociferocity » Wed Mar 07, 2012 10:37 pm

wow, thanks for taking the time to put this together, I know I'm going to find it super useful!

User avatar
OokamiKasumi
Eileen-Class Veteran
Posts: 1767
Joined: Thu Oct 14, 2010 3:53 am
Completed: 14 games released -- and Counting.
Organization: DarkErotica Games
Deviantart: OokamiKasumi
Location: NC, USA
Contact:

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

#8 Post by OokamiKasumi » Wed Mar 07, 2012 10:47 pm

Camille wrote:@OokamiKasumi: I put the images just so people could see how my layers/imagemaps are set up. You don't actually need to be able to read what's in the images for that--I just put the different imagemap images in so people could see the transparent layers and the need for the "alpha False" part.
I understand. :)
Camille wrote:XD You can see the full size of the "complete" screens in the actual Ristorante Amore thread, though. (most of this tutorial uses coding from that game)
I did indeed look there. Gorgeous graphics. Seriously. I just couldn't quite place what image went where on your preferences image. The little slider-bar buttons threw me off.
Camille wrote:Anyway, glad you guys find this useful. :3
I did indeed! Thank you so much for detailing this out in an understandable fashion.
Last edited by OokamiKasumi on Thu Mar 08, 2012 12:44 am, edited 1 time in total.
Ookami Kasumi ~ Purveyor of fine Smut.
Most recent Games Completed: For ALL my completed games visit: DarkErotica Games

"No amount of great animation will save a bad story." -- John Lasseter of Pixar

User avatar
Camille
Eileen-Class Veteran
Posts: 1224
Joined: Sat Apr 23, 2011 2:43 pm
Completed: Please see http://trash.moe
Projects: Spirit Parade
Organization: Cyanide Tea
Tumblr: narihira
Deviantart: crownwaltz
Skype: thievinghearts
Contact:

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

#9 Post by Camille » Wed Mar 07, 2012 11:13 pm

OokamiKasumi wrote:I just couldn't quite place what image went where on your preferences image. The little slider-bar buttons threw me off.
Ah, I see! The arrows are part of the ground image, as you can see, since they don't change. (the arrows are decorative) Each of my actual bars looks like this:

Image

(minus the background--they're all transparent) That's the part I edited in the init block and I manually positioned each bar under each particular preference heading in the imagemap. Other than that, each one of my preferences imagemap images takes up the space of the entire screen so everything kind of positioned itself for the most part.
1/2 of Cyanide Tea | Break Chance Memento (BL) | Spirit Parade (Otome) | Portfolio/List of Works/Contact
I'm not around LSF very much these days; please contact me via Skype/Twitter. Ask me things!

User avatar
OokamiKasumi
Eileen-Class Veteran
Posts: 1767
Joined: Thu Oct 14, 2010 3:53 am
Completed: 14 games released -- and Counting.
Organization: DarkErotica Games
Deviantart: OokamiKasumi
Location: NC, USA
Contact:

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

#10 Post by OokamiKasumi » Thu Mar 08, 2012 12:57 am

Camille wrote:... Each of my actual bars looks like this, (minus the background--they're all transparent):

Image
Oh! I see...
Camille wrote:That's the part I edited in the init block and I manually positioned each bar under each particular preference heading in the imagemap.
Oh, so you did the slider bar graphics as a single button as one image, an empty hole another, and used style.pref_slider to position them (in the init -2) as opposed to making the dots or the holes an entire screen transparency?

Code: Select all

init -2 python:
    style.pref_slider.left_bar = "ui/slider_left.png" #full
    style.pref_slider.right_bar = "ui/slider_right.png" #empty

    style.pref_slider.xmaximum = 162    # width of your left_bar image.
    style.pref_slider.ymaximum = 30    # height of your left_bar image.  Probably will be the height of the red part of the bar plus the slider's height.

    style.pref_slider.thumb = "ui/pixel.png"
    style.pref_slider.thumb_offset = 1    # Half of your thumb's width in pixels
    style.pref_slider.thumb_shadow = None
Camille wrote:Other than that, each one of my preferences imagemap images takes up the space of the entire screen so everything kind of positioned itself for the most part.
I discovered the hard way that using a page-sized transparency image keeps certain things from moving around unexpectedly. :)

Thank you for clarifying that for me.
Ookami Kasumi ~ Purveyor of fine Smut.
Most recent Games Completed: For ALL my completed games visit: DarkErotica Games

"No amount of great animation will save a bad story." -- John Lasseter of Pixar

User avatar
Camille
Eileen-Class Veteran
Posts: 1224
Joined: Sat Apr 23, 2011 2:43 pm
Completed: Please see http://trash.moe
Projects: Spirit Parade
Organization: Cyanide Tea
Tumblr: narihira
Deviantart: crownwaltz
Skype: thievinghearts
Contact:

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

#11 Post by Camille » Thu Mar 08, 2012 1:38 am

OokamiKasumi wrote:Oh, so you did the slider bar graphics as a single button as one image, an empty hole another, and used style.pref_slider to position them (in the init -2) as opposed to making the dots or the holes an entire screen transparency?
I positioned them in the imagemap:

Code: Select all

bar pos (627, 385) value Preference("music volume") style "pref_slider"
I explain how to do this in the post. :3 But yeah basically one image is the full bar and the other image is the empty bar. I then used the pref_slider properties to set a few other properties such as width, height, and removing the thumb. (my pixel.png is just a 1x1 transparent pixel I use for when I need transparency)
1/2 of Cyanide Tea | Break Chance Memento (BL) | Spirit Parade (Otome) | Portfolio/List of Works/Contact
I'm not around LSF very much these days; please contact me via Skype/Twitter. Ask me things!

User avatar
OokamiKasumi
Eileen-Class Veteran
Posts: 1767
Joined: Thu Oct 14, 2010 3:53 am
Completed: 14 games released -- and Counting.
Organization: DarkErotica Games
Deviantart: OokamiKasumi
Location: NC, USA
Contact:

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

#12 Post by OokamiKasumi » Thu Mar 08, 2012 3:21 am

Camille wrote:I positioned them in the imagemap:

Code: Select all

bar pos (627, 385) value Preference("music volume") style "pref_slider"
Oh... I missed it, right under the hotspots.

Code: Select all

        bar pos (675, 129) value Preference("text speed") style "pref_slider"
        bar pos (636, 510) value Preference("sound volume") style "pref_slider"
        bar pos (627, 385) value Preference("music volume") style "pref_slider"
        bar pos (634, 257) value Preference("auto-forward time") style "pref_slider"
Camille wrote:I explain how to do this in the post. :3
Ah, here it is. I must be going blind in my old age...
Camille wrote:So you position each bar where you want it to show up (those 2 coordinates) and define what preference it's for ("text speed")... ...at the bottom I changed how the bar looks under the init block.
I need to go over Aleema's tutorial again.
Camille wrote:But yeah basically one image is the full bar and the other image is the empty bar.
Okay!
Camille wrote:I then used the pref_slider properties to set a few other properties such as width, height, and removing the thumb. (my pixel.png is just a 1x1 transparent pixel I use for when I need transparency)
Ah... Gotcha. My apologies for being so dense. ~sigh.
Ookami Kasumi ~ Purveyor of fine Smut.
Most recent Games Completed: For ALL my completed games visit: DarkErotica Games

"No amount of great animation will save a bad story." -- John Lasseter of Pixar

User avatar
Gambit74
Regular
Posts: 172
Joined: Sun Oct 23, 2011 3:09 am
Location: USA
Contact:

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

#13 Post by Gambit74 » Thu Mar 08, 2012 4:23 am

Thanks so much for making this tutorial :D . Although I've pretty much learned to imagemap things on my own, I was able to learn some new things from this as well :) .
Nothing to see here, folks. For now, anyway...

User avatar
tuna_sushi
Veteran
Posts: 297
Joined: Thu Jul 07, 2011 9:33 am
Projects: BloomingBlossoms
Contact:

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

#14 Post by tuna_sushi » Thu Mar 08, 2012 6:03 am

This is really useful!
*bookmarks*
Thankies! :D
Sorry for my bad english ^_^''
Image My VN Website~

User avatar
Joey
Regular
Posts: 123
Joined: Tue Aug 02, 2011 4:51 am
Projects: Water's Edge
Organization: Etoranze
Contact:

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

#15 Post by Joey » Thu Mar 08, 2012 11:27 am

OMG, I am soooo grateful for this Camille ;w; God GUI! Thanks so much for taking the time to do this, I will study it religiously >w<
Image
Image (devblog) || devtwitter | devtumblr

Post Reply

Who is online

Users browsing this forum: No registered users