Renpy - How to have a highlighted effect on image?

[ShadowxHit]

Newbie question here,

How do you have an highlighted effect on a character image. For example when you mouse over a character in the scene it will highlight them, how does one achieve this using DAZ and renpy?

I know that the character is a different image layer of itself alone separate from the background scene etc, so i would need a character image without a highlight effect(what it should look like when mouse not over it) and the same image with a highlighted effect(for when mouse if over it).

Just need to know how to create a image with that highlighted effect and crop out images that need to be clickable.
Thanks!

 

[f95zoneuser463]

Not sure this is what you are looking for but here is how I highlight small map-thumbnails in my game:

init python:
    # tint image with increased brightness
    def tint_hover(imagepath):
        return im.MatrixColor(imagepath,im.matrix.brightness(0.12))

#somewhere inside a screen:
imagebutton:
    idle "gui/map thumb massage studio.png"
    hover tint_hover("gui/map thumb massage studio.png")
    action [Hide("ui_map"), Function(state_player, state="bg massage studio"),Jump("state")]
    hover_sound "audio/sfx/hover.opus"

• highlights image with increased brightness when mouse-hovered
• does not require second image
• only recommended for small images because im.MatrixColor is slow as f*ck

 

[ShadowxHit]

only recommended for small images because im.MatrixColor is slow as f*ck

How small exactly? will it work for characters? It seems like thats a good method for small items like cellphone, coins etc
And how do you crop out the image from DAZ scene? For example theres a scene with a table and on the table there is a phone how can I crop out the phone so I can make it a clickable item using your method.

Thanks for the help

 

[Penfold Mole]

I think it would make a lot more sense to just create a duplicate of the image you want to display highlighted and increase the brightness of it in any piece of software capable of doing it that you prefer for editing photos. It just has to support transparency, too.
It's easy to make and will work fast while playing.

 

[f95zoneuser463]

How small exactly? will it work for characters? It seems like thats a good method for small items like cellphone, coins etc

Yes it's perfect for little objects like cellphone and coins. But entire characters is kind of an edgy case.

Assuming the worst case where a character would take up maybe 50% of the screen in a 1920x1080 Full-HD game ... I'd not use it for a high-res mobile game if that's what you are aiming for.
I guess you could get away with 720p maybe. As far as I know im.MatrixColor() does process all the pixels in Python on the CPU. So a fast GPU will not help.

You should always try crop down overlay images to the smallest possible size with this method ... so the function has to process the least amount of pixels possible.

Cropping ... suprisingly complicated topic ... I have little time
Use the "Spot Render Tool" (*) in DAZ to only render the relevant part (your phone) of the image to save render-time ... pay attention to shadows before selecting the area to render/crop. This method is higher quality because it will have matching lights/shadows for a scene.

and/or (lower quality, but faster):
If a character is placed inside a scene, save to new scene with the character only, but keep the camera and character-position, remove everything except the character, disable Sky-Dome, background- and ground-rendering, try to recreate the light to match your scene as close as possible, this will render super fast with a transparent background, this method has the advantage of having reusable images that could fit into other scenes too.

* = set it to render in a new window, DAZ Studios defaults to render it in the standard 3d-window, not what we want, google it

I use custom .bat-scripts to automatically crop transparent .png and add x/y-position metadata. Older versions are

You must be registered to see the links

.

 

[ShadowxHit]

I think it would make a lot more sense to just create a duplicate of the image you want to display highlighted and increase the brightness of it in any piece of software capable of doing it that you prefer for editing photos. It just has to support transparency, too

You're right I did think about having two images as well, one with increased brightness and one normal.
Will just have to try all these things out and see which one is best suitable for me. Cheers

 

[OhWee]

Just wanted to 'bump' this. f95zoneuser463 's solution is surprisingly powerful. Here's a few defs that I added to an init python block at the beginning of script.rpy in one of my projects, put it where you feel is appropriate...

init python:

    def trans_50(imagepath):
        return im.Alpha(imagepath, 0.5)

    def trans_75(imagepath):
        return im.Alpha(imagepath, 0.75)

    def brightness_0(imagepath):
        return im.MatrixColor(imagepath,im.matrix.brightness(-1.0))
   #brightness 0 was to turn a sprite completely black

    def brightness_50(imagepath):
        return im.MatrixColor(imagepath,im.matrix.brightness(-0.5))
    def brightness_75(imagepath):
        return im.MatrixColor(imagepath,im.matrix.brightness(-0.25))

    def tint_cyan(imagepath):
        return im.MatrixColor(imagepath,im.matrix.contrast(0.0) * im.matrix.tint(0.0, 0.8, 1.0))

    def contrast_50(imagepath):
        return im.MatrixColor(imagepath,im.matrix.contrast(0.75) * im.matrix.tint(0.25, 0.85, 1.0))

    def hue_blue(imagepath):
        return im.MatrixColor(imagepath,im.matrix.hue(85.0))
        #in this case, I was turning some green buttons blue, hence the 'hue_blue" name, essentially the 85 is a hue shift with the value determined using hue/saturation in Photoshop.

And again, using these with your screens is easy peasy! Example:

Here's a couple of examples I'm using in one of my projects currently:

button:
     background hue_blue("gui/mgmtlockedslot_idle.png")
     hover_background hue_blue("gui/mgmtlockedslot_hover.png")

#another example along the same lines:
    add hue_blue("gui/mgmtlockedslot_inaccessable.png")

#and another example:
    imagebutton:
        idle trans_65("girls/Roulette/Roulette_hairupicon.png")
        hover "girls/Roulette/Roulette_hairupicon.png"
        selected_idle "girls/Roulette/Roulette_hairupicon.png"
        selected_hover "girls/Roulette/Roulette_hairupicon.png"

Mainly I'm just sharing these as code examples. Read up on im.MatrixColor for other options:

You must be registered to see the links

Hopefully my def examples here will help you to figure out how to format the im. 's.
Example: im.matrix.hue relates to im.HueMatrix should a google search point you at HueMatrix...

To use this stuff with 'show' and 'scene', you need to define as transforms, i.e.:

transform hue_85:
    matrixcolor HueMatrix(85.0)
transform hue_0:
    matrixcolor HueMatrix(0.0)

And to use these with your dialogue...

show Tala at left, hue_85 with dissolve
"Green!"
show Tala at hue_0 with dissolve
"And she's back!"

I'm sure that smarter people than me figured this out pretty easily a long time ago, but I wanted to share my code examples should anyone else stumble across this thread. Others are free to improve upon this of course!