Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

AppGameKit Classic Chat / [SOLVED] best method to make an image (or area on screen) go 'out of focus' ?

Author
Message
Dale Schultz
2
Years of Service
User Offline
Joined: 1st Nov 2021
Location: Maine, USA
Posted: 10th Nov 2021 22:55
I am thinking of making an app that has a desk and a window. The scene outside the window will vary and will be provided by images that I will fetch at run time.

When the user manipulates something on the desk, I want to make the outside image go out of focus for a second or so, and then bring the items on the desk a bit out of focus, simulating a depth of field, or where the users's attention is directed..

I am hoping that I can have two images that I can overlay over the two parts as needed. These special images would be mostly transparent but have enough non-transparent pixels in them to blur the image behind it.

Is this possible?
Is there a better way, by perhaps manipulating the images directly?
Other ideas?

I think this is all 2D BTW.

The author of this post has marked a post as an answer.

Go to answer

Game_Code_here
3
Years of Service
User Offline
Joined: 2nd Jun 2020
Location:
Posted: 10th Nov 2021 23:05 Edited at: 10th Nov 2021 23:06
Make two images the same size with all the images together, make one image blurred the one with the blurred elements, and one that is not, show them as needed.

This is just one way I'm sure.
PartTimeCoder
AGK Tool Maker
9
Years of Service
User Offline
Joined: 9th Mar 2015
Location: London UK
Posted: 11th Nov 2021 00:44 Edited at: 11th Nov 2021 00:44
What you want is a Gaussian Blur shader
Open Source plugins
Cl - DnD Plugin
Buy Me A Coffee
Dale Schultz
2
Years of Service
User Offline
Joined: 1st Nov 2021
Location: Maine, USA
Posted: 11th Nov 2021 02:27
Thanks

@game_coder_here perhaps I did not make it clear enough, when I said I get the images at run time. That means I only see the image at run time, so I have to blur any given image dynamically.

@PartTimeCoder, thanks for the link, as least I now know a bit of what I am looking for.

I'll need to learn about shaders...
Game_Code_here
3
Years of Service
User Offline
Joined: 2nd Jun 2020
Location:
Posted: 11th Nov 2021 02:44
Quote: "That means I only see the image at run time, so I have to blur any given image dynamically."


You can do this at runtime or anytime.

A shader does work great but Loading two images at runtime, I do that all the time.

But a shader would be a lot easer.
Dale Schultz
2
Years of Service
User Offline
Joined: 1st Nov 2021
Location: Maine, USA
Posted: 11th Nov 2021 02:52 Edited at: 11th Nov 2021 03:12
good grief, I have the linked sample working!
Took a bit of guessing of what to put where!

Thanks.

Edit: well it work on Windows, broadcast to Android results in a compilation error for the shader!
Dale Schultz
2
Years of Service
User Offline
Joined: 1st Nov 2021
Location: Maine, USA
Posted: 11th Nov 2021 03:38
This post has been marked by the post author as the answer.
well there was a bug in the shader code that fortunately I could find a solution for, so here is a working example that toggles between blurred and not blurred:

First, put this code into a file called: nornalblur.ps and put that into the media folder.



Note that the assignment of values to blurSizeH and V must be within the main() or it wont compile on Android.

and the AppGameKit code:



Use your own file as a background image
PartTimeCoder
AGK Tool Maker
9
Years of Service
User Offline
Joined: 9th Mar 2015
Location: London UK
Posted: 11th Nov 2021 03:40 Edited at: 11th Nov 2021 03:41
Try adding this line to the head of the shader file

Quote: "precision mediump float;"


I believe its an GLSL V's GLES issue

Edit: you beat me to it
Open Source plugins
Cl - DnD Plugin
Buy Me A Coffee

Login to post a reply

Server time is: 2024-03-29 09:17:33
Your offset time is: 2024-03-29 09:17:33