Game loop | JavaScript | rus
![ThreePixDroid [RU]](http://yt3.ggpht.com/ytc/AIdro_m9hY0wSlD4ygQJ9MwISJSheP6X-5dtaCYYZ-hmk6ytX8k=s48-c-k-c0x00ffffff-no-rj)
HTML-код
- Опубликовано: 3 фев 2021
- В этом видео используя #requestAnimationFrame создадим одну из важнейших частей любой игры - Игровой цикл.
Скажи пока таймаутам и интервалам...
Предыдущие / Связанные видео:
Подключение Canvas : • Подключение Canvas | J...
Модули | JS : • Модули | JavaScript
Исходники:
GitHub: github.com/ThreePixDroid/02_g...
CodePen: codepen.io/ThreePixDroid/pen/...
Полезные ссылки:
Игровой цикл : www.sitepoint.com/quick-tip-g....
Игровой цикл : spicyyoghurt.com/tutorials/ht...
Опять про игровой цикл : gameprogrammingpatterns.com/g...
Performance.now() : developer.mozilla.org/ru/docs...
requestAnimationFrame() : developer.mozilla.org/ru/docs...
bind() : • ООП в JavaScript. Bind...
Крайне полезные видео:
На Русском:
Jake Archibald: все что я знаю про Event Loop в JavaScript (2018) : • Video
Про цикл событий в JavaScript или "как на самом деле работает асинхронность"? : • Video
На Английском:
Филипп Робертс: Что за чертовщина такая event loop? | JSConf EU 2014 : • What the heck is the e...
Джейк Арчибальд. В цикле - JSConf.Asia : • Jake Archibald on the ...
Интересное:
Анимация градиента : • Canvas JavaScript | Bl...
Гексагональная сетка : • Generative Art | Перем...
Молния : • Lightning with Vanilla...
Исходники : codepen.io/ThreePixDroid/pen/gOLrzRM
Какой ты красавчик, постоянно нахожу в твоих видео что-то нужное, хотя уже все по 10 раз пересматривал, но потом сталкиваешься с проблемой и именно у тебя нахожу решение
Мне нравится, что ты постепенно улучшаешь структуры проектов. Вот уже появились готовые модули, так гораздо лучше выглядит, чем когда всё в одном файле. Найс
рад что нравится )
подписка) Спасибо за красивый контент!
Пожалуйста)
однозначно подписка, занимаюсь фронтом уже довольно давно, но всё было в основном в пределах довольно простых задач, а для создания анимации этот канал - самое оно!
Спасибо огромное!!!
спасибо! очень умный контент!
Круто!)
Спасибо)
Лайк
Потрясающе интересное видео, только очень короткое
Спасибо.
пожалуйста)
Каеф
спасибо!
жаль недоступны "крайне полезные видео"
Супер контент 👍
А не подскажешь, как можно реализовать иллюзию перемещения камеры в 2д на канвасе, в котором уже отрендерена сетка или процедурно сгенерированая карта размером больше, чем канвас + к этому, как можно реализовать масштабирование?
Или, мб, возьмёшь как идею для нового видео :)
Как же хорошо, что я нашел твой канал! Как насчет марафона по созданию простого 3D FPS на canvas? По примеру krunker.io ?)
Когда время будет :D
Я ему вк уже пол года штурмую, чтобы он сделал урок по 3d, так что, присоединяйся, надеюсь когда-нибудь будет)))
Смотрел много видосов, абсолютно разных авторов. Кто-то предлагает купить курс, кто-то объясняет так себе (Гоша Ду...) Но на тебя сегодня случайно попал, и вот что я хочу тебе сказать. Чел у тебя и голос приятный, и музон норм, и уроки - ПРОСТО ТОП. Тебе нужно запускать свои курсы. Только не по "Добавлению элемента в массив на JS" или "Как создать функцию". А вот по именно такому контенту... Массивы и функции это конечно круто - но иногда просто хочется посмотреть на какой-то действительно крутой проект, и как его делают. Ты через год переплюнешь и Гошу и Владлена. Подумай про это. Сделай пару простых игр на JS. Или какие-то кнопки лайков, рейтинг (звездочки). Или отображение лоадера - пока идет подгрузка картинки. Я знаю что много такого уже есть в ютубе. Но все равно, лично я - купил-бы такой курс, по тому что это JS на практике, где учитель не спешит закончить урок за 15-20 мин. Когда смотрел видос одного известного ютуб учителя, где он в теме "Замыкания на JS" - рассказал только про один способ реализации вышеуказанного примера. А потом случайно узнаю что есть еще 2 способа (Может и больше - я хз) И возникает вопрос, а зачем платить за такие курсы? Но ты если решишь делать свой платный контент - то куплю без всяких вопросов. Просто приятно тебя слушать и смотреть... Спасибо друг )
Круто, спасибо большое)
Подумаю над созданием курса) сейчас пытаюсь выйти на стабильный выпуск видео раз в неделю!)
Только я бы сделал по другому. Вместо того, чтобы передавать все функции в конструктор, я бы записал в нём только массив, и добавил бы методы add(func) и delete(id), метод add будет помещать в массив новый метод и возвращать его номер в этом массиве, а метод delete будет принимать этот номер и заменять соответствующее значение в массиве например на null. А в animate нужно будет перебрать все элементы массива и вызвать их как функции (только добавить проверку, что элемент не равен null). Так можно в нужный момент подключать функции и затем удалять их когда они не нужны.
да) может так и будет) не поздно ведь в другом видео что то изменить)
главная часть этого видео сосредоточена на методе animate , класса loop)
А есть мысли, как можно было бы оптимизировать модуль loop так, чтобы он выполнял новый цикл только если что-то происходит? Например - производить обновление только если я двигаю мышью или нажимаю на кнопку или меняется той или иной параметр (к примеру трансформация). Пробовал вчера привертеть Proxy, но так и не дошел до нужного результата
сделай туториал по 0:17 пожалуйста 😅 очень хочу сделать свою небольшую игру у других ютуберов нормальных объяснений не нашёл поэтому пожалуйста сделай туториал по вычислению столкнулись ли объекты (разных фигур так как я понял что вычислять столкновение разных фигур это сложно) как дать объектам характеристики (роли)
буду надеяться что в скором времени будут видео выходить по чаще
Сам надеюсь, что времени будет побольше, чтоб записывать чаще!
ещё можно очистить холст таким образом:
canvas.width |= 0
Знаю)
Где ты раньше был???? Я когда изучал js написал около 20 игр, и все они работали через setInterval...
Да я и сам только учусь, так что когда ты писал 20 игр, я ещё наверное не знал что такое JS :D
Теперь у тебя есть повод переписать игры и возможно внести дополнительную механику попутно :D
@@ThreePixDroid_RU Так а ты читаешь что-то или у тебя есть другой способ получения интересной +малоизвестной информации про js?
@@npb73 Ставлю себе задачу сделать например игровой цикл, ищу на эту тему информацию: книги, статьи, видео, картинки. В описании к видео кстати есть некоторые ссылки из того что я просмотрел и прочитал, кроме того в них можно узнать об этом подробнее.
Интересно, можно ли в будущем создавать сложные игры на Js.
На самом деле можно уже сейчас, с помощью node js. Для него есть фреймворк electron, с его помощью можно делать десктоп приложения на JS. А благодаря node js можно сделать файловую систему сохранения. Затем графику делаешь в webgl (canvas 2d слишком тормозит в сложных сценах). Музыку добавляешь через Web Audio API. Ну и надеюсь скоро web assembly реализуют также для node js и можно будет делать отдельные сверхбыстрые модули.
Ъ
Всем привет, подскажите новичку почему и зачем везде мелькает this? this.animate = this.... и тд P.S Если у кого то не получается - загляните в файл Layer.js там произошли изменения с последнего видоса и как раз появляется this.layer.w и this.layer.h
А как иначе?) К свойствам класса обращаются через this
@@ThreePixDroid_RU а не подскажешь как можно создать несколько квадратов?
Это будет работать в sublime text 3
это будет работать в браузере. sublime text это просто редактор.
@@ThreePixDroid_RU а почему когда я в точ как вы пишете но не работает это новерное связано в Начале? Я ещё плохо шарию с этим
А незнаешь как сделать очки или счёт для игры может если знаешь то пожалуйста если возможно или сможешь сделать видео про этот счёт очков там примерно + 1 Монетка и так далее вы просто хорошо обеснятие.
А почему у меня не работает (((
Какое же это говнище .bind(this) - это плохая не рекомендованная практика ухудшающая поддержку ,зачем ты берёшь и популяризируешь этот паттерн, руки бы таким псевдо программистам поотрывать за такое.Говнокод такой говнокод.
Внимательнее будьте. И bind никому не навязываю и тема видео не связанна с bind. Суть ролика совсем в другом. Да даже просто посмотри любое предыдущее видео, там использую стрелочную функцию, из этого следует что ничего я не популяризирую. Я уверен, что если ты оставишь ссылку на любой свой код, где есть хотя бы 100 строк, то и там найдется косяк. Кроме того bind менее требователен к ресурсам процессора, что важно при разработке игр.