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

Давайте начнём с создания 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!

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

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

• « Предыдущая статья
• Следующая статья »