0

When drawing graphics with Pixi, they appear fine on mobile devices however on desktop the graphics appear very small as the renderer is a different size, currently set to the size of the window.

I realise I need to scale my graphics, however I am unsure what is the best way of achieving this consistently so that they look proportionate across all (or most) screen sizes, whether it be desktop or mobile.

document.body.appendChild(this.app.view);
this.app.renderer.view.style.position = "absolute";
this.app.renderer.view.style.display = "block";
this.app.renderer.autoResize = true;
this.app.renderer.antialias = true;
this.app.renderer.backgroundColor = 0xe6f9ff;
this.app.renderer.resize(window.innerWidth, window.innerHeight);

I then draw a graphic...

this.playerSprite.beginFill(0xff6961);
this.playerSprite.drawRect(0, 0, 24, 24);
this.playerSprite.endFill();
this.app.stage.addChild(this.playerSprite);

I understand I can scale graphics using a scale factor of some kind...

this.playerSprite.scale.x = someScaleFactor;
this.playerSprite.scale.y = someScaleFactor;

However, what is the best scale factor in order to maintain the best proportions for my graphics while scaling them for different devices? Should I select a target size then scale up or down from there? Like so...

this.xScale = window.innerWidth / 411;
this.yScale = window.innerHeight / 731;

1 Answer 1

1

You can set the resolution property on your app to match window.devicePixelRatio

Also note that PIXI.Text has it's own resolution property that is independent of the Application.resolution property.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.