Dynamic gaussian blur filter is needed when you wanna making UI like iPhone.
You may make all blurred version of each image including BG, UI, SCG and replace original images when overlay UI is appeared.
At first, I used this method and to make job easier, I wrote function which automatically replace all images on screen to blurred images.
This function is called before Preference Screen(which does not contain background so appeared as overlay menu) is called.
And when Player click Return button on a Preferences Screen, function will be called again, all blurred images being replaced to original images.
But this method require many images and process.
So I make another method which doesn't use pre-proccessed image.
1. Set thumbnail Size.
First, you need to set thumbnail size as your screen size before call overlay menu.
In my case, I wrote function like this.
Code: Select all
#called just right before overlay menu is appeared.
def SetThumbnailFull:
config.thumbnail_width = config.screen_width
config.thumbnail_height = config.screen_height
#called just right after overlay menu is disappeared. This function is needed because save file also use thumbnail.
#If you don't call this, you gonna see huge sized thumbnail of your save file on load/save menu.
def SetThumbnailOriginal:
config.thumbnail_width = ORIGINAL VALUE
config.thumbnail_height = ORIGINAL VALUE
So if you just add resizing code (in my case, it's "size(320,180)") on file_picker screen. You won't need these functions.
Just like this.
Code: Select all
#somewhere on option.rpy file
config.thumbnail_width = config.screen_width
config.thumbnail_height = config.screen_height
Code: Select all
for i in range(1, 5):
# Each file slot is a button.
button:
xmaximum 345
ymaximum 220
action FileAction(i)
add FileScreenshot(i) xoffset 0 yoffset 10 size(320,180)
text ( FileTime(i, empty=_("Empty Slot."))) xpos 10 ypos 190 size 20 color '#FFFFFF'
2. Call FileTakeScreenshot() Function when you call preferences screen!
In my case, there is a small button on game screen which call preferences screen.
If I click this button, FileTakeScreenshot function gonna capture current screen.
Code: Select all
##### button on screen which call preferences screen
screen option_button:
imagebutton idle "ui/setting.png" xpos 1130 ypos 0 activate_sound "sfx/basic_click.mp3" action FileTakeScreenshot(), ShowMenu("preferences")
Use FileCurrentScreenshot() function which return captured image right before as a displayable!
Add it to overlay screen as background.
then blur it with transform code.
Code: Select all
screen preferences:
tag menu
add FileCurrentScreenshot() at blur
#Other Code~~~~
Code: Select all
init -1:
transform blur(child):
contains:
child
alpha 1.0
contains:
child
alpha 0.2 xoffset -3
contains:
child
alpha 0.2 xoffset 3
contains:
child
alpha 0.2 yoffset -3
contains:
child
alpha 0.2 yoffset 3
to
For now, it's not that perfect blur like gaussian blur, but anyway this is basic theory of making overlay UI like iOS.
Now I'm working on adding some image filter function on my game by using third party python lib.
I'm gonna let you know when it's done.
Let me know if you have any questions or better methods.