Using 9 patch with ScrollPane

Anything libgdx related goes here!

Using 9 patch with ScrollPane

Postby Esanders323 » Mon May 14, 2018 2:29 am

I'm trying to create a ScrollPane with a 9 patch as the background.

Here is the 9 patch texture:
https://imgur.com/FH4PDY2

Here is how I'm creating the controls:
Code: Select all
private void createControls(){
   Table container = new Table();
   container.setTransform(false);
   container.setSize(getStage().getViewport().getWorldWidth(), getStage().getViewport().getWorldHeight());
   Table innerTable = new Table();
   innerTable.setTransform(false);
   addActor(container);


   innerTable.add(new ImageButton(skin, "default")).size(120, 195);
   innerTable.add(new ImageButton(skin, "default")).size(120, 195);
   innerTable.add(new ImageButton(skin, "default")).size(120, 195);

   innerTable.row();

   innerTable.add(new ImageButton(skin, "default")).size(120, 195);
   innerTable.add(new ImageButton(skin, "default")).size(120, 195);
   innerTable.add(new ImageButton(skin, "default")).size(120, 195);
   innerTable.row();

   innerTable.add(new ImageButton(skin, "default")).size(120, 195);
   innerTable.add(new ImageButton(skin, "default")).size(120, 195);
   innerTable.add(new ImageButton(skin, "default")).size(120, 195);

   scrollPane = new ScrollPane(innerTable, skin);
   innerTable.defaults().expand().fill();

        container.add(scrollPane).size(500,250);
   container.setBackground(skin.getDrawable("main-panel"));
}

This results in the following:
https://imgur.com/iJJceFe

If I don't use a 9 patch, and instead use the full image I get the following:
https://imgur.com/ukFzQun
which is what I want.

Why is the inner table small? It seems like there is some padding or something. I'm sure there is something simple I'm missing with this.
Esanders323
 
Posts: 70
Joined: Sat May 30, 2015 4:12 am

Re: Using 9 patch with ScrollPane

Postby Esanders323 » Tue May 15, 2018 6:26 am

I created an MVCE for this as I still can't figure out the issue:

Game:
Code: Select all
package com.scrollpane;

import com.badlogic.gdx.Game;
import com.badlogic.gdx.assets.AssetManager;
import com.badlogic.gdx.assets.loaders.SkinLoader;
import com.badlogic.gdx.scenes.scene2d.ui.Skin;

public class ScrollPaneTest extends Game {

   private AssetManager manager = new AssetManager();
   
   @Override
   public void create () {
      manager.load("uiskin.json", Skin.class, new SkinLoader.SkinParameter("uiskin.atlas"));
      manager.finishLoading();
      setScreen(new GameScreen(manager));
   }

   @Override
   public void dispose(){
      manager.dispose();
   }

}

Screen:
Code: Select all
package com.scrollpane;

import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.Screen;
import com.badlogic.gdx.assets.AssetManager;
import com.badlogic.gdx.graphics.Camera;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.OrthographicCamera;
import com.badlogic.gdx.utils.viewport.StretchViewport;
import com.badlogic.gdx.utils.viewport.Viewport;

public class GameScreen implements Screen {

    private UIStage stage;

    public GameScreen(AssetManager manager){
        Camera uiCamera = new OrthographicCamera();
        Viewport viewport = new StretchViewport(600, 360, uiCamera);
        stage = new UIStage(manager, viewport);
        Gdx.input.setInputProcessor(stage);
    }

    @Override
    public void show() {

    }

    @Override
    public void render(float delta) {
        // clear the screen with the given RGB color (black)
        Gdx.gl.glClearColor(0f, 0f, 0f, 1f);
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
        stage.act(delta);
        stage.draw();
    }

    @Override
    public void resize(int width, int height) {
        stage.getViewport().setScreenSize(width,height);
        stage.getViewport().update(width, height);
    }

    @Override
    public void pause() {

    }

    @Override
    public void resume() {

    }

    @Override
    public void hide() {

    }

    @Override
    public void dispose() {

    }
}

Stage:
Code: Select all
package com.scrollpane;

import com.badlogic.gdx.assets.AssetManager;
import com.badlogic.gdx.scenes.scene2d.Group;
import com.badlogic.gdx.scenes.scene2d.Stage;
import com.badlogic.gdx.scenes.scene2d.ui.ImageButton;
import com.badlogic.gdx.scenes.scene2d.ui.ScrollPane;
import com.badlogic.gdx.scenes.scene2d.ui.Skin;
import com.badlogic.gdx.scenes.scene2d.ui.Table;
import com.badlogic.gdx.utils.viewport.Viewport;

public class UIStage extends Stage {
    private Group view;
    private AssetManager manager;

    public UIStage(AssetManager manager, Viewport viewport){
        super(viewport);
        view = new Group();
        view.setTransform(false);
        addActor(view);
        this.manager = manager;

        createControls();
        setDebugAll(true);
    }

    private void createControls(){

        Skin skin = manager.get("uiskin.json", Skin.class);

        Table container = new Table();
        container.setTransform(false);
        container.setSize(500, 300);
        container.setBackground(skin.getDrawable("main-panel"));
        view.addActor(container);

        Table innerTable = new Table();
        innerTable.setTransform(false);
        innerTable.defaults().expand().fill();

        innerTable.add(new ImageButton(skin)).size(120,195).pad(20);
        innerTable.add(new ImageButton(skin)).size(120,195).pad(20);
        innerTable.add(new ImageButton(skin)).size(120,195).pad(20);

        innerTable.row();

        innerTable.add(new ImageButton(skin)).size(120,195).pad(20);
        innerTable.add(new ImageButton(skin)).size(120,195).pad(20);
        innerTable.add(new ImageButton(skin)).size(120,195).pad(20);

        innerTable.row();

        innerTable.add(new ImageButton(skin)).size(120,195).pad(20);
        innerTable.add(new ImageButton(skin)).size(120,195).pad(20);
        innerTable.add(new ImageButton(skin)).size(120,195).pad(20);

        innerTable.row();

        ScrollPane scrollPane = new ScrollPane(innerTable, skin, "with-9-patch");
        container.add(scrollPane).size(500,300).fill();

    }

}



uiskin.json
Code: Select all
{
   com.badlogic.gdx.scenes.scene2d.ui.ScrollPane$ScrollPaneStyle: {
      with-9-patch: { background: hollow },
      no-9-patch: {background: hollow-no-9-patch }

   },
   com.badlogic.gdx.scenes.scene2d.ui.ImageButton$ImageButtonStyle: {
      default: {down: default-btn, up: default-btn},
   },
   com.badlogic.gdx.scenes.scene2d.utils.TextureRegionDrawable: {
      main-panel: { region: background}
   }
}


uiskin.atlas
Code: Select all

uiskin.png
format: RGBA8888
filter: Nearest,Nearest
repeat: none
hollow-no-9-patch
  rotate: false
  xy: 1, 117
  size: 550, 300
  orig: 550, 300
  offset: 0, 0
  index: -1
hollow
  rotate: false
  xy: 1, 4
  size: 111, 111
  split: 49, 48, 53, 47
  orig: 111, 111
  offset: 0, 0
  index: -1
background
  rotate: false
  xy: 553, 416
  size: 1, 1
  orig: 1, 1
  offset: 0, 0
  index: -1
default-btn
  rotate: false
  xy: 1, 1
  size: 1, 1
  orig: 1, 1
  offset: 0, 0
  index: -1


uiskin.png: https://imgur.com/a/dIyEj5G (having trouble uploading images)

This still results in the 9 patch "innerTable" being much smaller (https://imgur.com/F4wkg71).
When I don't use the 9 patch and instead use the full texture, the innerTable fills up the entire container (https://imgur.com/BvBTDgM), which is what I want.
Esanders323
 
Posts: 70
Joined: Sat May 30, 2015 4:12 am

Re: Using 9 patch with ScrollPane

Postby raeleus » Tue May 15, 2018 2:15 pm

I'm having trouble seeing the 9 patch settings on your image. It's showing up as a completely black background for me. Just upload your source image as an attachment here on the forum.

Anyway, without actually testing your code, it seems to me you need to increase the inner padding of your scrollpane background. These are the black bars on the right and bottom of your 9 patches. Increase them to the length and/or width of your image if you have to.
Play Forward Gunner!
Create skins visually with Skin Composer.
raeleus
 
Posts: 381
Joined: Wed Aug 07, 2013 10:57 pm

Re: Using 9 patch with ScrollPane

Postby Esanders323 » Tue May 15, 2018 5:26 pm

Thanks for the reply. Unfortunately, I'm having issues uploading images/files to the forums. I get an error no matter the file type or size (says something like "can't find file ./files/[some-uuid]").

Anyways, you are correct, it is a padding issue with the 9 patch. I wasn't doing it correctly, but now that I fixed it it works fine.
Thanks!
Esanders323
 
Posts: 70
Joined: Sat May 30, 2015 4:12 am

Re: Using 9 patch with ScrollPane

Postby raeleus » Tue May 15, 2018 5:31 pm

No problem!
Play Forward Gunner!
Create skins visually with Skin Composer.
raeleus
 
Posts: 381
Joined: Wed Aug 07, 2013 10:57 pm


Return to Libgdx

Who is online

Users browsing this forum: Google [Bot] and 1 guest