Page 1 of 1
[SOLVED] What i can do to make my gui look like this?
Posted: Fri Dec 28, 2018 3:40 am
by Darlex
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?
Re: What i can do to make my gui look like this?
Posted: Fri Dec 28, 2018 6:48 am
by zorg
Try linking the image from a place that's not forbidden for everyone to look at?
Re: What i can do to make my gui look like this?
Posted: Fri Dec 28, 2018 11:46 am
by Darlex
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
Re: What i can do to make my gui look like this?
Posted: Fri Dec 28, 2018 5:47 pm
by zorg
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)
Re: What i can do to make my gui look like this?
Posted: Sat Dec 29, 2018 1:13 am
by Darlex
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!
Re: [SOLVED] What i can do to make my gui look like this?
Posted: Sat Dec 29, 2018 7:38 am
by pgimeno
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')
local shader = lg.newShader[[
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);
}
]]
shader:send('fixedimg', uibg)
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)
lg.setShader(shader)
antialiased_filled_rect(100, 150, 220, 400, 10)
antialiased_filled_rect(550, 450, 150, 80, 10)
lg.setShader()
lg.print("Add stuff here", 110, 160)
lg.print("Add stuff here", 110, 380)
lg.print("stuff++", 560, 460)
end
Re: [SOLVED] What i can do to make my gui look like this?
Posted: Sun Dec 30, 2018 2:09 am
by Ref
I'm sure pgimeno will say I'm off track again but wouldn't this be close enough - a simple semi-transparent rectangle?
Re: [SOLVED] What i can do to make my gui look like this?
Posted: Sun Dec 30, 2018 2:54 am
by zorg
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)
