help with BitmapText objects

[Roberto]

Hi, 

I am trying to get acquainted with BitmapText objects and their properties, but I can't seem to fully understand how to set its properties correctly. In particular, I have two main issues I was hoping you guys could help with. 

1. Non-strictly alphanumeric characters (e.g., hashes '#' or questions marks '?') do not seem to print. I have tried to set the option `char` to `BitmapFont.ASCII' in the `BitmapFont.from()` call as suggested in the API: 

import { Application, Sprite, Container, BitmapFont, BitmapText, Ticker} from 'pixi.js'

const app = new Application({
	view: document.getElementById("pixi-canvas") as HTMLCanvasElement,
	resolution: window.devicePixelRatio || 1,
	autoDensity:true,
	backgroundColor: 0xCCCCCC,
	width: 640,
	height: 480,
	resizeTo:window
});

BitmapFont.from("arial", {
	fill:"#ffffff",
	fontFamily:"Arial",
	fontSize:32,
	chars: BitmapFont.ASCII
})

const mask: BitmapText = new BitmapText("#######",
	{
		fontName: "arial",
		fontSize: 32
	});

app.stage.addChild(mask);

The output I get is basically an empty grey background. The problem does not arise for alphabetic and numeric characters. Does anybody know how to fix this?

2. I would like to make the BitmapText object appear at the center of the screen, independently of the screen size. I have been trying to use the parameters `align` and `anchor` both in the BitmapText object `mask`, but it does not work. 

import { Application, Sprite, Container, BitmapFont, BitmapText, Ticker} from 'pixi.js'

const app = new Application({
	view: document.getElementById("pixi-canvas") as HTMLCanvasElement,
	resolution: window.devicePixelRatio || 1,
	autoDensity:true,
	backgroundColor: 0xCCCCCC,
	width: 640,
	height: 480,
	resizeTo:window
});

BitmapFont.from("arial", {
	fill:"#ffffff",
	fontFamily:"Arial",
	fontSize:32,
	chars: BitmapFont.ASCII
})

const mask: BitmapText = new BitmapText("#######",
	{
		fontName: "arial",
		fontSize: 32
		align: 'center',
		anchor: (0.5, 0.5)
	});

app.stage.addChild(mask);

I have also tried to have the `.anchor` command right before the `.addChild()` call:

import { Application, Sprite, Container, BitmapFont, BitmapText, Ticker} from 'pixi.js'

const app = new Application({
	view: document.getElementById("pixi-canvas") as HTMLCanvasElement,
	resolution: window.devicePixelRatio || 1,
	autoDensity:true,
	backgroundColor: 0xCCCCCC,
	width: 640,
	height: 480,
	resizeTo:window
});

BitmapFont.from("arial", {
	fill:"#ffffff",
	fontFamily:"Arial",
	fontSize:32,
	chars: BitmapFont.ASCII
})

const mask: BitmapText = new BitmapText("#######",
	{
		fontName: "arial",
		fontSize: 32
	});

mask.anchor.set(0.5, 0.5);
app.stage.addChild(mask);

But in this case, the text appears only in part in the top left corner. Can anybody suggest me how to fix this?

Thank you again in advance!

Edited October 3, 2021 by Roberto

[Jammy]

Hi,

This might be your issue:

chars: BitmapFont.ASCII

This restrict it to just ASCII Table (a-z1-9) etc probably.

The list of other sets is here: https://pixijs.download/dev/docs/PIXI.BitmapFont.html

It might be this, can't remember: BitmapFont.available

[Jammy]

For alignment see the documentation here:

https://pixijs.download/dev/docs/PIXI.TextStyle.html

You probably want this:

style.align

string

<optional>

'left'

Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text

[Roberto]

Hi, 

Thank you for replying. 

15 hours ago, Jammy said:

This restrict it to just ASCII Table (a-z1-9) etc probably.

Well, the ASCII table does include # though.

15 hours ago, Jammy said:

The list of other sets is here: https://pixijs.download/dev/docs/PIXI.BitmapFont.html

It might be this, can't remember: BitmapFont.available

I have tried this, but it does not work either. All other possibilities do not work (BitmapFont.ALPHA, BitmapFont.NUMERIC, BitmapFont.APHANUMERIC) either.

Might it be an error/bug?

[Roberto]

16 hours ago, Jammy said:

You probably want this:

style.align

string

<optional>

'left'

Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text

I am confused. I need to use BitmapText (instead of just text) for other reasons. The BitmapText API actually has an example of align specification inside the style of the BitmapText object. I am not sure it is not working in my case. Might it be that I am writing my code in .ts and using npm (as shown in the Caldero's tutorial?

Thank you for the help!