Page 1 of 1

draw a rectangle vs use an image

Posted: Sun Oct 01, 2017 7:24 pm
by randy0428
I'm curious to know which uses less resources and if the difference is significant between drawing two rectangles and using one image.

To create buttons, I generally draw two boxes of different colors, one slightly smaller than the other so the the bigger box becomes a border for the smaller box. Would it be more efficient to use images for the buttons instead of using the draw function twice? If using an image doesn't require significantly more resources to implement, I'd rather do that because it would be much easier to make really attractive buttons.

Re: draw a rectangle vs use an image

Posted: Sun Oct 01, 2017 8:23 pm
by zorg
Rectangles don't have textures, an image does; on the other hand, you did say that you're calling lg.rectangle twice, and you'd draw the image only once; if you only intend to have less than say, a hundred buttons, it really shouldn't matter.

Re: draw a rectangle vs use an image

Posted: Sun Oct 01, 2017 9:32 pm
by randy0428
Let me clarify my question.

I've created my own mini-standard library. One of the functions in it creates a box with border (caixa com borda).
The code for this function is below.

Some of the variables are: corBorda is the color of the border (the color of the larger box - color names are also defined in this mini-library ), corCaixa is the color of the smaller box and bordaWidth is the width of the border (i.e the difference in size between the 2 boxes).

Does this drawing use significantly more resources than if I use an image for the box? Or does using an image use significantly more resources than the drawing function?

Code: Select all

--Caixa com borda
caixaComBorda = function(x, y, width, height, corBorda, corCaixa, bordaWidth)
    love.graphics.setColor(corBorda)
    love.graphics.rectangle( "fill", x, y, width, height )
    love.graphics.setColor(corCaixa)
    love.graphics.rectangle( "fill", x + bordaWidth, y + bordaWidth, width - 2 * bordaWidth, height - 2 * bordaWidth )
    love.graphics.setColor(Cores.branco) 
end,

Re: draw a rectangle vs use an image

Posted: Sun Oct 01, 2017 9:56 pm
by grump
How many boxes do you want to draw, and how large are they? Do you have target specs to meet?

It really depends on your use case. Drawing multiple simple things is generally slower than drawing one single simple thing. Rendering a texture is slower than rendering a solid color. An image requires texture memory, a rectangle does not. If you want to draw many different colored boxes, or many different sizes, you will probably end up using multiple images, because a single image would not scale as nicely as rectangles do. That multiplies memory requirements.

The differences are probably negligible unless you're drawing many thousand huge boxes.

Just draw a few thousand boxes of each type and measure the time between frames to get an answer. That's only valid for your setup though, other hardware might behave differently.

Re: draw a rectangle vs use an image

Posted: Mon Oct 02, 2017 12:18 pm
by randy0428
Thanks for the info, grump.