Как много раз я видел разработчиков, которые переделывают проект с нуля. Да и сам я грешил этим по молодости, переделывал и большие и маленькие проекты. Это было и по своей воле и по воле геймдизайнеров и по воле глав компаний. Особенно тяжело видеть как переделывается крупный проект. Сначала на дофамине, тебе кажется, что в этот раз, наконец-то ты напишешь все правильно и по уму. Но очень быстро все превращается в пытку и мучения, и ты уже мечтаешь восстановить хотя бы то, что было. А еще твои коллеги находятся в подвешенном состоянии, ожидая новый переписанный красивый проект.

Почему так происходит? Да все просто на самом деле. Код любого проекта это запрограммированная логика. Она гарантирует нам определенное поведение программы. Логика эта по сути гигантский граф состояний и переходов между ними. Переходов(связей) может быть очень много, где то они явны и понятны, а где то неявны и скрыты. Собственно чем больше логики, тем больше граф и больше связей и соответственно больше сложность. И переписывая проект, ты никуда не уберешь эту сложность. Держать всю логику крупного проекта в голове, практически невозможно. Даже в средних и крупных проектах количество состояний и связей настолько велико, что комбинаторика и сложность улетает буквально в бесконечность. Отсюда и баги, они по сути необработанные переходы из одного состояния в другое (неопределенное). Они обычно закрываются уродскими костылями. Особенно хочу отметить асинхронное программирование, это отдельный ад.

Как тогда быть?

Очевидно, что переписывать все с нуля нужно только в крайних случаях, например в устаревании или отключении технологий, как было например с flash (все переписывалось на js/ts/haxe). В остальных случаях лучше делать это постепенно, шаг за шагом, держа программу всегда работоспособной. Тут очень повезет если заранее была выбрана правильная архитектура и код разбит на модули. Если это не так, то первым шагом, можно постепенно менять архитектуру, разбивать на модули и упрощать интерфейсы. Да это больно, сложно и медленно, но возможно. Далее уже проще - постепенно переписывать модули не меняя интерфейс. И так шаг за шагом можно все привести в желаемый вид.

Удачного вам рефакторинга друзья! )

С раннего детства меня всегда интересовали компьютерные игры. Примерно в 7 лет у меня появился первый компьютер ZX Spectrum. Это была такая толстая клавиатура-компьютер, которую просто подключаешь к ЭЛТ телевизору. А в качестве внешних накопителей использовались магнитные кассеты. Устройством для загрузки программ с кассет служил обычный магнитофон. Ох какие же эмоции были когда после пятиминутного пиуууухшхщщххсссхфххфиииииффххшшшш наконец то загрузилась с магнитофона любимая игра! А если не загрузилась эмоции были еще сильнее ))) Мы с друзьями могли играть бесконечно в эти игры выжигая телевизоры и глаза.

Однажды меня привлекли некие надписи на кнопках клавиатуры - break, goto, circle. Я понятия не имел, что это такое. Это были нечто иное как ключевые слова языка программирования Sinclair BASIC. Мой друг-сосед был постарше, который уже немного разбирался в этом, показал мне какие то базовые операции. И теперь меня интересовали не только игры - я рисовал круги и замысловатые фигуры с помощью этих команд. Я думаю, что это стало отправной точкой для меня как программиста. С тех пор играя в любую игру я задавался вопросами как она сделана. Я начал замечать разные подходы в графике и паттерны в геймплее. Я рисовал по точкам в тетрадке в клетку разных персонажей, уровни для игр и даже набрасывал какой то код. Чуть позже сосед проапгрейдил свой спектрум до 128к, а так же обзавелся дисководом. И показал мне редактор графики. Я мог залипать часами рисуя персонажей и их покадровые анимации. Особенно было интересно рисовать 3д персонажей попиксельно. Чуть позже у меня появилась Dendy и я залипал в нее. Я играл очень очень много формируя свою насмотренность. Потом у одноклассника появился PC и мы играли у него. Помню когда увидел впервые GTA2 я просто офигел! В общем везде где были компьютерные игры - Серёга в них играл.

Где то в 7-8 классе увидел у соседа книгу по компьютерной графике. Где были практически все основные алгоритмы, матрицы и т.д. Я прочитал ее от корки до корки несколько раз. Выписывал формулы и делал расчеты в тетрадках, а так же придумывал и выводил свои формулы. Тогда резко подрос интерес к математике и геометрии. Учеба (мучеба) меня никогда не интересовала. В школу я ходил исключительно ради друзей. Но вот математику, геометрию и физику очень любил. Помню были моменты когда я выводил гигантские формулы на пол тетрадки по расчету косинуса, которые выдавали значения с ужасным качеством ))). Но было очень интересно!

Мы жили не очень богато и первый PC появился у меня только на первом курсе универа. Поступил я тогда на инженера-механика, хотя всегда хотел на ПОВТ. Тогда я познакомился с такими играми как Max Payne и GTA3, навсегда ставшими моими любимыми играми. Могу играть в них часами даже сейчас. В последствие все новые игры не вызывают у меня интерес. В них как будто пропала душа. Есть красивая оболочка, но нет души. Я не вижу в них ничего нового и прорывного, ну кроме графики. Но не графика делает игру интересной, а геймплей. Если тебе не интересно играть, то супер-пупер реалистичная графика не поможет. Возможно моя насмотренность достигла какого то пика. Либо я стал больше программистом и меня интересует создание, а не потребление.

Так же меня интересовала мультипликация и компьютерная анимация. Много рисовал анимации в блокнотах и тетрадках (как тут). Было очень интересно, и так я познакомился с Macromedia Flash MX 6.0. Много анимировал всякого, и познакомился с ActionScript 2. Довольно много писал на нем, общался и изучал туториалы на flasher.ru. И нашел свою первую работу в качестве flash-developer в стартапе.

В общем игры привили мне интерес к программированию, и теперь я делаю игры! )

Включил windows после долгого перерыва. Сделал все работы. Выключаю и на тебе - обновление! 🤬🤣😆

Посмотрев несколько игр для маленьких (и не только) детей на Android я знатно приофигел от того как и с какой частотой там показывается реклама. Она появляется часто, внезапно и ее невозможно быстро закрыть - нужно просмотреть чуть ли не 3-4 экрана и только после этого появляется неудобная кнопка закрыть. Адская штука! Мало того в большинстве игр эту рекламу невозможно отключить никаким образом - просто отсутствует такая опция.

Дочка очень любить играть в игры, не смотря на ее возраст (2.5 года). Всегда приходит ко мне на работу (то есть за мой стол - так как работаю то я дома). И внимательно наблюдает что я делаю. Очень любит играть в супер марио, но так же и в игры на планшете. Собственно для нее я и пытался найти, что то вменяемое. В итоге я принял решение написать ее любимую игру с нуля. А раз у меня есть свой блог то логично сюда запостить весь процесс.

В качестве платформы я выбрал обычный веб браузер. На работе я использую Rust и определенные подходы. Стало интересно как проявят эти подходы в таком личном пет проекте на другом языке программирования. В качестве языка мы будем использовать TypeScript, это типизированный вариант JavaScript. Так же мы будем использовать технологию PWA, которая позволяет устанавливать веб приложение как нативное оффлайн приложение на Android и iOS. В общем будет интересно!

Как известно любая разработка начинается с установки ПО и настройки среды. По своему опыту могу сказать, что это нетривиальная и бывает довольно скучная задача. Так как у всех нас разные ОС, их версии и разный набор уже установленного ПО. Но без этой части никуда.

ВКонтакте • YouTube

00:00 Вступление
01:19 Смотрим "игру"
01:57 Мнение об "игре"
03:04 Обзор технологий веб браузера
04:54 Механика нашей игры
05:58 План
07:09 Установка NodeJS
08:38 Установка VS Code
08:50 Создание репозитория на GitHub
09:52 Настраиваем проект в VS Code
11:35 Устанавливаем TypeScript в проекте
15:56 Добавляем скрипты для билда
17:39 Добавляем index.html
21:54 Запускаем index.html в браузере
23:46 Подключаем JavaScript в html
24:26 Заливаем на GitHub
25:41 Паблишим на GitHub Pages
27:27 Заключение

Код посмотреть тут

Открыть результат можно здесь

Оглавление
1. Настраиваем проект (мы тут)
2. Добавляем canvas
3. Масштабирование игры
4. Добавляем интерактивность

Всем привет!

Продолжаем делать игру для детей. В предыдущем видео мы настраивали проект. В этом видео мы затронем bundling (объединение и сжатие JS в бандл). А так же добавим и настроим канвас (HTMLCanvas). Канвас на самом деле прикольная штука! По сути это картинка - набор пикселей. И с помощью простых команд можно легко рисовать разные 2d фигуры. В общем приятного просмотра!

ВКонтакте • YouTube

00:00 Вступление
01:40 Настраиваем esbuild
08:35 Сжимаем JS бандл
09:38 Объясняю как дебажить
11:29 Знакомимся с HTMLCanvas
12:38 Добавляем canvas в наш html
12:25 Рассказываю про Development Tools
14:26 Убираем бордер вокруг canvas
15:12 Расширяем canvas во весь экран
22:56 Рисуем красный прямоугольник
25:57 Проблема при ресайзе
27:14 Добавляем рисование на каждый кадр
28:56 Добавляем простую анимацию
30:38 Нужно чистить экран
32:54 Столкновение с краем экрана
37:09 Заключение

Код посмотреть тут

Результат тут

Оглавление
1. Настраиваем проект
2. Добавляем canvas (мы тут)
3. Масштабирование игры
4. Добавляем интерактивность

Всем привет!

Продолжаем делать игру для детей. В предыдущем видео мы разбирались как добавить canvas и рисовать на нем. В этом видео мы затронем работу с матрицами трансформации. Они нам потребуются, что бы масштабировать всю игру под конкретный экран. В дальнейшем мы будем использовать матрицы для трансформации объектов. Вообще это прямо база геймдева, поэтому я решил не пройти мимо, а записать супер краткий курс на эту тему.

ВКонтакте • YouTube

00:00 Рисуем прямоугольники
03:40 Смотрим результат
04:25 Подбираем размер прямоугольников
05:09 Располагаем их процедурно
06:52 Смещаем прямоугольники в центр
10:14 Рассказываю про проблему разных экранов
12:05 Краткий курс векторной математики
29:12 Трансфомируем канвас с помощью матрицы
31:21 Создаем виртуальный размер игры
37:26 Рисуем игровые объекты
46:04 Подводим итоги

Код посмотреть тут

Результат тут

Оглавление
1. Настраиваем проект
2. Добавляем canvas
3. Масштабирование игры (мы здесь)
4. Добавляем интерактивность

Всем привет!

В этом видео добавляем интерактивность с помощью событий mouse и touches. Здесь мы затронем масштабирование координат мыши и тача. А так же логику попадания точки в прямоугольник. Ну и собственно логику таскания прямоугольника.

ВКонтакте • YouTube

00:00 Добавляем виртуальный поинтер
01:17 Добавляем mouse ивенты
03:23 Рисуем поинтер для проверки
07:17 Делаем наведение на прямоугольники
10:42 Добавляем инициализацию уровня
21:11 Делаем таскание прямоугольника
27:47 Добавляем touch ивенты
29:09 Проверяем на Android
29:22 Заключение

Код посмотреть тут

Результат тут

Оглавление
1. Настраиваем проект
2. Добавляем canvas
3. Масштабирование игры
4. Добавляем интерактивность (мы здесь)

Сделал вот кота для js13k )

Смотрю много рефов и пиксель арта всякого. Пока идея в сторону бродилки-головломки по дому и окрестностям.

Так же засетапил проект. Из технологий: npm, typescript, esbuild, canvas, sfxr, advzip. Пока что зип занимает 2252 байт из 13312 байт (16.92%).

На эти выходные еду на мероприятие года - Сборку №4. Организует его мой друг и коллега Антон Волков. Это место и время где собираются супер крутые мастера своего дела. Мы много общаемся, обмениваемся опытом, заводим новых друзей и играем в различные игры. Интересно, что приготовят для нас организаторы в этот раз. Я уже был на Сборке №2 и Сборке №3. Это было просто супер! Как будто на сутки ты попадаешь в другой мир. Всегда жду эту тусовку больше чем Новый Год.

P.S. На фотке готовлю сюрприз для друга. 😜 Вспомнил тут черчение, геометрию и что такое циркуль. 🤣🤣🤣

Ребята что то интересное придумали ) Уже пакую сумку и собираюсь выезжать )))

И вот совсем скоро случится главное ежегодное мероприятие нашего клуба — Сборка! Гости уже собираются в Перми, а на Базе кипят последние приготовления. Стёпа подогнал немного инсайда, как оно всё проходит и что задумали в этом году — думаю, немного спойлеров не нарушит игрового экспириенса. Предыдущие видео с обсуждениями тут и вот тут.

Недавно мы размышляли с друзьями на тему того, что сегодняшняя культура слишком заморочена на цели и результаты, а при этом самое прекрасное — процесс — совершенно не важен. В соцсетях, на конференциях, да и просто в реале люди постоянно стремятся удивить окружающих какими-то своими достижениями (на самом деле они пытаются доказать своему ДД, что они нормально-супергуд). В итоге все рвут жопу, пытаясь выпрыгнуть из толпы хотя бы на пару секунд и вякнуть "шмари я шмог!", чтобы тут же быть затоптанными следующими претендентами на микрофон.

Любая соцсеть — ярмарка тщеславия. Любая конференция — выставка достижений.

Так вот Сборка — это анти-конференция. Как и настоящая Игра — она не имеет прикладного смысла. Мастера с разных городов и стран собираются без бейджей и понтов, чтобы насладиться процессом и настоящим живым общением. Как в детстве: совершенно не важно, пойти прыгать с гаражей или играть в банки-палки, главное — с друзьями!