Анимация спрайтов в JavaScript
Franks laboratory
0:00 / 0:00
Анимация спрайтов в JavaScript
222 777 просмотров · 5 л. назад
Franks laboratory
88,2 тыс. подписчиков
222 777 просмотров · 5 л. назад
Создайте анимированную игру от начала до конца (включая полный исходный код и множество бесплатных графических ресурсов): https://www.udemy.com/course/javascri...
Хотите создавать качественные, красивые игры на JavaScript и оживлять своих персонажей? Позвольте мне показать вам 2 моих любимых метода, которые вы можете использовать для полного контроля над любым набором спрайтов. Это продвинутая анимация спрайтов на чистом JavaScript, объясненная для начинающих! Приятного просмотра :)
ПОЛНЫЙ ПЛЕЙЛИСТ СЕРИИ: (3 игры и 6 небольших проектов для изучения 2D-разработки игр) • JavaScript Game Development Masterclass 2022
⭐️СОДЕРЖАНИЕ⭐️
00:00 Введение в курс и базовая настройка HTML/CSS
03:15 Как анимировать на HTML-холсте
08:28 Объяснение метода рисования изображений
13:18 Как перемещаться внутри спрайт-листа
17:56 Простой метод анимации спрайтов
23:31 Расширенный метод анимации спрайтов
43:07 Практический проект по анимации спрайтов
🎮 МАСТЕР-КЛАСС ПО РАЗРАБОТКЕ ИГР С ИСПОЛЬЗОВАНИЕМ JavaScript, Основы для начинающих: 🎮
🐶 Проект 1: ** это видео **
🐶 Проект 2: Параллаксные фоны • Parallax in JavaScript Games
🐶 Проект 3: Перемещение NPC • How To Code Flying Creatures with JavaScript
🐶 Проект 4: Столкновение прямоугольников • Collision Detection Between Rectangles in ...
🐶 Проект 5: Столкновение кругов • Collision Detection Between Circles in Jav...
🐶 Проект 6: Анимация на основе событий • Audio Visual Effects in JavaScript Games
🐶 Проект 7: Игра Raven • JavaScript Shooter Game Tutorial
🐶 Проект 8: Типы врагов • How To Code Creatures For JavaScript Games
🐶 Проект 9: Управление состоянием • State Management in Games
🐶 Проект 10: Простая игра в жанре сайд-скроллер • JavaScript Side Scroller Game Tutorial
Полный плейлист: • JavaScript Game Development Masterclass 2022
Добавление анимированных спрайт-листов в ваши JavaScript-игры — один из самых быстрых и эффективных способов вывести ваши игры на новый уровень и придать им профессиональный вид и отполированность. Игры со спрайтами отлично вовлекают аудиторию в создаваемую вами фантазию, и их создание доставляет массу удовольствия.
Сегодня я покажу вам все, что нужно знать об анимации спрайтов с помощью чистого JavaScript, и к концу этого курса вы сможете полностью контролировать любой выбранный вами спрайт-лист. Сначала я покажу самый простой и понятный для начинающих метод анимации спрайтов, а затем мы углубимся в тему и научимся правильно настраивать различные анимации игроков, чтобы мы могли переключаться между ними, изменяя всего одну переменную, и использовать это в нашей игре.
Также сегодня я раздаю бесплатные премиум-спрайты, чтобы вы могли программировать вместе со мной и получить точно такой же результат. Давайте изучать JavaScript, создавая игры.
❤ Ссылки по теме ❤
Спрайт-лист Shadow Dog: http://frankslaboratory.co.uk/downloa...
Если ссылка не работает, оставьте комментарий или напишите мне в Твиттере.
Резервная ссылка: https://ibb.co/QrB1Kyt
(*** Вы можете использовать этот спрайт-лист в учебных целях. Для коммерческих проектов вы можете приобрести его напрямую у художника. Чтобы увидеть полный набор доступных графических ресурсов для разработки игр, посетите https://bevouliin.com/ ***)
🎮 Больше о разработке игр с использованием чистого JavaScript и HTML canvas:
• Game Development with Vanilla JavaScript
Если вы новичок, вы все равно можете создавать красивые анимации. Вот подборка моих проектов для начинающих, где я работаю медленнее и уделяю время объяснениям. Вот ссылки:
• Front End Web Development Projects for Beg...
Если вы чувствуете себя увереннее в своих навыках программирования, посмотрите еще несколько сложных анимаций с использованием чистого JavaScript и HTML5 canvas:
• Creative Coding with Vanilla JavaScript an...
👍 Вы можете написать мне в TWITTER / code_laboratory
👍 Посмотрите мой исходный код на CODEPEN https://codepen.io/franksLaboratory
Музыка: (Аудиобиблиотека YouTube) Vacay In Fiji Riddim - Konrad OldMoney
Описание этого видео может содержать партнерские ссылки, что означает, что если вы купите один из рекомендованных мной продуктов, я получу небольшую комиссию без каких-либо дополнительных затрат. Вы помогаете поддерживать канал и позволяете мне продолжать снимать подобные видео. Спасибо за поддержку!
#frankslaboratory