OpenFL/Starling text input

#1

Hi!

What do you use to text input on OpenFL/Starling project?
On AIR we have Feather library over Starling.

I found https://lib.haxe.org/p/starling-text-display
But have two problems:

  1. Font is always the same. I try different fonts (bitmap, ttf) but no result.
    199533092-073edc49-7f09-48b7-8c65-38b84e785ccb

  2. I can’t use non ASCII characters. Always only English letters are displayed.

What can you recommend? What do you use? Can I use OpenFL TextField over Starling DisplayObject?
Thx!

P.S. I interested in html5 target.

#2

Hi, I use FeathersUI over Starling for everything that doesn’t need to be located in the game display itself (like a character name floating over the character, a health bar, damage numbers etc)

On your screenshot the text displayed looks like the default “MINI” bitmap font

Maybe have a look here ? The Starling Manual
It’s for the as3 version but everything should be the same

Bitmap fonts have to be registered with TextField.registerCompositor(bmpFont, name)

System or embedded fonts should be available using their name, you can list available fonts with openfl’s Font class : Font.enumerateFonts()

#3

  1. How do you use FeathersUI over Starling? You calculate absolute coordinates and add elements to Starling.current.nativestage?

  2. Starling AssetManager do TextField.registerCompositor(bmpFont, name) internally.
    But I found that ‘TextDisplay’ class need similar method FontRegistry.registerBitmapFont(bitmapFont, fontName); After I add this - everything works!

Now question is: can ‘TextDisplay’ work with embedded ttf fonts or only Bitmap fonts?)
May be someone has used ‘TextDisplay’ class.

#4

  1. Depends on what we’re talking about : displaying a popup at the center of the screen doesn’t need anything from starling for example, same with having a panel with buttons on a side of the screen. If you need a UI element to appear near a character in your game then yeah you will need some
    <DisplayObject>.localToGlobal() to retrieve the correct location. You can also use Lib.stage to access the regular (non-starling) Stage

  2. great :slight_smile: Thanks for digging this lib btw, it seems to have interesting stuff I’ll try to look into it when I get some free time.

From the quick glance I took yesterday I believe it only works with BitmapFont. It seems like it should be able to generate a BitmapFont out of a regular font file, but you can also do that yourself using BMFont for example ( BMFont - AngelCode.com ) - I think there are a few tools mentionned in the starling manual, should be a bit below where my link takes you.

edit : not Lib.stage but Lib.current.stage

1 Like
#5

Hi!
Now I need to give the option to enter emoji in Starling game on html5 target)
So TextDisplay class (works with bitmap fonts only) does not suit me(
I need static textfield position inside my game gui:
image

What can you recommend? FeatherUI is a pretty big lib for only one ‘textinput’ task.

#6

And one other question)
Is there method to compute coordinates from Starling stage to OpenFL stage coordinate system (in view of Starling viewport, scalefactor, etc)?
Thx!

#7

Hello,

I don’t have an easy solution to offer here, I never had to do that. Bitmap font doesn’t sound like a bad idea though ? You could probably associate each emoji with a character code, and parse user’s input to replace the emoji code with the character code for that emoji picture ?

Why do you want to get rid of your TextDisplay exactly ? Is it because it is misplaced in your screenshot ? Or some other reason ?

Using regular TextField I would try something with htmlText and image tag

I don’t remember seeing a function for this but could totally be wrong :sweat_smile:
It should not be hard to do though :

  • make sure you have global coordinates (use DisplayObject.localToGlobal if needed)
  • multiply or divide with scalefactor
  • add starling’s viewPort x and y

should be all you need ?

#8

@Matse, thx!

It is interesting idea! But I need to create bitmap font with all emoji.

I find new problems with DisplayText:

  1. It doesn’t reacting to switching keyboard layout (switching between languages)
  2. It looks strange when I change browser zoom (a text is shifting)

With OpenFL TextField I have built-in support of emoji (it’s enough for me):

image
image822×493 89.9 KB

Yes, my code is:

function getNativeCoordinates(obj:DisplayObject):Rectangle
	{
		var res = new Rectangle();
		if (obj.stage != null)
		{
			var p1 = obj.localToGlobal(new Point(0, 0));
			var p2 = obj.localToGlobal(new Point(obj.width, obj.height));
			
			res.left = Starling.current.viewPort.x
				+ p1.x * (Starling.current.nativeStage.stageWidth - 2 * Starling.current.viewPort.x) / Starling.current.stage.stageWidth;
				
			res.top = Starling.current.viewPort.y
				+ p1.y * (Starling.current.nativeStage.stageHeight - 2 * Starling.current.viewPort.y) / Starling.current.stage.stageHeight;
				
			res.right = Starling.current.viewPort.x
				+ p2.x * (Starling.current.nativeStage.stageWidth - 2 * Starling.current.viewPort.x) / Starling.current.stage.stageWidth;
				
			res.bottom = Starling.current.viewPort.y
				+ p2.y * (Starling.current.nativeStage.stageHeight - 2 * Starling.current.viewPort.y) / Starling.current.stage.stageHeight;
		}
		
		return res;
	}

I can call it every STAGE_RESIZE event so the TextField is always in the right place. And you need similar function to calculate new font size.

So my choice for now is switching to OpenFL TextField!
Thx!