How to enter the game industry (part 6: Ren'py Scripting, Visuals) [tutorial]

part 1: your skills
part 2: Choosing an Engine
part 3: Ren'py Game Engine
part 4: Ren'py Scripting
<< Part 5 Ren'py More Scripting

Are you done getting excited over making your best vision of a text adventure yet? Well the time is up, now we're going to add some appeal to our game, shapes and colors that will make your game look awesome.

For starter we need some images, few backgrounds and few characters, You can find some free to use backgrounds provided by one of awesome Ren'py users Uncle Mugen here: UNCLE MUGEN'S FREE VN (OELVN) RESOURCES
And since i don't know anywhere to find free anime characters for games, you can use my free 3D characters I rendered to use on one of my own games. there's a google drive link to download a whole bunch of them.
Too lazy to choose images? Just want to follow the tutorial? Download these already renamed images that I'm going to use in this tutorial:
bg1.png || bg2.png || afr_01.png || afr_02.png || bam_01.png || bam_04.png
You can add those images to your game directory by pressing the game folder button:

and when the directory opened you can drag or copy your images into it. I like to create a folder named "img" to keep my images nice and tidy in the same place:

For this tutorial I'll add: two backgrounds, two of Bambi character and two of Afra and since we created this game for 720 resolution those images are the right size and don't need any resizing but if you selected 1080 while making your game, you can scale them to fit your game.
Don't worry, if you don't have any Photoshop experience wait a day or two I'm writing a tutorial to address that.

---

---

Let's go straight to adding a background to our game. Open your script.rpy again and run the game and put it on auto-reload(if you forgot, launch the game and while it's open press shift+r)
Now let's delete all of your hard work and go to the basics, if you want to keep what you've made to this point simply make a new game for this tutorial.

label start:
    
    return

---

Show image

To show an image on the screen you can use show imagecommand followed by the address of your image.

label start:
    show image "img/bg1.png"
    "sdsd"
    return

You might wonder why that address is not like D:/gamedev/rentest/TestGame/game/img/bg1.png
In Ren'py the game folder is your games root directory, any address is relative to that folder no matter where it is on your computer. Inside the game folder we made an img folder for our images, all we have to say is go to img folder and find that image.
What's the "sdsd" for? (you might ask)
That's just a line of dialogue to pause the game, if there was no dialogue, the game would show the image and end so fast you wouldn't even see it. Check the game with and without it and you'll get what I'm saying.

Before we move to the characters I should mention that you don't need to type the images address everytime you want to show it, if you remember variables, we can store images under a name as well.

image roof = "img/bg1.png"
label start:
    show roof
    "sdsd"
    return

It will make scripting easier to not type the image "address" every time, but what if we have more than two roof images? (you might ask)
in that case we can use image tags while defining our images:

image roof day = "img/bg1.png"
image roof night = "img/bg2.png"
label start:
    show roof day
    "sdsd"
    return

You can have images with the same names but one or more different tags.

You might ask why not do this:

image roof_day = "img/bg1.png"
image roof_night = "img/bg2.png"
label start:
    show roof_day
    "sdsd"
    return

That can work too but there are advantages to tags:

• for starter underlines are hard to type.
• then the image names can get longer than their address if we have school_roof_night_dirty and render the whole defining images useless.
• but the main reason is images with the same names will always replace each other, it will come handy when you want to replace the background behind your characters, because new images will stack on top of each other in Ren'py, if you show an image with a different name it will cover every image that we showed before it, but if we replace an image it will keep it's position in the stack.

let's do some experiment:

image roof_day = "img/bg1.png"
image roof_night = "img/bg2.png"
image afra_angry = "img/afr_01.png"
label start:
    show roof_day
    "background"
    show afra_angry
    "character"
    show roof_night
    "background change"
    return

then

image roof day = "img/bg1.png"
image roof night = "img/bg2.png"
image afra angry = "img/afr_01.png"
label start:
    show roof day
    "background"
    show afra angry
    "character"
    show roof night
    "background change"
    return

Run both versions and see the difference.

As you might noticed, showing characters is not different from showing backgrounds, the same principles applies. And with characters the tags gain a whole another level of meaning with their different clothing, poses and expressions.

Positions

When we start with characters there's another factor in play, "where the character should stand in the screen?". In the example above Afra is standing in the middle. Now run this.

image roof day = "img/bg1.png"
image afra angry = "img/afr_01.png"
label start:
    show roof day
    "background"
    show afra angry at left
    "character"
    return

Now lets add Bambi:

image roof day = "img/bg1.png"
image afra angry = "img/afr_01.png"
image bambi = "img/bam_04.png"
label start:
    show roof day
    "background"
    show afra angry at left
    show bambi at right
    "characters"
    return

Starting to look like a game, right? but something is missing, don't you think so?

---

Transitions

This game lacks animation, Let's add some:

image roof day = "img/bg1.png"
image afra angry = "img/afr_01.png"
image bambi = "img/bam_04.png"
label start:
    scene black
    show roof day with dissolve
    "background"
    show afra angry at left with moveinright
    show bambi with dissolve
    show bambi at right with move
    "characters"
    return

Run and enjoy.

Now let's see what's new:
Line 5: scene black, A scene is usually used to put some background behind everything before starting to fade the images in, the default checker background of Ren'py is not a good sight in a serious game, black is one of the pre-defined colors in Ren'py. The main function of scene is to clear all previously loaded images from the screen though.
line 6: show roof day with dissolve, The with command is for adding a transition to a show/hide command, Here's a list of pre-defined transitions you can put after with.
Lines 9 and 10: show bambi twice., As you might've guessed showing the character that's already shown wouldn't change much, unless, there is a change in tags or position. in fact show is used to move characters from position to position and often with move is used for that purpose.

Let's do another experiment:

image roof day = "img/bg1.png"
image afra angry = "img/afr_01.png"
image bambi = "img/bam_04.png"
label start:
    scene black
    show roof day with dissolve
    "background"
    show afra angry
    show bambi
    with dissolve
    
    show afra at left
    show bambi at right
    with move
    "characters"
    return

You can animate multiple show/hide commands at the same time by using the same with command for them, All you need to do is put your show/hide commands after each other and put a with transition on the next line, it will effect all of them at the same time.

Hide

What's this hide you keep mentioning? (you might ask)
I think the name is pretty self explanatory, it hides images, let's go to the example:

image roof day = "img/bg1.png"
image afra angry = "img/afr_01.png"
label start:
    scene black
    show roof day with dissolve
    "background"
    show afra angry with dissolve
    "show"
    hide afra with dissolve
    "hide"
    return

Have you notice the missing angry from hide afra with dissolve? the tags are not necessary for hide command, since there's only one version of that image that can be shown at any time, there's no need to worry about which to hide, it will hide the image named afra, whatever the tag is.

Combining what you've learned in this tutorial with the previous parts, you can now code a full game, from here on, it's all about mastering the skill you've obtained and enhancing it with lots of neat tricks you can learn in future part of these tutorials, or renpy website and lemmasoft forum if you're impatient.

part 6: Ren'py Scripting, Visuals
part 7: Ren'py Scripting, Dialogue
Part 8: Ren'py Scripting, Conclusion
Part 9: Images
Part 10: Animation
Part 11: sound editing and voice acting