Анимация игрового спрайта

Я делаю игру и хочу анимировать своего персонажа (атака, ходьба и т. д.), но понятия не имею, как это сделать. Я знаю, что это не цикл for, потому что если это так, анимация будет воспроизводиться мгновенно, и вы не сможете ее увидеть. Я скачал образец листа спрайтов и протестирую его, как только научусь это делать.


javascript animation sprite frames sprite-sheet
person Zik    schedule 09.02.2013    source источник
comment
Покажи, что ты пробовал. Учебное пособие по анимации спрайтов Google javascript   -  person mplungjan    schedule 09.02.2013
comment
В чем вопрос ?   -  person Frederik.L    schedule 09.02.2013

Ответы (4)


arrow_upward
3
arrow_downward

Вы можете получить анимацию спрайтов с помощью функции CSS3 steps(), если она поддерживается. . Или простой подход javascript с использованием таймеров (setTimeout, setInterval).

Вот простые примеры того и другого: http://codepen.io/anon/pen/hCeuG

Однако для части JS лучше, если у вас есть один игровой цикл, в котором вы обновляете свою анимацию, это просто пример. Вы можете найти очень подробное объяснение игрового цикла javascript здесь: http://nokarma.org/2011/02/02/javascript-game-development-the-game-loop/index.html

person ZER0    schedule 09.02.2013
comment
Спасибо за это! На самом деле я не хочу использовать игровые библиотеки, потому что мне нужно сначала их изучить (я чувствую, что это пустая трата времени, пытаясь понять большую часть библиотеки), прежде чем я смогу сделать свою игру. - person Zik; 09.02.2013
comment
Я ожидал этого от вашего вопроса, поэтому я не предоставил никакой игровой библиотеки, кроме примера и объяснения базовой концепции. :) Надеюсь, поможет! Особенно обратите внимание на статью об игровом цикле, она фундаментальна. Даже если вы используете кавы для рисования изображения, подход к анимации в JS из листа спрайтов остается таким же. - person ZER0; 09.02.2013
comment
У меня есть вопрос, где мне поставить setInterval? Мне вставить обновление ()? Это повлияет на интервал? - person Zik; 09.02.2013
comment
Я использовал setInterval, чтобы сделать простой пример использования таблицы спрайтов в JS вместо CSS3. Лучший подход — создать реальный игровой цикл, как описано в статье, на которую я дал ссылку. В этом случае вы будете использовать requestAnimationFrame там, где это возможно, это лучший выбор. И у вас будет более стабильная частота кадров. - person ZER0; 09.02.2013
comment
Я имею в виду, если я нажму кнопку атаки, запустится анимация, куда мне поместить анимацию? - person Zik; 09.02.2013
comment
Если вы посмотрите на статью выше, вы заметите, что у вас есть методы Game.update и Game.draw. Первый содержит логику — например, обновить позицию или состояние спрайта — второй используется для рисования этого на экране. Таким образом, у вас есть бесконечный цикл, который на основе состояния будет рисовать спрайт. Если вы нажмете кнопку атаки, то вам нужно будет обновить эту информацию в Game.update, а в Game.draw вы нарисуете эту анимацию вместо стандартных. - person ZER0; 09.02.2013

arrow_upward
2
arrow_downward

есть доступные игровые библиотеки на основе JS, которые существуют с единственной целью сделать игры проще. вы должны использовать один из них.
Я работал над некоторыми из них, и мне нравится CreateJS с расширенными поддержка звуков и спрайтов. на самом деле вы можете создавать спрайты на лету, используя анимацию

person Parv Sharma    schedule 09.02.2013

arrow_upward
0
arrow_downward

Вы можете использовать бесплатные спрайты или попробовать сделать это с помощью Photoshop (если вы профессионал!) или Sprite Maker (для базовых пользователей!)

для 3D-моделей вы можете использовать

person Community    schedule 09.02.2013

arrow_upward
0
arrow_downward

Я тоже был в такой ситуации.

CreateJS мне очень помог.

Эта библиотека имеет очень хорошую документацию по работе со спрайтами и растровой анимацией.

В EaselJS есть примеры с исходным кодом, чтобы показать, как использовать лист спрайтов в вашей игре.

Другой блог, который был полезен для манипулирования листами спрайтов, был Дэвид Руссет: HTML5 Gaming: анимация спрайтов в Canvas с помощью EaselJS

Я думаю, что это может быть полезно для вас

person Akshay Joshi    schedule 14.03.2013