Adding Text

[legshampoo]

Hi I'm having an issue, not sure if it's me or a bug but thought I would ask here...

I'm trying to add text to ExpoPixi.Sketch like this: var text = new PIXI.Text('this is the sample text');

this.sketch.stage.addChild(text);

getting an error i.scale is not a function. (In 'i.scale(this.resolution, this.resolution)', i.scale is undefined

Thanks!

[EvanBacon]

Text is not supported in EXGL at the moment, but it's slowly being added

[flybayer]

Has anyone worked on this? If not I'll probably try to get it working.

[flybayer]

I've been trying to figure out how to integrate expo-2d-context for Text rendering, and I'm stuck.

For starters, I can't use vanilla expo-2d-context to render text.

And even if that worked, I can't figure out how to integrate with Pixi. Pixi makes heavy use of an HTMLCanvasElement which expo-2d-context doesn't provide.

[anshgupta1234]

I'd love this too... does anyone know if they added Text support yet?

@EvanBacon

[quocsinh]

I have same issue. Has anyone done this yet?

[baochungit]

After some efforts, I'm now able to use PIXI.Text. It was quite tricky, there were many things to modify.

Here is the list:

• Modify HTMLCanvasElement to return CanvasRenderingContext2D (Expo2DContext)

• Create a list of reserved WebGLRenderingContext (using GLView.createContextAsync()). These context will be used to distribute to the CanvasRenderingContext2D of those HTMLCanvasElement above.

• Modify Texture.prototype.upload function in GLTexture.js to support passing ImageData to the WebGLRenderingContext. Something kinds of gl.texImage2D(gl.TEXTURE_2D, 0, this.format, newWidth, newHeight, 0, this.format, this.type, source.data); (the source here is the HTMLCanvasElement object and the propery data will return the ImageData of the CanvasRenderingContext2D)

• One more thing is TextMetrics.measureFont function in TextMetrics.js of pixijs. Somehow this function calculates wrong the baseline value (too low). I had to multiply it to 5.835 (considering to look into this more closely later)

Oops... just to confirm that I still face the bellow issue with the text rendered (maybe Expo-gl not working property with the other than the first context) https://forums.expo.io/t/expo-2d-context-can-only-draw-text-to-one-glview-any-other-glview-shows-block-letters/24302 @EvanBacon

[dpyeates]

Has there been any news/update on this? I'm, using a PIXI view inside my react native app and really need to use text that I need to translate on the PIXI stage. My alternative is to use expo-three but using a 3D renderer for a 2D requirement just adds a huge amount of complexity.

@baochungit did your modifications you mentioned above actually get text to render? Can you share any more details of the actual changes that you made?

[baochungit]

Has there been any news/update on this? I'm, using a PIXI view inside my react native app and really need to use text that I need to translate on the PIXI stage. My alternative is to use expo-three but using a 3D renderer for a 2D requirement just adds a huge amount of complexity.

@baochungit did your modifications you mentioned above actually get text to render? Can you share any more details of the actual changes that you made?

Yes, it actually gets text to render but having a list of reserved WebGLRenderingContext requires a lot of memory, it isn't a good approach to go.

I currently not using PIXI.Text to render text, instead, I use PIXI.BitmapText, much easier, no need effort to modify code.

Here is the code to register a bitmap font (in case you are going to use it)

const texture = await PIXI.Texture.fromExpoAsync(image);
const parser = new DOMParser();
const dom = parser.parseFromString(fnt, 'application/xml');
PIXI.extras.BitmapText.registerFont(dom, texture);

Hope it helps.