Ateros
Ateros
  • Видео 107
  • Просмотров 198 947
Делаем 3D игру - часть 1/2
Сегодня начнем делать вот такую 3д-игру в этом уроке сосредоточимся на вихуальной части, а в следующем напишем код.
В результате на этом уроке научимся загружать готовую сцену в приложение на React JS, а потом создадим сцену в Blender.
0:00 - Вступление
0:13 - Как загрузить 3д сцену в React
2:58 - Как создать 3д игру в Blender
9:40 - Как экспортировать сцену в .babylon
Урок по Blender:
ruclips.net/video/msYjcdCBvHg/видео.html
Курс по React: ruclips.net/p/PLfSrF_YWov8Zbvy44wji_3zd9kju8vmFE
Код урока:
github.com/ateros-lab/game-space-tunnel
#3d #game #gamedev #разработка #веб #игры #react #js
Просмотров: 151

Видео

Приложение "Погода" - 2/2 (Tailwind CSS, React)
Просмотров 5912 месяца назад
В предыдущем уроке ми написали основную логику приложения "Погода" на React JS, а сегодня уже будем работать над созданием интерфейс. Для стилизации компонент будем использовать библиотеку Tailwind. В начале уроке пройдемся по настройке и основным принципам работы с библиотекой, а дальше уже будем оформлять интерфейс. Также добавим график с помощью такой библииотеки как Chart.js. Покажу вам как...
Приложение "Погода" - 1/2 (Redux-toolkit, thunk, axios)
Просмотров 4753 месяца назад
Продолжаем тему разработки на React, Redux-toolkit и в этом уроке научимся делать запрос на сервер, получать и обрабатывать данные. Реализуем код небольшого прилодения для отображения данных по погоде в определенном городе, который введет пользователь. Вы научитесь интегрировать Redux-Toolkit и Thunk для эффективного взаимодействия с сервером и API. Мы рассмотрим использование Axios для запросо...
Игра "Змейка" - 2/2 (React, Redux-toolkit)
Просмотров 4934 месяца назад
Продолжаем создавать игру змейка на react js. В предыдущем урок мы познакомились с тем, как настроить store в redux-toolkit, а также подготовили внешний вид игры и создали основные компоненты. Сегодня же будем прописывать игровой алгоритм и познакомимся с различными деталями работы react и refux-toolkit (useRef, keys, useSelector, etc). В результате получится готовый проект, который можно добав...
Игра "Змейка" - 1/2 (React, Redux-toolkit)
Просмотров 1,2 тыс.4 месяца назад
Продолжаем тему разработки на React JS. Сегодня начнем создавать игру Snake, на react, научимся подключать и настраивать redux-toolkit для взаимодействия со store. Познакомимся с тем как создавать slice, и взаимодействовать с данными в state. Также подготовим внешний вид игры, а уже в следующем напишем логику. Код урока: github.com/ateros-lab/snake-game #react #reactjs #уроки #практика #вебразр...
Игра "Крестики-нолики" (React)
Просмотров 7795 месяцев назад
Всем привет. Сегодня напишем небольшую игру Крестики-нолики на React JS. Урок подойдет для тех кто только начал изучать реакт, что закрепить базовые знания JSX, того как работает стейт, как компоненты взаимодействуют между собой, условий рендериг и другое. Надеюсь урок вам понравиться, если что - напишите в комментариях если хотите больше таких уроков в формате "React практикум" Код урока можно...
Создание 2д-графики для игр - быстрый старт | Blender
Просмотров 5616 месяцев назад
#3данимация #3дмоделирование #blender В этом уроке покажу как стилизовать 3д-модель, которую мы сделали в предыдущем урок под 2д, чтобы сделать ассеты для 2д игры. В процессе стилизиурем материалы обьектов с помощью нод, покажу один из способов того, как создать трехмерный контур для обьектов, настроим камеру и свет, отрендерим все кадры анимации и уже готовый спрайт добавим в игру используя би...
Создание 3д-графики для игр - быстрый старт | Blender
Просмотров 3456 месяцев назад
На этом уроке познакомимся с тем как работать в программе Blender, а также рассмотрим такие темы как: 00:16 - Знакомство с программой 01:13 - 3д-моделирование (теория) 13:58 - 3д-моделирование (практика) 46:28 - Скульптинг 53:28 - Материалы 57:00 - Риггинг 01:00:57 - Анимация 01:02:30 - Рисование весов 01:07:06 - Добавление 3д-модели в игру и запуск анимации из кода 01:08:51 - Домашнее задание ...
Создание 3д игр - быстрый страт | Babylon.js
Просмотров 1,2 тыс.9 месяцев назад
На канале есть курс, где я показывал процесс создание казуальной 3д игры с помощью такой библиотеки, как Babylon.js. Но я понимаю, что для многих проходить такой обьемный курс довольно сложно. Поэтому, чтобы вам было легче - подготовил этот урок. В результате, с полного нуля создадим игру, которая показана на картинках - есть дорога, по ней едет машинка, которой управляет игрок. Задача - обьезж...
Создание 2д игр - быстрый старт | Phaser.js
Просмотров 1,7 тыс.10 месяцев назад
В этом уроке научимся создавать 2д игры с помощью игрового движка Phaser.js. Научимся работать с физикий, анимацией, спрайтами, обрабатывать столкновения игровых обьектов между собой, а также события связанные с нажатием клавиш. В результате получится небольшая игра где можно бегать, прыгать по платформам, собирать звездочки, будет отображаться счет, а после столкновения с бомбой персонаж будет...
Экспорт / импорт сцены в дополненной реальности на JavaScript + отслеживание рук | AR JS
Просмотров 27210 месяцев назад
Продолжаем тему дополненной реальности на JavaScript и сегодня реализуем экспорт импорт сцены в glTF, а также поговорим об отслеживании рук в Babylon JS. 0:14 - сохранение файла 1:54 - загрузка файла 4:20 - результат 5:51 - отслеживание рук Урок по работе с glTF: ruclips.net/video/ACWxdmJFEXU/видео.html Код урока: github.com/ateros-lab/ar/tree/2b6ca1f59fa7b5d9b729b2b3be7b731ba7721ca9 Протестиро...
Физика и игровой элемент, дополненная реальность, AR JS
Просмотров 37011 месяцев назад
Продолжаем тему дополненной реальности и сегодня подключим физику, а также добавим игравой элемент. В курсе по 3д игре мы научились работать со встроенным в движок Babylon JS, плагин для работы с физикой - cannon.js, а сегодня подключим ammo.js. Код урока: github.com/ateros-lab/ar/tree/18d6f4e171415a03a3328d94bb5e25f32c8cefb4 Протестировать (нажмите иконку с очками): ateros-lab.github.io/ar/ind...
Перемещение, изменение размеров 3D обьекта в дополненной реальности, Gizmo Manager | AR JS
Просмотров 26911 месяцев назад
Продолжаем тему дополненной реальности в JavaScript, и сегодня реализуем возможность передвижения, масштабирования и поворота 3d обьектов с помощью встроенного в Babylon JS, Gizmo Manager. Научимся скрывать и отображать иконки для манипулирования, при взаимодействии с обьектом, покажу как подключить возможность изменения параметров position, scale и rotation, с помощью gizmo. И также в конце ра...
Отображение html-элементов в AR-режиме, дополненная реальность на Babylon.js | AR JS
Просмотров 61911 месяцев назад
Продолжаем тему дополненной реальности на JavaScript и сегодня научимся отображать html-элементы в xr-режиме. А именно реализуем возможность добавления новых обьектов на сцену, изменения расстояния и цвета при создании моделей. 0:47 - Создание интерфейса 1:19 - Отображение html в WebXR 2:47 - Создание объекта 4:25 - Изменение расстояния 6:16 - Перевод цвета из hex, в rgb, в color3 7:50 - Резуль...
Создание AR-сцены в JavaScript, WebXR в Babylon.js | Дополненная реальность
Просмотров 74911 месяцев назад
Начинаем новый курс по дополненной реальность на JavaScript. Сегодня познакомимся с тем как подключить AR-сцену, будем использовать для этого объект WebXR, и движок Babylon.js. Более подробно о Babylon JS, я рассказывал на курсе по разработке 3д игры. Первый урок курса по 3д: ruclips.net/video/BhIoEEH8X3k/видео.html Поиграть в игру можно здесь: ateros-lab.github.io/3d-game/ Код урока: github.co...
Распознавание рук с камеры, в реальном времени с помощью Media Pipe, hand track js
Просмотров 462Год назад
Распознавание рук с камеры, в реальном времени с помощью Media Pipe, hand track js
Распознавание точек на теле человека с изображения, TensorFlow Hub
Просмотров 367Год назад
Распознавание точек на теле человека с изображения, TensorFlow Hub
Задачи классификации для ИИ TensorFlow.js, deep learning
Просмотров 684Год назад
Задачи классификации для ИИ TensorFlow.js, deep learning
Практика построения модели машинного обучения с помощью TensorFlow.js
Просмотров 1,8 тыс.Год назад
Практика построения модели машинного обучения с помощью TensorFlow.js
Теория построения нейронных сетей в TensorFlow.js
Просмотров 1,4 тыс.Год назад
Теория построения нейронных сетей в TensorFlow.js
Мобильные приложения на JavaScript (PWA)
Просмотров 2,5 тыс.Год назад
Мобильные приложения на JavaScript (PWA)
Как писать десктопные приложения на React JS | React + Electron
Просмотров 10 тыс.Год назад
Как писать десктопные приложения на React JS | React Electron
Работа с файлами в Electron JS
Просмотров 2,6 тыс.Год назад
Работа с файлами в Electron JS
[#5] Другие типы диаграмм | Визуалиция данных на JavaScript
Просмотров 906Год назад
[#5] Другие типы диаграмм | Визуалиция данных на JavaScript
Как писать десктопные приложения на JavaScript, Electron, Node.js
Просмотров 11 тыс.Год назад
Как писать десктопные приложения на JavaScript, Electron, Node.js
[#4] Графики смешенного типа, Mixed Chart | Визуализация данных на JavaScript
Просмотров 881Год назад
[#4] Графики смешенного типа, Mixed Chart | Визуализация данных на JavaScript
Вопросно-ответная система на JavaScript, на базе Chat GPT
Просмотров 1,7 тыс.Год назад
Вопросно-ответная система на JavaScript, на базе Chat GPT
[#3] Как добавить zoom и scroll, на график с real-time | Визуализация данных на JavaScript
Просмотров 1,3 тыс.Год назад
[#3] Как добавить zoom и scroll, на график с real-time | Визуализация данных на JavaScript
[#2] Стили и real-time chart | Визуализация данных на JavaScript
Просмотров 2,8 тыс.Год назад
[#2] Стили и real-time chart | Визуализация данных на JavaScript
[#1] Знакомство с Chart.js | Визуализация данных на JavaScript
Просмотров 8 тыс.Год назад
[#1] Знакомство с Chart.js | Визуализация данных на JavaScript

Комментарии

  • @user-tb3mm6dl3z
    @user-tb3mm6dl3z 11 часов назад

    Давай еще не останавливайся

    • @_ateros
      @_ateros 9 часов назад

      Спасибо за поддержку) 🙏

  • @user-tb3mm6dl3z
    @user-tb3mm6dl3z 11 часов назад

    Нихерасебе

  • @user-tb3mm6dl3z
    @user-tb3mm6dl3z 13 часов назад

    Красава, хороший канал!

    • @_ateros
      @_ateros 9 часов назад

      Спасибо) 🙏

  • @malinkawithmango
    @malinkawithmango 3 дня назад

    Спасибо за ваш труд❤ Очень помогает разобраться

    • @_ateros
      @_ateros 2 дня назад

      Спасибо, мне приятно. Рад, что смог вам помочь 🙏

  • @user-uf9yv1dx8p
    @user-uf9yv1dx8p 6 дней назад

    Полезно знать такие вещи для веб разработчика

  • @user-nm7jr8ft2s
    @user-nm7jr8ft2s 7 дней назад

    У меня никак не получается, уже по всякому пытался получается просто белый экран у desktop, кто может помочь и как с вами связаться заранее спасибо

    • @user-nm7jr8ft2s
      @user-nm7jr8ft2s 7 дней назад

      @Ateros нужна очень помощь

    • @_ateros
      @_ateros 4 дня назад

      Здравствуйте. Извините, что так поздно отвечаю, вы наверное уже нашли решение. Если нет - можете попробовать задать вопрос на stackverflow, возможно кто-то уже сталкивался с таким. К сожалению пока-что единственный способ связи со мной - этот канал. Многие уже просили телеграм либо что-то такое, но я пока к этому еще не готов, может в будущем что-то придумаю...

  • @ivanovserg8795
    @ivanovserg8795 9 дней назад

    Одним циклом наверное будет проще рисовать "сердечки": const addHearts = () => { for (let i = 0; i < maxLives; i++) if ( i < lives ) { let heartRed = new HeartRed(i) } else { let heartEmpty = new HeartEmpty(i) } }

    • @_ateros
      @_ateros 4 дня назад

      Да, так лучше

  • @vakovako5801
    @vakovako5801 10 дней назад

    Спасибо за видео, за терпеливое объяснение . Все на высшем уровне🔥

    • @_ateros
      @_ateros 9 дней назад

      Спасибо, мне приятно 🙏

  • @ed6i991
    @ed6i991 16 дней назад

    привеееееет!

    • @_ateros
      @_ateros 14 дней назад

      Привет)

  • @sovok_slovo_pacana
    @sovok_slovo_pacana 26 дней назад

    У меня лагает игра, но комп мощный, на всех пк лагает хз с чем связано

    • @_ateros
      @_ateros 26 дней назад

      Та, которую я на github pages опубликовал, или ваш код?

  • @Mr.Bellamy
    @Mr.Bellamy Месяц назад

    Для рядового разработчика на реакте было понятно только первые 2 минуты)))) дальше пропасть) Как называется человек который для таких игр создаёт модели в блендере? Аниматор? 3D дизайнер?

    • @_ateros
      @_ateros Месяц назад

      Да, я понимаю. Подумал, что кому-то будет интересно посмотреть весь процесс создания игры. Но, конечно вам не обьязательно самому создавать модельки, есть множество ресурсов где можно бесплатно скачать уже готовые 3d ассеты и с их помощью конструировать свою игру. Вот некоторые из них: itch Kenney Reiner's Tilesets Craftpix OpenGameArt *да, человек который создает модельки - 3д-художник, либо 3д-дизайнер, а если делает анимацию то 3д-аниматор.

    • @Mr.Bellamy
      @Mr.Bellamy Месяц назад

      @@_ateros спасибо за подробный ответ) Так то реально интересно поработать с 3д графикой)

    • @_ateros
      @_ateros Месяц назад

      Я рад, что вам понравилось) 🙏

  • @kimosuda8471
    @kimosuda8471 Месяц назад

    Лучший урок по этой игре на реакте!

    • @_ateros
      @_ateros Месяц назад

      Спасибо 🙏 Рад, что вам понравилось)

  • @errorerror3564
    @errorerror3564 Месяц назад

    Я думал, что выучив JS, пойму, как создавать сайты, но я тут, на этом видеоуроке и понимаю, насколько я узколобый, что ДАЖЕ И НЕ ЗАДУМЫВАЛСЯ ЧТО ТАК МОЖНО БЫЛО! Спасибо тебе за уроки, я впервые, за долгие годы изучения фронтенд(я ещё даже не junior) смог улыбнуться, увидев такой результат. И да, каждый видеоурок я -"А ЧЁ ТАК ТОЖЕ МОЖНО БЫЛО?" В общем ох и ах и одни эмоции)

    • @_ateros
      @_ateros Месяц назад

      Спасибо, мне очень приятно) Рад, что вам понравилось 🙏

    • @errorerror3564
      @errorerror3564 Месяц назад

      @@_ateros подскажите, а сколько стоит научиться у вас всему этому?

    • @_ateros
      @_ateros Месяц назад

      В настоящее время я не провожу платные курсы, но если в будущем что-то изменится я опубликую информацию на канале.

  • @tihunvolkov9288
    @tihunvolkov9288 Месяц назад

    О, круто, спасибо

  • @alexanonym1584
    @alexanonym1584 Месяц назад

    А есть ссылка на код?

    • @_ateros
      @_ateros Месяц назад

      К сожалению не сохранилось, извините

    • @alexanonym1584
      @alexanonym1584 Месяц назад

      @@_ateros Спасибо за видео!

  • @evilneo2340
    @evilneo2340 Месяц назад

    как вытащить файлы в реакт приложение?

    • @_ateros
      @_ateros Месяц назад

      Имеешь ввиду как дать пользователю возможность выбрать файлы? Можешь попробовать вот это - www.electronjs.org/ru/docs/latest/api/dialog

  • @cemxabalob70
    @cemxabalob70 Месяц назад

    У меня от первого урока не появилась сцена в "блендере"? Почему то не скачивается "вавилон"???

    • @_ateros
      @_ateros Месяц назад

      Попробуйте тот плагин (babylon2blender). А на счет второго - проверьте, есть ли файл по ссылке (иногда в cdn сервис может барахлить). Можете попробовать еще через npm, либо еще есть babylonjs-hook для реакта - github.com/brianzinn/babylonjs-hook

  • @TheTimur123
    @TheTimur123 Месяц назад

    Супер!!!!!!

    • @_ateros
      @_ateros Месяц назад

      Спасибо) 🙏

  • @TheTimur123
    @TheTimur123 Месяц назад

    Супер!!!!

    • @_ateros
      @_ateros Месяц назад

      Спасибо 🙏 Рад, что вам понравилось)

  • @cemxabalob70
    @cemxabalob70 Месяц назад

    Не понятно? Как должна отобразиться сцена в "блендере"?

    • @_ateros
      @_ateros Месяц назад

      Проще всего использовать для блендера плагин babylon2blender. Вот здесь есть подробная инструкция, как использовать - doc.babylonjs.com/features/featuresDeepDive/Exporters/Blender

  • @evilneo2340
    @evilneo2340 2 месяца назад

    видос просто имба

    • @_ateros
      @_ateros Месяц назад

      Спасибо)

    • @evilneo2340
      @evilneo2340 Месяц назад

      @@_ateros можешь пожалуйста подсказать как собрать приложение для установки и запуска на линукс?

    • @_ateros
      @_ateros Месяц назад

      Вот этот гайд может помочь - www.electronjs.org/ru/docs/latest/development/build-instructions-linux

  • @axel-sheen
    @axel-sheen 2 месяца назад

    только ты кажется забыл объяснить чем именно не подходит browser router, ведь с ним всё работает точно так же

    • @_ateros
      @_ateros 2 месяца назад

      Здравствуйте. Это связано с тем, что в продакшене мы будем открывать файл, а не адрес сайта (2:59)

  • @user-tb3hd9jn9k
    @user-tb3hd9jn9k 2 месяца назад

    Блин мужик, я не понимаю почему так мало просмотров твоего материала, все по факту без воды,довольно просто и бесплатно, пусть записываются на скилбокс и не знают нифига

    • @_ateros
      @_ateros 2 месяца назад

      Спасибо, мне приятно) Главное, что вам пригодилось 🙏

  • @slibnork8462
    @slibnork8462 2 месяца назад

    Шикарно! то что нужно! Спасибо большое 🤜🤛

    • @_ateros
      @_ateros 2 месяца назад

      Спасибо 🙏 Рад, что вам понравилось)

  • @romanchernyshov2632
    @romanchernyshov2632 2 месяца назад

    Спасибо!

  • @alexandrs7563
    @alexandrs7563 2 месяца назад

    Очень полезный урок, охватывает множество тем Было бы интересно посмотреть на реализацию через RQ

    • @_ateros
      @_ateros 2 месяца назад

      Спасибо, мне приятно) 🙏 Возьму на заметку, что вам это интересно 😉

    • @alexandrs7563
      @alexandrs7563 2 месяца назад

      @@_ateros жду какой-нибудь большой проект с хорошим дизайном с условного биханс 💪

  • @user-ub5oo5ce8q
    @user-ub5oo5ce8q 2 месяца назад

    🔥🔥🔥🔥

    • @_ateros
      @_ateros 2 месяца назад

      Спасибо) 🙏🙏

  • @stepantyumentsev2323
    @stepantyumentsev2323 3 месяца назад

    👍 для ответов промисов есть dataSync() рекомендуется ее применять, что упростит гемор с извлечением данных из массива.

  • @user-ff8ob3pj6f
    @user-ff8ob3pj6f 3 месяца назад

    Интересно глянуть, спасибо за контент

    • @_ateros
      @_ateros 3 месяца назад

      Спасибо, рад что вам понравилось)

  • @TheMeowsGod
    @TheMeowsGod 3 месяца назад

    Спасибо, родной🩷искал на днях подобное и обрадовался, когда увидел тебя . Делай вещи💪

    • @_ateros
      @_ateros 3 месяца назад

      Спасибо, мне приятно) 🙏🙏

    • @user-fn6xx7db1r
      @user-fn6xx7db1r 3 месяца назад

      Сделайте пожалуйста про redux -toolkit -RTK Query пожалуйстаааааа

    • @_ateros
      @_ateros 3 месяца назад

      Возьму на заметку, что вам это интересно 😉

  • @drakonn90
    @drakonn90 3 месяца назад

    всё по делу, лайк

    • @_ateros
      @_ateros 3 месяца назад

      Спасибо)

  • @user-ek7ws7dw2r
    @user-ek7ws7dw2r 3 месяца назад

    Вау!!!😳 Вау, вау! Спасибо за супер контент!!!🙌💪👍

    • @_ateros
      @_ateros 3 месяца назад

      Рад, что вам понравилось) 🙏

    • @user-ek7ws7dw2r
      @user-ek7ws7dw2r 3 месяца назад

      @@_ateros Спасибо за Ваш ответ! Скажите, пожалуйста, как Вас зовут? Если не секрет, сколько лет Вы в программировании и с чего начинали? Честно говоря, я совсем немного понимаю или почти ничего не понимаю, как Вы это делаете, но Вы мотивируете!!! Спасибо!!!👍👍👍🙌

    • @_ateros
      @_ateros 3 месяца назад

      Спасибо мне приятно 🙏 Рад, что мои уроки вас мотивируют 🔥🔥👍 Я понимаю, что иногда бывает сложновато, просто продолжайте смотреть, практикуйтесь и со временем понимание придет.

  • @ShClub317
    @ShClub317 3 месяца назад

    на safari не работает

    • @_ateros
      @_ateros 3 месяца назад

      А если в хроме открыть, получается?

    • @ShClub317
      @ShClub317 3 месяца назад

      @@_ateros да

    • @ShClub317
      @ShClub317 3 месяца назад

      @@_ateros и на Яндекс тоже, помоги плиз)

    • @_ateros
      @_ateros 3 месяца назад

      А если в safari нажать Поделиться -> Добавить на главный экран, то работает, только если нажимать по кнопке установке которую мы создали не работает, да?

    • @ShClub317
      @ShClub317 3 месяца назад

      Да

  • @tarasp959
    @tarasp959 3 месяца назад

    у меня неполучилось цстановить нужно было в папке roamin папку вручную создать npm, а так выдавало ошибку

    • @_ateros
      @_ateros 3 месяца назад

      Спасибо что написали, это поможет другим 🙏

  • @tarasp959
    @tarasp959 4 месяца назад

    Привет очень нравится как ты все легко делаешь и вся фррма подачи оочень круто, молодец! 👏 А как можно с тобой связатся еще кроме youtube?

    • @_ateros
      @_ateros 4 месяца назад

      Спасибо, мне приятно 🙏 Меня уже просили раньше создать телеграм или дискорд, но к сожалению боюсь не буду успевать. Я пока решил сосредоточиться только на ведение канала Ютуб. Возможно когда-то в будущем создам еще телеграм... Извините что так.

    • @tarasp959
      @tarasp959 4 месяца назад

      хотел узнать если ты делаешь приложения под заказ?

    • @_ateros
      @_ateros 4 месяца назад

      В настоящее время я не беру заказы, но если что-то изменится я опубликую информацию на канале.

  • @virtuosoalarm9992
    @virtuosoalarm9992 4 месяца назад

    <Button id="left" style=" font-size: 20pt ; padding: 10pt" >Left</Button> <button id="right" style=" font-size: 20pt; padding: 10pt; ">Right</button> <p id = "hero" style=" font-size: 20pt; background-color: blueviolet; width: 4%; padding: 10pt; text-align: center; margin-left: 3%; margin-top: 5%; position: relative; left: 0px; "></p> <script> let hero = window.document.querySelector('#hero'); let RightButton = window.document.querySelector('#right'); let rightPosition = 0; let LeftButton = window.document.querySelector('#left'); let leftPosition = 0; const clickHandler = () => { if(hero.style.backgroundColor === 'blueviolet') { hero.style.backgroundColor = 'aqua'; } else { hero.style.backgroundColor = 'blueviolet'; } } const rightHandler = () => { rightPosition = rightPosition + 20; hero.style.left = `${rightPosition}px`; } const leftHandler = () => { leftPosition = leftPosition + 20; hero.style.left = `${leftPosition}px;` } hero.onclick = clickHandler; RightButton.onclick = rightHandler; LeftButton.onclick = leftHandler; </script> левая кнопка не работает, где ошибка?

    • @_ateros
      @_ateros 4 месяца назад

      Здравствуйте. Вы случайно добавили точку с запятой после px, попробуйте изменить: hero.style.left = `${leftPosition}px;` на: hero.style.left = `${leftPosition}px`;

    • @virtuosoalarm9992
      @virtuosoalarm9992 4 месяца назад

      @@_ateros Да, дело было и в этом тоже, но я уже нашёл и справил несколько ошибок, теперь всё работает, пойду смотреть следующие видео)

  • @fewart
    @fewart 4 месяца назад

    Полезное видео. Хорошая картинка и звук, удачи каналу, автору спасибо!

    • @_ateros
      @_ateros 4 месяца назад

      Спасибо большое, мне очень приятно 🙏🙏🙏

    • @fewart
      @fewart 4 месяца назад

      @@_ateros Собрал проект, но картинки не подключились в режиме Production. Ниже в комментариях видел похожий вопрос, где вы посоветовали использовать переменные окружения через файл process.env. Создал такой файл в папке react-app в корне, вот его содержимое: FOLDER_PATH=build/static/media. Далее в модуле Header.jsx пробую подключить картинку логотипа: <img src={`${process.env.FOLDER_PATH}/logo-light.svg`} alt="логотип" /> В результате картинка не отображается при запуске React-приложения, из панели разработчика в браузере тэг выглядит следующим образом: <img src="undefined/logo-light.svg" alt="логотип"> Направьте пожалуйста на путь истинный

    • @_ateros
      @_ateros 4 месяца назад

      Здравствуйте. Извините, не видел ваш комментариий. Попробуйте изменить FOLDER_PATH на REACT_APP_FOLDER_PATH, и перезагрузить приложение. Плюс, надо будет указать путь в ос начиная с диска - по типу D:/some-folder и т. д.

    • @fewart
      @fewart 4 месяца назад

      @@_ateros а возможно путь указывать универсальный для разных ос? В этом же и есть прелесть разработки с использованием electron, что на выходе мультиплатформенное приложение

    • @_ateros
      @_ateros 4 месяца назад

      Попробуйте подставлять как вы делали, без диска. А потом напишите скрипт, который парсит index.html (тот, что в electron-app/src, после сборки), и меняет href='/...' на href='...' то есть вначале слэш удаляет и перезаписывает навые данные в файл index.html (пакет fs, для работы с файлами). И вызывайте этот скрипт через node перед сборкой - node script.js; npm run make.

  • @user-hf4sm4zu7n
    @user-hf4sm4zu7n 4 месяца назад

    Просто отлично! Спасибо.

    • @_ateros
      @_ateros 4 месяца назад

      Рад, что вам понравилось 🙏

  • @user-km8we8hq2g
    @user-km8we8hq2g 4 месяца назад

    👍

  • @user-km8we8hq2g
    @user-km8we8hq2g 4 месяца назад

    Супер

  • @denisholmov
    @denisholmov 4 месяца назад

    надо будет ваши работы занести в списки рекомендаций для своих подписчиков

    • @_ateros
      @_ateros 4 месяца назад

      Спасибо 🙏

  • @ISYHIBC
    @ISYHIBC 4 месяца назад

    Было очень полезно и познавательно, спасибо

    • @_ateros
      @_ateros 4 месяца назад

      Рад, что вам понравилось 🙏🙏

  • @user-ss5jj4wb4p
    @user-ss5jj4wb4p 4 месяца назад

    добрый день когда 2 часть игры будет snake?

    • @_ateros
      @_ateros 4 месяца назад

      Здравствуйте. Где-то на этой неделе постараюсь.

  • @vladimirstrepkov7767
    @vladimirstrepkov7767 4 месяца назад

    Анимация проигрывается наоборот, а так круто, спасибо за понятные объяснения!

    • @_ateros
      @_ateros 4 месяца назад

      Спасибо 🙏 Попробуйте позже пересмотреть, скорее всего где-то что-то упустили...

    • @vladimirstrepkov7767
      @vladimirstrepkov7767 4 месяца назад

      @@_ateros Не ожидал что вы ответите, приятно). Правда я имел ввиду что у вас анимация в туториале наоборот проигрывается, т.к. вы картинку внутри div-a отзеркалили, но всё равно двигаетесь по ней слева направо, а нужно двигаться справа налево, тогда анимация будет проигрываться правильно и красиво, с первого кадра до последнего, а не с последнего до первого. Надеюсь понятно объяснил пхпх.

    • @_ateros
      @_ateros 4 месяца назад

      А, ага в этом смысле. А я подумал что у вас ошибка, извините.

  • @ZhenyaGoroh
    @ZhenyaGoroh 4 месяца назад

    Math.random() не самый лучший вариант для key, лучше уже сложить x и y как строки или использовать crypto.randomUUID() (или пакет uuid).

  • @ed6i991
    @ed6i991 4 месяца назад

    Привет! А как заменить текстуру у импортируемой модельки, например у монетки? Пробовал создать новый материал, но почему-то не получилось

    • @_ateros
      @_ateros 4 месяца назад

      Привет. Мне кажется из кода не получиться такое сделать... Попробуй в блендере отредактировать материал и потом уже новую модель подставлять. На канале есть урок по Blender ("3д-графика для игр").

    • @ed6i991
      @ed6i991 4 месяца назад

      @@_ateros хорошо, спасибо 😊

    • @_ateros
      @_ateros 4 месяца назад

      Надеюсь все получится 🙏

  • @user-sb4by5qp1v
    @user-sb4by5qp1v 4 месяца назад

    Ещё раз пересмотрел Ваш урок, спасибище!!! Но у меня возникла проблема, она заключается в том, что в папке public (по сути это корневой каталог) у меня есть шаблоны, которые подгружаются функцией: вот строка ---- process.env.PUBLIC_URL + `/${props.template}`, // assuming template --- когда я убираю слэш перед ${props.template}, у меня ничего не запускается, а со слешем, не работает... Help me please...

    • @_ateros
      @_ateros 4 месяца назад

      Спасибо) Рад, что вам понравился урок 🙏 Попробуйте перед слэш добавить значение перемонной среды в которой храниться путь к папке public в ос.

    • @user-sb4by5qp1v
      @user-sb4by5qp1v 4 месяца назад

      @@_ateros У меня сработало, когда я убрал process.env.PUBLIC_URL и оставил только путь `${props.template}`, спасибо за быстрый ответ, с Вами всегда очень приятно общаться!!!

    • @_ateros
      @_ateros 4 месяца назад

      И вам спасибо, что написали - ваш ответ поможет другим 🙏

    • @user-sb4by5qp1v
      @user-sb4by5qp1v 4 месяца назад

      @@_ateros А вот ещё вопрос, как установить свою иконку в приложение. Документация пишет, что "needs to be placed in the buildResources directory (defaults to build). It is important to provide icon.ico (or icon.png), as otherwise the default Electron icon will be used." А вот в нашем случае папки build нет? Просто создать её с картинкой?

    • @_ateros
      @_ateros 4 месяца назад

      Можете посмотреть урывок видео где я показывал, как сделать калькулятор на электроне, там есть про это (перемотайте на 3:19) - ruclips.net/video/230P99N8dLY/видео.htmlsi=MpaN8C91v33iUAUE

  • @user-ub5oo5ce8q
    @user-ub5oo5ce8q 4 месяца назад

    🔥🔥🔥👍🏼👍🏼👍🏼

    • @_ateros
      @_ateros 4 месяца назад

      Спасибо) 🙏🙏

  • @nikolyovin
    @nikolyovin 4 месяца назад

    просто пушка! спасибо большое!

    • @_ateros
      @_ateros 4 месяца назад

      Рад, что вам понравилось) 🙏🙏

  • @drondron1316
    @drondron1316 5 месяцев назад

    🥸