Adding an AlphaMask to a Character Sprite? [Solved]

Discuss how to use the Ren'Py engine to create visual novels and story-based games. New releases are announced in this section.
Forum rules
This is the right place for Ren'Py help. Please ask one question per thread, use a descriptive subject like 'NotFound error in option.rpy' , and include all the relevant information - especially any relevant code and traceback messages. Use the code tag to format scripts.
Message
Author
User avatar
Katy133
Miko-Class Veteran
Posts: 704
Joined: Sat Nov 16, 2013 1:21 pm
Completed: Eight Sweets, The Heart of Tales, [redacted] Life, Must Love Jaws, A Tune at the End of the World, Three Guys That Paint, The Journey of Ignorance, Portal 2.5.
Projects: The Butler Detective
Tumblr: katy-133
Deviantart: Katy133
Soundcloud: Katy133
itch: katy133
Location: Canada
Contact:

Adding an AlphaMask to a Character Sprite? [Solved]

#1 Post by Katy133 »

I'm trying to use an AlphaMask to overlay shadows on top of a character sprite that enters and exits the screen (ie: moves across the screen).

The images are as follows, layered in this order:
shadows.png (a semi-transparent image of dark patches/shadows. It's the same dimensions as the background)
character_sprite.png (a character)
background.png (a drawn background)

I want the "shadows.png" file to only appear over the character sprite, and when the character moves, the shadows don't, creating the illusion that the shadows are cast by the background. Kinda like the shadows on the character in this animation (0:37 secs into the video).

I tried using:

Code: Select all

characterart = AlphaMask('character_sprite.png', 'shadows.png')

Code: Select all

label start:
    scene background
    show characterart with easeinleft
But this doesn't create the intended result. Any help/pointers would be appreciated.
Last edited by Katy133 on Sun Apr 08, 2018 8:50 pm, edited 1 time in total.
ImageImage

My Website, which lists my visual novels.
Become a patron on my Patreon!

User avatar
PyTom
Ren'Py Creator
Posts: 16088
Joined: Mon Feb 02, 2004 10:58 am
Completed: Moonlight Walks
Projects: Ren'Py
IRC Nick: renpytom
Github: renpytom
itch: renpytom
Location: Kings Park, NY
Contact:

Re: Adding an AlphaMask to a Character Sprite?

#2 Post by PyTom »

It's a little hard to tell what's wrong, but my guess is you want two things:

- You want three 'layers' - the background, the sprite, and the masked shadow.
- You want the sprite and the masked shadow to move together.

First off, define an ATL transform.

Code: Select all

transform easein_transform:
     offscreenleft
     easein 1.0 left
Now, show the three images.

Code: Select all

scene background
show characterart at easein_transform
show expression AlphaMask("shadows", At("characterart", easeinleft_transform)) as mask
The last line is the interesting one, and what it does is to show an alphamask with the shadows image as the color displayable, and the moving character art as the mask displayable.

I haven't tried it, since I don't have your images, so let me know if it works.
Supporting creators since 2004
(When was the last time you backed up your game?)
"Do good work." - Virgil Ivan "Gus" Grissom
Software > Drama • https://www.patreon.com/renpytom

User avatar
Katy133
Miko-Class Veteran
Posts: 704
Joined: Sat Nov 16, 2013 1:21 pm
Completed: Eight Sweets, The Heart of Tales, [redacted] Life, Must Love Jaws, A Tune at the End of the World, Three Guys That Paint, The Journey of Ignorance, Portal 2.5.
Projects: The Butler Detective
Tumblr: katy-133
Deviantart: Katy133
Soundcloud: Katy133
itch: katy133
Location: Canada
Contact:

Re: Adding an AlphaMask to a Character Sprite?

#3 Post by Katy133 »

PyTom wrote: Tue Mar 20, 2018 1:07 amThe last line is the interesting one, and what it does is to show an alphamask with the shadows image as the color displayable, and the moving character art as the mask displayable.

I haven't tried it, since I don't have your images, so let me know if it works.
After some more experimenting, I was able to get the sprite to move using:

Code: Select all

show expression AlphaMask("shadows", "older man normal") as mask:
        easeinleft_transform
Before that, I tried:

Code: Select all

show expression AlphaMask("shadows", At("older man normal", easeinleft_transform)) as mask
but that doesn't seem to move the character sprite (the sprite just appears on-screen without a transition).

The problem now is that the "shadows" layer moves with the sprite (instead of the shadows layer staying in one place, with just the sprite moving--which is what I want), and the character sprite disappears--it's only the masked shadows layer that appears (instead of the shadows AND the sprite underneath being visible). Is there any way to achieve these effects?
ImageImage

My Website, which lists my visual novels.
Become a patron on my Patreon!

User avatar
PyTom
Ren'Py Creator
Posts: 16088
Joined: Mon Feb 02, 2004 10:58 am
Completed: Moonlight Walks
Projects: Ren'Py
IRC Nick: renpytom
Github: renpytom
itch: renpytom
Location: Kings Park, NY
Contact:

Re: Adding an AlphaMask to a Character Sprite?

#4 Post by PyTom »

I'd assume you'd want shadows.png to be transparent enough that the sprite can shine through. In my example, the shadows layer should stay put - yours is very different, and shouldn't be expected to work, since you're moving everything, not just the mask.
Supporting creators since 2004
(When was the last time you backed up your game?)
"Do good work." - Virgil Ivan "Gus" Grissom
Software > Drama • https://www.patreon.com/renpytom

User avatar
Katy133
Miko-Class Veteran
Posts: 704
Joined: Sat Nov 16, 2013 1:21 pm
Completed: Eight Sweets, The Heart of Tales, [redacted] Life, Must Love Jaws, A Tune at the End of the World, Three Guys That Paint, The Journey of Ignorance, Portal 2.5.
Projects: The Butler Detective
Tumblr: katy-133
Deviantart: Katy133
Soundcloud: Katy133
itch: katy133
Location: Canada
Contact:

Re: Adding an AlphaMask to a Character Sprite?

#5 Post by Katy133 »

PyTom wrote: Tue Mar 20, 2018 9:13 pm I'd assume you'd want shadows.png to be transparent enough that the sprite can shine through. In my example, the shadows layer should stay put - yours is very different, and shouldn't be expected to work, since you're moving everything, not just the mask.
I've tried:

Code: Select all

show expression AlphaMask("shadows", At("older man normal", easeinleft_transform)) as mask
but that just caused the masked shadows layer to appear, without a transition. What am I doing wrong?

I've placed:

Code: Select all

transform easein_transform:
     offscreenleft
     easein 1.0 left
before the "start label" section of the script.
ImageImage

My Website, which lists my visual novels.
Become a patron on my Patreon!

User avatar
PyTom
Ren'Py Creator
Posts: 16088
Joined: Mon Feb 02, 2004 10:58 am
Completed: Moonlight Walks
Projects: Ren'Py
IRC Nick: renpytom
Github: renpytom
itch: renpytom
Location: Kings Park, NY
Contact:

Re: Adding an AlphaMask to a Character Sprite?

#6 Post by PyTom »

Can you put this together as a demo and sent it to me? This should basically work, but the definition of images matter.
Supporting creators since 2004
(When was the last time you backed up your game?)
"Do good work." - Virgil Ivan "Gus" Grissom
Software > Drama • https://www.patreon.com/renpytom

User avatar
Katy133
Miko-Class Veteran
Posts: 704
Joined: Sat Nov 16, 2013 1:21 pm
Completed: Eight Sweets, The Heart of Tales, [redacted] Life, Must Love Jaws, A Tune at the End of the World, Three Guys That Paint, The Journey of Ignorance, Portal 2.5.
Projects: The Butler Detective
Tumblr: katy-133
Deviantart: Katy133
Soundcloud: Katy133
itch: katy133
Location: Canada
Contact:

Re: Adding an AlphaMask to a Character Sprite?

#7 Post by Katy133 »

PyTom wrote: Fri Mar 23, 2018 1:23 am Can you put this together as a demo and sent it to me? This should basically work, but the definition of images matter.
Sure. I've attached it here.

If you need me to send it to you using another method, or need anything else, please let me know.
Attachments
Mask Test.zip
(1.03 MiB) Downloaded 107 times
ImageImage

My Website, which lists my visual novels.
Become a patron on my Patreon!

User avatar
PyTom
Ren'Py Creator
Posts: 16088
Joined: Mon Feb 02, 2004 10:58 am
Completed: Moonlight Walks
Projects: Ren'Py
IRC Nick: renpytom
Github: renpytom
itch: renpytom
Location: Kings Park, NY
Contact:

Re: Adding an AlphaMask to a Character Sprite?

#8 Post by PyTom »

Okay, I've modified Ren'Py to be able to handle this case a bit more cleanly, so please update to the 6.99.14.3 prerelease.

In that release, in your demo:

Code: Select all

    show older man normal at easeinleft_transform
    show expression AlphaMask("shadows", At("older man normal", easeinleft_transform)) as mask
will work together to do what you want.
Supporting creators since 2004
(When was the last time you backed up your game?)
"Do good work." - Virgil Ivan "Gus" Grissom
Software > Drama • https://www.patreon.com/renpytom

User avatar
Katy133
Miko-Class Veteran
Posts: 704
Joined: Sat Nov 16, 2013 1:21 pm
Completed: Eight Sweets, The Heart of Tales, [redacted] Life, Must Love Jaws, A Tune at the End of the World, Three Guys That Paint, The Journey of Ignorance, Portal 2.5.
Projects: The Butler Detective
Tumblr: katy-133
Deviantart: Katy133
Soundcloud: Katy133
itch: katy133
Location: Canada
Contact:

Re: Adding an AlphaMask to a Character Sprite?

#9 Post by Katy133 »

PyTom wrote: Wed Apr 04, 2018 12:08 am Okay, I've modified Ren'Py to be able to handle this case a bit more cleanly, so please update to the 6.99.14.3 prerelease.

In that release, in your demo:

Code: Select all

    show older man normal at easeinleft_transform
    show expression AlphaMask("shadows", At("older man normal", easeinleft_transform)) as mask
will work together to do what you want.
Thank you so much! :D
ImageImage

My Website, which lists my visual novels.
Become a patron on my Patreon!

User avatar
trooper6
Lemma-Class Veteran
Posts: 3712
Joined: Sat Jul 09, 2011 10:33 pm
Projects: A Close Shave
Location: Medford, MA
Contact:

Re: Adding an AlphaMask to a Character Sprite? [Solved]

#10 Post by trooper6 »

Katy133, could you post a quick video clip of what your animation looks like?
A Close Shave:
*Last Thing Done (Aug 17): Finished coding emotions and camera for 4/10 main labels.
*Currently Doing: Coding of emotions and camera for the labels--On 5/10
*First Next thing to do: Code in all CG and special animation stuff
*Next Next thing to do: Set up film animation
*Other Thing to Do: Do SFX and Score (maybe think about eye blinks?)
Check out My Clock Cookbook Recipe: http://lemmasoft.renai.us/forums/viewto ... 51&t=21978

User avatar
Katy133
Miko-Class Veteran
Posts: 704
Joined: Sat Nov 16, 2013 1:21 pm
Completed: Eight Sweets, The Heart of Tales, [redacted] Life, Must Love Jaws, A Tune at the End of the World, Three Guys That Paint, The Journey of Ignorance, Portal 2.5.
Projects: The Butler Detective
Tumblr: katy-133
Deviantart: Katy133
Soundcloud: Katy133
itch: katy133
Location: Canada
Contact:

Re: Adding an AlphaMask to a Character Sprite? [Solved]

#11 Post by Katy133 »

trooper6 wrote: Sun Apr 08, 2018 8:54 pm Katy133, could you post a quick video clip of what your animation looks like?
Sure!


Tutorial script I used:

Code: Select all

define s = Character("Sylvie")

transform easeinleft_transform:
     offscreenleft
     easein 1.0 left
     
transform easeinright_transform:
     offscreenright
     easein 1.0 right
     
transform gocenter_transform:
     easein 1.0 center
     
transform centertoleft_transform:
     center
     easein 1.0 left
     
transform centertoright_transform:
     center
     easein 1.0 right

# The game starts here.

label start:

    scene room_morning_light_on

    s "You've created a new Ren'Py game."
    
    s "You see this background? It's called \"room morning light on.\" It's by Uncle Mugen."
    
    #show expression AlphaMask("shadows", At("older man normal", easeinleft_transform)) as mask
    
    show sylvie blue normal at easeinleft_transform
    show expression AlphaMask("shadows", At("sylvie blue normal", easeinleft_transform)) as mask
    
    s "I'm Sylvie."
    
    show sylvie blue normal at gocenter_transform
    show expression AlphaMask("shadows", At("sylvie blue normal", gocenter_transform)) as mask
    
    s "I was in the Ren'Py tutorial game, \"The Question.\""
    
    s "Today, I'm using this video to show you how to use Alpha Masks in your Ren'Py visual novel."
    
    s "A sort of tutorial. I'll post a link to the script I'm using in the video's description."
    
    show sylvie blue normal at centertoleft_transform
    show expression AlphaMask("shadows", At("sylvie blue normal", centertoleft_transform)) as mask
    
    s "Did you know you can create a cool noir lighting effect? All you need is a png image with shadows..."
    
    show expression AlphaMask("light", At("sylvie blue normal", left)) as mask with dissolve
    
    s "Or coloured light."
    
    show sylvie blue normal at gocenter_transform
    show expression AlphaMask("light", At("sylvie blue normal", gocenter_transform)) as mask
    
    s "The Alpha Mask keeps the shadows and light only on me, rather than on the background."
    
    show expression AlphaMask("shadows", At("sylvie blue normal", center)) as mask
    
    s "They have to be semi-transparent..."
    
    show expression AlphaMask("hardshadows", At("sylvie blue normal", center)) as mask with dissolve
    
    s "Or you can use solid shadows for a super-noir, black and white look."
    
    show expression AlphaMask("shadows", At("sylvie blue normal", center)) as mask with dissolve
    
    s "The shadows look like window blinds, right?"
    
    show sylvie blue normal at centertoright_transform
    show expression AlphaMask("shadows", At("sylvie blue normal", centertoright_transform)) as mask
    
    s "I can walk around..."
    
    show sylvie green giggle
    show expression AlphaMask("shadows", At("sylvie green giggle", right)) as mask

    s "I can even turn and change my sprite seamlessly!"
    
    s "Hope this helps!"

    return
ImageImage

My Website, which lists my visual novels.
Become a patron on my Patreon!

User avatar
trooper6
Lemma-Class Veteran
Posts: 3712
Joined: Sat Jul 09, 2011 10:33 pm
Projects: A Close Shave
Location: Medford, MA
Contact:

Re: Adding an AlphaMask to a Character Sprite? [Solved]

#12 Post by trooper6 »

Wow! Could you post a zip of the actual test project so I could study the image files? I don’t completely have Alpha Mask settled in my mind and would love to see the actual art files. I might finally get it!
A Close Shave:
*Last Thing Done (Aug 17): Finished coding emotions and camera for 4/10 main labels.
*Currently Doing: Coding of emotions and camera for the labels--On 5/10
*First Next thing to do: Code in all CG and special animation stuff
*Next Next thing to do: Set up film animation
*Other Thing to Do: Do SFX and Score (maybe think about eye blinks?)
Check out My Clock Cookbook Recipe: http://lemmasoft.renai.us/forums/viewto ... 51&t=21978

User avatar
Katy133
Miko-Class Veteran
Posts: 704
Joined: Sat Nov 16, 2013 1:21 pm
Completed: Eight Sweets, The Heart of Tales, [redacted] Life, Must Love Jaws, A Tune at the End of the World, Three Guys That Paint, The Journey of Ignorance, Portal 2.5.
Projects: The Butler Detective
Tumblr: katy-133
Deviantart: Katy133
Soundcloud: Katy133
itch: katy133
Location: Canada
Contact:

Re: Adding an AlphaMask to a Character Sprite? [Solved]

#13 Post by Katy133 »

trooper6 wrote: Tue Apr 10, 2018 1:27 am Wow! Could you post a zip of the actual test project so I could study the image files? I don’t completely have Alpha Mask settled in my mind and would love to see the actual art files. I might finally get it!
Sure, I've attached it to this post. :D
Attachments
Alpha Mask Tutorial Test.zip
(4.09 MiB) Downloaded 419 times
ImageImage

My Website, which lists my visual novels.
Become a patron on my Patreon!

User avatar
trooper6
Lemma-Class Veteran
Posts: 3712
Joined: Sat Jul 09, 2011 10:33 pm
Projects: A Close Shave
Location: Medford, MA
Contact:

Re: Adding an AlphaMask to a Character Sprite? [Solved]

#14 Post by trooper6 »

Thanks! You are awesome. I thought that the alphamask had to be inverted color-wise, but apparently not. Cool!
A Close Shave:
*Last Thing Done (Aug 17): Finished coding emotions and camera for 4/10 main labels.
*Currently Doing: Coding of emotions and camera for the labels--On 5/10
*First Next thing to do: Code in all CG and special animation stuff
*Next Next thing to do: Set up film animation
*Other Thing to Do: Do SFX and Score (maybe think about eye blinks?)
Check out My Clock Cookbook Recipe: http://lemmasoft.renai.us/forums/viewto ... 51&t=21978

User avatar
trooper6
Lemma-Class Veteran
Posts: 3712
Joined: Sat Jul 09, 2011 10:33 pm
Projects: A Close Shave
Location: Medford, MA
Contact:

Re: Adding an AlphaMask to a Character Sprite? [Solved]

#15 Post by trooper6 »

I just got to play through this, Thanks Katy133. I learned a lot!
I feel like I still need to learn more about AlphaMasks, when you use them, the various things you can do with them, that sort of thing. But this is a great start!
Thanks!

ETA: Katy133...actually I have a request...which you can ignore!

Do you think you could update your cookbook recipe to explain other uses of AlphaMask and what a person would do with AlphaDissolve? I feel like these tools must be very useful, but I don't really understand when you'd want to use them or what that would look like.
A Close Shave:
*Last Thing Done (Aug 17): Finished coding emotions and camera for 4/10 main labels.
*Currently Doing: Coding of emotions and camera for the labels--On 5/10
*First Next thing to do: Code in all CG and special animation stuff
*Next Next thing to do: Set up film animation
*Other Thing to Do: Do SFX and Score (maybe think about eye blinks?)
Check out My Clock Cookbook Recipe: http://lemmasoft.renai.us/forums/viewto ... 51&t=21978

Post Reply

Who is online

Users browsing this forum: Google [Bot], Kocker