image layering trouble

[balldancing]

I'm trying to implement some difficult layering.

My idea is to have a device with a character (such as an AI) on the screen slide up from the bottom.
Here I have the layers shown separately:


Now I'm really unsure how to code this in renpy. This is all I have to start with but I know it's not at all this easy.....

Code: Select all

show phone back
show phone front
show ai smile behind phone front
at left
with moveinbottom

Even with this, I have to position it to slide in properly and AGHHHH my head hurts thinking about it. It's so simple for you guys, I know it is, so help me out if you can!

[Quelcezot]

I did something similar recently, I'd use x and y pos to line them up correctly off screen then move them into view with linear by moving them the same number of pixels up. To get rid of it you'd just reverse the code to drag them off screen and then hide the lot of them. I can't be more specific without knowing the dimensions of the images though, but if you have to line them up then thery're not currently the same, right?

An example of linear, if your image was 800 tall and you wanted a space of 100 pixels vertical and 30 from the left. You can put a bunch of these in a row and they'll run simultaneously. To line them up in advance you'd just use this same code but adjust the starting positions and move them the same amount. Then they're all slide up in perfect sync.

show phone back:
xpos 30
ypos -800
linear 2.0 ypos 900

The 2.0 is just the time is takes for the movement to happen.

You could also use that same code you have there by lining them up in your paint program and using transparent borders. That'd not be as efficient though. But it would be simple to do.

Sorry if I'm missing the point.

[philat]

As far as I know, if you name your images phone front and phone back, showing one will automatically hide the other (look into image tags to understand why).

You could look into using LiveComposite to layer the images together.

[Onishion]

Have you tried "contains"? I forget the exact code off the top of my head, I can add it later, but it let me do some pretty flexible stuff. What you should be able to do is make a "phone" image that involves the front, back, and then whatever you like in the middle, and then you can just show or hide that phone, move it around, whatever you need.

edit:

Ok, so here's a basic example of something that's worked for me:

Code: Select all

image Phone:  
    contains: #the image of the back of the phone
        "images/Phoneback.png"
        
    contains:
        ConditionSwitch(    #Whatever is going on inside the phone
            "if CharacterVariable == 'ai'", "images/Ai.png",   
            "if CharacterVariable == 'sue'", "images/Sue.png",  #etc.
            ),  
        
    contains: #the image of the face of the phone
        "images/Phoneface.png"

"Phone" is basically an image that you can do anything you like with, move it around, whatever, and all the bits inside will lock step together. You can have as many "contains" as you need, as many conditions inside a condition switch as you need, etc.

[balldancing]

Have you tried "contains"? I forget the exact code off the top of my head, I can add it later, but it let me do some pretty flexible stuff. What you should be able to do is make a "phone" image that involves the front, back, and then whatever you like in the middle, and then you can just show or hide that phone, move it around, whatever you need.

edit:

Ok, so here's a basic example of something that's worked for me:

Code: Select all

image Phone:  
    contains: #the image of the back of the phone
        "images/Phoneback.png"
        
    contains:
        ConditionSwitch(    #Whatever is going on inside the phone
            "if CharacterVariable == 'ai'", "images/Ai.png",   
            "if CharacterVariable == 'sue'", "images/Sue.png",  #etc.
            ),  
        
    contains: #the image of the face of the phone
        "images/Phoneface.png"

"Phone" is basically an image that you can do anything you like with, move it around, whatever, and all the bits inside will lock step together. You can have as many "contains" as you need, as many conditions inside a condition switch as you need, etc.

this looks about right, thank you! so if i want to call ai/sue etc. how would i do that?
right now i'm using this:

Code: Select all

show phoneback:
    zoom 0.5
    yanchor 0.5
    ypos 0.6 xpos 0.02
show phonefront:
    zoom 0.5
    yanchor 0.5
    ypos 0.6 xpos 0.02
with dissolve
show ai smile behind phonefront with dissolve:
    zoom 0.75
    yanchor 0.5
    ypos 0.9 xpos -0.07

which is the biggest pain to have over and over...

I did something similar recently, I'd use x and y pos to line them up correctly off screen then move them into view with linear by moving them the same number of pixels up. To get rid of it you'd just reverse the code to drag them off screen and then hide the lot of them. I can't be more specific without knowing the dimensions of the images though, but if you have to line them up then thery're not currently the same, right?

An example of linear, if your image was 800 tall and you wanted a space of 100 pixels vertical and 30 from the left. You can put a bunch of these in a row and they'll run simultaneously. To line them up in advance you'd just use this same code but adjust the starting positions and move them the same amount. Then they're all slide up in perfect sync.

show phone back:
xpos 30
ypos -800
linear 2.0 ypos 900

The 2.0 is just the time is takes for the movement to happen.

You could also use that same code you have there by lining them up in your paint program and using transparent borders. That'd not be as efficient though. But it would be simple to do.

Sorry if I'm missing the point.

hi thank you!! you didn't miss the point, i guess i had this in mind as well when i used the code in my reply above but without sliding up. i'll give this a try too!!!

As far as I know, if you name your images phone front and phone back, showing one will automatically hide the other (look into image tags to understand why).

You could look into using LiveComposite to layer the images together.

yep that did trouble me a fair bit and then i realised why~
i'm not sure how to use livecomposite yet, i'm still learning ㅜㅜ

[philat]

어, 한국분이시네요. 반갑습니다 ㅎㅎ

ATL contains does pretty much the same thing as livecomposite, I suppose. You'd just use it like so (although obviously you'll have to adjust the ConditionSwitch to fit whatever you're doing).

Code: Select all

image Phone:  
    contains: #the image of the back of the phone
        "images/Phoneback.png"
        
    contains:
        ConditionSwitch(    #Whatever is going on inside the phone
            "if CharacterVariable == 'ai'", "images/Ai.png",   
            "if CharacterVariable == 'sue'", "images/Sue.png",  #etc.
            ),  
        
    contains: #the image of the face of the phone
        "images/Phoneface.png"

label start:
    $ CharacterVariable = "ai"
    show Phone with dissolve
    "AI."
    $ CharacterVariable = "sue"
    "Sue."

[Onishion]

this looks about right, thank you! so if i want to call ai/sue etc. how would i do that?
right now i'm using this:

Well, it depends on how you have your character art set up. If you just have single images for each character, then the way I showed it would call those image up depending on whether the "character variable" is set to Ai or Sue, right?

You can do anything that works for you in there though. If "ai smile" is your character sprite for Ai, then you could instead put:

Code: Select all

"if CharacterVariable == 'ai'", "ai smile", 

. . .where I had that if statement, and it would reference that image. You can put any valid image into that slot of the code. You can also mess with the front half, so if you wanted it to change based on her emotions, you could do something like

Code: Select all

"if CharacterVariable == 'ai' and Emotion == 'happy'", "ai smile",
"if CharacterVariable == 'ai' and Emotion == 'sad'", "ai frown", 

. . .to call a second image. Keep in mind that CharacterVariable and Emotion are just made up variable names, you can use any variables you want.

In my game, I use a LiveComposite to make the main character, and then I use a frame like the one above to do a similar function to what you're working with I can just put the character sprite's name in, and since her emotions are changed on the Live Composite version, I don't need to fiddle with that in the contain version.

but anyways, like Philat said, once you've established that set-up, "Phone" (which is again just my name for it, use any name that you like) would become an image object just like any other, and you can move it around, fade it in any out, do anything to it that you can do to any object, but it would automatically cause those same things to happen to the backplate, top plate, and interior images you established all at once, as if you've glued them all together.

If you change the variables while the phone is visible, like changing "ai" to "sue," then sue will instantly replace AI on the phone.

One other trick you can do, is you can white something like this:

Code: Select all

image aidancing:
    "ai smile"
    ease 0.5 xpos -10
    pause 0.25
    easeout 0.5 xpos 10
    repeat

and then in that phone container we were working with before, put a line like

Code: Select all

"if CharacterVariable == 'ai' and Emotion == 'dancing'", "aidancing",

and it would cause Ai to start moving around inside the phone, using numbers that reference the phone's location, so like it doesn't matter where you put the phone on the screen, if you cause the charter to wiggle a little, they would wiggle relative to their default position inside the phone. You could use any sort of transforms in there that you like.

[balldancing]

ok 500 days later and i'm here to test it out!!!!
but.... i got this error code

Code: Select all

I'm sorry, but an uncaught exception occurred.

Compiling ATL code at game/script.rpy:30
  File "game/script.rpy", line 51, in script
    show Phone with dissolve
SyntaxError: invalid syntax (<none>, line 1)

[philat]

Can you post the whole code, i.e., where you define your Phone image and stuff?

[balldancing]

Code: Select all

image Phone:  
    contains: #the image of the back of the phone
        "backgrounds/phone_back.png"
        
    contains:
        ConditionSwitch(    #Whatever is going on inside the phone
            "if CharacterVariable == 'reika'", "images/reika.png",   
            "if CharacterVariable == 'sue'", "images/Sue.png",  #etc.
            ),  
        
    contains: #the image of the face of the phone
        "backgrounds/phone_front.png"

Code: Select all

$ CharacterVariable = "reika"
show Phone with dissolve

[balldancing]

어, 한국분이시네요. 반갑습니다 ㅎㅎ

어ㅋㅋㅋㅋㅎ한국사람이에요?? 그럼 반가워요..!

[trooper6]

Here, I tested and corrected the code:

Code: Select all

image phone:  
    contains: #the image of the back of the phone
        "images/phone_back.png"
        
    contains:
        ConditionSwitch(    #Whatever is going on inside the phone
            "phone_char == 'frank'", "images/frank surprise.png",   
            "phone_char == 'sarah'", "images/sarah angry.png")  
        
    contains: #the image of the face of the phone
        "images/phone_front.png"

# The game starts here.
label start:
    $ phone_char = "frank"
    show phone with dissolve
    "Frank."
    $ phone_char = "sarah"
    "Sarah."

    return

Special attention to get rid of the "ifs" in your condition switch and to also get rid of the extra commas there as well.

[philat]

Thanks, trooper, I hadn't run the code and wasn't looking at it closely enough. I tend to do that when I'm making conceptual suggestions and then it always come back to bite me, haha.

balldancing님, 좋은 게임 만드시길! (네, 한국사람입니닼ㅋㅋ)

[balldancing]

Here, I tested and corrected the code:

Code: Select all

image phone:  
    contains: #the image of the back of the phone
        "images/phone_back.png"
        
    contains:
        ConditionSwitch(    #Whatever is going on inside the phone
            "phone_char == 'frank'", "images/frank surprise.png",   
            "phone_char == 'sarah'", "images/sarah angry.png")  
        
    contains: #the image of the face of the phone
        "images/phone_front.png"

# The game starts here.
label start:
    $ phone_char = "frank"
    show phone with dissolve
    "Frank."
    $ phone_char = "sarah"
    "Sarah."

    return

Special attention to get rid of the "ifs" in your condition switch and to also get rid of the extra commas there as well.

Yay thank you!!
Also.. how can I adjust the sprite image inside the phone?
I have this:

Code: Select all

show phone with dissolve:
    zoom 0.6
    yanchor 0.5
    ypos 0.4 xpos 0.01

But then the sprite's head is cut off

Do I just have to change the sprite size?

[philat]

You can manually change the sprite size or use zoom.

Code: Select all

image phone:  
    contains: #the image of the back of the phone
        "images/phone_back.png"
        
    contains:
        zoom 0.7 # <-- this
        ConditionSwitch(    #Whatever is going on inside the phone
            "phone_char == 'frank'", "images/frank surprise.png",   
            "phone_char == 'sarah'", "images/sarah angry.png")  
        
    contains: #the image of the face of the phone
        "images/phone_front.png"