Отличное средство скелетной анимации для Pixi.js

Вообще, скелетная анимация с инверсной кинематикой в разработке 3-мерных игр является чем-то само-собой разумеющимся. Для меня было абсолютной неожиданностью, что есть подобные удобные средства и для 2-мерного мира. Хотя, это и должно быть ожидаемо.

Механика игры Три в ряд

Одним и существенных моментов экономии бюджета игры про Плюха (про которую писал ранее) было то, что в ней планировалась мини-игра с механикой «Три в ряд». И эта механика была разработана мной задолго до старта работ по Плюху. Очень удачно получилось и то, что саму логику выделил в отдельный модуль и при создании мини-игры мне не пришлось ничего менять, лишь впоследствии добавил немного функциональности.

Интеграции Pixi.js и Matter.js

Я уже писал про завершение создания нами (Студия 42) браузерной казуальной игры про доблестную выхухоль Плюха. С процессом было связано много интересных особенностей, изысканий, решений о которых и постараюсь рассказать.

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

Сборка Boost под Windows и подключение к IDE

Boost – замечательная библиотека со множеством функциональности, которой так не хватает в стандартный либах C++. И, конечно же, при её сборке есть небольшие нюансы.

Мы завершили разработку браузерной игры «Красная книга: спаси выхухоль!»

Цель создания игры – сбор средств для спасения русской выхухоли от вымирания. Очень надеемся, что игра внесет свой вклад в достижение такой благородной цели.

В конце статьи – большое геймплейное видео.

Использование GitHub Pages

Если репозиторий вашего проекта хостится на GitHub, то для разворачивания своих статических веб-фронтендов очень удобно использовать механизм, предостявляемый GitHub.

Здесь рассмотрю вариант, когда вы хотите использовать свой поддомен и фронтенд у вас не просто файл, а его нужно собирать. В данном случае будем собирать Vite.

Точное взаимодействие с текстурой спрайта в Pixi.js – пакет Pixel Perfect Interactive

Во фреймверке Pixi.js из коробки есть только интерактивное взаимодействие со спрайтом по прямоугольнику самого спрайта AABB. Можно, конечно, определить зону взаимодействия фигурой из Shape, но иногда хочется, чтобы взаимодействие с контроллером (мышь, касание) зависело от альфа-канала самой текстуры.

Когда-то в забитой и забытой технологии Flash от Adobe такой механизм был встроен, поэтому его реализация может оказаться полезной. Наивное и быстрое решение сделал в пакете pixi-ppi.

Проблема обновления карт для 2GIS в Windows

Есть неприятный момент, связанный с установочными файлами *.msi. Когда установленный из такого файла софт требуется удалить, система требует указать местоположение в файловой системе. 2GIS при обновлении карт может потребовать эти файлы, но какая-нибудь программа очистки или вы сами ненароком могли их удалить.

В сети есть несколько решений. Но самый простой вижу в загрузке нужного файла и подсовывании деинсталлятору.

Скрипт для Photoshop печатающий координаты слоев в файл

Чтобы быстро получить координаты слоев файла Adobe Photoshop можно использовать скрипт. Сохраните его себе на диск. Откройте psd файл, выберите пунт меню File → Scripts → Browse.... Выберите файл скрипта и в файле ~/Downloads/layer-coordinates.txt можно посмотреть результат.

Мой Xonix на Яндекс Играх и подводные камни интеграции

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

Вариант разворачивания Openproject

Предположим, вам надо развернуть Openproject у себя на сервере, но доступным по секурному протоколу в Интернет. Есть тысяча и один способ это сделать. Есть множество вариантов требований бизнеса и окружения для этого. Во всех этих случаях инструкция будет чем-то отличаться. Поэтому сразу оговорюсь: этот способ очень близкий к тому, как развернуто у нас.

Предположим, ваш домен openproject.example.ru.

Решение проблемы отсутствия кнопки принятия риска для самопописанного сертификата при локальной разработке браузерной игры для Yandex Games

Чтобы разрабатывать браузерную игру для площадки Yandex Games локально надо подключить их SDK. А чтобы его себе не копировать локально, у Яндекса есть решение в виде их библиотеки @yandex-games/sdk-dev-proxy. Она создает сервер на безопасном соединении и проксирует вызовы. То есть, уточню. Вы запускаете свой сервер разработки игры например на http://localhost:8080 (здесь надо устанавливать именно localhost). Затем запускаете прокси для яндексового SDK:

Настройка Sublime Text

Есть прекрасное средство для разработки — текстовый редактор Sublime Text. Замечательно оно не только тем, что в нем удобно работать и сам по себе редактор очень легковесный, но еще и тем, что Sublime можно очень легко расширять. В этом поможет масса готовых плагинов и свой написать также не сложно, потому как плагины пишутся на языке Python.

Упрощенный пример следования камеры вдоль пути в Three.js

Официально для библиотеки Three.js есть примеры, с помощью которых можно реализовать подобную функциональность:

• Modifier / Curve
• Geometry / Extrude / Splines

Еще раз об Apache, PHP, MySQL на Windows

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

Данный способ не является единственным, а лишь "один из" и какие-то указанные здесь значения могут не работать, потому что существует огромное число вариантов установки/настройки.

Тестирование алгоритма поиска пути A* на Javascript

Еще один кусочек в паззл переделки прототипа игры, когда-то сделанного под Flash. На этот раз – адаптация алгоритма поиска пути A* под Coffeescript. Можно поэкспериментировать с ним здесь.

Редактор сеток игровых карт

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

Система самонаведения ракет

Как-то, году этак в 11-м, делал на Flash простенькую систему самонаведения ракет. Конечно для игры, а вы что подумали? 😀

Переписал её на Javascript с использованием рендер-фреймверка pixi.js. Как оказалось, в этом фреймверке система координат повернута на π и отражена по оси абсцисс, поэтому векторные вычисления немного отличаются от вычислений для системы координат под Flash. Пришлось создать специальный класс вектора под pixi.js.

Один из способов синхронизации KeePass

У тех, кто еще только планирует пользоваться KeePass для хранения паролей, часто возникает вопрос: можно ли сделать, чтобы была синхронизация между различными устройствами. В общем, ответ «да».

Sciter – фреймверк для создания десктопного GUI максимально бытро

После небольшого исследования на предмет того как быстро создавать GUI для десктопа на C++ на сегодняшний день, помимо давно зарекомендовавших себя решений, таких как Qt или wxWidgets, набрел на довольно интересный фреймверк Sciter. В его подходе интересно то, что виджеты создаются веб-технологиями (HTML, CSS, Javascript) и при этом есть возможность вызывать функции, написанные на C++, собранные в бинарнике. Размер же собранного дистрибутива меньше 10 мегабайт! А в распоряжении программиста остается почти вся функциональность WebView. Всяким Электронам такое не светит в принципе. Поэтому решил попробовать собрать.