LayeredImage Tutorial

[BáiYù]

Download Ren'Py Tutorial - LayeredImage on itch.io or view it on GitHub!

I have written a supplementary tutorial for the LayeredImage function, introduced in Ren'Py 7. It assumes you have read the official documentation page for LayeredImages.

This tutorial was originally published on June 26, 2018 and works with Ren'Py 7.

---

It's been a couple of days since I posted this up on Twitter. Please let me know if any of the explanations in the tutorial are unclear or don't make sense, and I will try to reword them to be easier to understand. Thank you for your time!

[Saithir]

Nice tutorial, though making it a game is a bit strange. But I can read the code on github well enough, thanks for providing that

I really wanted to like the LayeredImage but I encountered a problem that I couldn't figure out how to pass the attributes into a screen - not to be shown with show, but with "add imageproxy" in a frame (basically I have a lot of npcs that all are supposed to use the same set of images but with different heads for example - and use the same image both as a side image and in gui screen frames with add)

Here in the dressup example you do it by using SetVariable, is that how that supposed to work? So I would have to SetVariable every dynamic thing every time I want to show an image of a different npc? Is that in the official documentation?

Wait, but you don't have an LayeredImageProxy for the doll anywhere, it's just using the layered image itself, right?

Now I'm confused.

[Donmai]

Nice tutorial, though making it a game is a bit strange

I believe that's a nice way to demonstrate things. I guess you never played the Ren'Py Tutorial game.

[Saithir]

I believe that's a nice way to demonstrate things. I guess you never played the Ren'Py Tutorial game.

Demonstrate the effects of the code? Sure, no better way. Read and learn how to do actually do it? Ehhhhh...

[trooper6]

When someone provides a game version of code, the usual protocol is to play the game with the raw code up at the same time.

This way you can read and learn how to do it, while also seeing how the code you are reading works in practice.

[BáiYù]

Hi Saithir, thank you for viewing my tutorial. Many of my friends who were having difficulties understanding how to use LayeredImages requested that I make it into a playable project, similar to the tutorial that comes packaged with the engine itself. Being able to see the code in action often helps visual learners who are not quite as programming-savvy understand new functions better than simply reading the official documentation alone. I believe it is best to try and make resources as accessible as possible so that a wider range of developers can benefit from it.

Regarding your question, I am a bit confused about what you are trying to achieve. It is possible to create a sideimage using LayeredImageProxy.

Code: Select all

#begin sideimage
image side august = LayeredImageProxy("august", Transform(crop=(0, 0, 497, 400), zoom=0.7, xoffset=-50))
#end sideimage

#begin sideimage_name
define au = Character("Augustina", image="august")
#end sideimage_name

I imagine adding it to a screen would be similar to how I programmed the dressup screen itself.

Code: Select all

screen dressup_example():

    ## Ensure this appears on top of other screens.
        
        #...
        
        add "doll" xalign 0.5

        #...

textbutton _("Done") action Jump('dressup_game') xalign 0.99 yalign 1.0

Where "doll" refers to the LayeredImage doll. The use of SetVariable is to allow players to switch between the dress up options.

[Saithir]

Hm, now that I've tested it it works, but not the way I expected.

I define the LayeredImage

Code: Select all

layeredimage npc:
    always:
        'female-body'

    group head:
        attribute black default
        attribute pink

Then I can use it as "side" images (not real side images but good enough)

Code: Select all

label npcs_are_talking:
    show npc as npc_1_side at Transform(xpos=-80, size=(600,700))
    show npc pink as npc_2_side at Transform(xpos=700, size=(600,700))

    "We're talking together!"

    jump test_layered_images

And I can put it into a frame with specified selection of a head like this

Code: Select all

screen npc_2():
    zorder 20
    modal False

    frame:
        pos(800, 100)
        xysize(250, 500)
        background Solid('#aaa')

        textbutton "Close" action Jump("close_npc_2")

        add "npc pink" size(300, 500)

And they all show up properly:



What's the point of the LayeredImageProxy then if I can just use "npc pink" and it still works? Is it just to make real side images so the characters talking could use it automatically?

[noeinan]

I bought the tutorial and it's really thorough and awesome! Especially the dress up example, I am going to try that out for an NPC generator I'm working on. Thanks for sharing!

[BáiYù]

What's the point of the LayeredImageProxy then if I can just use "npc pink" and it still works? Is it just to make real side images so the characters talking could use it automatically?

LayeredImageProxy will reflect changes to the original image in the proxy. For example, in the section where I demonstrated the use of sideimages, show august closedup laugh would show on August's sprite in the center of the screen as well as her sideimage. We do not need to write show august side closedup laugh
to make the sideimage update.

[noeinan]

I had time to sit down and look at this more, and I'm wowed! Thanks for making this tutorial, I never imagined a dress-up game could be so simple. I'm currently using it to make an NPC Generator, with body types and different faces etc. instead of clothes!



Here are some additions I made:

Code: Select all

        hbox:

            xalign 0.05
            yalign 0.05
            spacing 25

            textbutton _("<") action SetVariable( 'base', ( base-1 if base > 1 else base_styles_num ) )
            text "Base [base] / [base_styles_num]"
            textbutton _(">") action SetVariable( 'base', ( base+1 if base < base_styles_num else 1 ) )

The code displays what number of outfit/base/etc. the player is out out of the total, so they know where they are if there's a long list. Also, the left/right buttons now loop, so if you go all the way to the end and click > then it will start you over at the first item.

[RilDev]

Thank you for this tutorial. It speared me hours of research!