Фронтенд и браузерные игры долгое время ассоциировались исключительно с JavaScript - этот язык казался единственным билетом в мир веба. Если вы любите Ruby за его элегантность и лаконичность, то наверняка испытывали легкую грусть, когда для реализации браузерной идеи приходилось переключаться на JS, оставляя привычный синтаксис позади.
Установка среды разработки за 60 секунд
Конечно, когда речь идет о серьезном gamedev, на ум сразу приходят Unity или Godot. Это мощные инструменты, но у них есть своя цена: тяжеловесный экспорт, долгая загрузка и избыточность для простых 2D-проектов.
А что, если бросить вызов привычному подходу и собрать игру на Ruby + Phaser?
Для этого нам не нужно скачивать тяжеловесные фреймворки. Все, что нам понадобится - VSCode и браузер. Мы просто подключим нужные библиотеки через CDN и сразу перейдем к делу.
Тот самый «Hello World» на Ruby через WebAssembly
Для начала создадим минимальный каркас, чтобы убедится что все настроено правильно. Здесь мы подключим интерпретатор Ruby и напишем свой первый скрипт.
Давайте создадим каталог, где будет лежать наш код и откроем его в VSCode. В данном каталоге, создадим файл index.html и поместим в него следующий код:
Ссылка на CDN интерпретатора Ruby:
https://cdn.jsdelivr.net/npm/@ruby/4.0-wasm-wasi@2.8.1/dist/browser.script.iife.js
Если вы просто дважды кликните по файлу index.html в проводнике, он послушно откроется в браузере. Но не спешите радоваться — загляните в DevTools (F12). Скорее всего, вместо приветствия вы увидите «красное море» из ошибок безопасности CORS.
Это браузер намекает: "Друг, я не буду запускать бинарный WebAssembly прямо с твоего диска!".
Для запуска нам необходимо установить расширение в VSCode, которое называется Live Server. Установим и запустим его в папке нашего проекта.
Как только мы запускаем наш Live Server, картинка меняется магическим образом. В консоли, среди привычного технического шума, всплывает: "Привет из Ruby Wasm!".
Это исторический момент: мы только что заставили браузер заговорить на языке Ruby, обойдя стандартные ограничения JavaScript.
Это был первый шаг. В следующих частях мы перейдем к «тяжелой артиллерии»: подключим Phaser, создадим игровое поле и научимся управлять объектами, используя мощь Ruby-объектов.
Это цикл постов по разработке полноценной игры на Ruby Wasm + Phaser. Подпишитесь, чтобы не пропустить продолжение и вместе со мной пройти путь от пустой страницы до готового геймплея! 🚀