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

Это 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.

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

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

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

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

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

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

Следующее

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

Метки документа и участники

Метки: 
Внесли вклад в эту страницу: wbamberg, djigach
Обновлялась последний раз: wbamberg,