Text object shows as black box for long strings

[CraigBall]

Hardware: Sony Experia Z5 premium. Maximum texture size is 4096, devicePixelRatio is 3, screen resolution is 1920x1080.
PIXI: Version 4.2.2, renderer is WebGL.

 

When we create a PIXI text object that has a long string in it, it turns to a black box. After investigation, it looks like its when the width of the text object is 1366 or over. We think a black box is shown because a texture cannot be created as 1366 is larger than "Maximum Texture Size / devicePixelRatio", although I don't know this for sure.

Here's code to replicate.

   var renderOptions = {
       resolution: window.devicePixelRatio,
       backgroundColor : 0x1099bb
   };

   var stage = new PIXI.Container();
   var renderer = new PIXI.autoDetectRenderer(500, 200, renderOptions);
   document.body.appendChild(renderer.view);

   // This text shows a black box
   var text = new PIXI.Text("");
   while (text.width < 1366) {
       text.text += String.fromCharCode(65+Math.floor(Math.random()*26) );
   }
   stage.addChild(text);

   // This text works
   var text2 = new PIXI.Text(text.text.substr(0, 20));
   text2.position.y = 50;
   stage.addChild(text2);

   renderer.render(stage);

 

We tried to set resolution on the text object but this had no effect as this is overwritten on the render pass (PIXI line 21334):-

 

Text.prototype.renderWebGL = function renderWebGL(renderer) {
    if (this.resolution !== renderer.resolution) {
        this.resolution = renderer.resolution;
        this.dirty = true;
    }

    this.updateText(true);

    _Sprite.prototype.renderWebGL.call(this, renderer);
};

 

Is there a reason why resolution is enforced? If this is the case, then you can never create a text objects with a string that will show across the length of this phone screen. Should I be approaching this a different way?

Thanks,

 

Craig

[themoonrat]

First, personally, I wouldn't use window.devicePixelRatio as the resolution modifier. If the resolution of the game is 960x540, and you use a devicePixelRatio of 3, then you're rendering now at a resolution of 2880x1620, which is pretty insane. By all means increase the resolution based on if the device screen is higher, or the device is more powerful, but I wouldn't link it necessarily to window.devicePixelRatio, and test out the visual quality yourself if you can see a difference. 

Second: I don't like the code you've pasted which forces the resolution of the text to match the resolution of the renderer. I believe you should be able to override it; so I might do a PR to allow that behaviour.

Right now though you can achieve what you want by overriding this behaviour. Add the following code before you create the PIXI renderer. Now any resolution you set after creating the text will be the resolution used for any future updates of text;

Object.assign( PIXI.Text.prototype, {
	renderWebGL: function( renderer ) {
		this.updateText( true );

		PIXI.Sprite.prototype.renderWebGL.call( this, renderer );
	},
	renderCanvas: function( renderer ) {
		this.updateText( true );

		PIXI.Sprite.prototype._renderCanvas.call( this, renderer );
	}
} );

 

[CraigBall]

OK thanks Moonrat, yeah we came to a similar conclusion. Will catch up with you about this when I see you again!

 

Craig

 

[ivan.popelyshev]

I think its also possible to divide text into multiple textures if something like this happens.

[themoonrat]

43 minutes ago, CraigBall said:

OK thanks Moonrat, yeah we came to a similar conclusion. Will catch up with you about this when I see you again!

 

Craig

 

https://www.youtube.com/watch?v=T6fVDAjs9f0

[CraigBall]

3 minutes ago, themoonrat said:

https://www.youtube.com/watch?v=T6fVDAjs9f0

https://www.youtube.com/watch?v=RgKAFK5djSk