How does the 9-something texture thing work?

User Code & Projects tonegodgui
1

Hi!

tonegodgui has some feature that makes the textures look good when making elements a lot bigger, right? It splits a texture in 9 and so forth, right? How does that work? Where is the code that does it? How far from the edges of the image are the cuts made? :stuck_out_tongue:

2

I assume she’s got this as some separate mesh or something (they are often called 9-patches, by the way) but just in the slight chance that she doesn’t, Lemur has a TbtQuad (TBT = Three By Three) that mostly acts just like a JME Quad except that it is a 9-patch and lets you control where the splits are and what their texture coordinates are.

But as I said, I assume she already has something similar.

3
@tuffe said: Hi!

tonegodgui has some feature that makes the textures look good when making elements a lot bigger, right? It splits a texture in 9 and so forth, right? How does that work? Where is the code that does it? How far from the edges of the image are the cuts made? :stuck_out_tongue:

Just like @pspeed said.

You can define the individual border sizes (the Vector4f that is part of the verbose constructor for all controls).
These are defined in the default style xml files.

But, in case you needed to know how it works for a roll-your-own gui…

  • The 9-patch is made up of 16 verts.
  • To determine the proper uv coords… you:
    — determine the texel distance for a single pixel of the image like:

    
float pixSizeX = 1f / imgWidth;
    
float pixSizeY = 1f / imgHeight;
  • let's assume that the border sizes is 8 on all sides, to get the uv coords you would (looking at a single row of verts–4 across)

    
uvBuffer.set(0f); // uv x coord
    
uvBuffer.set(0f); // uv y coord
    
uvBuffer.set(borderLeftSizepixSizeX); // uv x coords border left
    
uvBuffer.set(0f); // uv y coord
    
uvBuffer.set(1f-(borderRightSize    pixSizeX)); // uv x coords border right
    
uvBuffer.set(0f); // uv y coord
    
uvBuffer.set(1f); // uv x coord
    
uvBuffer.set(0f); // uv y coord

    Anyways, you can see how this is done by looking at ElementGridMesh.java

Hope that answers your question…

4

This is the source from Lemur’s TbtQuad… the javadoc has a little ascii picture that may be helpful:

https://code.google.com/p/jmonkeyplatform-contributions/source/browse/trunk/Lemur/src/com/simsilica/lemur/geom/TbtQuad.java

2 Likes
5
@pspeed said: This is the source from Lemur's TbtQuad... the javadoc has a little ascii picture that may be helpful:

Google Code Archive - Long-term storage for Google Code Project Hosting.

That is super helpful…

6

@pspeed @t0neg0d Thank you!