Разработка игр на чистом JavaScript — Анимация спрайтов | Как создавать игры с нуля на JS и HTML ...

В следующих нескольких видео мы сосредоточимся на разработке игр с нуля, используя чистый JavaScript. В каждом уроке мы будем изучать новую технику, создавая полноценный проект. Смело пишите вместе с нами и создавайте свои собственные игры, чтобы попрактиковаться в фронтенд-разработке или продемонстрировать их на своем личном сайте-портфолио, GitHub или CodePen. Мы научимся создавать игры с нуля, сосредоточившись на важных методах разработки игр, таких как обнаружение столкновений, манипулирование спрайтами, оптимизация частоты кадров, добавление звука, ввод данных игроком, ИИ врагов и так далее, используя только JS и HTML-элемент Canvas. Мы уже делали анимацию спрайтов с помощью CSS, теперь мы перейдем на следующий уровень и получим полный контроль над таблицей спрайтов с помощью JavaScript. В этом уроке мы более подробно рассмотрим анимацию персонажей из таблицы спрайтов, используя только чистый JavaScript, а именно метод drawImage canvas. Этот метод является самым важным, что вам нужно понять, если вы хотите анимировать спрайты с помощью JavaScript, и мы подробно его рассмотрим. Затем мы воспроизведем и рандомизируем того же персонажа с помощью классов ES6, чтобы показать вам, как генерировать группы NPC или врагов для изометрических игр с видом сверху. ** Спрайтовая анимация с использованием чистого JavaScript, серия статей по разработке игр | Как создавать игры с нуля с помощью JS и HTML Canvas ** Я всегда начинаю с базового игрового скелета и основной логики, используя только прямоугольники или круги, а затем дополняю это изображениями или анимированными спрайтами. Я покажу вам, как создавать игры и как использовать спрайты и изображения по вашему выбору, чтобы сделать их уникальными. Спрайт-лист — это изображение, которое объединяет несколько кадров анимации в один большой файл. Использование спрайтов имеет одно большое преимущество, особенно для крупных проектов с большим количеством графических ресурсов, то есть, по сути, для всех игр. Размещение всех ваших кадров в одном большом изображении уменьшает количество HTTP-запросов к серверу, каждый вызов сервера добавляет задержку. Вместо того чтобы вызывать сервер 51 раз, чтобы получить все кадры для нашего анимированного персонажа, вы вызываете его всего один раз. Все графические элементы, которые вы видите в этом видео, предназначены исключительно для образовательных целей и были найдены с помощью поиска Google. Я покажу вам, как использовать 4 направленных спрайта, где у нас 4 ряда: вверх, вниз, влево, вправо, а после того, как мы это освоим, мы создадим персонажа с 8 направленными спрайтами, которые также могут двигаться по диагонали: вверх, влево, вверх, вправо, вниз, влево и вниз, вправо. Анимация спрайтов с помощью JavaScript очень проста, если вы понимаете основные правила, и она также дает вам гораздо больше гибкости, чем анимация с помощью ключевых кадров CSS, как мы делали в предыдущем видео. Сейчас мы подробно рассмотрим пошаговую анимацию с помощью спрайт-листов JavaScript. #javascript #html5canvas #frankslaboratory Полезные ссылки: Текстуры пола https://opengameart.org/content/tilea... Спрайт-лист персонажей https://www.spriters-resource.com/pc_... G-G-Games! - Коллекция игровых стилусов от Криса Койера https://codepen.io/collection/Jjkix/?... Игра Planet Defense на JavaScript https://codepen.io/Loopez10/pen/dMaVdQ Финальный код этого проекта https://codepen.io/franksLaboratory/p... Автор спрайт-листов: https://bevouliin.com/ ПРИМЕЧАНИЕ: Если вы найдете спрайт-лист, разделенный на отдельные файлы изображений, вы можете легко объединить их в один файл, используя один из множества бесплатных онлайн-инструментов, таких как: https://www.codeandweb.com/free-sprit... Я подробно объяснил, как это использовать, в своем уроке по CSS-анимации спрайтов:    • Sprite Animation with pure CSS | How to an...   Если вам понравилось это видео, я уверен, вам понравятся и другие мои видео. На этом канале вы найдете уроки по HTML Canvas Animation, уроки по JavaScript, анимированные эффекты и пошаговые руководства по анимации. В каждом видео показано множество примеров конечного эффекта. Я помогу вам освоить современные методы веб-разработки, создавая реальные проекты, которые вы сможете продемонстрировать на своем личном сайте или GitHub. Пишите код вместе со мной и приобретайте навыки, необходимые для получения первой работы в индустрии. Если я смог это сделать, вы тоже сможете. Если вы решите писать код вместе со мной и модифицировать эффекты, поделитесь своим Codepen/JS Fiddle в комментариях, мне интересно посмотреть, что у вас получилось. У меня есть серия уроков по анимации на чистом JavaScript. Никаких плагинов, библиотек или фреймворков. Если вам нужны дополнительные креативные уроки по JavaScript и анимации на HTML Canvas, посмотрите плейлист здесь:    • Image into Interactive Particles - HTML Ca...  .