О чем этот пример
В Phaser камера — это не просто окно в мир игры, а мощный инструмент для создания сложных визуальных эффектов, интерфейсов или систем наблюдения. Стандартная основная камера (`this.cameras.main`) часто достаточна, но что, если вам нужно показать карту мини-игры, вид от другого персонажа или статичный элемент HUD? В этой статье мы разберем пример создания и тонкой настройки дополнительной камеры. Вы научитесь управлять ее положением, размером, масштабом и другими параметрами в реальном времени, что открывает двери для реализации сплит-скрина, камер слежения и динамических переходов.
Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.
Живой запуск
Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.
Исходный код
class Example extends Phaser.Scene
{
constructor ()
{
super();
}
preload ()
{
this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.image('robot', 'assets/pics/robota-uxo-by-made-of-bomb.jpg');
}
create ()
{
const gui = new dat.GUI();
// Our image is 1920 x 989.
// Our game canvas is 800 x 600.
this.add.image(0, 0, 'robot').setOrigin(0);
// camera1 = this.cameras.main;
const camera1 = this.cameras.add(0, 0, 400, 300).setZoom(0.5);
gui.addFolder('Camera 1');
gui.add(camera1, 'x');
gui.add(camera1, 'y');
gui.add(camera1, 'width');
gui.add(camera1, 'height');
gui.add(camera1, 'centerToSize');
gui.add(camera1, 'scrollX', -1920, 1920);
gui.add(camera1, 'scrollY', -989, 989);
gui.add(camera1, 'zoom', 0.1, 2).step(0.1).listen(); // Zoom values are connected.
gui.add(camera1, 'zoomX', 0.1, 2).step(0.1).listen();
gui.add(camera1, 'zoomY', 0.1, 2).step(0.1).listen();
gui.add(camera1, 'rotation').step(0.01);
gui.addColor(camera1, 'backgroundColor').onChange(function (value) {
value.a = 255;
camera1.setBackgroundColor(value);
});
}
}
const config = {
type: Phaser.AUTO,
parent: 'phaser-example',
width: 800,
height: 600,
scene: Example
};
const game = new Phaser.Game(config);
Создание дополнительной камеры
Основная камера создается автоматически, но Phaser позволяет добавлять сколько угодно дополнительных камер через менеджер this.cameras. Это ключевой метод для расширения визуальных возможностей вашей игры.
Метод this.cameras.add() принимает четыре основных параметра: координаты X и Y верхнего левого угла камеры на холсте игры, а также ее ширину и высоту. Это определяет область экрана, которую будет занимать вид из этой камеры.
const camera1 = this.cameras.add(0, 0, 400, 300).setZoom(0.5);В примере мы создаем камеру размером 400x300 пикселей в левом верхнем углу игрового холста (координаты 0, 0). Сразу после создания к ней применяется метод .setZoom(0.5), который уменьшает масштаб отображения игрового мира в два раза. Таким образом, в эту область поместится вдвое большая область мира.
Управление областью просмотра (Viewport) и скроллингом
Камера в Phaser — это по сути прямоугольник (Phaser.Geom.Rectangle), который можно перемещать по миру игры. Его свойства `x,y,widthиheight` определяют положение и размер этого прямоугольника на *холсте игры* (область viewport).
Свойства scrollX и scrollY отвечают за то, какую часть *игрового мира* показывает эта камера. Изменяя их, вы перемещаете камеру по миру, оставляя ее viewport на экране неподвижным.
gui.add(camera1, 'x');
gui.add(camera1, 'y');
gui.add(camera1, 'width');
gui.add(camera1, 'height');
gui.add(camera1, 'scrollX', -1920, 1920);
gui.add(camera1, 'scrollY', -989, 989);В примере через GUI можно менять и положение камеры на экране, и ее скроллинг по миру. Обратите внимание на ограничения для scrollX и scrollY (-1920, 1920 и -989, 989 соответственно) — они заданы, чтобы скроллинг не уходил далеко за пределы загруженного изображения размером 1920x989.
Тонкая настройка масштаба и вращения
Phaser предоставляет гибкий контроль над масштабированием. Вы можете задать общий зум (zoom) или независимо менять масштаб по осям X и Y (zoomX, zoomY). Это полезно для создания эффектов растяжения или сжатия.
Свойство rotation позволяет поворачивать вид камеры. Поворот происходит вокруг центра ее viewport.
gui.add(camera1, 'zoom', 0.1, 2).step(0.1).listen();
gui.add(camera1, 'zoomX', 0.1, 2).step(0.1).listen();
gui.add(camera1, 'zoomY', 0.1, 2).step(0.1).listen();
gui.add(camera1, 'rotation').step(0.01);Модификатор .listen() в настройках GUI заставляет поля ввода обновляться при изменении значения извне (например, если зум меняется в коде). Модификатор .step(0.1) задает шаг изменения значения в интерфейсе.
Цвет фона и полезные методы
Область viewport камеры, которая не заполнена игровыми объектами, может иметь собственный фоновый цвет. По умолчанию он прозрачный, что позволяет камерам накладываться друг на друга.
gui.addColor(camera1, 'backgroundColor').onChange(function (value) {
value.a = 255;
camera1.setBackgroundColor(value);
});В примере используется специальный контроллер цвета из библиотеки dat.GUI. В колбэке onChange мы вручную устанавливаем альфа-канал (`a) в 255 (непрозрачный), а затем применяем цвет через методcamera1.setBackgroundColor(value)`.
Также в примере используется метод centerToSize. Это метод-свойство (getter/setter), который центрирует камеру относительно ее собственных размеров (width и height). Его вызов через GUI пересчитает внутренние координаты камеры.
Что попробовать дальше
Дополнительные камеры в Phaser — это мощный инструмент, выходящий далеко за рамки простого отображения мира. Вы можете создавать несколько независимых видов, реализовывать сложные эффекты панорамирования или статичные элементы интерфейса, которые не зависят от скроллинга основной камеры.
Для экспериментов попробуйте:
1. Создать вторую камеру (camera2) и разместить ее, например, в правом нижнем углу, реализовав простой сплит-скрин.
2. Привязать свойства scrollX и scrollY камеры к положению игрового спрайта, создав классическую камеру следования.
3. Использовать вращение (rotation) и асимметричный зум (zoomX, zoomY) для создания драматичных эффектов при получении урона или использовании способности.