Анимация изображения на JavaScript. Анимационный HTML5 Canvas. Основы создания игр на JavaScript




Сегодня в уроке по JavaScript рассмотрим анимацию изображения, покадровую анимацию в JavaScript при помощи игрового цикла. Дальше в описании идут ссылки и всякая фигня =)

Официальный сайт проекта: http://skanersoft.ru
Движок j2Ds, используемый в видео: http://j2ds.ru
Канал на YouTube: https://youtube.com/SkanerSoft?sub_confirmation=1
Группа ВК: http://vk.com/skaner.soft
Автор идеи: http://vk.com/skaner.game

Если вам понравилось видео – подписывайтесь на канал, ставьте лайки.
Если заинтересовались – оставьте ваш комментарий, чтобы автор знал, в каком направлении развивать канал в дальнейшем!
Так же подписывайтесь на группу в ВКонтакте, ссылка выше, там проводим голосования по поводу последующих видео.

j2Ds, JavaScript, основы создания игр на javascript, как создать игру, как сделать игру,
создать свою игру, как создать игру на компьютер, как создать игру на андроид, game maker,
создание игр, создать инди игру, как создать инди игру, основы создания игр

Original source


25 responses to “Анимация изображения на JavaScript. Анимационный HTML5 Canvas. Основы создания игр на JavaScript”

  1. У вас очень хорошо получается отделить что-то в функции, передевать туда параметры, потом его применить, потом изменить и так в цыкле. Получается движение. Как научится строить так код? Получается легко что-то добавить новое. У меня же часто получается так что мне все приходится переделать. Это и есть самое главное в программировании, правильно строить, разделять и у меня это не получается. Этому можно научится?

  2. привет, спасибо за видео, как быть, когда нужно подгрузить множество картинок, вешать onload на каждую из них и в итоге понимать что загрузились все или есть способ получше?

  3. Видео отличное, лайк поставил. Но есть одно "но". Смог хоть как-то воспринимать информацию только на скорости видео 1.5. На обычной скорости я чуть не уснул.

  4. с параметрами какая то ошибка. у меня получилось наоборот, второй и третий отвечают за координаты на картинке а шестой и седьмой за расположение картинки на экране. или может эта последовательность меняется в зависимости от количества параметров?

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

  6. Музыка для урока заходит отлично, медитативная. Видео прямо от души делаешь, приятно смотреть и слушать, спасибо. )

  7. спасибо. все получилось! как-то можно отразить рисунок, что бы например с одного спрайта фигурки дрались друг с другом. я пробовал img.style.transform=scale(-1, 1), но ругается на отсутствие функции scale.
    вот скрин того что у меня вышло, но использовал 2-й файл – зеркалку. http://cs630119.vk.me/v630119111/369d6/1WnFAS32PNI.jpg
    и еще вопросик) сделал кривую с точками через переменные , меняемые с клавы, но почему-то не очищается холст.
    буду благодарен за совет
    var a=0;
    var x1=188, y1=30, x2=140, y2=10, x3=188, y3=10, x4=188, y4=170;
    var body=document.getElementById('body');
    body.onkeyup=function(e) { a = e.keyCode; ; console.log(e.keyCode); };
    setInterval(function(){
    if (a==65) {x1+=10}; if (a==90) {x1-=10}; if (a==83) {y1+=10}; if (a==88) {y1-=10};
    if (a==68) {x2+=10}; if (a==67) {x2-=10}; if (a==70) {y2+=10}; if (a==86) {y2-=10};
    if (a==71) {x3+=10}; if (a==66) {x3-=10}; if (a==72) {y3+=10}; if (a==78) {y3-=10};
    if (a==74) {x2+=10}; if (a==77) {x2-=10}; if (a==75) {y2+=10}; if (a==188) {y2-=10};
    a=0;
    context2.clearRect(0,0,300,300);
    context2.moveTo(x1, y1);
    context2.bezierCurveTo(x2, y2, x3,y3, x4, y4);
    context2.lineWidth = 3;
    context2.strokeStyle = "black"; // line color
    context2.stroke();
    } , 500);

  8. Будь добр, делай музыку потише и поменьше воды в видео. А так, молодец, хорошо объясняешь. Лайк))

Leave a Reply