how to stretch image out from center like w/ skins / theming?

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
girng
Prole
Posts: 39
Joined: Fri Sep 07, 2018 5:42 am

how to stretch image out from center like w/ skins / theming?

Post by girng » Wed Sep 12, 2018 3:44 pm

Image

for example, in godot's theming system we could "draw from center" and the outside of it would look smooth (not scaled), but the inside of the image is scaled / repeated.

is this possible with love2d? here is a direct link to the button background texture:
https://i.imgur.com/7TppDEf.png

current code:

Code: Select all

gfx.draw(obj.img, obj.x, obj.y, 0, 5, 2)

User avatar
NotARaptor
Citizen
Posts: 59
Joined: Thu Feb 22, 2018 3:15 pm

Re: how to stretch image out from center like w/ skins / theming?

Post by NotARaptor » Wed Sep 12, 2018 4:00 pm

Hi girng

(I think) what you're referring to is 9-slicing. It's possible in any language.

Using that term I'm sure you can find tutorials on how to do it.

Off the top of my head, in Love2d I'd just use a mesh taking care of the coords and uv coords - you could do it "manually" with a bunch of quads too.

Cheers!

girng
Prole
Posts: 39
Joined: Fri Sep 07, 2018 5:42 am

Re: how to stretch image out from center like w/ skins / theming?

Post by girng » Wed Sep 12, 2018 4:06 pm

NotARaptor wrote:
Wed Sep 12, 2018 4:00 pm
Hi girng

(I think) what you're referring to is 9-slicing. It's possible in any language.

Using that term I'm sure you can find tutorials on how to do it.

Off the top of my head, in Love2d I'd just use a mesh taking care of the coords and uv coords - you could do it "manually" with a bunch of quads too.

Cheers!
Hehe, thanks man. Yeah that's definitely it. will look into it / searching now
worse case, there's about to be 9 draw calls in this method rofl

e: found this! https://github.com/excessive/patchy
Last edited by girng on Wed Sep 12, 2018 4:13 pm, edited 1 time in total.

grump
Party member
Posts: 607
Joined: Sat Jul 22, 2017 7:43 pm

Re: how to stretch image out from center like w/ skins / theming?

Post by grump » Wed Sep 12, 2018 4:10 pm

You can do it in one draw call with a Mesh or a SpriteBatch.

girng
Prole
Posts: 39
Joined: Fri Sep 07, 2018 5:42 am

Re: how to stretch image out from center like w/ skins / theming?

Post by girng » Wed Sep 12, 2018 4:14 pm

grump wrote:
Wed Sep 12, 2018 4:10 pm
You can do it in one draw call with a Mesh or a SpriteBatch.
o really? is there an example of how i can convert my btn img to mesh (and how to draw it)?

i was searching, i found patchy, but i kinda wanna do this mesh thing now lol

edit: https://love2d.org/wiki/love.graphics.newMesh

looks like id on't need to convert my img? gonna try this

girng
Prole
Posts: 39
Joined: Fri Sep 07, 2018 5:42 am

Re: how to stretch image out from center like w/ skins / theming?

Post by girng » Thu Sep 13, 2018 3:16 am

got it
Image

Image

just need to do the last row. dude. spritebatch w/ quads is yum yum.. it's just amazing. just 1 DRAW CALL! :D
edit: got it. finally. dynamic width and height panels baby lets goooo
Image

User avatar
pgimeno
Party member
Posts: 2124
Joined: Sun Oct 18, 2015 2:58 pm

Re: how to stretch image out from center like w/ skins / theming?

Post by pgimeno » Thu Sep 13, 2018 8:51 am

Note that spritebatches are internally meshes, just with a simpler interface for certain purposes (meshes are more general).

Post Reply

Who is online

Users browsing this forum: No registered users and 20 guests