[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.
Post Reply
Darlex
Party member
Posts: 128
Joined: Sun Sep 24, 2017 10:02 am
Location: Chile
Contact:

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

Post by Darlex »

What i can do to make my gui look like this?
Image
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.
Hi! I wish you have an amazing day!
User avatar
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?

Post by zorg »

Try linking the image from a place that's not forbidden for everyone to look at? :3
Me and my stuff :3True 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: 128
Joined: Sun Sep 24, 2017 10:02 am
Location: Chile
Contact:

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

Post 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? :3
What? I can see the image... oh... Ok, im going to upload it in another website

Image
Hi! I wish you have an amazing day!
User avatar
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?

Post 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)
Me and my stuff :3True 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: 128
Joined: Sun Sep 24, 2017 10:02 am
Location: Chile
Contact:

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

Post 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!
Hi! I wish you have an amazing day!
User avatar
pgimeno
Party member
Posts: 3544
Joined: Sun Oct 18, 2015 2:58 pm

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

Post 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:

Image (source)

Image (obtained from the above using GIMP)

you can get this result:

Image

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
User avatar
Ref
Party member
Posts: 702
Joined: Wed May 02, 2012 11:05 pm

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

Post 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?
Attachments
simple_message_box.love
Just a thought!
(258.89 KiB) Downloaded 124 times
User avatar
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?

Post 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)
Me and my stuff :3True 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.
Post Reply

Who is online

Users browsing this forum: Ahrefs [Bot] and 42 guests