## [SOLVED] What i can do to make my gui look like this?

Questions about the LÖVE API, installing LÖVE and other support related questions go here.
Forum rules
Before you make a thread asking for help, read this.
Darlex
Party member
Posts: 118
Joined: Sun Sep 24, 2017 10:02 am
Location: absolutely not Chile
Contact:

### [SOLVED] What i can do to make my gui look like this?

What i can do to make my gui look like this?

I was thinking on some shaders and some white rectangles with low-alpha but i dont know how to do this
and i need his p r o f e s s i o n a l help..

Somebody can explain me how to do this?
Last edited by Darlex on Sat Dec 29, 2018 1:13 am, edited 2 times in total.
culdud uwu

zorg
Party member
Posts: 2747
Joined: Thu Dec 13, 2012 2:55 pm
Location: Absurdistan, Hungary
Contact:

### Re: What i can do to make my gui look like this?

Try linking the image from a place that's not forbidden for everyone to look at?
Me and my stuff True Neutral Aspirant. Why, yes, i do indeed enjoy sarcastically correcting others when they make the most blatant of spelling mistakes. No bullying or trolling the innocent tho.

Darlex
Party member
Posts: 118
Joined: Sun Sep 24, 2017 10:02 am
Location: absolutely not Chile
Contact:

### Re: What i can do to make my gui look like this?

zorg wrote:
Fri Dec 28, 2018 6:48 am
Try linking the image from a place that's not forbidden for everyone to look at?
What? I can see the image... oh... Ok, im going to upload it in another website

culdud uwu

zorg
Party member
Posts: 2747
Joined: Thu Dec 13, 2012 2:55 pm
Location: Absurdistan, Hungary
Contact:

### Re: What i can do to make my gui look like this?

Okay, so most of that gui style is simple, relative to the last thing, which is the semi-transparent, blurred background; you'll need a shader for that, since you can't make it look like that otherwise; by default, you could only do transparency at most.

(Also, the images not showing up may have been a hiccup on my end; my net randomly dies recently, idk why; anyway at least now they're visible)
Me and my stuff True Neutral Aspirant. Why, yes, i do indeed enjoy sarcastically correcting others when they make the most blatant of spelling mistakes. No bullying or trolling the innocent tho.

Darlex
Party member
Posts: 118
Joined: Sun Sep 24, 2017 10:02 am
Location: absolutely not Chile
Contact:

### Re: What i can do to make my gui look like this?

zorg wrote:
Fri Dec 28, 2018 5:47 pm
Okay, so most of that gui style is simple, relative to the last thing, which is the semi-transparent, blurred background; you'll need a shader for that, since you can't make it look like that otherwise; by default, you could only do transparency at most.

(Also, the images not showing up may have been a hiccup on my end; my net randomly dies recently, idk why; anyway at least now they're visible)
Oh! Cool! Thanks! I (MAYBE) will share a gui library with these concepts
Thx Zorg!
culdud uwu

pgimeno
Party member
Posts: 1943
Joined: Sun Oct 18, 2015 2:58 pm
Location: Valencia, ES

### Re: [SOLVED] What i can do to make my gui look like this?

A blur with that radius may be difficult to achieve in real time. If it is going to be always a static background, you could have a normal image and a blurred and whitened image, and draw the blurred one using a shader. That shader would be very simple. It could be done with a stencil too, but it wouldn't have antialiasing.

For example, using these two images:

(source)

(obtained from the above using GIMP)

you can get this result:

with this code:

Code: Select all

local lg = love.graphics
local bg = lg.newImage('mountain-and-lake-landscape-800x600.jpg')
local uibg = lg.newImage('mountain-and-lake-landscape-800x600-blurwhite.jpg')

extern Image fixedimg;
vec4 effect(vec4 colour, Image img, vec2 imgpos, vec2 scrpos)
{
return colour * vec4(Texel(fixedimg, scrpos / vec2(love_ScreenSize)).rgb,
Texel(img, imgpos).a);
}
]]

lg.setFont(lg.newFont(28))

local function antialiased_filled_rect(...)
lg.rectangle("fill", ...)
lg.rectangle("line", ...)
end

function love.draw()
-- Draw the background image
lg.draw(bg)

antialiased_filled_rect(100, 150, 220, 400, 10)
antialiased_filled_rect(550, 450, 150,  80, 10)

lg.print("Add stuff here", 110, 160)
lg.print("Add stuff here", 110, 380)
lg.print("stuff++", 560, 460)
end

Attachments
ui-effect.love

Ref
Party member
Posts: 687
Joined: Wed May 02, 2012 11:05 pm

### Re: [SOLVED] What i can do to make my gui look like this?

I'm sure pgimeno will say I'm off track again but wouldn't this be close enough - a simple semi-transparent rectangle?
Attachments
simple_message_box.love
Just a thought!

zorg
Party member
Posts: 2747
Joined: Thu Dec 13, 2012 2:55 pm
Location: Absurdistan, Hungary
Contact:

### Re: [SOLVED] What i can do to make my gui look like this?

Maybe close enough, but not what OP wanted; there's a difference between blurred background and a semi-occluded one; the latter you might still be able to read, the blurred one, you won't.

Think of it this way, if you blur, you can keep the color "profile" of the image; with making things semi-transparent, you need to mix a second color in (usually either white or black) so the outcome will either be lighter, darker, or even differently tinted. (the example images being lighter notwithstanding)
Me and my stuff True Neutral Aspirant. Why, yes, i do indeed enjoy sarcastically correcting others when they make the most blatant of spelling mistakes. No bullying or trolling the innocent tho.

### Who is online

Users browsing this forum: Google [Bot] and 10 guests