Jump to content

Two new Texture types: FontTexture and MapTexture

Recommended Posts

Hello people,

I'm out of my cave after many weeks of coding, so I figured I should make more announcements about my recent contributions.

In order to develop the Canvas2D feature I had to add two new types of Texture, here's a short summary.


This texture is used to create a Font Map, in order to render text efficiently. When you create an instance of this Texture you specify the Font Name (using CSS notation), the owner Scene, the maximum character count you wish to store (beware it's an approximation, but you should always be able to store at least this number) and the filtering mode. Upon creation the basic ASCII characters are automatically added, but you can also add other Unicode Character by calling the getChar method which will add the given character if it doesn't exist or return the corresponding info Object if it does.

Typical scenario is to parse all characters you want to render and call this method to be sure they are all present in the Map. Then you call the Update method to update (if necessary) the Texture to reflect the latest additions.

getCharInfo() return the character position in the map and its width. You also have access to the lineHeight Property which gives you...the height of a line! Finally you have a measureText method which will return the size taken by a given text. Line return and tabulation are supported.

Well, this class is simple and you can use it if you want, but you should be happy with the Text2D primitive in the Canvas2D.


This texture is a dynamic implementation of the 2D Bin Packing algorithm. It's mainly used when you want to store many different bitmap rectangles of different size in a single Texture, for rendering performance's sake.

We typically use this algorithm to build LightMaps, but I needed it to cache the content of Group2D in the Canvas2D feature.

One thing differentiate this implementation from the algorithm mentioned above: it's dynamic! You can free elements you allocated!

It's pretty straightforward to use: the constructor defines the name,  the size of the texture, the owner scene and the filtering mode.
Then you call allocateRect(size: Size) to find a slot to store your data, the returning PackedRect object gives all the information you need. You need to save this object if you want to release this allocation later by calling freeRect(rectInfo: PackedRect). If null is returned while calling allocateRect() it means the texture has no room to store what you asked for!
The freeSpace read-only property returns you the amount of free space in from the range of 0 (totally full) to 1 (totally free). Beware: due to fragmentation you may not allocate a rect of the corresponding area returned by freeSpace!

Three others methods are very useful: binTextureForRect/PosSize() and unbindTexture(). Use the first two to bind the texture to the texture as the render Frame Buffer targeting the region specified either by the PackedRect object or a Pos/Size info. Rendering will then be done in this area and this area only. You also have the possibility to clear the area during binding to start fresh! When you're done rendering, just call the unbind method to restore the WebGL state as is was before.

That's all folks! See you in the next announcement, because there are more stuffs to talk about! :)

Link to post
Share on other sites
  • 1 month later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Create New...