[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
User avatar
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?

Post by Darlex » Fri Dec 28, 2018 3:40 am

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.
culdud uwu

User avatar
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?

Post by zorg » Fri Dec 28, 2018 6:48 am

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.

User avatar
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?

Post by Darlex » Fri Dec 28, 2018 11:46 am

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
culdud uwu

User avatar
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?

Post by zorg » 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)
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.

User avatar
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?

Post by Darlex » Sat Dec 29, 2018 1:13 am

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

User avatar
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?

Post by pgimeno » Sat Dec 29, 2018 7:38 am

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 62 times

User avatar
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?

Post by Ref » Sun Dec 30, 2018 2:09 am

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 68 times

User avatar
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?

Post by zorg » Sun Dec 30, 2018 2:54 am

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: Bing [Bot], raidho36 and 9 guests