Image's border in libgdx

Question

Since I'm pretty new in Libgdx development, I would like to ask if it is possible to make image borders (to mark it up as selected) using it? I've read that one solution is to make 2 separate images: one with border and one without. However pretty all of my images are the same size and there are many of them so don't know if it's the best idea. Are there any other options?

EDIT

So i have chosen 2nd idea ( 1x1 image ) but there is some problem with it. First of all i can't make that borderImage to be under clicked element. Another problem is size of borderImage ( it's not same ). When i click in the center of button its smaller ( about couple pixels ) than when i click on the edge. Do u know what can cause these problems and how to fix them? Code :

public void create(){
        stage = new Stage();
        Gdx.input.setInputProcessor(stage);

        skin = new Skin(Gdx.files.internal("data/uiskin.json"));

        Texture borderTexture = new Texture(Gdx.files.internal("data/select.png") );
        final Image borderImage = new Image( borderTexture );

        TextButton exitButton = new TextButton("Exit",skin);

        exitButton.addListener(new ClickListener(){
            public void clicked(InputEvent event, float x, float y)
                {
                  borderImage.setSize( event.getTarget().getWidth() + 1 * 2, event.getTarget().getHeight() + 1 * 2);




                Vector2 loc = new Vector2(0, 0);
               Vector2 stageLoc = event.getTarget().localToStageCoordinates(loc); 
               borderImage.setPosition( stageLoc.x, stageLoc.y);  

               System.out.println("" + event.getTarget().getWidth() + " " +event.getTarget().getHeight() + " " + event.getTarget().getX() + 
                       " " + event.getTarget().getY() + " " + stageLoc.x + " " + stageLoc.y);

               stage.addActor(borderImage);
                }       
            }
        );

        Table table = new Table();

        table.add(exitButton).colspan(3);

        table.setFillParent(true);
        stage.addActor(table);
}

And the output i have : 29.0 25.0 4.0 1.0 466.0 257.0 // clicked in the center of button 37.0 27.0 462.0 256.0 462.0 256.0 // clicked on the edge of button

Answer 1

If you are using Scene2D and its Image class the simpliest idea is to keep a small texture of color you want the border to has. The texture can be like 1px x 1px size. It should has Nearest filtering due to avoid blending borders effect.

When click on image you can create an Image of size of the image plus border width and place it where the image is achieving border effect. On touch up you need to remove the border-actor

    Texture borderTexture = new Texture( Gdx.files.internal("border.png") );
    Image borderImage = new Image( borderTexture );

    ...

    //in the clickListener
    public boolean touchDown(InputEvent event, float x, float y, int pointer, int button)
    {
        borderImage.setSize( event.getTarget().getWidth() + BORDER_WIDTH * 2, event.getTarget().getHeight() + BORDER_WIDTH * 2);
        borderImage.setPosition( event.getTarget().getX() - BORDER_WIDTH, event.getTarget.getY() - BORDER_WIDTH);

        stage.addActor( borderImage );
        event.getTarget().toFront(); //to move the original image over the border

        return true;
    }

    public void touchUp(InputEvent event, float x, float y, int pointer, int button)
    {
        borderImage.remove();            
    }

---

If not using the Scene2D you can achieve same effect by rendering Sprite of size of the image + border width and manage a flag saying if render the border or not

     Sprite image, border;

    ...

    //in the input processor
    public boolean touchDown (int x, int y, int pointer, int button) 
    {
        border.setSize( image.getWidth() + BORDER_WIDTH * 2 , image.getHeight() + BORDER_WIDTH * 2 );
        border.setPosition( image.getX() - BORDER_WIDTH, image.getY() - BORDER_WIDTH);

        renderBorder = true;

        return true;
    }

    public boolean touchUp (int x, int y, int pointer, int button) 
    {
        renderBorder = false;

        return false;
    }

    //in the render method
    if(renderBorder)
    {
        border.draw(batch);
    }

    image.draw(batch);

Answer 2

here what i'll do if it was for me :

i will use one border image for all my images (instead of image border for each one of my images)

let assume that on the left is your image and on right is the border image

when a Click event occured on the image you draw the border on the image (your image border is transparent inside you can easly do it with editor like gimp) on top of the image and you will have something like this

if the size is different you can change it and fix the same size before drawing the image at same position

Hope this will help !