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?
[SOLVED] What i can do to make my gui look like this?
Forum rules
Before you make a thread asking for help, read this.
Before you make a thread asking for help, read this.
[SOLVED] What i can do to make my gui look like this?
Last edited by Darlex on Sat Dec 29, 2018 1:13 am, edited 2 times in total.
Hi! I wish you have an amazing day!
- zorg
- Party member
- Posts: 3436
- 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.
Re: What i can do to make my gui look like this?
What? I can see the image... oh... Ok, im going to upload it in another website
Hi! I wish you have an amazing day!
- zorg
- Party member
- Posts: 3436
- 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)
(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.
Re: What i can do to make my gui look like this?
Oh! Cool! Thanks! I (MAYBE) will share a gui library with these conceptszorg 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)
Thx Zorg!
Hi! I wish you have an amazing day!
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:
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
- Attachments
-
- ui-effect.love
- (92.45 KiB) Downloaded 117 times
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!
- (258.89 KiB) Downloaded 124 times
- zorg
- Party member
- Posts: 3436
- 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)
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: Ahrefs [Bot] and 42 guests