About Store Forum Documentation Contact



Post Reply 
New Esenthel store item: IMGText!
Author Message
Rubeus Offline
Member

Post: #1
New Esenthel store item: IMGText!
IMGText (in the store, under Source Code > Tools) is a relatively simple, but effective way to dynamically(oooh! Much productive!)create images and textures with text on them.

How to use it:
1) Create an image with evenly spaced letters on a transparent background, and import it into your project. It requires 1 or more of the following: lowercase letters, uppercase letters, 0-9(numbers), non-alphnumeric symbols(!@#? etc). This is the hard part. smile

2) In code, create a configuration, feeding the UIDs of the letters to the configuration, as well as a unique name to identify it by, eg. "Player name" or "damage text" or whatever. You can have...many configurations. The configuration setups are quite easy, and can be all done in your game's Init() function.

3) Create the image.
ImagePtr ImgTextControl.CreateImage( ConfigurationName, Text )
It returns the ImagePtr, so you can use it wherever an image might be used: material->base_0 = ImageTextReference.CreateImage( "damage text", "CRITICAL! 84,482,357" );

4) The EE cache will take care of freeing the image when there are no longer any ImagePtrs pointing to it.

I created IMGText as a singleton because it makes use of a list of configurations, and multiple instances would probably confuse things. This also means that it's ready to start making configurations without worrying about creating and passing instances/pointers/references/etc etc etc

IMGText comes with a couple example applications showing how it could be used in a practical situation. I'm pretty sure I commented it pretty decently, and it's only $1.50 in the store.

I saw there were a few users that were having issues with dynamically creating images or rendering D.text to a texture. This system provides a fully viable alternative.

Because Material uses ImagePtr as the texture, this opens the possibility for bumpmapped text/icons, reflective text, glowing letters, etc.

I'm looking forward to someone who is not incompetent with art trying this out. I'm like a kid with fingerpaint when it comes to photochop, so I use Paint.net, which doesn't yield the highest quality results, so I got som artefacting and color bleeding with my test images.

Edit before submitting: Don't you just hate finding a typo in code right before submission? Version 2.0 before the initial release.
Esenthel, do I have to hit publish then wait for inspection/approval every time I update the item in the store?
02-23-2014 12:40 AM
Find all posts by this user Quote this message in a reply
Esenthel Offline
Administrator

Post: #2
RE: New Esenthel store item: IMGText!
(02-23-2014 12:40 AM)Rubeus Wrote:  Esenthel, do I have to hit publish then wait for inspection/approval every time I update the item in the store?
Hi, yes, this is how it works.
02-23-2014 12:45 AM
Find all posts by this user Quote this message in a reply
Rubeus Offline
Member

Post: #3
RE: New Esenthel store item: IMGText!
Pending Esenthel's approval, I've released an update to the ImgText library! The new update most notably now has the ability to use the font element in EE instead of having to create and import your own images-although this is still available.
The custom character system works with the EE font system as well to provide the means of replacing characters with whatever you want. I prefer the use of the Cottonball Sheep.
The EE font system also has the ability to set set or change the color of the font- including using a set of colors to make each character a different color.
Tutorials included:
Tutorial 1) Creating images dynamically from text using provided images - with and without scaling up to the nearest power of 2 on image creation. Based on the "05 - Gui/08 - Loading GUI Objects" tutorial.
Tutorial 2) Creating a texture dynamically from text programmatically for things like a name floating over the player's head. Based on the "14 - Game Basics/03 - World With Character" tutorial.
Tutorial 3) Creating a detail map for a material dynamically using a font element in EE. Using this method, one can: write a player-created brand name(in game!) on an object they created; draw a player generated graffitti message on a wall; change the sign on the front of a player-owned tavern to the name they want; etc. Based on the "12 - Rendering/05 - Shadows" tutorial.
Tutorial 4) Creating images dynamically from text using EE fonts. This one shows how to change the color to 1 or more(red, white, and blue ftw!) and how to replace a character with a custom image. In this example, the % symbol is replaced by the Cottonaball Sheep. Based on Tutorial 1 and the "05 - Gui/08 - Loading GUI Objects" tutorial.

As far as performance:
Memory usage is fairly low. The configurations for images are miniscule(few hundred bytes) + the image files(each only loaded in memory once). The configs for fonts are about 1/2 the size of the uncompressed font images, but are not compressed, allowing for faster drawing. A 45pt font with the default options uses ~1MB of memory.
For CPU use, creating 2 64 character images from images took 24ms max on my system. That would bring 60fps to 58.5fps if the two images were created once each in that second. Creating 2 64 character images from fonts weighed in a bit more at 72ms max. This would bring 60fps down to 55.5fps if the two images were created once each in that second.
(The time difference is most likely due to additional calculations for applying the color to the text, and I will work on further optimization in a future update, if possible.)
(Also, 2 64 character images is a little obscene as far as size. Using ~16 characters, a much more reasonable size, a single image takes a mere 7ms using fonts. That's 60fps down to 59.5fps.)

However, creating an image once, then drawing that rather than drawing D.text() every frame should be faster for the situations where the text doesn't change-eg: a player's name.
It will also allow a little bit more versatility in some situations-eg: putting an image in a gui instead of D.text() prevents the need for a bunch of extra code to make sure the text displays in the right place and only when the gui is showing, etc.

This library was made to make my job easier, but if someone wants to actually buy it and request a feature, I wouldn't mind having a go at it.

Currently, there are ~667 lines of code.
(This post was last modified: 04-05-2014 03:00 PM by Rubeus.)
04-05-2014 02:59 PM
Find all posts by this user Quote this message in a reply
Rubeus Offline
Member

Post: #4
RE: New Esenthel store item: IMGText!
Update:

-Fixed various bugs
-Added EE3 support - EE2 code still available
-Switched to using EE Map container.
-Important: The name is now specified in the New call rather than the Create.

Let me know if there are any bugs I missed.
05-19-2014 08:55 PM
Find all posts by this user Quote this message in a reply
cmontiel Offline
Member

Post: #5
RE: New Esenthel store item: IMGText!
In my port for 1.0 of your class I noticed it is slow creating an ImgTextConfig. Maybe is my font but would be good if you review that part pfft
(This post was last modified: 05-22-2014 04:52 PM by cmontiel.)
05-22-2014 04:52 PM
Find all posts by this user Quote this message in a reply
Rubeus Offline
Member

Post: #6
RE: New Esenthel store item: IMGText!
I will check it out - if it's from a font, it has to copy each pixel of each character individually. Larger font sizes will also be slower. For the next version, I'll have it done on a secondary thread(or multiple).

Thanks for the feedback.
05-22-2014 05:42 PM
Find all posts by this user Quote this message in a reply
Esenthel Offline
Administrator

Post: #7
RE: New Esenthel store item: IMGText!
If you're reading each pixel separately, then it will be much faster if you copy entire image at once instead.
(Image.copy from compressed to decompressed will be faster than when doing manual copy with Image.color for every pixel)
05-23-2014 09:08 AM
Find all posts by this user Quote this message in a reply
Rubeus Offline
Member

Post: #8
RE: New Esenthel store item: IMGText!
I copy each character color and shadow from the font(the green and alpha) to a uint array rather than a separate image - I figured it would be more memory efficient this way than to use another image uncompressed.
I'll look into copying the image to a temporary uncompressed image using Image.copy, too.
For this library, I'm focusing less on speed and more on memory efficiency for this part; the config can be created during loading times - even during initial application load.
05-23-2014 01:44 PM
Find all posts by this user Quote this message in a reply
Rubeus Offline
Member

Post: #9
RE: New Esenthel store item: IMGText!
(05-23-2014 09:08 AM)Esenthel Wrote:  (Image.copy from compressed to decompressed will be faster than when doing manual copy with Image.color for every pixel)

I tested with Image.copy; making an uncompressed copy then reading from the uncompressed version is an average of about 2ms faster: Average 90ms to create a config without using copy, 88 with.

Every little helps.

I think getting a few threads set up to work on multiple letter simultaneously will be my best bet.
05-23-2014 07:23 PM
Find all posts by this user Quote this message in a reply
Rubeus Offline
Member

Post: #10
RE: New Esenthel store item: IMGText!
Ok, I managed to get the creation time down to 20ms for a single thread and 14ms for multiple threads. 85% faster is pretty good, I think! It will make a huge difference if one is loading a lot of different configurations. smile

The Create method for the configuration now takes an optional parameter: Threaded, which is false by default. Setting this to true will use 4 threads(this can be changed easily by modifying the value in the fixedElm array in the header; 4 is the point of diminishing returns on my system) to create the configuration.

Squashed a few more bugs while I was at it, too. What fantastic service for $1.50!

There is now near 750 lines of code.
05-24-2014 09:14 PM
Find all posts by this user Quote this message in a reply
Post Reply