- 17
- 33 661
Rablv
เข้าร่วมเมื่อ 10 พ.ย. 2009
Делаем игры и иногда играем в них. Или наоборот.
2. Скроллим турботоннель из Battletoads на JavaScript \\ PixiJS
Всем привет! Продолжаем делать турботоннель из игры про боевых жаб.
В этом видео добавим сколлинг, прыжки и управление.
#pixi #javascript #gamedev #html5tutorial
В этом видео добавим сколлинг, прыжки и управление.
#pixi #javascript #gamedev #html5tutorial
มุมมอง: 482
วีดีโอ
1. Пишем турботоннель из Battletoads на JavaScript \\ PixiJS
มุมมอง 2.4K10 หลายเดือนก่อน
Всем привет! Начинаем новую серию роликов в которых сделаем турботоннель из игры про боевых жаб. В первой части нарисуем тоннель и жабу на мотоцикле, а так же добавим простое управление мышкой.
Пишем стрелялку "Чапаев" из тетриса на JavaScript \\ PixiJS. Проще некуда!
มุมมอง 556ปีที่แล้ว
В этом видео рассмотрим как максимально быстро и легко написать на JavaScript \ PixiJS простейший шутер а-ля Чапаев из тетриса 90-ых. #javascript #pixi #brickgame #js #pixijs
Проходим Contra (NES | Dendy) в 2023 году
มุมมอง 399ปีที่แล้ว
В дополнение к моей серии роликов про разработку игры в стиле Contra ставим жирную точку на этой теме проходя ту самую Контру с приставки денди! Плейлист по разработке игры: th-cam.com/play/PLjzNhjXXmOJ_xiq2LvoWHC31RQVyxHJIM.html
Как я делал атлас (sprite sheet) для игры в стиле Contra
มุมมอง 387ปีที่แล้ว
Рассказываю вкратце каким инструментом я пользовался чтобы сгенерировать атлас (sprite sheet) для серии роликов про разработку игры в стиле Contra. Бесплатный онлайн-генератор: www.codeandweb.com/free-sprite-sheet-packer Функциональный, но платный: www.codeandweb.com/texturepacker Ссылка на плейлист с роликами о разработке: th-cam.com/play/PLjzNhjXXmOJ_xiq2LvoWHC31RQVyxHJIM.html
Пишем игру в стиле Contra на JavaScript \\ PixiJS (часть 10 \\ Финал)
มุมมอง 2.3Kปีที่แล้ว
В девятой части накладываем текстуры и добавляем летающие поверапы. Ссылка на гитхаб: github.com/rablv/contra/tree/main 0:00 Начало 0:50 Обновил атлас 1:38 Добавляем взрывы 17:30 Добавляем босса 51:56 Гибель и респаун героя 59:30 Финальная надпись на экране 1:02:35 Звезды, горы, вода, джунгли 1:13:00 Финальный результат 1:14:13 Заканчиваем и (не)прощаемся Ссылка на плейлист: th-cam.com/play/PLj...
Пишем игру в стиле Contra на JavaScript \\ PixiJS (часть 9)
มุมมอง 1.4Kปีที่แล้ว
В девятой части накладываем текстуры и добавляем летающие поверапы. Ссылка на гитхаб: github.com/rablv/contra/tree/main 0:32 Начало. Смотрим на атлас 2:49 Загружаем атлас 12:06 Используем текстуры 49:19 Исправляем проблемы со стрельбой 1:10:13 Добавляем летающий поверап 1:21:55 Выпадающий из поверапа бонус 1:38:37 Раскидываем поверапы по карте 1:46:42 Заканчиваем Ссылка на плейлист: th-cam.com/...
Пишем игру в стиле Contra на JavaScript \\ PixiJS (часть 8)
มุมมอง 1.7Kปีที่แล้ว
В 8 части создаём карту уровня, расставляем врагов, добавляем взрывающийся мост. Ссылка на гитхаб: github.com/rablv/contra/tree/main 0:44 Начало 4:13 Делаем многослойный мир 8:29 Создаем фабрику построения уровня 31:50 Раскрашиваем платформы в цвета травы, земли, воды и в мост 53:15 Расставляем врагов по карте 1:16:33 Добавляем хитбоксы 1:30:16 Учим мост взрываться 1:45:47 Заканчиваем Ссылка на...
Пишем игру в стиле Contra на JavaScript \\ PixiJS (часть 7)
มุมมอง 1.3Kปีที่แล้ว
В седьмой части добавляем турели и спред ган. Ссылка на гитхаб: github.com/rablv/contra/tree/main 0:27 Начало 0:56 Базовая сущность 14:52 Новый Update 41:42 Добавляем турели 1:06:05 Разное оружие и спред ган 1:19:11 Запрещаем заходить за левую сторону экрана 1:23:43 Заканчиваем Ссылка на плейлист: th-cam.com/play/PLjzNhjXXmOJ_xiq2LvoWHC31RQVyxHJIM.html
Пишем игру в стиле Contra на JavaScript \\ PixiJS (часть 6)
มุมมอง 1Kปีที่แล้ว
В шестой части чутка рефачим старый код и добавляем врагов. Ссылка на гитхаб: github.com/rablv/contra/tree/main 0:00 Рефакторинг 19:30 Про врагов 21:20 Вьюха врага 27:20 Класс врага 32:32 Фабрика врагов 34:28 Добавляем врагов в игру 48:33 Стрельба по фрагам и удаление их с экрана 59:14 Заканчиваем
Пишем игру в стиле Contra на JavaScript \\ PixiJS (часть 5)
มุมมอง 1.2Kปีที่แล้ว
В пятой части добавляем горизонтальный скролл и стрельбу. Ссылка на гитхаб: github.com/rablv/contra/tree/main 0:00 Вступление 0:13 Про скролл и камеру 5:16 Добавляем горизонтальный скролл 26:40 Добавляем стрельбу 35:10 Угол стрельбы 51:00 Смещение точки старта пули 59:59 Удаление пуль 1:11:00 Заканчиваем Ссылка на плейлист: th-cam.com/play/PLjzNhjXXmOJ_xiq2LvoWHC31RQVyxHJIM.html
Пишем игру в стиле Contra на JavaScript \\ PixiJS (часть 4)
มุมมอง 1.5Kปีที่แล้ว
В четвёртой части подробно рассматриваем вопрос переключения визуальных состояний персонажа в зависимости от действий игрока. Ссылка на гитхаб: github.com/rablv/contra/tree/main 0:00 начало 1:23 дорисовываем автомат и отражаем персонажа 5:35 подробно про размеры контейнера, баундсы и отражение 17:04 добавляем баундс и задаём ось симметрии 20:30 разделяем вьюху и логику 35:38 рисуем стейты и рас...
Пишем игру в стиле Contra на JavaScript \\ PixiJS (часть 3)
มุมมอง 1.6Kปีที่แล้ว
В третей части расставляем платформы, делаем прыжки между платформами и спрыгивания. Ссылка на гитхаб: github.com/rablv/contra/tree/main 0:00 Вступление 0:33 Добавляем новые платформы 2:05 Прыжки сквозь платформы 18:39 Спрыгивания с платформы 20:55 Добавляем боксы 26:45 Убираем отскоки 28:42 Настраиваем гравитацию, скорость, цвет и размеры героя 30:06 Добавляем ступеньку 34:18 Заканчиваем Ссылк...
Пишем игру в стиле Contra на JavaScript \\ PixiJS (часть 2)
มุมมอง 2.4Kปีที่แล้ว
Во второй части подробно рассматриваем вопрос управления с клавиатуры, добавляем прыжки и немного причёсываем код. Ссылка на гитхаб: github.com/rablv/contra/tree/main 0:00 Вступление 0:56 Движение по горизонтали 5:00 Нажатие клавиш 11:53 Улучшаем управление вправо\влево 21:54 Добавляем прыжок 24:18 Добавляем стейты героя 27:50 Немного чистим код 28:32 Фабрика платформ 32:27 Обработчик нажатия к...
Пишем игру в стиле Contra на JavaScript \\ PixiJS (часть 1)
มุมมอง 11Kปีที่แล้ว
Всем привет! Начинаем серию роликов в которых сделаем небольшой учебный проект, клон игры Contra. Разберём как без игрового движка (но с фреймворком визуализации PixiJS) создать платформер в котором можно бегать, прыгать, стрелять, генерировать врагов и боссов и т.д. Ссылка на гитхаб: github.com/rablv/contra/tree/main 0:00 Вступление 0:57 Почему JavaScript 1:25 Немного о редакторе VS Code 1:56 ...
Трейлер утеряной игры Daring Fighter для Android.
มุมมอง 3.8K9 ปีที่แล้ว
Трейлер утеряной игры Daring Fighter для Android.
Трейлеp незавершенной игры Project Cronus
มุมมอง 2339 ปีที่แล้ว
Трейлеp незавершенной игры Project Cronus
Прикольно, в детстве играли в нее месяцами, казалась непроходимой. А тут 25 минут😅
13:00 На моей восьмибитке были такие джойстики, на которых нельзя одновременно нажать влево и вправо, так что косяк некритичный) но для компа актуально конечно
подтягивайте версию PIXI из туториала, 7.2.0. от греха подальше
Супе игра вышла - спасибо большое за этот урок !!!
Писать игру, без интерфейса настоящий ад. Лучше делай на Unity, и так же можно экспортировать в web версию.
В этом и смысл, чтобы писать чистым кодом, без движка и редактора. Этот проект учебный, а не для того чтобы его потом заливать в продакшн.
Прикольно когда-то Three.js изучал
на последнем PixiJS v8.0.0-rc.9 падает ошибка (typeError), на версии 7.2.0 все норманльно, а еще подскажите в чем разница между Development Build и Production Build на github pixiJS?
Привет, 8 версия пикси еще находится в разработке. Доступные билды выкладываются для бета-тестеров. По сравнению с 7 версией 8 содержит много брейкин-ченжей и не будет работать с моим кодом (хотя на самом деле не так уж и много, все можно быстро пофиксить если бы была документация) . Вот например что первое нужно изменить: 7 версия: const pixiApp = new Application(); document.body.appendChild(pixiApp.view); 8 версия: const pixiApp = new Application(); await pixiApp.init(); document.body.appendChild(pixiApp.canvas); По-правильному нужно дождаться официального релиза 8 версии и документации к ней. По поводу Development Build и Production Build - девелопмент билд это просто файлик с кодом пикси который можно самому открыть и посмотреть как там работает всё внутри (удобно для разработки), а продакшн билд это тоже самое только код пикси пропущен через обфускатор, для того чтобы грубо говоря занимать меньше места (этот билд соотвественно нужно использовать в продакшене, когда всё готово).
Awesome...
Кайф! Требую продолжения!
> battletodas.js
Классные видео очень познавательно. Если не сложно подскажите где берете картинки.
Спасибо. Да просто нагуглил. В фотошопе подрезал лишнее и готово)
Спасибо! Очень ждал новых видео
Спасибо за контент! ❤ Если не ошибаюсь, для бэкграунда можно было бы использовать PIXI.TilingSprite
Спасибо Вам, что находите время для видео по JS.
кто нибудь люди!!! сделайте пожалуйста урок как в играх правильно организовывать сцен-менеджер и стейт-менеджер (хотя можно взять редакс) урок прикольный)))
я не уверен, что есть единственно правильный подход. Можно реализовывать сцены и переходы совершенно по-разному. Я так понимаю, что ты хочешь сделать сцену с менюшкой игры, сцену с самой игрой и переход между ними? Если так то можно это легко сделать без левых библиотек)
@@rablv да, я про это, грубо говоря разные уровни + глобальное состояние между ними (очки, жизни и тд) никто про это не делает ролики( в основном про рендер то что пробовал делать я сам в итоге выливалось в конечные автоматы)
Потому что ты смотришь на задачу не с той стороны. Нет никаких частных случаев по типу «сделать переходы между уровнями», т.к. «переход между уровнями» и «переход между процессами кофеварки» не имеет никакой разницы. Для этого есть паттерн «стейт машина». Его берешь и реализуешь в том ключе в котором тебе нужно. В первую очередь надо учиться не конкретные задачи решать, а программировать
@@chikenmacnugget стейтмашина редакс и есть) когда писал свою у меня получился редакс почти один в один, да все они одинаковые у меня скорее проф залипон в сторону веба и это накладывает отпечаток по стейтам веба уроков море по стейтам в играх ничего нет только рендер и коллизии по глсл даже материал находится просто)
@@shure348 вопрос был: как в играх правильно организовывать сцен-менеджер и стейт-менеджер". Я даю ответ: "Паттерн стеймашина". Каким способом его реализовываться это другой вопрос. Как правильно его реализовывать. Зависит от задачи и планов. Какое мерило правильности? Оно работает и поддерживается...
спасибо что правку сделал для того что ыб подробнее объяснить про колизии
хороший код. лайк за приватные поля и стейт)
Спасибо большое за крутую серию! Спасибо за хорошее разъяснение, и большую мотивацию! Очень интересны новые идеи ;)
Четко
Красава! Очень качественный контент
У этого канала преступно мало подписчиков, срочно исправляем
это все прикольно, но во всех этих уроках не хватает совершенно другого объясни как сделать набор уровней, как запилить стейт менеджмент, управление сценами и тд
Что-нибудь придумаю
@@rablv я например сейчас для стейта использую redux) когда писал свой, то все равно в итоге получился redux)
Простенько, Лаконично и Познавательно... и как всегда Шикарно 😊. Спасибо ! ... осталось решить проблему "зажатого пробела", с зажатым пули льются сплошным потоком (но одноразово).
Спасибо. А кстати в тетрисе так и было, если держать палец на кнопке, то пули сплошным потоком летели)
Первый!
отличное видео, а что лучше использовать phaser или pixi js ?
Если хочется сделать полноценную браузерную игру, то лучше Файзер. Он позиционируется именно как игровой движок, а Пикси это фрэймворк для работы с графикой и его не только в играх можно использовать, но ещё и в создании сайтов.
@@rablv если хочешь сделать полноценный 2d платформер то лучше использовать юнити, согласны ? Или сейчас на js можно делать вполне себе достойные платформеры ?
@@DagestanShopда, лучше на юнити
Спасибо
Уникальный Контент! Иван Спасибо!
Готовлю новый проект, не пропустите 😉
Несколько раз сталкивался с тем, что всё правильно делаешь, а код не работает. Потом перепечатываешь заново и всё работает) Для меня пока всё это как волшебство какое-то)
до слез,блэт
Одна из лучших игр на nes, но мне больше нравится Super Contra, (старт с вертолета)
да, Super Contra тоже огонь, надо будет пройти)
В такую игру не стыдно и самому поиграть)
и не только в эту не стыдно) есть ещё продолжение)
Шикарно!
Спасибо!
Спасибо за урок.
Мужик, ты круче всех 👍
Спасибо. После контры предлагаю запилить battletoads double dragon :)
Новые проекты будут?
Да, будут
@@rablv ждём, сделайте ии 😁 хотя бы на уровне телеграм ботов 😁
Интересная практическая задачка, для новичков, вместо абстрактных книжных задач. Но есть вопросы, на сколько "правильным" в итоге получился код, то что работает эт гуд, но хочется понять где есть узкие места, что стоит переделать или улучшить, что можно оптимзировать, сделать так же какое то меню, сохранение и т.д.
Код получился соответствующим задаче видео - показать принципы, предложить варианты как можно сделать и т.д. Понятно что это не продакшн код, много где я забил на клин ап, где-то не унифицированы подходы к похожим вещам, много-копипасты, много мелких багов и т.д. Эти видео не для совсем новичков js, а для тех кто уже знает базовые вещи, может имеет какой-то опыт и хочет понять как примерно можно накидать платформер со стрельбой. И такой зритель уже вправе согласиться с подходами или же придумать свои и самостоятельно найти вариант как улучшить или оптимизировать. Из улучшений я тут вижу - исправить баги, поработать над неймингами, максимально избавиться от всех new, порефачить update, избавиться от копипасты, спрятать код с тонкой настройкой вьюх внутрь их самих, завести универсальную фабрику для вьюх, вынести стейт-машину в отдельный класс и придумать ей интрефейс.. короче простор для творчества)) Ну и меню и сохранения - конечно, нужно сделать, интересная задача, дерзайте))
@rablv не отменяет того факта, что ты круче всех 👍 Спасибо 🙂 Кстати если присобачить условия для PWA, то после установки на телефон оно прям неплохо играется, забываешь про браузер. Только расширения могут малину подпортить, надеюсь когда-нибудь дадут API, чтоб это пофиксить
неплохо , неплохо. как Считаешь - как посмотреть твои уроки - повторять и получить знания? Смотреть код и сразу повторять на втором экране? или же есть вариант поинтереснее ?
Честно говоря просто всё переписывать один в один - не лучший подход. Я бы так делал - сел и сам начал с нуля. Как только затык - посмотрел в видосах как оно реализовано тут и сделал также (или похоже, но по-своему). И потом дальше сам до следущего затыка и т.д. В таком варианте многое придётся переписывать, когда становится понятно что завернул куда-то не туда ("выстрелил себе в ногу"), но потом очень хорошо откладывается в голове как делать надо и как не стоит))
@@rablv а если ещё самому сложно? Может посмотреть видео пять минут и потом стараться повторить что делал автор эти пять минут?
@@dmaberlin можно так попробовать, наверно еще и память тренируется)) Но нужно еще именно понимать что делается. Может как-то играться с кодом. Типа что будет если попробовать так, а на так. Попробовать задать другой цвет, другие координаты и т.д.
Вот это человек постарался!))
Кайф! Вспоминается sega))
Посмотрел все видео, спасибо за контент, видео - супер!
И вам спасибо)
Здорово, спасибо за курс!
Пожалуйста)
В 2015 году я решил поучаствовать в девятом конкурсе любителей-игроделов Gamiron. Этот трейлер записывался в то время, чтобы подтвердить что разработка идёт. Не помню какие давались сроки на разработку, но то ли я не уложился, то ли решил просто забросить. В итоге игра осталась не доделанной, но тем не менее пройти её было можно от начала до конца (правда прохождение занимало всего 10 минут). Это была смесь tower defence и top-down-shooter типа Crimsonland. По сюжету мы играли за морпеха который эвакуировал с научной базы на далекой планете оставшийся в живых персонал. База подверглась нападению инопланетных жуков и наш герой вынужден был отстреливаться от них и защищать по периметру посадочную площадку в ожидании эвакуационного транспорта. Жуки нападали волнами как в таур-дефенсах и нужно было строить турели и минировать подходы чтобы защищаться от них, либо просто мочить их из старого доброго пистолета\автомата\дробовика\гранат. Так же в арсенале были "ловушки времени" - разработка местных ученых. Было 2 типа ловушек который покрывали небольшой периметр вокруг себя - замедляющие врагов и ускоряющие главного героя. Помимо героя жуки так же пытались съесть ученых, и их нужно было защищать. Если жук начинал кусать ученого, то тот мог в панике убежать за пределы карты и нужно было это не допустить. В конце прилетал транспорт и забирал выживших. Игра создавалась на флеше (AS 3.0 + Starling). Исходники с годами были утеряны и доделать её невозможно, но альфа-билд сохранился и в него можно играть.
В 2015 году я выложил в Google Play свою игру под названием Daring Fighter. К сожалению сейчас игра удалена из магазина, так как я давно забросил её обновление, а правила гугла требуют время от времени обновлять используемое SDK в игре. Это был bullet-hell-скролл-шутер, довольно сложный, с большим количеством врагов и пуль на экране. Планировалось добавлять новые уровни, контент и т.д. Но ничего в итоге так и не случилось. Игру скачали несколько тысяч раз. Не густо, но для меня это был крутой опыт в разработке под Андройд. Написана игра была на ActionScript 3.0 с использованием Starling и Adobe AIR. Исходники и ассеты игры со временем пропали. Я несколько раз пытался реанимировать игру или переписать с нуля, но потом Flash окончательно устарел и я забросил это дело. Из всего остался только этот трейлер который использовался в Google Play. Теперь это часть истории :)
Отличная серия уроков, даже больше похоже на полноценный гайд. (лайк) просьба лучше раскрыть тему Атласа :) спрайты в инэте найти можно, простенькие можно и создать, а вот раскладка по атласу, а главное расписать в .json тут проблэм :(( . если будет возможность - пожалуйста включи эту тему, для завершения полноценного гайда 😉 Please.
Спасибо) Вижу что тема интересна, значит сделаю)
Спасибо за ссылку на репозиторий! Как всегда жирный лайк!
Просим атлас!
отличная реплика!
😀