Вот мой третий модуль во Flatiron и первый проект с использованием javascript. Моя команда решила сделать что-то забавное, поэтому возникла идея игры. Я пытаюсь сделать спрайты изображений для нашего персонажа.
Так что же такое спрайт изображения? Основанный на школе W3, спрайт изображения представляет собой набор изображений, объединенных в одно изображение. Веб-страница с большим количеством изображений может долго загружаться и генерировать запросы к серверу. Использование спрайтов изображений уменьшит количество запросов к серверу и сэкономит пропускную способность. В нашем случае спрайт изображения представляет собой набор изображений, которые разделяют действия наших персонажей, например, ходьбу в разных направлениях, изображение с каждой стороны нашего персонажа.
Вот пример спрайта изображения Stickman. Размер картинки 288 х 256, исходя из ее структуры, размер каждой картинки 32 х 64. Этот размер важен для создания движущегося персонажа с помощью клавиш со стрелками, иначе он будет обрезан пополам:
Мы можем взять весь спрайт изображения как массив изображений, индекс слева направо, а затем сверху вниз, начиная с 0. Например, если мы хотим создать функцию, чтобы наш персонаж мог ходить влево. Нам нужно создать две функции внутри нашего класса сцены: preload() и create():
Preload() предназначена для загрузки наших спрайтов изображений из нашей папки, а frameWidth и frameHeight — это размеры каждого изображения, которые мы только что вычислили.
Вот пример настройки движения персонажа влево с помощью this.anims.create(). Здесь слово «это» означает текущую сцену. Значения «начало» и «конец» являются индексами спрайтов изображений (или массива, как я понимаю). Phaser понимает, что каждое изображение спрайта — это кадр, поэтому frameRate: — это скорость изменения кадра (или изображения), единицей измерения является кадр в секунду. Чем больше число, тем быстрее цикл. Повторить: означает, сколько раз это повторяется, если вы нажмете определенную кнопку. Повторять: -1 означает, что будет повторяться бесконечно.
Последний шаг — создать оператор условия, чтобы сообщить нашему персонажу, какие функции вызывать для нажатия разных клавиш. Единственное, что нужно здесь отметить, это то, что вектор оси. Он положительный при движении вправо и вниз, отрицательный при движении влево и вверх. Из-за repeat: -1, даже если мы отпустим клавиши со стрелками, наш персонаж все равно пойдет влево. Итак, нам нужно создать функцию остановки, здесь мы назвали ее «поворот», и наше условие выглядит так:
После этого мы можем использовать ту же функцию, чтобы создать все остальные направления для нашего персонажа.
