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: 562
Joined: Sat Nov 16, 2013 1:21 pm
Completed: 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
itch: katy133
Location: Canada
Contact:

Adding an AlphaMask to a Character Sprite? [Solved]

#1 Post by Katy133 » Sat Mar 17, 2018 9:43 pm

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: 15061
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 » Tue Mar 20, 2018 1:07 am

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
"Silly and fun things are important." - Elon Musk
Software > Drama • https://www.patreon.com/renpytom

User avatar
Katy133
Miko-Class Veteran
Posts: 562
Joined: Sat Nov 16, 2013 1:21 pm
Completed: 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
itch: katy133
Location: Canada
Contact:

Re: Adding an AlphaMask to a Character Sprite?

#3 Post by Katy133 » Tue Mar 20, 2018 8:56 pm

PyTom wrote:
Tue Mar 20, 2018 1:07 am
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.
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: 15061
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 » 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.
Supporting creators since 2004
(When was the last time you backed up your game?)
"Do good work." - Virgil Ivan "Gus" Grissom
"Silly and fun things are important." - Elon Musk
Software > Drama • https://www.patreon.com/renpytom

User avatar
Katy133
Miko-Class Veteran
Posts: 562
Joined: Sat Nov 16, 2013 1:21 pm
Completed: 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
itch: katy133
Location: Canada
Contact:

Re: Adding an AlphaMask to a Character Sprite?

#5 Post by Katy133 » Wed Mar 21, 2018 8:58 pm

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: 15061
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 » 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.
Supporting creators since 2004
(When was the last time you backed up your game?)
"Do good work." - Virgil Ivan "Gus" Grissom
"Silly and fun things are important." - Elon Musk
Software > Drama • https://www.patreon.com/renpytom

User avatar
Katy133
Miko-Class Veteran
Posts: 562
Joined: Sat Nov 16, 2013 1:21 pm
Completed: 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
itch: katy133
Location: Canada
Contact:

Re: Adding an AlphaMask to a Character Sprite?

#7 Post by Katy133 » Fri Mar 23, 2018 9:32 pm

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 5 times
ImageImage

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

User avatar
PyTom
Ren'Py Creator
Posts: 15061
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 » 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.
Supporting creators since 2004
(When was the last time you backed up your game?)
"Do good work." - Virgil Ivan "Gus" Grissom
"Silly and fun things are important." - Elon Musk
Software > Drama • https://www.patreon.com/renpytom

User avatar
Katy133
Miko-Class Veteran
Posts: 562
Joined: Sat Nov 16, 2013 1:21 pm
Completed: 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
itch: katy133
Location: Canada
Contact:

Re: Adding an AlphaMask to a Character Sprite?

#9 Post by Katy133 » Sun Apr 08, 2018 8:50 pm

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: 3186
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 » Sun Apr 08, 2018 8:54 pm

Katy133, could you post a quick video clip of what your animation looks like?
A Close Shave:
*Last Thing Done (Jul 7) Finished Emotion Matrix for Joint Customer Sprite.
*Currently Doing: Print Matrices, & decide emotions to use for Joint Sprite, think about blinking and lip flap. Maybe also about TransitionConditionSwitch?
*First Next thing to do: Code in all the sprite emotion and camera movement for Close Shave Sprite Sections
*Next Thing to Do: Code in all CG and special animation stuff
*Other Next Thing: Do SFX
Check out My Clock Cookbook Recipe: http://lemmasoft.renai.us/forums/viewto ... 51&t=21978

User avatar
Katy133
Miko-Class Veteran
Posts: 562
Joined: Sat Nov 16, 2013 1:21 pm
Completed: 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
itch: katy133
Location: Canada
Contact:

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

#11 Post by Katy133 » Mon Apr 09, 2018 9:37 pm

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: 3186
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 » 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!
A Close Shave:
*Last Thing Done (Jul 7) Finished Emotion Matrix for Joint Customer Sprite.
*Currently Doing: Print Matrices, & decide emotions to use for Joint Sprite, think about blinking and lip flap. Maybe also about TransitionConditionSwitch?
*First Next thing to do: Code in all the sprite emotion and camera movement for Close Shave Sprite Sections
*Next Thing to Do: Code in all CG and special animation stuff
*Other Next Thing: Do SFX
Check out My Clock Cookbook Recipe: http://lemmasoft.renai.us/forums/viewto ... 51&t=21978

User avatar
Katy133
Miko-Class Veteran
Posts: 562
Joined: Sat Nov 16, 2013 1:21 pm
Completed: 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
itch: katy133
Location: Canada
Contact:

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

#13 Post by Katy133 » Tue Apr 10, 2018 7:33 pm

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 16 times
ImageImage

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

User avatar
trooper6
Lemma-Class Veteran
Posts: 3186
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 » Tue Apr 10, 2018 9:35 pm

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 (Jul 7) Finished Emotion Matrix for Joint Customer Sprite.
*Currently Doing: Print Matrices, & decide emotions to use for Joint Sprite, think about blinking and lip flap. Maybe also about TransitionConditionSwitch?
*First Next thing to do: Code in all the sprite emotion and camera movement for Close Shave Sprite Sections
*Next Thing to Do: Code in all CG and special animation stuff
*Other Next Thing: Do SFX
Check out My Clock Cookbook Recipe: http://lemmasoft.renai.us/forums/viewto ... 51&t=21978

User avatar
trooper6
Lemma-Class Veteran
Posts: 3186
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 » Wed Apr 11, 2018 10:12 am

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 (Jul 7) Finished Emotion Matrix for Joint Customer Sprite.
*Currently Doing: Print Matrices, & decide emotions to use for Joint Sprite, think about blinking and lip flap. Maybe also about TransitionConditionSwitch?
*First Next thing to do: Code in all the sprite emotion and camera movement for Close Shave Sprite Sections
*Next Thing to Do: Code in all CG and special animation stuff
*Other Next Thing: Do SFX
Check out My Clock Cookbook Recipe: http://lemmasoft.renai.us/forums/viewto ... 51&t=21978

Post Reply

Who is online

Users browsing this forum: No registered users