Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
Tags

Outline Shader for Ren'Py

Apply dynamic outlines in-engine to buttons, images, and more. · By Feniks

Need Support? Post here! Sticky

A topic by Feniks created Dec 10, 2023 Views: 192 Replies: 20
Viewing posts 1 to 5
Developer

If you're having trouble or run into any bugs with the code, post a comment here! I will try to get back to you within a few days.

Hello, does this work with Renpy verion  7.3.2.320 ? I want to buy, but not sure.
Also, does this work with show image in the story script ?
eg: I want to show a character sprite with Outline White.

Developer

Hello! As mentioned in the compatibility section, shaders require GL2, which isn't present in versions before 7.4. If you can update your engine version to 7.4 or later, then you will be able to use the shader, but it is not compatible with earlier version like 7.3.2. It does work with `show`; you can use it as an ATL transform the same way as `show character at left`. 

Hello! I got the shader, using it in version 7.4.11. I just dropped the file in my game folder and I am getting a parsing script failed error:

```

I'm sorry, but errors were detected in your script. Please correct the

errors listed below, and try again.

File "game/outline_shader.rpy", line 182: ATL statement contains two expressions in a row; is one of them a misspelled property? If not, separate them with pass.

    gl_drawable_resolution drawable_res

                                       ^

File "game/outline_shader.rpy", line 211: ATL statement contains two expressions in a row; is one of them a misspelled property? If not, separate them with pass.

    mesh True mesh_pad (20, 20, 20, 20) gl_drawable_resolution False

                                                                    ^

Ren'Py Version: Ren'Py 7.4.11.2266

Tue Feb 27 17:46:04 2024

```

Developer

Hello! As mentioned in the page the lowest version the shader has been tested on is 7.5; it seems like one of those properties is more recent - likely gl_drawable_resolution. You can comment out those properties until it works, or what I recommend, is updating your engine version (at least to 7.5). 7.4.11 came out in 2021 and we're currently on 7.7/8.2.

(1 edit)

Thanks for the quick answer! I missed the 7.5 version requirement. I wasn't able to upgrade to 7.7/8.2 because of compatibility issues, but I am thinking 7.5 should be fine. Let me give it a try! 

Edit: I updated to 7.5 and it works perfectly now. Thanks!

Hello again! Using the shader and I was wondering a few things.

 I have applied the shader to the characters in our game before, and the results are different when I apply them when showing the character or when defining the character. It seems the gradient is calculated differently, and it looks like it starts the gradiant close to the outside edge of the shader. I attached a screenshot of one of my poor characters struggling with his spiky hair, and the transform applied. If I apply the shader after the character has been defined, the gradiant seems to look better. Is there a way to smoothly transition from the two colors when defining a character with this shader?


Thank you!


transform shadowOne:

    outline_transform(30, "#0000002f", 4.0, end_color="#00000000", num_passes=1.0, gradient_smoothing=1.0, is_mesh=True, mesh_pad=True, drawable_res=True, offset=(0, 0)) 


image low Normal A cape:

    "Lowri/LowAHNormal.png"

    shadowOne

    zoom .25

    yoffset 200

Developer

Hello! I'm afraid I don't quite understand what you're asking - can you elaborate on what difference you are seeing between the two methods? What are the two colours you want to transition between? If you prefer the look of one method, is there a reason you can't use that method for the effect you want?

(1 edit)

Hello! Sorry for the confusion. I want a drop-shadow effect on each character (to make them standout from the background), and I would prefer not to have to apply the transformation every time I show a character, but on the character definition. As you can see in the screenshot I attached, the dropshadow effect is not displaying correctly when attaching to the character definition. The two colors are black, one with a bit of transparency, and one with full transparency. I want a smooth transtion between the two, but I am getting a transition only at the edge of the outline. This was not the case when applying the transformation when showing the character for some reason, but if I had to apply the transform on every time I show a character... it would take a really long time, and it would break some of my existing transformations. 

Developer

I think there's perhaps a mismatching of expectations here - there's always going to be a visible seam where the gradient ends because it's a set size and at some points the step between "can make out the outline" and "outline is too transparent to reliably discern" will be visible simply because of how perception works. You can make glowing outlines in an editor like photoshop and you'll still see where the glow ends.

As for applying the outline to a character, you can use a LayeredImageProxy or just apply it right to the image declaration, depending on how you've set up things. For example, image eileen outline = LayeredImageProxy("eileen", outline_transform(...)) will automatically apply the transform to the layered image "eileen" for whatever attribute combinations you need just by show eileen outline, or if you don't want it toggleable then just add an at outline_transform(...) right at the top of the layeredimage declaration itself.

mmm I understand the outline will be visible. I am more trying to reproduce the soft shadow effect I see on the dagger example on the page of this plugging, but for me it is looking different. It is like the gradiant is only being applied to the outside border of the outline, instead of the entire width of the outline. Lets say the width of the outline is 20px, the gradiant seems to only apply to the last 5pixels of the outline. 


As for applying the transform on a proxy, let me try that and see if it changes the behavior of the outline. Thanks!

Developer

I am looking into the possibility of alternate blending methods, and if I land on something I like I'll update the listing with a devlog noting the changes  :)

Thanks! Only thing I can say right now looking at the code is that it seems the current blending is depending on the scale of the image, instead of the outline width. That is probably why if I apply the outline after the existing transformation or before it changes the smoothness of the border. (my characters are zoomed out so the scale changes quite a bit). I still have to try the proxy transformation. That might solve my issues as it applies the outline transform after my zoom transform.

Developer

Oh I think I understand what you mean now - yes order of operations matters. If you apply the shader to a zoomed image, the outline won't be zoomed. If you apply the shader and then zoom the image, the outline gets zoomed as well. You can see the property order here: https://www.renpy.org/doc/html/atl.html#property-order So if you want to go out of order, you'll have to make an image that's got the shader already applied and then zoom that, for example.

That is awesome information! Thank you!

Developer

Hello again! I just wanted to update you that I've added two new arguments to the shader, smoothstep and power, so you have more control over how it blends glowing outlines. Thanks for your patience!

That is awesome! Thank you! I will be updating the shaders and giving the new blends a try

(2 edits)

Hey this works perfectly on pc but when I'm making the android version it breaks the game with the error :"renpy.gl2.gl2shader.program.load ShaderError:b'L0001 "variable u_model_size does not match the vertex variable u_model_size

I'm using renpy 8.2 and android should support gl2. In compatability you write "This tool requires config.gl2 to be True" It seems that 8.2 has removed this config because now it will always use gl2. Any help is appreciated

This is the transform I'm using:

  1. transform glow_outline_black_thin(width=3, color= '#000000ff', mesh_pad=False, num_passes=None):     outline_transform(width, color, 3.0, '#000000ff', (num_passes or width*2.0),         mesh_pad=mesh_pad)
    
Developer

Hello! Thanks for the report. I believe I should have this fixed in an upcoming update I've been planning for this shader - if you don't mind waiting a week or so, I hope to have it released by then. This is an issue I've seen when using the ANGLE2 renderer instead of GL2; usually systems default to GL2 but some phones may not. I'll put out a devlog once the update is out, and then please let me know if it fixes your problem!

Developer

Hello again! Thanks for your patience on this - I've pushed an update with ANGLE2 compatibility which should fix the Android issue also. Let me know if you still experience this problem on the updated v1.1!

(+1)

Thanks for replying again. I downloaded the new version and remade my transforms like the example you set and it works perfectly on android now. Thanks for coming to the rescue!