Grayscaling & focus for tutorial?

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.
Post Reply
Message
Author
OrsonDeWitt
Regular
Posts: 31
Joined: Thu Dec 06, 2018 3:23 am
Contact:

Grayscaling & focus for tutorial?

#1 Post by OrsonDeWitt » Sat May 08, 2021 11:50 am

Hi!
I've been trying to make a tutorial for my game, wherein as everything is explained it is also highlighted with a contour, or the whole of the screen is made into grayscale except for the part of the screen in question (say, as a colored square while everything else is gray). I assume Renpy doesn't know how to make a whole scene go grayscale, but I also wouldn't want to go through im.Grayscale'ing every image on my screen. Is there some hack to do this quickly and efficiently?
Thanks.

philat
Eileen-Class Veteran
Posts: 1797
Joined: Wed Dec 04, 2013 12:33 pm
Contact:

Re: Grayscaling & focus for tutorial?

#2 Post by philat » Sat May 08, 2021 11:18 pm

Quick and dirty easy way to do this is to just show a semitransparent black image on top of everything, darkening everything. Either fiddle with the order of the black image or whatever you need not to be darkened to "highlight".

User avatar
Ocelot
Eileen-Class Veteran
Posts: 1072
Joined: Tue Aug 23, 2016 10:35 am
Skype: miinipaa
Contact:

Re: Grayscaling & focus for tutorial?

#3 Post by Ocelot » Sun May 09, 2021 3:17 am

Another approach is to take screenshot, grayscale it, cut a hole in it and display over everything. While there is no public API to get taken screenshot as image, there are some functions RenPy uses internally, like renpy.game.interface.get_screenshot().
< < insert Rick Cook quote here > >

User avatar
Remix
Eileen-Class Veteran
Posts: 1587
Joined: Tue May 30, 2017 6:10 am
Completed: None... yet (as I'm still looking for an artist)
Projects: An un-named anime based trainer game
Contact:

Re: Grayscaling & focus for tutorial?

#4 Post by Remix » Sun May 09, 2021 4:46 am

The professional approach (Ren'Py 7.4 and above) would be to add a transform to the master (and maybe screen/overlay too) layer that used a conditional grayscale shader to calculate whether to draw each pixel with colour or not.

That would still have the caveat that any buttons would still be clickable even though they were grayscaled... so perhaps a semi-transparent mask (as a NullAction focus_masked button) over the top (as philat suggested) would be best.
Frameworks & Scriptlets:

User avatar
Remix
Eileen-Class Veteran
Posts: 1587
Joined: Tue May 30, 2017 6:10 am
Completed: None... yet (as I'm still looking for an artist)
Projects: An un-named anime based trainer game
Contact:

Re: Grayscaling & focus for tutorial?

#5 Post by Remix » Sun May 09, 2021 6:45 am

Seems you can use blend "multiply" in 7.4.5 to use an overlay image where-in the pixel colour values are used to multiply against the pixel behind... Not quite grayscale though certainly usable for darkening areas that are not active.

I might run up an example if I get time this afternoon.
Frameworks & Scriptlets:

User avatar
Remix
Eileen-Class Veteran
Posts: 1587
Joined: Tue May 30, 2017 6:10 am
Completed: None... yet (as I'm still looking for an artist)
Projects: An un-named anime based trainer game
Contact:

Re: Grayscaling & focus for tutorial?

#6 Post by Remix » Tue May 11, 2021 2:25 pm

Ren'Py 7.4.5 onwards...

Code: Select all

screen highlight_area(pos, size, bg="#455"):
    fixed:
        ## You could position and size this to just obscure a part of the screen
        add Transform(
            Flatten(Composite(
                (1280, 720), ## The size of the screen (or the obscured area)
                (0,0), Solid(bg),
                pos, Solid("#FFF", xysize=size))),
            blend = "multiply")

label start:
    show screen highlight_area( (50, 50), (150, 50) ) ## (xpos, ypos), (width, height)
    "Words"
    hide screen highlight_area
    
You could show that on a different layer to obscure everything behind it. (e.g. overlay or master)
As there are so many different ways to handle tutorial systems I have not shown anything more than just a very simple blend mask. If you wanted buttons deactivated etc you would need to handle that yourself.
Frameworks & Scriptlets:

Post Reply

Who is online

Users browsing this forum: Google [Bot]