При рисовании графики с помощью Pixi они выглядят нормально на мобильных устройствах, однако на настольном компьютере графика выглядит очень маленькой, поскольку средство визуализации имеет другой размер, в настоящее время настроенный на размер окна.
Я понимаю, что мне нужнооднако я не уверен, каков наилучший способ добиться этого последовательно, чтобы они выглядели пропорционально для всех (или большинства) размеров экрана, будь то настольный или мобильный.
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 тогданарисовать графику ...
this.playerSprite.beginFill(0xff6961);
this.playerSprite.drawRect(0, 0, 24, 24);
this.playerSprite.endFill();
this.app.stage.addChild(this.playerSprite);
Я понимаю, что могу масштабировать графику, используя какой-то масштабный коэффициент ...
this.playerSprite.scale.x = someScaleFactor;
this.playerSprite.scale.y = someScaleFactor;
Однако, какой из коэффициентов лучшесохранить лучшие пропорции для моей графики при масштабировании их для разных устройств?Должен ли я выбрать целевой размер, а затем увеличить или уменьшить его?Вот так ...
this.xScale = window.innerWidth / 411;
this.yScale = window.innerHeight / 731;