Hi,
i’m using Phaser 3.53.1 version:
<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.53.1/phaser-arcade-physics.min.js"></script>
I have a scale problem:
-
when I decrease the size of the browser window, the canvas shrinks perfectly
-
but when I enlarge it using the restore button (the square at the top right corner of the browser), the canvas does not return to its normal size.
-
strangely, when I resize by hand the browser window, slowly, I mean step by step, the canvas returns to its original size.
Here is my code:
The phaser configuration
// Configuration constants
const tileWidth = 128;
const nbTileGameWidth = 18;
const nbTileGameHeight = 7;
const gameWidth = nbTileGameWidth * tileWidth;
const gameHeight = nbTileGameHeight * tileWidth;
var config = {
type: Phaser.AUTO,
scale: {
mode: Phaser.Scale.FIT,
parent: 'phaser-game', // Attached DOM element
width: gameWidth,
height: gameHeight
},
physics: {
default: 'arcade',
arcade: {
gravity: { y: 300 },
debug: false
}
},
};
game = new Phaser.Game(config);
The HTML code:
<div class="container-fluid" style="height: 100vh">
<div class="row h-100">
<div class="col-4 bg-dark h-100 border-end border-2 d-flex flex-column" >
Something
</div>
<div class="col-8 h-100 d-flex flex-column">
<div class="row border-bottom border-2">
<div class="col p-0 m-0 bg-dark">
<div id="phaser-game"></div>
</div>
</div>
<div class="row border-bottom border-2 bg-dark" style="height: 9%">
<div class="col h-100 m-0 p-0">
<div class="row h-100 m-0 p-0">
<div class="col-2 h-100 m-0 p-0 d-flex align-items-center">
<div class="d-grid gap-2 col m-0 p-1 ">
<button id="runButton" onclick="runIt()" class="btn btn-success"
type="button" disabled>Executer</button>
</div>
</div>
<div class="col-2 h-100 m-0 p-0 d-flex align-items-center">
<div class="d-grid gap-2 col m-0 p-1 ">
<button id="stopButton" onclick="stopIt()" class="btn btn-primary"
type="button" disabled>Arrêter</button>
</div>
</div>
<div class="col-8 h-100 m-0 p-0 overflow-auto " id="alertContainer"></div>
</div>
</div>
</div>
<div class="row overflow-auto bg-dark flex-grow-1" >
<div class="col m-0 p-0">
<div class="fs-6" id="codemirror-editor"></div>
</div>
</div>
</div>
</div>
</div>
What do you think? Does anyone have any ideas?
Thanks in advance for your help!
Matthieu B