Назад Вперед

Изменение курсора при наведении на объект.

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

Первый пример — изменение изображения курсора при наведении на картинку, при чем сама картинка меняет цвет. Когда курсор находится не на изображении, он имеет стандартную иконку.

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

Готовый пример и полный код шаблона можно посмотреть в конце материала.

Для работы с шаблонами буду создавать простую структуру проекта, которую описывал в разделе Инструментарий в этом материале. Разбивать проект на отдельные сцены не нужно, весь код будет записан в одном файле с подключением игровых функций preload(), create(), update() сразу в игровых настройках.

Файл main.js

Html-документ также стандартный, добавлен элемент с id для размещения игры и в конце подключен фреймворк и скрипт. Подключен файл style.css, где прописаны стили для выравнивания игрового контейнера по центру экрана. Созданы папки для хранения загружаемых ресурсов и скриптов.

Файл index.html Файл style.css

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

Теперь по поводу необходимых ресурсов для шаблона. Мне понадобиться одно изображение, которое будет главный игровым объектом для взаимодействия с курсором. В графическом редакторе GIMP2 создам изображение, которое представляет собой кнопку с заливкой и текстом START. И экспортирую его в свой проект в папку assets.

Создание кнопки

Еще необходимо скачать 2 иконки для курсора для отображения по умолчанию и при наведении на кнопку. Я скачал два файла с сайта, который предоставляет бесплатную лицензию на скачанные материалы. Файлы имеют разрешение .cur. Их также закидываю в папку assets.

Иконка курсора

Все ресурсы готовы. Можно приступать к работе над примером. Первым делом загружаю изображение в функции preload().

Файл main.js:


    ...
    function preload() {
        this.load.image('button', '../assets/btn.png');
    }    
    ...
 

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

Файл main.js:


    ...
    function preload() {
        this.load.image('button', '../assets/btn.png');
    }    
    function create() {
        var btnImage = this.add.sprite(300, 200, 'button');
    }
    ...
 

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

Сейчас курсор имеет стандартную иконку, нужно изменить на скачанную, которая будет использоваться по умолчанию. Перед строчкой с размещением изображения записываю метод, который меняет используемую по умолчанию иконку курсора.

Файл main.js:


    ...
    function preload() {
        this.load.image('button', '../assets/btn.png');
    }    
    function create() {

        this.input.setDefaultCursor('url(assets/arrow.cur), pointer');

        var btnImage = this.add.sprite(300, 200, 'button');
    }
    ...
 

Следующим шагом будет добавление к переменной с изображением метода setInteractive(), который позволяет производить взаимодействие с данным объектом. В параметрах нужно будет указать значение новой иконки, которая будет появляться при наведении на объект.

Файл main.js:


    ...
    function preload() {
        this.load.image('button', '../assets/btn.png');
    }    
    function create() {

        this.input.setDefaultCursor('url(assets/arrow.cur), pointer');

        var btnImage = this.add.sprite(300, 200, 'button');
        btnImage.setInteractive({ cursor: 'url(assets/button.cur), pointer' });
    }
    ...
 

Сейчас курсор меняет иконку, когда наводишь на изображение. Но само изображение ни как не реагирует. Нужно будет это изменить.

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

Файл main.js:


    ...
    function preload() {
        this.load.image('button', '../assets/btn.png');
    }    
    function create() {

        this.input.setDefaultCursor('url(assets/arrow.cur), pointer');

        var btnImage = this.add.sprite(300, 200, 'button');
        btnImage.setInteractive({ cursor: 'url(assets/button.cur), pointer' });

        btnImage.on('pointerover', function (event) {

        });
    }
    ...
 

Второй метод — когда курсор покидает зону изображения. Если его не записать, то изображение так и останется измененным, когда курс будет находиться не на нем.

Файл main.js:


    ...
    function preload() {
        this.load.image('button', '../assets/btn.png');
    }    
    function create() {

        this.input.setDefaultCursor('url(assets/arrow.cur), pointer');

        var btnImage = this.add.sprite(300, 200, 'button');
        btnImage.setInteractive({ cursor: 'url(assets/button.cur), pointer' });

        btnImage.on('pointerover', function (event) {

        });

        btnImage.on('pointerout', function (event) {

        });
    }
    ...
 

Осталось прописать само изменение. Я буду менять цвет фона изображения. В первом слушателе записываю метод setTint() с указанным в скобках цветом. Во втором слушателе нужно очистить это изменение с помощью метода clearTint().

Файл main.js:


    ...
    function preload() {
        this.load.image('button', '../assets/btn.png');
    }    
    function create() {

        this.input.setDefaultCursor('url(assets/arrow.cur), pointer');

        var btnImage = this.add.sprite(300, 200, 'button');
        btnImage.setInteractive({ cursor: 'url(assets/button.cur), pointer' });

        btnImage.on('pointerover', function (event) {
            this.setTint(0xffff00);
        });

        btnImage.on('pointerout', function (event) {
            this.clearTint();
        });
    }
    ...
 

Сохраняю и проверяю в браузере. Код работает правильно. Получилась интерактивная кнопка, которая меняет цвет при наведении курсора на нее. При чем сам курсор тоже меняется.

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

Полный код файла 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('button', '../assets/btn.png');
    }    
    function create() {

        this.input.setDefaultCursor('url(assets/arrow.cur), pointer');

        var btnImage = this.add.sprite(300, 200, 'button');
        btnImage.setInteractive({ cursor: 'url(assets/button.cur), pointer' });

        btnImage.on('pointerover', function (event) {
            this.setTint(0xffff00);
        });

        btnImage.on('pointerout', function (event) {
            this.clearTint();
        });
    }
 

Результат:

Назад Вперед