Назад Вперед

Часть 5. Размещение объектов на сцене. Платформы как отдельный класс.

Вот и добрался до главной игровой сцены. В preloader.js изображения загружены и ждут своего размещения на сцене. Переход со стартовой сцены выполнен. Можно приступать к созданию непосредственно самого PingPong'a.

Начну с изображений попроще. Белой центральной линии. Но как и при размещение текста в стартовой сцене, мне сразу же понадобятся 2 переменные, которые будут хранить в себе размеры игрового экрана. Открываю файл game.js и в функции create() объявляю эти переменные.

Файл game.js:


    ...
    let gameWidth = this.sys.game.config.width;
    let gameHeight = this.sys.game.config.height;
    ...
 

Переменные для хранения размеров экрана

Их буду использовать вместо записи самих чисел координат. Метод размещения спрайтов на игровой сцене выглядит следующим образом: this.add.sprite();. В скобках нужно указать три параметра через запятую. Первые два — координаты по оси X и Y. Последний - имя-ключ, которое указывалось при загрузке изображения. Пропишу это все для центральной линии.

Файл game.js:


    ...
    this.add.sprite(gameWidth/2, gameHeight/2, 'center_line');
    ...
 

Размещение центральной линии

Если сейчас сохранить файл и открыть браузер через локальный сервер, видно, что изображение расположено там где нужно. Только его ширина слишком большая для такой линии.

Размещение центральной линии

Ее можно уменьшить с помощью метода setScale();. Мне нужно к уже записанному методу через точку дописать его с нужными параметрами.

Файл game.js:


    ...
    this.add.sprite(gameWidth/2, gameHeight/2, 'center_line').setScale(0.3, 1);
    ...
 

Все, центральная линия готова. Конечно, если придется менять размер игровой сцены, а именно увеличивать, то изображение не будет полностью на всю высоту расположено. Придется менять его второй параметр на больше единицы в setScale();.

Размещение центральной линии

С центральной линией все понятно. Ее разместил и забыл. Она у меня статическая, никаких движений с ней не будет и физика ей не нужна. Дальше перейду к шару, с которым все будет уже посложнее. Так как это должен быть динамический объект, на который должна действовать некоторая физика (отскок от стен и платформ и движение). Для начала просто размещу его по центру игровой сцены, как и линию. И так же подгоню нужный размер спрайта.

Файл game.js:


    ...
    this.add.sprite(gameWidth/2, gameHeight/2, 'ball').setScale(0.2, 0.2);
    ...
 

И еще сразу же запишу это изображение в отдельную переменную с ключевым словом this., чтобы ее можно было использовать и в других функциях класса игровой сцены.

Файл game.js:


    ...
    this.ball = this.add.sprite(gameWidth/2, gameHeight/2, 'ball').setScale(0.5, 0.5);
    ...
 

Размещение шара на игровой сцене

Как я уже писал, шар должен быть динамическим объектом. Ему нужно будет добавить физические параметры. Для того, чтобы включить методы работы с физикой в проект, нужно вернуться в главный файл игры main.js, где прописаны основные настройки игры и дописать туда еще один параметр:

Файл main.js:


    ...
    physics: {
        default: 'arcade'
    }
    ...
 

Добавление параметров для физики

Таким образом я подключил один из присутствующих во фреймворке типов физического движка — arcade. Теперь мне нужно в самом методе размещения объекта шара дописать после ключевого слова this.physics.add. Итоговый вариант будет выглядеть так:

Файл game.js:


    ...
    this.ball = this.physics.add.sprite(gameWidth/2, gameHeight/2, 'ball').setScale(0.5, 0.5);
    ...
 

Можно сохранить и посмотреть, что шар все еще просто расположен по центру, т.к. в параметрах не прописывал значение гравитации и никакие силы на него не действуют.

Размещение шара на игровой сцене

Для того, чтобы шар стал двигаться к краю, ему нужно задать скорость в определенном направлении. Делается это с помощью метода setVelocityX();. Мне нужно сделать движение для начала именно по оси X. Записываю этот метод для переменной шара.

Файл game.js:


    ...
    this.ball.setVelocityX(-200);
    ...
 

Открыв теперь браузер после сохранения, вижу, что шар начал двигаться к левому краю игровой сцены. Но, когда он достигает этого края, он продолжает движение дальше.

Движение шара по игровой сцене

В будущем я сделаю так, чтобы его позиция обновлялась снова в центр, когда он «вылетает» за игровое поле. Пока добавлю ему отскок от края игровой сцены. Для этого пропишу ему еще один метод:

Файл game.js:


    ...
    this.ball.setCollideWorldBounds(true); 
    ...
 

Теперь шар останавливается при соприкосновении с границами игры.

Остановка шара при столкновении

Для того, чтобы он делал отскок, нужно записать еще одну строчку кода. Этот метод меняет направление движения шара на противоположный по знаку.

Файл game.js:


    ...
    this.ball.setBounce(1); 
    ...
 

Размещение шара

Итак, мой шар двигается от одного края до второго. С него пока будет достаточно. У меня еще не все спрайты размещены на сцене. Перехожу к созданию платформ. Для них я опробую способ, когда объект вынесен в отдельный класс в новом файле. Для этого в ранее созданной папке game_odject создам файл platform.js.

Новый класс для платформ

Как и для сцен, создаю отдельный класс с конструктором, только наследоваться он будет от Phaser.GameObjects.Sprite. И в конце делаю экспорт класса.

Файл platform.js:


    class Platforms extends Phaser.GameObjects.Sprite {
        constructor(scene, x, y, type) {
            super(scene, x, y, type);
        }
    }
        
    export default Platforms;
 

В конструкторе прописываю параметры, которые нужно будет указывать при создании экземпляра класса. Первый это сцена на которой будет расположены объект, дальше идут координаты размещения и параметр type - это будет имя-ключ, указанный при загрузке изображения в preloader.js. Для того, чтобы платформы отображались при создании экземпляра класса, нужно добавить в конструкторе класса еще один метод:

Файл platform.js:


    ...
    scene.add.existing(this);
    ...
 

Создание класса

Теперь открываю файл game.js. Чтобы разместить платформы, создаю новые экземпляры класса Platforms. Кроме того, нужно еще и импортировать сам класс в эту сцену. Укажу это в самом верху кода.

Файл game.js:


    ...
    import Platforms from "../game_object/platform.js"; 
    ...
 

Теперь создаю переменные для игроков, в которых будут храниться экземпляры созданного класса.

Файл game.js:


    ...
    this.playerOne = new Platforms(this, 10, gameHeight/2, 'player_one');
    this.playerTwo = new Platforms(this, 590, gameHeight/2, 'player_two'); 
    ...
 

Создание экземпляров класса

Сохранив код и посмотрев браузер, вижу, что платформы находятся на своих местах — по краям сцены и по центру. Правда, нужно еще подогнать их под нужный размер с помощью метода setScale();.

Файл game.js:


    ...
    this.playerOne = new Platforms(this, 10, gameHeight/2, 'player_one');
    this.playerOne.setScale(0.5, 1); 
    this.playerTwo = new Platforms(this, 590, gameHeight/2, 'player_two');
    this.playerTwo.setScale(0.5, 1);
    ...
 

На данный момент шар пролетает платформу и не происходит отскок. Добавлением физики для платформы займусь уже в следующем материале.

Проверка в браузере

Спасибо за внимание!

Назад Вперед