Кирилл Шабордин, Head of R&D в Ciliz :: W4, рассказывает, зачем писать игры для социальных сетей, почему C++ и почему ваш знакомый веб-дизайнер не справится с этой простой задачей.

1. WEB, ИГРЫ, C++
ТЕМНАЯ МАГИЯ
KIRILL A. SHABORDIN , CILIZ::W4

2. ПРЕДУВЕДОМЛЕНИЕ
В связи с нравственным возрождением нашего общества в докладе по мере возможности
используется великий, могучий, правдивый и свободный русский язык, но автору все
равно удастся сказать правду о самом главном.
Все совпадения - случайны, а выводы -субъективны.
В докладе используется цветовая дифференциация слайдов :
● зеленый - информация для менеджеров и гуманитариев
● желтый - факты, цифры, утверждения
● красный - подробности для технарей и копающих чуть глубже

3. Кто ТЫ, ПУТНИК?
❖ Я хочу делать playable ads и интересуюсь разными технологиями
❖ Я - фронтендер, мне интересно, при чем тут C++
❖ Я - С++ разработчик и мне интересно, при чем тут веб
❖ Я - веб-студия, хочу заняться производством игр
❖ Я - человек индустрии, интересуюсь всем, до чего дотянусь
❖ Шел мимо, присел отдохнуть

4. СПОЙЛЕР: ОЦЕНОЧНОЕ СУЖДЕНИЕ №1
ГОРАЗДО ПРОЩЕ ДАТЬ ВОЗМОЖНОСТЬ ИГРОВОМУ РАЗРАБОТЧИКУ СОБИРАТЬ ИГРУ В
НОВУЮ ПЛАТФОРМУ (В ДАННОМ СЛУЧАЕ - В БРАУЗЕР), ЧЕМ НАУЧИТЬ ВЕБ
РАЗРАБОТЧИКА ДЕЛАТЬ ИГРЫ.
ГОРАЗДО ПРОЩЕ ДАТЬ ВОЗМОЖНОСТЬ ИГРОВОМУ РАЗРАБОТЧИКУ РАБОТАТЬ С
ЗНАКОМЫМ СТЕКОМ (В ДАННОМ СЛУЧАЕ - С С++), ЧЕМ ПЕРЕСАДИТЬ НА НОВЫЙ,
НЕПРИВЫЧНЫЙ .

5. ЧТО БЫВАЕТ В БРАУЗЕРЕ?
❖ Реклама, в которую можно играть - playable ADS (CPA/CTR)
❖ Игры для социальных сетей
❖ Игрофикация всего, что уже есть
❖ Витающие в воздухе разнообразные ‘TikTok for Games’ (Муа-ха-ха)
❖ Веб-компаньоны для игр на других платформах
❖ Графически насыщенные веб-приложения

6. МАКСИМАЛЬНО ВАЖНЫЙ СЛАЙД
СЛЕДИМ ЗА РУКАМИ
ЕСЛИ ВЫ ДОСТИГАЕТЕ НУЖНОГО РЕЗУЛЬТАТА ТЕМИ СРЕДСТВАМИ, КОТОРЫМИ ВЛАДЕЕТЕ,
ТО НИЧЕГО МЕНЯТЬ НЕ НУЖНО. ЕСЛИ ВАШИ ТЕХНОЛОГИИ ПОЗВОЛЯЮТ ВАМ ДЕЛАТЬ ТО,
ЧТО НУЖНО, ВОВРЕМЯ И С НЕОБХОДИМЫМ УРОВНЕМ КАЧЕСТВА - НЕ МЕНЯЙТЕ НИЧЕГО,
ВЫ - СЧАСТЛИВЧИК, У ВАС ВСЕ ХОРОШО.
ЕСЛИ ЖЕ ТО, ЧТО ВЫ ДЕЛАЕТЕ В ОБЛАСТИ ВЕБ-ИГР НЕ ПОЛУЧАЕТСЯ, ПОЛУЧАЕТСЯ
ДОРОГО ИЛИ МЕДЛЕННО - ДАВАЙТЕ ПОГОВОРИМ

7. ПОЧЕМУ БУДЕМ ГОВОРИТЬ В ОСНОВНОМ ПРО PLAYABLE ADS?
В случае, если нет ограничений платформы все так и происходит - вы берете знакомый
программисту стек, к примеру Unity3D и просто считаете браузер еще одной платформой.
На этом пути вас ждут ямы, болота и прозрения, конечно
Но так или иначе вы работаете в естественной для себя среде, разве что окружающий мир
становится более жесток , чем обычно, вы начинаете ненавидеть браузер, но постепенно
проходите все пять стадий принятия и издаете продукт.
Наступает. Счастливый. Конец.

8. ЧУДЕСНЫЙ МИР ЗАПРЕТОВ: МЕСТО, ГДЕ UNITY НЕ СРАБОТАЕТ
❖ Размер билда не должен быть более 1 - 2 Mb в зависимости от сети
❖ Вы должны быть интегрированы с сервисами сети, почти всегда надмозговым способом
❖ Все ресурсы вам будет поставлять заказчик, не признающий компромиссов
❖ Вы не должны использовать web-workers
❖ Вы должны упаковать все в один html, который пройдет валидацию сети
❖ Но как именно работает валидатор вы будете узнавать реверс-инжинирингом
❖ И все это - в стихах, то есть по возможности в 3D и с современной картинкой
❖ В идеале и геймплей и картинка должны быть не хуже, чем в рекламируемой игре

9. ТЕХНОЛОГИИ
❖ Классика : html5 / css / javascript (typescript)
❖ ‘ish : классика + сахар
❖ JS движки : Play Canvas, pixi.js, three.js …
❖ Движки общего назначения, умеющие в WASM - Unity3D, GameMaker, GDevelop ...
❖ WASM-based движки и фреймворки - W4, Nyan-Kit …

10. ОТВЕТ №1, МЕНЕДЖЕРСКИЙ : ХОЧУ ДЕЛАТЬ PLAYABLE
❖ Нанять C++ программиста, можно студента, сложность - средняя
❖ Взять W4 или Nyan-Kit вместе с онбордингом, сложность - нулевая
❖ Набрать заказов, сложность - максимальная
❖ Начать делать
Плюсы - time to market, низкий порог вхождения в бизнес с точки зрения технологий.
Минусы - это бизнес, вам никто не обещал, что заказы будут :)

11. ОТВЕТ №2, ФРОНТЕНДЕРСКИЙ : ЗАЧЕМ МНЕ C++?
НЕЗАЧЕМ. НИКАКИХ БЕНЕФИТОВ ОН ВАМ НЕ ПРИНЕСЕТ, ЗНАНИЯ НЕ БЫВАЮТ ЛИШНИМИ,
НО ЭТО КАК РАЗ ЛИШНЕЕ ЗНАНИЕ. У ВАС ЕСТЬ ЦЕЛЫЙ ВАГОН УДОБНЫХ И РАБОТАЮЩИХ
ТЕХНОЛОГИЙ, НЕ СТОИТ УВЕЛИЧИВАТЬ ЭНТРОПИЮ МИРА БЕЗ ЛИШНЕЙ НА ТО ПРИЧИНЫ.
ЕДИНСТВЕННЫЙ ВАРИАНТ - У ВАС ЕСТЬ НУЖНАЯ ВАМ БИБЛИОТЕКА, К СОЖАЛЕНИЮ
ДОСТУПНАЯ ТОЛЬКО НА С ИЛИ С++. ВОЗЬМИТЕ EMSCRIPTEN, ПРОЧИТАЙТЕ
ДОКУМЕНТАЦИЮ И АККУРАТНО ЭТУ ДОКУМЕНТАЦИЮ ИСПОЛЬЗУЙТЕ.

12. ОТВЕТ №3, ПРОГРАММЕРСКИЙ:
ЗДРАВСТВУЙТЕ, МЕНЯ ЗОВУТ ИГНАТ, Я ПРОГРАММИСТ. КАК Я МОГУ НАПИСАТЬ
АДМИНКУ К МОИМ СЕРВИСАМ НЕ ПОГРУЖАЯСЬ В ЧУДЕСНЫЙ МИР ФРОНТЕНДА,
ИЛИ ХОТЯ БЫ ПОГРУЗИВШИСЬ ДО ПОЯСА, А НЕ ПО ГОРЛО?
ВОЗЬМИТЕ EMSCRIPTEN, ПРОЧИТАЙТЕ ДОКУМЕНТАЦИЮ И АККУРАТНО ЭТУ
ДОКУМЕНТАЦИЮ ИСПОЛЬЗУЙТЕ. ТАМ ВСЕ ПРЕДЕЛЬНО ПОНЯТНО НАПИСАНО. QT ДАВНО
ПОРТИРОВАН, ТАК ЖЕ, КАК И SMFL К ПРИМЕРУ (А, ЗНАЧИТ И IMGUI). ЕСЛИ ЖЕ ВЫ ИЩИТЕ
ИГРОВОЙ ДВИЖОК, ПОСМОТРИТЕ В СТОРОНУ NYAN-KIT, ОН ДЛЯ ЭКСПЕРИМЕНТАЛЬНЫХ
ЦЕЛЕЙ БЕСПЛАТЕН. НЕ ВСЕ ТАК СТРАШНО, ИГНАТ, ГОРЛО УЦЕЛЕЕТ.

13. НА ВСЯКИЙ СЛУЧАЙ №1 - ФРОНТ и ТЫЛ
❖ Фронт - код, который выполняется у пользователя, в рамках его устройства
❖ Тыл, бэкенд, серверсайд и все такое - код, который выполняется у вас на сервере
❖ То же самое и с данными
❖ Сервер - это какой-то компьютер, кластер, который обслуживаете и оплачиваете ВЫ
❖ Устройство пользователя - это его компьютер, телефон, браузер, консоль
❖ Чем отличаются код и данные, можно спросить у Фон-Неймана

14. ФАКТ №1 - ПОЧЕМУ НЕВАЖНО, ЧТО У ВАС В БЕКЕНДЕ?
Потому, что на выбор технологий для backend то, как у вас реализован фронт не влияет
НИКАК

15. НА ВСЯКИЙ СЛУЧАЙ №3 - ЗАЧЕМ НУЖНА ОПЕРАЦИОННАЯ СИСТЕМА
❖ Ваш код должен не только считать, сколько будет 2+2 но и куда то выводить результаты
❖ Если у вас есть что-то, что реализует POSIX, то вы можете использовать компилятор C/C++
❖ В нашем случае операционная система - это браузер, его API - не POSIX
❖ Единственный язык нашей OC - это javascript
❖ Кто то должен реализовать нужные вызовы и скомпилировать GLib, чтобы все работало
❖ Это делает emscripten, это можете сделать вы сами
❖ Как только у вас есть GLib, вы можете скомпилировать и запустить любой C++ код
❖ Радуга отменяется, в процессе возникнем масса подводных камней

16. НА ВСЯКИЙ СЛУЧАЙ №2 - WASM
● LLVM-like IR + Portable AST
● Компилируется на стороне клиента
● Статически линкуется
● Это не asm.js и не PNaCl
int foo(int a) { return a * 42;}
(module
(table 0 anyfunc)
(memory $0 1)
(export "memory" (memory $0))
(export "foo" (func $foo))
(func $foo (; 0 ;) (param $0 i32)
(result i32)
(i32.mul
(get_local $0)
(i32.const 42)
)
)
)
var code = new Ut8Array(
[0,97,115,109,1,0,0,0,1,134,128,128,128,0,1,96,1,127,1,127,3,130,12
8,128,128,0,1,0,4,132,128,128,128,0,1,112,0,0,5,131,128,128,128,0,1
,0,1,6,129,128,128,128,0,0,7,144,128,128,128,0,2,6,109,101,109,111,
114,121,2,0,3,102,111,111,0,0,10,141,128,128,128,0,1,135,128,128,12
8,0,0,32,0,65,42,108,11]);
var module = new WebAssembly.Module(code);
var instance = new WebAssembly.Instance(module, []);
console.log(instance.exports.foo(42));

17. ПОДРОБНОСТИ, - WASM, УЗКИЕ МЕСТА
❖ Производительность, неожиданные оверхеды
❖ Нереализованные (пока) никем <thread>
❖ SIMD и “соображения безопасности”
❖ Оверхеды на биндинг
❖ Не реализованы вызовы browser API в VM (единственное, что будет вас выбешивать)
❖ Время на компиляцию из IR и кривое кеширование
❖ Приколы с nullptr, накладные расходы на вызовы виртуальных функций etc
❖ В JS нет колбека на вызов сборщика мусора
❖ Emscripten, либо много времени на свою реализацию “posix” слоя

18. С++ vs JS , ПАРАД ЗАБЛУЖДЕНИЙ, ЛЮДИ
❖ С++ программиста сложно нанять, JS программиста нанять просто
❖ С++ программиста дорого нанять, JS программиста нанять дешево
❖ С++ сложный язык, студенты абсолютно не готовы к работе, JS знают все
❖ Мы уже умеем делать сайты, игры - это примерно о том же (о, да, вы не поверите)
❖ JS разработчиков очень много, делать игры достаточно просто, выбор вариантов больше
❖ Готовых решений для C++ гораздо меньше, это технологический замок
❖ В случае с JS я смогу нанять на проект другого разработчика в случае чего и он просто
продолжит то, что начато (муа-ха-ха)

19. ФАКТ №2 - ГОЛЫЕ ЦИФРЫ
● GitHub “Game Engine”
○ C++ 12528
○ JS 4665
● GitHub “Game”
○ JS 457560
○ C++ 110578
● hh “Gamedev” медиана
○ C++ 70-150 руб (188)
○ JS 55-150 руб (127)
● ВУЗы (программирование)
○ C++ 100%
○ JS 23%
● Stack Overflow tech
○ C++ 24.31%
○ JS 64.96%
○ HTML/CSS 63.1%

20. И СНОВА: ОЦЕНОЧНОЕ СУЖДЕНИЕ №1
ГОРАЗДО ПРОЩЕ ДАТЬ ВОЗМОЖНОСТЬ ИГРОВОМУ РАЗРАБОТЧИКУ СОБИРАТЬ ИГРУ В
НОВУЮ ПЛАТФОРМУ (В ДАННОМ СЛУЧАЕ - В БРАУЗЕР), ЧЕМ НАУЧИТЬ ВЕБ
РАЗРАБОТЧИКА ДЕЛАТЬ ИГРЫ.
ГОРАЗДО ПРОЩЕ ДАТЬ ВОЗМОЖНОСТЬ ИГРОВОМУ РАЗРАБОТЧИКУ РАБОТАТЬ С
ЗНАКОМЫМ СТЕКОМ (В ДАННОМ СЛУЧАЕ - С С++), ЧЕМ ПЕРЕСАДИТЬ НА НОВЫЙ,
НЕПРИВЫЧНЫЙ .

21. ГЛАВНОЕ БЛЮДО ВЕЧЕРА
НАДЕЮСЬ, ЧТО ЕСТЬ ВОПРОСЫ.