Сегодня в уроке по 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”
Продолжай Skaner! Ты хорош
Будет клево узнать про программное удаление фона)))
Плиз в описание файл кидай
Да давай про фон!!!
У вас очень хорошо получается отделить что-то в функции, передевать туда параметры, потом его применить, потом изменить и так в цыкле. Получается движение. Как научится строить так код? Получается легко что-то добавить новое. У меня же часто получается так что мне все приходится переделать. Это и есть самое главное в программировании, правильно строить, разделять и у меня это не получается. Этому можно научится?
привет, спасибо за видео, как быть, когда нужно подгрузить множество картинок, вешать onload на каждую из них и в итоге понимать что загрузились все или есть способ получше?
В какую функцию в конце добавить переменную чтобы он пошел?
Видео отличное, лайк поставил. Но есть одно "но". Смог хоть как-то воспринимать информацию только на скорости видео 1.5. На обычной скорости я чуть не уснул.
игры наверное интересней всего создавать
скажите на фабрике это можно реализовать?
что учить сначала javascript или jquery или можно учить jquery без знаний javascript??
с параметрами какая то ошибка. у меня получилось наоборот, второй и третий отвечают за координаты на картинке а шестой и седьмой за расположение картинки на экране. или может эта последовательность меняется в зависимости от количества параметров?
Все таки удобно было бы если бы под видео были ссылки на исходники, чтобы параллельно можно было открыть, а то когда начинается быстрое переписывание функций можно нить изложения легко потерять, на экране все равно весь код не видно поэтому сложно становится некоторые моменты воспринять с первого просмотра, а так можно было бы в код(исходник) глянуть, еще раз проследить всю логику и продолжить просмотр держа суть в голове)) Уроки супер спасибо.
после того, как ты оптимизировал код, у меня не получилось сделать, чтобы картинка двигалась
Музыка для урока заходит отлично, медитативная. Видео прямо от души делаешь, приятно смотреть и слушать, спасибо. )
спасибо. все получилось! как-то можно отразить рисунок, что бы например с одного спрайта фигурки дрались друг с другом. я пробовал 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);
У тебя очень крутые уроки) СПАСИБО!! Магия делается прямо на экране))
Музыка на заднем плане в такууую депрессию вгоняет, что настроение, как будто близкий человек помер
Еще один талантливый Sorax))))
в safari цикл setInterval почему та вызывается только один раз. В хроме все норм.
Проще было написать drawImage("image/img.png", i % 4); i++ и выводить спрайты с 0.
напиши, пожалуйста, название трека вначала
Будь добр, делай музыку потише и поменьше воды в видео. А так, молодец, хорошо объясняешь. Лайк))
Красавчик, желаю успехов в твоем деле))
последний кадр в атласе шириной 15 px