Customizing and Polishing Your Game

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.
Post Reply
Message
Author
CheeryMoya
Miko-Class Veteran
Posts: 892
Joined: Sun Jan 01, 2012 4:09 am

Customizing and Polishing Your Game

#1 Post by CheeryMoya » Sun Dec 22, 2013 8:10 pm

So, you've got your game and you want to make it look pretty. You probably thought to at least change the textbox, but there's a lot more where that came from. Stop making your games look basic! Make 'em look great.
-------

Table of Contents
1. Making Your Elements
1a. Imagemap
1b. Imagebuttons
1c. Making Ren'Py Textbuttons look Good

2. GUI, Screens, and Configurations
2a. The ADV+NVL Textbox and Quickmenu
2b. Main Menu Screen
2c. Save/Load Screen
2d. Preferences Screen
2e. Yes/No Exit Screen
2f. Help Screen
2g. Navigation Screen
2h. Choice Menus and Input
2i. options.rpy Configurations

3. Extra Gallery
3a. Music Room
3b. Image Gallery
3c. Author's Notes

4. Cursors and More Configurations!
4a. Custom Cursors
4b. Game and Window Icon Configuration

5. Miscellaneous
5a. Click to Continue Icon/CTC
5b. Splashscreen

6. Android
6a. Loading Splashscreen
6b. Application Icon

-------


1. Making Your Elements
GUI stands for Game User Interface, and is an important but often overlooked item during development. The most common programs used in the creation of GUI elements is Photoshop and GIMP (which is a free alternative to PS). These programs should include a Shapes Tool which should look like this:
Image
Rectangle Tool will be your best friend most of the time, but feel free to experiment with other shapes. After you create your desired shape, most times you'll use the Wand Tool to select the space around it, choose Select->Inverse from the drop-down menu at the top, then choose Image->Crop. Remember to apply Opacity if needed and export to .png.

1a. Imagemap
Imagemaps are easy to set up in your image editor since you can control where everything is placed. Simply set up how you want your screens to appear and export 3 versions: Ground, Idle, Hover. Read Camille's [Tutorial] Crash course in screen language/UI design thread for more details.

1b. Imagebuttons
With imagebuttons, you can easily swap out individual elements afterwards. They can be more versatile than imagemaps in certain cases, especially if you have a non-square button. Read leon's Imagebutton GUI Framework [GxImagebuttons] thread for more details.

1c. Making Ren'Py Textbuttons look Good
There may be times when you just need a simple font button with no image effects besides the occasional outline, and when that time comes, don't bother with your image editor! Here's an example of a screen using the textbuttons all done in Ren'Py itself.

Code: Select all

screen extras:
    tag menu
    add "ui/backdrop.png"
        style_group "title"
    
        xalign 0.5
        yalign 0.9
        spacing 25

        textbutton _("Characters") action ShowMenu('ch_gallery') text_style "extra" style "extra"
        text("|") style "extra"
        textbutton _("Backgrounds") action ShowMenu('bg_gallery') text_style "extra" style "extra"
        text("|") style "extra"
        textbutton _("Music Box") action ShowMenu('music_room') text_style "extra" style "extra"
        text("|") style "extra"
        textbutton _("Title") action ShowMenu('main_menu') text_style "extra" style "extra"

init -2 python:
    style.extra = Style(style.default)
    style.extra.size=40
    style.extra.bold=True
    style.extra.font="ui/font.ttf"
    #style.extra.outlines=[(3, "#ececec", 0, 0)]
    style.extra.color="fff"
    style.extra.idle_color = "#898989"
    style.extra.hover_color = "#c5c5c5"
    style.extra.selected_color = "#787878"
    style.extra.kerning = 5
It ends up looking like this.
Image
Nifty! And it will probably save you some filesize too.

2. GUI, Screens, and Configurations
Now we can jump into some heavy coding. Most of the codes you need to fiddle with are in screens.rpy and options.rpy.

2a., 2b., 2c., 2d., 2e., 2f., 2g., 2h.
(Too much to write! I'll fill it in later.)
Read Aleema's [Tutorial] Customizing the Textbox thread for more details.
Read Aleema's [Tutorial] Customizing Menus thread for more details.
Read OokamiKasumi's [Tutorial] Customizing the NVL Textbox for more details.

2i. options.rpy Configurations
Look for the following codes in your game and change them.

Code: Select all

config.window_title = u"Game"
config.name = "Game"
config.version = "0.0"
config.has_sound = True
config.has_music = True
config.has_voice = True
config.enter_transition = None
config.exit_transition = None
config.intra_transition = None
config.main_game_transition = None
config.game_main_transition = None
config.end_splash_transition = None
config.end_game_transition = None
config.after_load_transition = None
config.window_show_transition = None
config.window_hide_transition = None
config.adv_nvl_transition = dissolve
config.nvl_adv_transition = dissolve
config.enter_yesno_transition = None
config.exit_yesno_transition = None
config.enter_replay_transition = None
config.exit_replay_transition = None
config.say_attribute_transition = None
config.default_text_cps = 0
config.default_afm_time = 10
3. Extra Gallery
Read leon's Instant CG and BG gallery for more details.

4. Cursors and More Configurations!

4a. Custom Cursors
Read KimiYoriBaka's custom mouse cursor code thread for more details.

4b. Game and Window Icon Configuration
For the Window Icon, add this to your options.rpy:

Code: Select all

    config.window_icon = "ui/ctc.png"
    config.windows_icon = "ui/ctc.png"
For the game icon, take a small image, turn it into icon.ico (Windows) and icon.icns (Macintosh), and place it outside the game folder. Use this site to convert your image.

5. Miscellaneous

5a. Click to Continue Icon/CTC
Read OokamiKasumi's [Tutorial] CTC ~ Click to Continue Icon for more details.

5b. Splashscreen
In your script.rpy, add a code that looks like this:

Code: Select all

image splash = "ui/splash.png"

label splashscreen:
    $ renpy.pause(0)
    scene black 
    with Pause(0.5)
    
    show splash 
    with Dissolve(1.0)
    with Pause(2.0)
    
    scene black 
    with Dissolve(1.0)
    with Pause(1.0)

    return
6. Android

6a. Loading Splashscreen
In the base directory of your project outside the game folder, place an image called android-presplash.jpg.

6b. Application Icon
In the base directory of your project outside the game folder, place an image called android-android-icon.png.

-------

This is a WIP thread! I'll fill in the blanks later, but I hope this helps a bit.

User avatar
Hibikai
Regular
Posts: 25
Joined: Mon Aug 13, 2012 12:46 pm
Contact:

Re: Customizing and Polishing Your Game

#2 Post by Hibikai » Sat Dec 28, 2013 9:30 am

This is really helpful! Thanks!(⌒▽⌒)

User avatar
Rosstin2
Veteran
Posts: 253
Joined: Thu Jan 09, 2014 12:42 pm
Completed: King's Ascent, Kitty Love
Projects: Queen At Arms, Rex Rocket
Organization: Aqualuft Games
Contact:

Re: Customizing and Polishing Your Game

#3 Post by Rosstin2 » Wed Feb 19, 2014 11:46 am

Brilliant, extremely useful. Just what I needed.
Image

Post Reply

Who is online

Users browsing this forum: chrisNEET