Novice learning 'Starling' discussion

785597448 · September 9, 2025, 6:00am

Thank you for providing an amazing bitmap font making tool

This tool seems to be unsupported
“GlowFilter”？

There is a shadow effect,
But it doesn’t support ‘intensity’ and can’t achieve the effect I want

There is a solid color stroke, which is a solid color stroke around the font

But there is still a difference between it and a luminous filter

The luminescent filter spreads outward and supports intensity quality

This is a solid color contour stroke

It seems that this tool can only achieve such an effect

This is the effect I want
GlowFilter

Bink · September 9, 2025, 6:11am

Like this?

I took the image SnowB generated into Gimp (like Photoshop, just use what you have), and then duplicated the layer 5 times to increase the glow intensity.

That can then be exported again as PNG, replacing the generated file.

785597448 · September 9, 2025, 6:21am

“SnowB”
Where is the luminous filter?

Or are you using the ‘shadow effect’?

Finally, using multiple image overlays?

785597448 · September 9, 2025, 1:26pm

Can this tool be downloaded?

Or is there any other tool introduction?

Bink · September 9, 2025, 11:52pm

Yes, I used the shadow effect, just setting Offset X and Offset Y to 0, so it behaved more like a glow or “luminous” as you put it.

It’s a simple way of increasing the shadow / glow / luminous intensity.

In image editing software (I used Gimp), you can duplicate the layer, over and over, until you have the intensity you need. Then export it as a PNG (with alpha) again.

The repository is here:

You could probably run this locally via Node.js?
You can also install it as a web-app:

Bink · September 10, 2025, 12:59am

To duplicate the layer in Gimp (and likely similar process in other software), right-click on the layer and go to Duplicate Layers.

Keep doing that till you’re happy with the intensity.

Go to File > Export As, then save it as a PNG with alpha.

785597448 · September 10, 2025, 3:26am

Can bitmap fonts achieve different colors for each character? I mean setting a different color for each character at runtime?

785597448 · September 10, 2025, 3:28am

What other haxelib libraries do people use while using “openfl”?

Bink · September 10, 2025, 3:41am

If memory serves, you export your bitmap font as white, then in code you can colour it. However, with respect to colouring per-character in a single TextField, I’m not sure if that’s possible.

I’ll often use Actuate and SVG when not using Starling. I’ve also used Crypto when the need presents.

785597448 · September 10, 2025, 4:31am

I’m asking, can I set the color of each text in a text box to be different for bitmap fonts?

txt.text=“abc”
Set ‘a’ to blue
”B "Set yellow
”C "Set purple

Different characters in a text box are of different colors

Can it be achieved?

785597448 · September 10, 2025, 4:35am

The text boxes for “as3” and “openfl” are vector graphics

No matter how you scale, it won’t blur

Maintain clarity

When I use ‘starling’

The text box is rendered as a bitmap, resulting in blurry scaling

The solution is to set the text box size to 70 and then shrink it

Bink · September 10, 2025, 4:45am

In OpenFL, TextField has the method setTextFormat() which lets you specify an index of characters to apply the format to. In this way, you can set the TextFormat per character, or range of characters.

The `setTextFormat()` method changes the text formatting
applied to a range of characters or to the entire body of text in a text
field. To apply the properties of format to all text in the text field, do
not specify values for `beginIndex` and `endIndex`.
To apply the properties of the format to a range of text, specify values
for the `beginIndex` and the `endIndex` parameters.
You can use the `length` property to determine the index
values.

github.com/openfl/openfl

src/openfl/text/TextField.hx

69ddfc6ba


      
          
          		@param format A TextFormat object that contains character and paragraph
          					  formatting information.
          		@throws Error      This method cannot be used on a text field with a style
          						   sheet.
          		@throws RangeError The `beginIndex` or `endIndex`
          						   specified is out of range.
          
          		@see [Formatting text](https://books.openfl.org/openfl-developers-guide/using-the-textfield-class/formatting-text.html)
          	**/
          	public function setTextFormat(format:TextFormat, beginIndex:Int = -1, endIndex:Int = -1):Void
          	{
          		var max = text.length;
          		var range:TextFormatRange;
          
          		if (beginIndex == -1)
          		{
          			if (endIndex == -1) endIndex = max;
          			beginIndex = 0;
          		}
          		else if (endIndex == -1)

I’m not aware of a similar method in Starling’s TextField.

Bink · September 10, 2025, 4:48am

Correct. The sharpest bitmap text won’t have ANY scaling. If you must scale, only scale down but be mindful even that will lose sharpness.

My approach to this has been to either:

Export size-specific text options. So if I need size 70 text and size 34 text, these will be two separate bitmap fonts.
Use distance field fonts instead, which scale better. In your current scenario though, you loose the baked in glow effect with this option.

785597448 · September 10, 2025, 5:30am

Note: The text box mentioned here is not a bitmap font

I need a beautiful text box

So I used a glowing filter to stroke the text box

But when the text box or its parent is scaled, the filter size will not follow the scaling

Just like filters applied to images, image scaling filters naturally follow the scaling process

I am using a filter for the text box

The implementation method is to dynamically calculate the size of the filter when scaling the text box

May I ask how to calculate? I don’t know how to calculate, seek help

785597448 · September 10, 2025, 5:38am

The size attribute of the luminescent filter depends on the pixel

I have tried multiplying the filter size by the text box scaling

1.5 * txt.scale

Alternatively, multiply the filter size by the parent scaling of the text box

1.5 * txt.parent.scale

But it doesn’t seem right!

The parent of the text box is a container UI that adapts to the screen size

Novices really don’t know how to calculate the correct value

Novices are eagerly seeking help

785597448 · September 10, 2025, 5:40am

Container UI scaling is adapted to the screen, and the text box scaling is 0.4. For clarity, I reduced the text box

785597448 · September 11, 2025, 3:44pm

Ha ha ha! I’m using ‘starling’ again

Let’s take a look at the text effects displayed in the “openfl” and “starling” text boxes together

Both text boxes have a font size of 50

openfl

starling

scale = 0.5

openfl

starling

scale = 0.2

openfl

starling

Put both text boxes into the ‘Container UI’

The ‘container UI’ will adapt to the screen size changes, and the scale of the container UI and text boxes will also change

At the beginning, when both text boxes were 50 in size, the “openfl” text box was clearer than the “starling” text box because it would scale when placed in a container

When the ‘scale’ is all 0.5, it feels almost the same

785597448 · September 11, 2025, 3:46pm

When the “scale” is 0.2, the text displayed in the “starling” text box appears as particles (I don’t know if it’s due to screen pixels)

I think it’s acceptable

So,
I am using ‘starling’ again

785597448 · September 13, 2025, 2:57pm

Is the ‘starling mask’ incorrect?

I encountered an error using ‘mask’

I have two pictures as follows

I want to use a circular chart to create a mask

I made an error when setting the ‘mask’

It seems to be a mask made according to the rectangular border of a circular image

My texture atlas includes transparency png32

Has anyone encountered the same problem and is there a solution?

joshtynjala · September 15, 2025, 3:46pm

Starling’s mask is working correctly. The alpha values of a texture do not affect how a mask works.

However, you should be able to use the Canvas class to draw a circle to use as a mask.