Ren'Py Adding blur to background of screen.

MissFortune

I Was Once, Possibly, Maybe, Perhaps… A Harem King
Respected User
Game Developer
Aug 17, 2019
5,825
9,295

So, basically, as the video shows, I have a music room of sorts. On that page, there's a little note talking about links that weren't added for one reason or another + mistaken links and such. What I'd like to do is blur the background, but nothing I've found seems to work. Either end up with tracebacks or something that doesn't work at all.

The code itself is just a basic screen:

Python:
screen unlinked_info():
    frame at gloss_appear:
        background None
        add "images/menu/lic/unlinked.png"

    button:
        xsize 1920
        ysize 1080
        action Hide('unlinked_info')
Seems like it should be relatively basic, but obviously I'm missing something. Thanks.
 

osanaiko

Engaged Member
Modder
Jul 4, 2017
2,787
5,195
you could create a second copy of the background image and blur it in a photo editor, then have a global flag for "blur_music_rm_bg" and add an if/else statement in the main screen to add the normal or blur version depending on the flag.

Then use one of the "SetVariable" actions set the flag on and off in the action that shows/hides your screen.

alternatively there's probably some shader that could be applied as a transform to the main screen
 
Last edited:
  • Like
Reactions: MissFortune

anne O'nymous

I'm not grumpy, I'm just coded that way.
Modder
Donor
Respected User
Jun 10, 2017
11,422
17,383
alternatively there's probably some shader that could be applied as a transform to the main screen
The problem is "where the main screen background come from".

If it's included in the music room screen, it would works, but if it come from the game, and therefore can be whatever image, it's something else.

I guess that it could be possible by looking at the code for the screenshot. Through on show you call a function that take a screenshot, saving it in Ren'Py "cache" directory, under something like "mybackground.jpg", and it's it that you use as background for the screen, applying a blur shader to it.
But it would probably also need to mess with the RAM image cache, since the image in the disk will not correspond to the one in the cache.
It must also be possible to do this through an user defined displayable, if you don't save the screenshot and achieve to address it directly from the said user defined displayable.
 

AllNatural939

I am the bad guy?
Game Developer
Apr 3, 2024
498
571
I don’t get why you guys like to overcomplicate things... I’m no expert, but wouldn’t it be way easier if he just slapped a blurred transparency on top of whatever? There are tons out there, or he could make one himself... Whatever image he has, whether it’s static or generated on the spot, just add a blurred transparency over it and boom, done... Keep it simple.
 

MissFortune

I Was Once, Possibly, Maybe, Perhaps… A Harem King
Respected User
Game Developer
Aug 17, 2019
5,825
9,295
but wouldn’t it be way easier if he just slapped a blurred transparency on top of whatever
There's no such thing as a blurred transparency if you're referring to something like a blurred PNG or something of that nature.

It's more fashion over form, but I'd prefer if I could do a live blur of sorts in that whatever's on the screen when it gets blurred is there. It's basically fine as is, but if there's an easy way of going about it, then why not?
 

Spin256

Mothers and Daughters
Game Developer
Dec 16, 2019
610
1,183
Code:
$picture = list(renpy.get_showing_tags())[0]
show expression picture:
    blur 20
Gets the currently displayed image, then shows it with a blur.

Edit: If you want to do inside a screen
Code:
$picture = list(renpy.get_showing_tags())[0]
add picture:
    blur 20
 
Last edited:
  • Like
Reactions: anne O'nymous

79flavors

Well-Known Member
Respected User
Jun 14, 2018
1,627
2,285
Whilst not strictly a blur, the current in-game menus overlay a semi-transparent layer over the current image before displaying whatever it is they are displaying. The end result being that the current image is darkened and largely pushing into the background.

Usually (unless it's been customized), that means it shows the image .\gui\overlay\game_menu.png.

That image is a mostly black image, with a colored vertical bar. The black is transparent. When used as a background to a screen, the screen bleeds through the previous underlying image being displayed before the screen was overlaid.

Again, it's not a blur - and maybe the blur is important to you. But, to my mind, it serves the same purpose.

I'm also trying to imagine what that same black transparency might look like with pixelated areas of shades of dark grays. Done well (and I can't being to guess how), I can see it giving a blur(ish) effect.

All that said, there's always the pixeleffect transform. Honestly, I've no idea how to use it - and I'd probably just use the deprecated instead. But it's a good way of creating a second copy of a displayable without creating two separate images. If one is your background image and the second is a blurred version of that same image - would that work?

Python:
image pic2 = "pic2.webp"
image blur_pic2 = im.Blur("pic2.webp", 1.5)

Although the first image statement isn't needed, since RenPy automatically generates displayables for all images.
 

Turning Tricks

Rendering Fantasies
Game Developer
Apr 9, 2022
1,519
2,807
Whilst not strictly a blur, the current in-game menus overlay a semi-transparent layer over the current image before displaying whatever it is they are displaying. The end result being that the current image is darkened and largely pushing into the background.

Usually (unless it's been customized), that means it shows the image .\gui\overlay\game_menu.png.

That image is a mostly black image, with a colored vertical bar. The black is transparent. When used as a background to a screen, the screen bleeds through the previous underlying image being displayed before the screen was overlaid.

Again, it's not a blur - and maybe the blur is important to you. But, to my mind, it serves the same purpose.

I'm also trying to imagine what that same black transparency might look like with pixelated areas of shades of dark grays. Done well (and I can't being to guess how), I can see it giving a blur(ish) effect.

All that said, there's always the pixeleffect transform. Honestly, I've no idea how to use it - and I'd probably just use the deprecated instead. But it's a good way of creating a second copy of a displayable without creating two separate images. If one is your background image and the second is a blurred version of that same image - would that work?

Python:
image pic2 = "pic2.webp"
image blur_pic2 = im.Blur("pic2.webp", 1.5)

Although the first image statement isn't needed, since RenPy automatically generates displayables for all images.
I recently changed some code in my gallery because im.blur was deprecated and it bugged the shit out of me that I was having an error showing in that code, lol.

Here's how I used it to slightly blur the background when the gallery thumbs are displayed. Someone here mentioned that the newer blur Transform is not as 'strong' as the old im.blur so you would probably get better results with a higher pixel number.

The original gallery code with the deprecated im.blur

Python:
    tag menu
    style_prefix "game_menu"
    add im.Blur(gui.main_menu_background, 1.5)
    add "gui/overlay/main_menu.png"
    add "gallery_background_overlay"

New code I have now, using the newer blur Transform


Python:
    tag menu
    style_prefix "game_menu"
    add gui.main_menu_background at Transform(blur=2.0)
    add "gui/overlay/main_menu.png"
    add "gallery_background_overlay"
2.0 is a very slight blur. One of these days I want to play with that a bit and maybe bump it up a touch.