Назад Вперед

Перетаскивание объекта по сцене.

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

Создаю стандартную структуру проекта (использовал в прошлом материале данного раздела и описывал создание в разделе Инструментарий) и открываю файл main.js, где прописаны игровые настройки и функции preload, create и update.

Структура проекта

Для примера понадобиться одно изображение. Возьму любое уже из имеющихся. Пусть будет синий квадрат, который делал для мини-игры Змейка. Закидываю его в папку assets.

Изображение для проекта

Загружаю изображение в функции preload().

Файл main.js:


    ...
    this.load.image('imgTest', 'assets/snake.png');    
    ...
 

Размещаю изображение на сцене в функции create() и сразу же сохраняю его в отдельную переменную.

Файл main.js:


    ...
    let imgTest = this.add.sprite(300, 200, 'imgTest');    
    ...
 

Добавление изображения

Сразу же сохраняю и проверяю на локальном сервере в браузере. Изображение размещено по центру игровой сцены.

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

Использую уже знакомый метод setInteractive() для переменной с изображением, чтобы можно было с ним взаимодействовать.

Файл main.js:


    ...
    let imgTest = this.add.sprite(300, 200, 'imgTest');
    imgTest.setInteractive();   
    ...
 

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

Файл main.js:


    ...
    imgTest.on('pointerover', function () {
        this.setTint(0x00ff00);
    }); 
        
    imgTest.on('pointerout', function () {
        this.clearTint();
    });   
    ...
 

Изменение изображения

Чтобы была возможность перетаскивать объект, для переменной с изображением нужно прописать еще один метод. Записываю в следующей строке. Параметром служит объект, с которым нужно взаимодействовать. Если бы изображений было несколько, то всех их можно было бы записать в скобках в виде массива или добавить их сначала в группу и записать переменную с этой группой.

Файл main.js:


    ...
    this.input.setDraggable(imgTest);    
    ...
 

Теперь непосредственно сами обработчики события. Их будет несколько. Первый 'dragstart' — начало перетаскивания, т.е. когда нажимается ПКМ на объект. В функции для объекта опять же записываю изменение цвета фона для визуальной наглядности.

Файл main.js:


    ...
    this.input.on('dragstart', function (pointer, gameObject) {
        gameObject.setTint(0xff0000);
    });   
    ...
 

Второй слушатель 'drag' — сам процесс перемещения курсора по игровой сцене. При этом позиции объекта изменяется и получает значение позиции курсора.

Файл main.js:


    ...
    this.input.on('drag', function (pointer, gameObject, dragX, dragY) {
        gameObject.x = dragX;
        gameObject.y = dragY;
    });
    ...
 

И последний 'dragend' — когда курсор отпущен. Объект больше не меняет свою позицию и фон не меняется.

Файл main.js:


    ...
    this.input.on('dragend', function (pointer, gameObject) {
        gameObject.clearTint();
    });
    ...
 

Перетаскивание объекта

Сохраняю и проверяю в браузере. Процесс перетаскивания изображения по сцене работает исправно.

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

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

Полный код файла main.js.

Файл main.js:


    var config = {
        type: Phaser.AUTO,
        parent: 'container',
        width: 600,
        height: 400,
        scene: {
            preload: preload,
            create: create
        }
    };
    
    var game = new Phaser.Game(config); 
    
    function preload () {
        this.load.image('imgTest', 'assets/snake.png');
    }
    
    function create () {

        let imgTest = this.add.sprite(300, 200, 'imgTest');
        imgTest.setInteractive();   
        
        imgTest.on('pointerover', function () {
            this.setTint(0x00ff00);
        });
           
        imgTest.on('pointerout', function () {
            this.clearTint();
        });
    
        this.input.setDraggable(imgTest);
    
        this.input.on('dragstart', function (pointer, gameObject) {
            gameObject.setTint(0xff0000);
        });
        
        this.input.on('drag', function (pointer, gameObject, dragX, dragY) {
            gameObject.x = dragX;
            gameObject.y = dragY;
        });
        
        this.input.on('dragend', function (pointer, gameObject) {
            gameObject.clearTint();
        });
    }
 

Результат:

Назад Вперед