Home-theater-designers
Phaser - это фреймворк для создания 2D-видеоигр. Он использует HTML5 Canvas для отображения игры и JavaScript для запуска игры. Преимущество использования Phaser по сравнению с обычным JavaScript заключается в том, что он имеет обширную библиотеку, которая завершает большую часть физики видеоигр, позволяя вам сосредоточиться на разработке самой игры.
Phaser сокращает время разработки и упрощает рабочий процесс. Давайте узнаем, как создать простую игру с Phaser.
Зачем разрабатывать с Phaser?
Phaser похож на другие языки визуального программирования в том, что программа основана на циклических обновлениях. Phaser имеет три основных этапа: предварительная загрузка, создание и обновление.
При предварительной загрузке игровые ресурсы загружаются и становятся доступными для игры.
Create инициализирует игру и все начальные игровые элементы. Каждая из этих функций запускается один раз при запуске игры.
С другой стороны, обновление выполняется циклически на протяжении всей игры. Это рабочая лошадка, которая обновляет элементы игры, чтобы сделать ее интерактивной.
Настройте свою систему для разработки игр с помощью Phaser
Несмотря на то, что Phaser работает на HTML и JavaScript, игры на самом деле запускаются на стороне сервера, а не на стороне клиента. Это означает, что вам нужно будет запустить игру на ваш локальный хост . Запуск игры на стороне сервера позволяет вашей игре получать доступ к дополнительным файлам и ресурсам вне программы. Я рекомендую используя XAMPP для настройки локального хоста если у вас еще нет одной настройки.
Приведенный ниже код поможет вам начать работу. Он устанавливает базовую игровую среду.
var config = {
type: Phaser.AUTO,
backgroundColor: 0xCCFFFF,
width: 600,
height: 600,
physics: {
default: 'arcade'
},
scene: {
preload: preload,
create: create
}
};
var gamePiece;
var game = new Phaser.Game(config);
function preload(){
this.load.image('gamePiece', 'img/gamePiece.png');
}
function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
}
Для запуска игре потребуется изображение в формате PNG с именем 'gamePiece', сохраненное в папке 'img' на вашем локальном хосте. Для простоты в этом примере используется оранжевый квадрат 60xgame de60px. Ваша игра должна выглядеть примерно так:
Если вы столкнулись с проблемой, используйте отладчик вашего браузера, чтобы выяснить, что пошло не так. Отсутствие даже одного символа может вызвать хаос, но обычно ваш отладчик улавливает эти мелкие ошибки.
Объяснение кода установки
Пока игра ничего не делает. Но мы уже многое сделали! Давайте посмотрим на код более подробно.
Для запуска игры Phaser вам необходимо импортировать библиотеку Phaser. Мы делаем это в строке 3. В этом примере мы связались с исходным кодом, но вы можете загрузить его на свой локальный хост и сослаться на файл.
перенос приложений Android на SD-карту
Большая часть кода до сих пор настраивает игровую среду, которую переменная config магазины. В нашем примере мы настраиваем фазерную игру с синим (CCFFFF в шестнадцатеричном цветовом коде) фоном размером 600 на 600 пикселей. На данный момент физика игры настроена на Аркадский , но Phaser предлагает другую физику.
Наконец-то, сцена сообщает программе запустить предварительная нагрузка перед запуском игры и Создайте функция, чтобы начать игру. Вся эта информация передается игровому объекту с именем игра .
Связанный: 6 лучших ноутбуков для программирования и кодирования
В следующем разделе кода игра действительно обретает форму. Функция предварительной загрузки - это то место, где вы хотите инициализировать все, что вам нужно для запуска игры. В нашем случае мы предварительно загрузили изображение нашей игровой фишки. Первый параметр .изображение называет наше изображение, а второй сообщает программе, где найти изображение.
Изображение gamePiece было добавлено в игру в функции создания. Строка 29 говорит, что мы добавляем изображение gamePiece как спрайт на 270 пикселей влево и 450 пикселей вниз от верхнего левого угла нашей игровой области.
Заставляем наш игровой элемент двигаться
Пока это сложно назвать игрой. Во-первых, мы не можем двигать игровую фишку. Чтобы иметь возможность что-то изменить в нашей игре, нам нужно будет добавить функцию обновления. Нам также нужно будет настроить сцену в переменной config, чтобы сообщить игре, какую функцию запускать при обновлении игры.
Добавление функции обновления
Новая сцена в конфиге:
scene: {
preload: preload,
create: create,
update: update
}Затем добавьте функцию обновления под функцией создания:
как я могу бесплатно узнать, кому принадлежит номер телефона
function update(){
}Получение ключевых входов
Чтобы позволить игроку управлять игровым элементом с помощью клавиш со стрелками, нам нужно будет добавить переменную, чтобы отслеживать, какие клавиши нажимает игрок. Объявите переменную с именем keyInputs ниже, где мы объявили gamePieces. Объявление его там позволит всем функциям получить доступ к новой переменной.
var gamePiece;
var keyInputs;Переменная keyInput должна быть инициализирована при создании игры в функции create.
function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys();
}Теперь в функции обновления мы можем проверить, нажимает ли игрок клавишу со стрелкой, и, если они нажимают, соответствующим образом переместить наш игровой элемент. В приведенном ниже примере игровая фигура перемещается на 2 пикселя, но вы можете увеличить или уменьшить это число. Перемещение части на 1 пиксель за раз казалось немного медленным.
function update(){
if(keyInputs.left.isDown){
gamePiece.x = gamePiece.x - 2;
}
if(keyInputs.right.isDown){
gamePiece.x = gamePiece.x + 2;
}
if(keyInputs.up.isDown){
gamePiece.y = gamePiece.y - 2;
}
if(keyInputs.down.isDown){
gamePiece.y = gamePiece.y + 2;
}
}В игре появился подвижный персонаж! Но чтобы по-настоящему быть игрой, нам нужна цель. Добавим препятствия. Уклонение от препятствий было основой многих игр в 8-битную эпоху.
Добавление препятствий в игру
В этом примере кода используются два спрайта препятствий, называемые препятствием1 и препятствием 2. Препятствие1 - это синий квадрат, а препятствие2 - зеленый. Каждое изображение необходимо предварительно загрузить, как и спрайт игрового объекта.
function preload(){
this.load.image('gamePiece', 'img/gamePiece.png');
this.load.image('obstacle1', 'img/obstacle1.png');
this.load.image('obstacle2', 'img/obstacle2.png');
}Затем каждый спрайт препятствия нужно будет инициализировать в функции create, как и игровой элемент.
function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys();
obstacle1 = this.physics.add.sprite(200, 0, 'obstacle1');
obstacle2 = this.physics.add.sprite(0, 200, 'obstacle2');
}Заставляя препятствия двигаться
На этот раз, чтобы перемещать фишки, мы не хотим использовать ввод игрока. Вместо этого давайте переместим одну фигуру сверху вниз, а другую - слева направо. Для этого добавьте в функцию обновления следующий код:
obstacle1.y = obstacle1.y + 4;
if(obstacle1.y > 600){
obstacle1.y = 0;
obstacle1.x = Phaser.Math.Between(0, 600);
}
obstacle2.x = obstacle2.x + 4;
if(obstacle2.x > 600){
obstacle2.x = 0;
obstacle2.y = Phaser.Math.Between(0, 600);
}Приведенный выше код будет перемещать препятствие1 вниз по экрану и препятствие2 по игровой области на 4 пикселя за каждый кадр. Как только квадрат выходит за пределы экрана, он перемещается обратно на противоположную сторону в новое случайное место. Это гарантирует, что игрок всегда будет сталкиваться с новым препятствием.
Обнаружение столкновений
Но мы еще не закончили. Вы могли заметить, что наш игрок может проходить сквозь препятствия. Нам нужно заставить игру определять, когда игрок сталкивается с препятствием, и завершать игру.
В библиотеке физики Phaser есть детектор коллайдеров. Все, что нам нужно сделать, это инициализировать его в функции создания.
this.physics.add.collider(gamePiece, obstacle1, function(gamePiece, obstacle1){
gamePiece.destroy();
obstacle.destroy();
obstacle2.destroy();
});
this.physics.add.collider(gamePiece, obstacle2, function(gamePiece, obstacle2){
gamePiece.destroy();
obstacle.destroy();
obstacle2.destroy();
});Метод коллайдера требует трех параметров. Первые два параметра определяют, какие объекты сталкиваются. Итак, выше мы установили два коллайдера. Первый обнаруживает, когда игровой элемент сталкивается с препятствием1, а второй коллайдер ищет столкновения между игровым элементом и препятствием2.
Третий параметр сообщает коллайдеру, что делать после обнаружения столкновения. В этом примере есть функция. В случае столкновения все игровые элементы уничтожаются; это останавливает игру. Теперь игрок завершит игру, если столкнется с препятствием.
Попробуйте разработку игр с Phaser
Есть много разных способов улучшить и сделать эту игру более сложной. Мы создали только одного игрока, но можно добавить второго игрового персонажа и управлять им с помощью элементов управления awsd. Точно так же вы можете поэкспериментировать, добавив больше препятствий и изменив скорость их движения.
что означает смайлик смайлик
Это введение поможет вам начать работу, но еще многое предстоит узнать. В Phaser замечательно то, что большая часть игровой физики сделана за вас. Это отличный простой способ начать разрабатывать 2D-игры. Продолжайте развивать этот код и улучшать свою игру.
Если вы столкнетесь с какими-либо ошибками, отладчик вашего браузера - отличный способ обнаружить проблему.
Делиться Делиться Твитнуть Эл. адрес Как использовать Chrome DevTools для устранения проблем с веб-сайтомУзнайте, как использовать встроенные инструменты разработки браузера Chrome для улучшения ваших веб-сайтов.
Читать далее Похожие темы- Программирование
- JavaScript
- HTML5
- Разработка игр
Дж. Ситон - научный писатель, специализирующийся на рассмотрении сложных тем. Она имеет докторскую степень в Университете Саскачевана; ее исследование было сосредоточено на использовании игрового обучения для повышения вовлеченности студентов в онлайн. Когда она не работает, вы обнаружите, что она читает, играет в видеоигры или работает в саду.
Ещё от Jennifer SeatonПодписывайтесь на нашу новостную рассылку
Подпишитесь на нашу рассылку, чтобы получать технические советы, обзоры, бесплатные электронные книги и эксклюзивные предложения!
Нажмите здесь, чтобы подписаться