Доброго времени суток, Хабр! Совсем недавно появилась цель создать аналог игры 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.
ссылка на оригинал статьи https://habrahabr.ru/post/329652/
Добавить комментарий