Загрузка ресурсов и их вывод

Это 3-й урок из 16 в руководстве 2D игра на Phaser. Весь исходный код из этого урока вы можете найти на Gamedev-Phaser-Content-Kit/demos/lesson03.html.

В нашей игре будет мяч, который движется по экрану, отскакивает от стен и уничтожает блоки, чтобы заработать очки. Знакомо? В этом уроке мы посмотрим, как добавлять спрайты в наш игровой мир.

Создание мяча

Давайте начнём с создания JavaScript переменной для нашего мячика. Добавьте следующий код между строкой инициализации (var game...) и функцией preload():

var ball;

Примечание: В этом уроке мы для удобства будем использовать глобальные переменные, потому что цель урока - научить пользоваться Phaser для создания игр, а не хорошим практикам разработки.

Загрузка спрайта мяча

Загрузка и вывод изображений в canvas намного проще с использованием Phaser, чем чистым JavaScript. Чтобы загрузить спрайт, мы будем использовать метод load.image() объекта game. Добавьте новую строку кода в функцию preload():

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

Первым параметром, которому мы хотим присвоить имя картинки, является имя, которое будет использоваться в нашем игровом коде - например, в нашем имени переменной ball - поэтому мы должны убедиться, что оно совпадает. Второй параметр - это относительный путь к самой картинке, мы загружаем спрайт для нашего мяча. (Заметьте, что имя файла (asset) не обязано совпадать с именем переменной, которой оно присваивается, однако так проще).

Конечно, чтобы загрузить картинку, она должна находиться в нашей рабочей директории. Скачайте изображение с GitHub и сохраните его в /img директории, которая находится там же, где и файл index.html.

Теперь, чтобы вывести наш мяч на экран, мы используем другой метод add.sprite(). Добавьте следующую строку кода в функцию create():  

function create() {
    ball = game.add.sprite(50, 50, 'ball');
}

Это метод добавит мяч в игру и выведет его на экран. Первые два параметра — это координаты x и y элемента canvas соответственно, и последний параметр — это имя картинки, которое мы добавили раннее. Вот и всё: загрузите index.html, и вы увидите, что картинка уже загружена и выведена в canvas!

Важно: Если вы храните ваш JavaScript код отдельно от HTML и используете файл для этого, например, game.js, тогда вам нужно расположить директорию img и JavaScript файл в одной папке, иначе картинка не загрузится. 

Сравните свой код

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

Следующее

Вывод мяча на экран был достаточно прост, теперь попробуем переместить его.