libGDX - make border around an image

Question

Can I make a border around an image? I have lots of blocks in 2D, and when the player hovers with the mouse on one of them I want to display the border around the texture / image.

Thats how I draw the block actually ( I don't think its relevant, but maybe it will help ) :

batch.draw(map.map[mapPos].TEXTURE, (mapPosX * Block.WIDTH), (mapPosY * Block.HEIGHT), Block.WIDTH, Block.HEIGHT);

Is it possible with code or should I make a separate image with the texture and border around it? Any ideas?

Boanerges

Answer 1

You could try using a ShapeRenderer to draw the border first, then batch.draw over it. This is done purely in code, without using a texture. The code below adds a blue border.

In render() add the following after your batch.end().

batch.end(); // Add the following after this line

sr.setProjectionMatrix(camera.combined);
sr.begin(ShapeType.Line);
sr.setColor(new Color(0,0,1,0));
sr.rect((mapPosX * Block.WIDTH), (mapPosY * Block.HEIGHT), Block.WIDTH, Block.HEIGHT));
sr.end();

Of course, you need to initialize ShapeRenderer in your Screen or ApplicationListener implementation. Just do it in the code where you declare and initialized batch.

In your Game class:

SpriteBatch batch; //Put the following below this line
ShapeRenderer sr;

In your constructor :

batch = new SpriteBatch(); //Put the following below this line
sr = new ShapeRenderer();

edit: i have rewrote the function so that you can draw the shape after drawing the texture batch.

Bodi

Creating new Color in every frame could cause memory leaks, btw. Also, you should continue batching (batch.begin()) after shape rendering to avoid chashes when batch draws something more after this :) – Forum

Thanks, but i am afraid that setting all the projection matrix to just draw a border will hurt the performance, am i right? perhaps maybe mrzli's idea is better, what do you think? – Boanerges

@desertkun: Yes. I guess constantly creating objects is something you don't want to especially in game programming. It would be better to avoid doing this in actual code. Just had to put it somewhere in my sample code to illustrate my point. – Bodi

@Bodi ohh well, I tried it and it going pretty smooth actually :D – Boanerges

@IsraelG.I guess there is an overhead in having a second renderer. My answer just illustrates how it could be done in pure code. Not knowledgeable enough to speak on the performance aspect (haven't tested it out); but I might go with mrzli's recommendation; Its cleaner, unified solution as well as probably having less overhead. – Bodi

Of course, the only real way to know is to profile the code to see which method is faster. Try comparing execution time of the 2 render method? #180658 – Bodi

Answer 2

I would recommend one of these two approaches:

• Make two different images, one with border, one without - for each image that needs this hovering functionality; this is the way button images are usually implemented - separate image for normal, pressed, hovering or whatever
• If you have a lot of different but same sized images (or "blocks" as you put it) that need this border, it is less work and less memory if you implement a single "border texture", and render it along with the original texture of your "block" when the mouse hovers over it

This is my personal opinion, but I never liked shape rendering in libgdx. I forgot how to use the shape renderer, but if you need to set the projection matrix like in nedR's answer, the way that I described would also be faster.

Circulation