Phaser.js — как менять размеры игры, чтобы на разных экранах она всегда занимала весь экран?

Question

[GreatRash]

Что-то не могу нагуглить ничего путного на эту тему. Есть вот такой код:

game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
game.scale.pageAlignHorisontally = true;
game.scale.pageAlignVertically = true;

но он, по сути, просто выравнивает канвас по центру экрана, оставляя поля справа/слева (или сверху/снизу, в зависимости от экрана). А как от этих полей избавиться непонятно.

Answer 1

[GreatRash]

Короче, раз уж мне никто не отвечает... После 3-х дней поисков я набрёл на решение на StackOverflow:

(function() {
  var targetWidth = 640, // идеальная ширина приложения (под неё рисуем спрайты и т.п.)
        targetHeight = 960, // 640х960 - это iPhone 4, под меньшее разрешение наверно нет смысла делать
            
        deviceRatio = window.innerWidth / window.innerHeight,
        newRatio = (targetHeight / targetWidth) * deviceRatio,
            
        newWidth = targetWidth * newRatio,
        newHeight = targetHeight,
            
        game = new Phaser.Game(newWidth, newHeight, Phaser.CANVAS, ''); // последний аргумент - родитель (если пусто, значит canvas создастся в body)
            
        game.state.add('Boot', Boot);
        game.state.add('Preload', Preload);
        game.state.add('Game', Game);
            
        game.state.start('Boot');
})();

// ... Далее внутри Boot.js пишем

Boot.protoytpe = {
  create: function() {
    this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
    this.scale.pageAlignHorisontally = true; // можно не выравнивать, но я остаил
    this.scale.pageAlignVertically = true;
    this.scale.forcePortrait = true;
  }
};

Comments

[Игорь Самохин]

Добрый день,

подскажите, phaser.js стоит того? не совсем понимаю насколько он облегчает разработку html5 игр на canvas и webgl? Это аналог three.js?

[GreatRash]

Игорь Самохин, Three.js - это фреймворк для работы с 3D-графикой (WebGL) в браузере. К игровым движкам он не имеет отношения. Это конечно не означает, что при помощи Three.js нельзя написать игру, просто придётся очень много кода писать руками (или подключать сторонние библиотеки, например для определения коллизий между объектами или физики в целом).

Phaser.js - это уже полноценный игровой движок. Т.е. там встроена работа с физикой, управление ресурсами (звуки, шрифты, текстуры, сцены и т.п.), игровой цикл и прочее. Но Phaser.js поддерживает только 2D.

Если вам необходимо сделать именно 3D-игру под Web, то вам лучше использовать Unity, Godot, PlayCanvas и т.п.