All geek questions in one place

Is there a way to avoid letterboxing with canvas scaling?

I am working on a small project in Javascript using Pixi.js as a rendering engine. However, I found several methods for scaling the canvas in a full window, which seems to work best for the current version. However, he has a caution as he creates mailboxes on the sides based on orientation.

Is it possible to avoid a mailbox with Pixi at all?

enter image description here

This is the code that I still have, as it relates to scaling:

var application = null; var GAME_WIDTH = 1060; var GAME_HEIGHT = 840; var ratio = 0; var stage = null; application = new PIXI.Application( { width: GAME_WIDTH, height: GAME_HEIGHT, backgroundColor: 0x00b4f7, view: document.getElementById("gwin") }); stage = new PIXI.Container(true); window.addEventListener("resize", rescaleClient); function rescaleClient() { ratio = Math.min(window.innerWidth / GAME_WIDTH, window.innerHeight / GAME_HEIGHT); stage.scale.x = stage.scale.y = ratio; application.renderer.resize(Math.ceil(GAME_WIDTH * ratio), Math.ceil(GAME_HEIGHT * ratio)); }

My goal is to achieve a similar full screen / window effect for Agar.io/Slither.io, however I have not found a satisfactory method that makes it easy. There seem to be examples that use Pixi to accomplish this, but the code is more often covered by the source, and they seem to use external tools like Ionic and Phonegap.

+5
source share
2 answers

I finally found the answer. I was close to the right path, but a few more things were needed.

 application.renderer.view.style.position = "absolute"; application.renderer.view.style.display = "block"; application.renderer.autoResize = true; application.renderer.resize(window.innerWidth, window.innerHeight);

This sets up some additional functions inside, while a minor modification to the resizing script ...

 ratio = Math.min(window.innerWidth / GAME_WIDTH, window.innerHeight / GAME_HEIGHT); stage.scale.x = stage.scale.y = ratio; renderer.resize(window.innerWidth, window.innerHeight);

adjusts everything correctly, so the corresponding Renderer window now fills the screen without compressing the contents.

It was not easy to spot. So many textbooks just leave it in the first half and suggest that this is what people want to do.

+1
source 

 var application; //var GAME_WIDTH = window.screen.width-20; var GAME_WIDTH = window.innerWidth; //var GAME_WIDTH = document.body.clientWidth; var GAME_HEIGHT = window.innerHeight; var ratiox = 0; var ratioy = 0; var container; application = new PIXI.Application( { width: GAME_WIDTH, height: GAME_HEIGHT, backgroundColor: 0x00b4f7, view: document.getElementById("gwin") }); //document.body.appendChild(application.view); container = new PIXI.Container(true); application.stage.addChild(container); window.addEventListener("resize", rescaleClient); function rescaleClient() { //ratiox = Math.min(window.innerWidth / GAME_WIDTH, window.innerHeight / GAME_HEIGHT); application.stage.scale.x = ratiox = window.innerWidth / GAME_WIDTH application.stage.scale.y = ratioy = window.innerHeight / GAME_HEIGHT; application.renderer.resize(Math.ceil(GAME_WIDTH * ratiox), Math.ceil(GAME_HEIGHT * ratioy)); } 
 @viewport{ width:device-width } body { padding :0px; margin:0px } 
 <script src="https://pixijs.download/v4.6.2/pixi.min.js"></script> <canvas id="gwin"></canvas>
0
source

Source: https://habr.com/ru/post/1274602/

More articles:


All Articles