using texture atlas

[grayger]

I am experienced with Phaser, but new to Babylonjs. To make a game, I am investigating 2d UI library that can work with BJS.

I can't find any information about texture atlas in Canvas2D and CastorGUI. 

Does either of them support texture atlas?

 

 

 

[Wingnut]

Hi @grayger, welcome to forum.  Sorry for slow replies.

I have low experience, but, I think, no. 

Sprite atlas, no problems.  But I think you are talking about ALL the textures used on a dialog panel itself, or many dialog panels... being contained on a single texture file.

I have never seen this done, here... not with any of the BJS-related 2D GUI systems to date.

I could EASILY be wrong, though.  And I hope I am on-subject. 

But, I am going to ping the authors of "the big 4" GUI systems... to see if they have comments.

CastorGUI - @Dad72
bGUI - @Temechon
Dialog - @JCPalmer
Canvas2D - @Nockawa

How's that for a ping festival?  Hey guys, sorry for the power-ping, but I wanted to make sure I was not giving Grayger bad/incorrect information.

Canvas2D is the most powerful and newest, but only its underbelly is operational.  Its high-level GUI library is still in-dev, I believe. 

Let's watch the comments, Grayger... and see how much the guys hate me for the power-pinging. 

[Dad72]

CastorGUI does not support texture atlases.

Do you have an example of what you want to do? I'm not sure what texture atlas is? Is this a list of all the textures? For that it is enough to create a function with an array that recovers all the textures and another function that recovers them.

[grayger]

19 hours ago, Dad72 said:

CastorGUI does not support texture atlases.

Do you have an example of what you want to do? I'm not sure what texture atlas is? Is this a list of all the textures? For that it is enough to create a function with an array that recovers all the textures and another function that recovers them.

It is a texture made up of multiple textures. https://en.wikipedia.org/wiki/Texture_atlas

Thanks for the info. I need to investigate further. 

[Wingnut]

http://www.gameart2d.com/uploads/3/0/9/1/30917885/469557_orig.jpg

Custom Shape2d, part of Canvas2D system... not a problem.  Can do.    Just don't ask for drag-resizing on them.  heh

Basic test of multiple sprite2d using common atlas...  http://www.babylonjs-playground.com/#1PO0WU#30

Looking good.  Sprite 1 is entire atlas.  Sprites 2-4 are various pieces from the atlas.  FUN!

[Nockawa]

On 12/23/2016 at 10:17 AM, grayger said:

I am experienced with Phaser, but new to Babylonjs. To make a game, I am investigating 2d UI library that can work with BJS.

I can't find any information about texture atlas in Canvas2D and CastorGUI. 

Does either of them support texture atlas?

 

Hi, welcome to BJS community,

Supporting this tools file format is on my todo list for Canvas2D https://www.codeandweb.com/texturepacker is that what you're looking for?

If you need it I may put it on the top of my TODO and start coding the feature first week of january, I won't be a big feature to code because @MasterK already provided me pieces of JS code related to this, but I would have to convert it to TypeScript and maybe change the architecture.

Bottom line: if you badly need it, I can work on it.

[BitOfGold]

@Nockawa:
I think supporting texturepacker is a great idea.
On my personal "wishlist" there is an item: 9-sliced gui background. (This needs a texture atlas too, repeating background, 4 corners, 4 sides)

And thanks for Canvas2D!

[jpdev]

The 9patch format (which I think was developed for android, but is used by other libs like libgdx too) would be a great addition to canvas2d.

BitOfGold already somewhat explained it.

The basic Idea is, you have a picture of a button, and around it is a 1px border that defines which parts of the button will be streched and which parts won't.

To actually render the button the outer 1px border has to be analyzed, then the button has to be split up into the four corners (those are rendered not stretched at all) and a center piece (stretched in all directions) and 4 sides (stretched in one direction).

https://github.com/chrislondon/9-Patch-Image-for-Websites/wiki/What-Are-9-Patch-Images

You can make really nice scaling buttons with this.

[Nabroski]

 

@fenomas

https://github.com/andyhall/babylon-atlas

[Nockawa]

The Scale9 Sprite is also on the top of this list, also from a suggestion of @MasterK. It would be rendered in two Triangles, very fast.

It shouldn't be long to develop, I just wonder if the current Sprite2D class is the best one to include this feature.

[MasterK]

yeah. I'm here. And bmfont. That's 2d common things. I told you.

[Pryme8]

PieUi can do this already.

[grayger]

1 hour ago, Pryme8 said:

PieUi can do this already.

What is PieUI? Just googled it but couldn't find it.

[grayger]

22 hours ago, Nockawa said:

Bottom line: if you badly need it, I can work on it.

I can live without it for the time being. Thanks for your support @nockawa.

Maybe you are the developer of Canvas2D and other guys are requesting bmfont, nine-patch, and so on. Cheers!

[Pryme8]

Look it up on here look for mmmpie it's a engine I'm sitting on that I will provide to certain people for a limited release.  There are like three guys in the communities that have it and all use it for their paid work.  I don't mean to brag but it's easily the best UI solution out there. It takes a little scripting to set up your elements and code your call backs but it's a monster, you can do anything and any functions you develop are reusable as modules, with a full stack of prototypes for management or cloning deleting moving scaling rotating layering etc...  if your interested pm me we'll talk and if I think you can handle it I'll swing you pieui.0.0.3.js and a nifty project I call master sheet that will inspire you for your image atlas.

[Pryme8]

 

[JCPalmer]

I have played with the Blender texture atlas plug-in.  It does require that you lay out the UV maps of each texture, but you can click select / drag them.  I assume that this is desired to eliminate the draw calls of a multi-material mesh.  Kind of feels like making pressed xmas cookies out of a rolled out dough square.  You can size and rotate individual section where you want to make things more or less detailed.  The down side is initially every UV is on top of every other.

I have also played with baking during export to combine multiple blender materials into 1.  Thought it would work good for something like MakeHuman, where there is a texture of the whole skin, but it is not well utilized as much of the body is covered with clothes.  It was a major disaster (still in the exporter in a switched off state though).  First problem is, a new UV is recomputed, not just strung together from the pieces.  Not near as compact.  This spills over into more / bigger vertices, normals, skeleton matrix indices & weights, vector colors, shape keys, and UV (of course).  Having multiple vertices only differing by UV makes this look more flat shaded.

The 2nd problem relates to transparency.  I could not get the eye lashes & eye browses to not be just solid black over the skin.  I know everyone just wants to hear how to do stuff, not failures, but suck it up.

I saw blender page that showed how to manually combine textures of Blender multi-materials, but cannot seem to find it.  I would not think that combining in BJS itself would be in my interests.  Seems to me you need to forego using compressed textures, if you did it that late.

[Nockawa]

@JCPalmer I think the discussion was about texture atlas for 2D stuffs, targeting 3D is another topic on its own I guess.

Texture Atlas is for me mostly about developing a production pipeline that enable people to use it in a efficient manner (either during development and at runtime).

That's why I can't only think about a single class in Canvas2D where you would have to load manually a texture then specify "manually" all the regions and their meaning to map them on sprites afterward.

I was mentioning this tool  https://www.codeandweb.com/texturepacker that @MasterK told me about, it seems to be fairly wide spread and many engine supports it, so my question is the following one:

Would you all people that are interested in Texture Atlas in Canvas2D would be interested about supporting the file format of this tool, which would imply to use it?

Thanks

[Wingnut]

Hey Noxxy!  Hope you're feeling better these days.  Hi to everyone else, too.

Nockawa... do you care what tool is used to make a jpg full of sprites or gui border textures? 

Quote

Export

For export (from TexturePacker), the following image formats can be used:

• PNG - Portable Network Graphics
• PVR - PowerVR - iPhone image format (gzip or zlib compressed)
• JPG - Joint Photographic Experts Group
• BMP - Bitmap
• TGA - Targa Image File
• TIFF - Tagged image file format
• PKM - PKM with ETC1
• PPM - Netbpm (ASCII or binary)
• WebP - Google image format
• ATF - Adobe Texture Format

You don't really care what creates the PNG or JPG, right?  Really, you just want to let users choose WHERE on the atlas is the lower-left corner of the wanted "piece", and then X/Y range/extent, yes?  Your sprite2d/shape2d already have that feature. Even when you build the GUI lib template for a scale-able 9-part box model (8 border pieces and 1 tile-able central background), the user will still need to enter 9 lower-left starting points (atlas locations), and 9 extents (how much X/Y image to grab from each starting point).

So, it seems, you only need to build an easy-to-use 9-part box model maker... and you wouldn't care what creates the atlas. (I'm likely forgetting something, though) (sorry)

1 hour ago, Nockawa said:

That's why I can't only think about a single class in Canvas2D where you would have to load manually a texture then specify "manually" all the regions and their meaning to map them on sprites afterward.

Would you mind re-wording that sentence?  I don't understand that sentence real well.  Or maybe I do. 

Would the Canvas2d 9-part box-model (I'm using 'box-model' term in the same respect as CSS uses it)... use 9 sprite2d/shape2d, at its core? 

So if an image arrived... of an entire box-model... like this (complete box in upper left area), then you (for your GUI lib) would "slice" that image into 9 sprite-maps... and use 9 sprite2d/shape2d to display it? 

var compoundShape2d = SliceAndMapToNineSprites(imgurl, startPos, xRange, yRange, borderDepth)  ??    

Or, not?  I'm so confused.  SO many questions... and SO little Wingnut brainpower.

[Nockawa]

Ok, I'll try to clarify some things up:

1) To answer back a previous comment of another user: for me a Scale9 Sprite doesn't have to rely on an Atlas Texture, for me (but I totally understand other people may have other point of view) the Scale9Sprite is just a sprite with 4 more values: the 2 horiz splits and the 2 vert splits to define the 9 parts.

2) What I understood about TexturePacker (but I can be wrong because I just went to the product home page) is that it generates a picture file containing the atlas but also a json file that contains the whole information needed to find the right location/size of a given sprite's bitmap you put in the Atlas. You could and will be able to specify these information manually, but I think that if you store many sprites into one picture file: it's better to rely on a product that ease the production chain of your development. That was what I was trying to say with: 

Quote

That's why I can't only think about a single class in Canvas2D where you would have to load manually a texture then specify "manually" all the regions and their meaning to map them on sprites afterward

The way Sprite2D is implemented internally so far would make things pretty easy to extend it to a Texture Altas, because internally the Sprite2D's bitmap (which can change because of the Frame support) is defined by a nomalized UV for the bottom/left corner and normalize size. Instead of storing just once this tuple I could make a list of them and there you have a Texture Atlas... But I don't want it to be this way, for me it should be a brand new primitive with a clearly defined semantic, well, I have to think it through, and I still haven't.

One last thing concerning Scale9Sprite, do you people know if there are tool which generate a json file that store the 4 splits values so you won't have to specify them by code (or creating your own file format) ?

Thanks

[MasterK]

one thing to say avoid you don't know:

one frame pic in atlas texture also can be used for scale9sprite.

another way speak: scale9sprite's texture will also be packaged in texture atlas.

[Pryme8]

I really wish I could just post the source to Master Sprite...  >_<  Let me see if I can get the rights to do that. 

[Nockawa]

@Pryme8

I render Sprites using WebGL's Vertex & Fragment Shader.

This allow me for instance to render a Scale9Sprite in two triangles, do you have the same approach?

[Pryme8]

Mine is just to make the texture atlas and sprite sheets, with animation and state links how you display it would be on you.  So yeah it would work with your approach.

[Nockawa]

@grayger I just pushed the TextureAtlas feature along with Scale9Sprite, I will make Playground example tonight and a more formal announcement in the Canvas2D main post.