Доброго времени суток, Хабр! Совсем недавно появилась цель создать аналог игры Agar.io. Чтобы не терять время и не усложнять себе жизнь было решено, что проще и быстрее будет делать игру используя готовый движок для разработки игр.

Мой выбор пал на phaser.js, так как, мне показалось, по нему больше всего есть обучающего материала и он достаточно быстрый так как построен на библиотеке Pixi.js.

В этой части я расскажу как реализовать управление мышью. В конечном итоге мы получим вот такой результат:


Итак, в первую очередь инициализируем все наши переменные:

var width = window.innerWidth; //получаем ширину страницы
var height = window.innerHeight; //получаем высоту страницы

var game = new Phaser.Game(width, height, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); //генерируем canvas на phaser, с высотой и шириной экрана пользователя.
var player; // собственно переменная отвечающая за такой объект как юнит.
var bg; //фон страницы, в нашем случае сетка

Далее идет функция preload() отвечающая за предзагрузку всех графических элементов страницы, у меня это только сетка:

function preload() {
    game.load.image('background', 'img/grid.png');
}

После функция create() в которой мы создаем наше холст со всеми элементами на нем:

function create() {
    game.time.advancedTiming = true; 
    game.time.desiredFps = 60; //собственно fps
    game.time.slowMotion = 2.0; //свойство позволяющее замедлять скорость анимации на сайте, по умолчанию 0, у нас 2, чтобы юнит не слишком резво метался по полю
    bg = game.add.tileSprite(0, 0, 8000, 8000, 'background'); // фон сетка
    game.world.setBounds(0, 0, 8000, 8000);// размеры карты
    game.stage.backgroundColor = "#000"; // цвет фона
    var bmd = generateCircle('red', 20); // рисуем круг самописной функцией диаметром 20px
    player = game.add.sprite(game.world.centerX, game.world.centerY, bmd); //создаем юнита
    game.physics.enable(player, Phaser.Physics.ARCADE); // вызываем физический движок ARCADE(он встроен в phaser.js)
    
    game.camera.follow(player);   //добавляем слежение камеры за игроком
}

Дальше в функции upload() вызываем событие при движении мышью:

function update() {
    game.input.addMoveCallback(function(){
        game.physics.arcade.moveToPointer(player, 400); //при использовании физического движка ARCADE есть стандартная функция слежения юнита за курсором
    });
}

Функция render() нужна для отладки:

function render() {
    game.debug.cameraInfo(game.camera, 32, 32);  //выводим инфу касательно движений камеры
}

Функция рисующая круг:

function generateCircle(color, size){ 
        var bitmapSize = size * 2
        var bmd = this.game.add.bitmapData(bitmapSize, bitmapSize);
        bmd.ctx.fillStyle = color;
        bmd.ctx.beginPath();
        bmd.ctx.arc(size, size, size, 0, Math.PI*2, true);
        bmd.ctx.closePath();
        bmd.ctx.fill();
        return bmd;
    }

На этом все, у нас готово управление как в agar.io. Ещё раз ссылка на конечный результат.

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

Комментарии (7)


  1. iXCray
    28.05.2017 22:55
    +20

    Управление мышью как в Agar.io на Phaser.js


    game.physics.arcade.moveToPointer()
    

    [конец]


  1. comerc
    28.05.2017 23:15
    -1

    Вроде Phaser собирался слезть с Pixi, так и не случилось?


    1. Dmitriy_Rudenko
      01.06.2017 15:30

      Не случилось, пока что.


  1. LoadRunner
    29.05.2017 08:30
    +3

    Что-то на демо-примере движение не как в agar.io. Скорость движения постоянная, при приближении к центру окружности нет замедления, да и смена направления движения происходит не при проходе через центр, а где-то в левой верхней части круга.


    1. Dmitriy_Rudenko
      29.05.2017 14:24
      -2

      player.anchor.setTo(0.5, 0.5); — и смена движения происходит при проходе через центр.

      А про скорость спасибо, опишу как это сделать в следующий раз)


  1. dolphin4ik
    29.05.2017 11:19
    +6

    Статья ни о чём, как и мой комментарий.


  1. vasIvas
    29.05.2017 11:21
    +1

    А разве физика от Phaser работает на сервере?