Downloading an image with nine patches as a background Libgdx Scene2d looks awful

Question

I am trying to use Nine Patch as the background for the Libgdx Scene2d user interface. This is loading, but it is really ugly. I see pixels of "metadata", and it is stretched, as if it were just an ordinary image (text on the "Continue" button):

I upload .9.png files directly to (libgdx) NinePatchDrawable via (libgdx) NinePatch as follows:

 this.dialogButtonUp = new NinePatchDrawable( new NinePatch(new Texture(Gdx.files.internal("data/button-round.9.png")))); this.dialogButtonDown = new NinePatchDrawable( new NinePatch(new Texture(Gdx.files.internal("data/button-round-down.9.png")))); 

Then I create a TextButtonStyle that describes the button, and references two NinePatch drawables:

 TextButton.TextButtonStyle buttonStyle = new TextButton.TextButtonStyle(); buttonStyle.font = aValidFontReally; buttonStyle.fontColor = Color.BLACK; buttonStyle.up = this.dialogButtonUp; buttonStyle.down = this.dialogButtonDown; buttonStyle.pressedOffsetX = -2; 

I create the button indirectly through the Dialog field:

 new Dialog( ... ).button("Continue", null, buttonStyle); 

I checked the .9.png files to make sure that:

• that asset files have been updated in eclipse
• so that the pixels of the metadata border are either completely invisible or completely visible-black
• that the Android draw9patch can download images and check them

Any other suggestions for checking or changing?

Answer 1

Thanks to some pointers from @RodHyde, the NinePatch NinePatch class is designed to accept “post-processed” nine patch textures (that is, with separate integer values ​​that describe how to cut one texture into patches). This “processing” usually occurs as a side effect of packing the “.9.png” file in TextureAtlas (see https://github.com/libgdx/libgdx/wiki/Texture-packer#ninePatches ). A texture atlas is a really good idea (especially when your user interface includes many different texture elements), so that makes sense, but it's a bit surprising when you design and try to run something.

To get around this, I can directly include the ".9.png" files, I wrote this:

 private static NinePatch processNinePatchFile(String fname) { final Texture t = new Texture(Gdx.files.internal(fname)); final int width = t.getWidth() - 2; final int height = t.getHeight() - 2; return new NinePatch(new TextureRegion(t, 1, 1, width, height), 3, 3, 3, 3); } 

This loads the texture, creates a subregion that cuts off the border of metadata with 1 pixel, and then just guesses that border elements with nine patches are 3 pixels wide / high. (It seems possible to figure out what is correct by dumping information about the texture, but it’s not worth the effort - just put the texture in the atlas in this case.)