How Luna in the Tavern: Animated Was Made

Hi guys, Flamie here!

Play Luna in the Tavern: Animated: https://tavern.titdang.me

Wow, what a month. Working on animated Luna was very difficult, to be honest. To release on time, I had to work without days off for the last few months. You might think, what’s so hard about adding animations to a static game? How would that create an entire new layer of work? Don’t you just change static images to gifs? Nope, absolutely not!

The technical side consisted of three parts – first, the rendering. The very task of displaying video is non-trivial because the characters’ sprites must be “seamless”. If Luna’s angry in one frame, she shouldn’t be twitching or changing her pose when she smiles in the next frame. One animation must transition smoothly into another. I wanted to make the player feel as if it’s the real heroine sitting at the counter, right in front of him, drinking beer. It required strict technical alignment of frames to ensure the player doesn’t see any twitching or flickering during gameplay.

The second task was to optimize resource consumption. At some point, we realized we can’t ask the browser to cache (save into random access memory) too many animations. It made the browser use gigabytes of RAM. In professional programmer jargon, this is called a “memory leak”. I had to ask a friend who’s good at memory optimization to help me write a caching algorithm. Our tests showed that after optimization, the game consumed no more than 300 MB of RAM on average. It allows the game to work on mobile! 

And the third thing was smooth content loading. I had to practically rewrite the system from scratch. The thing is, when working on Luna in the Tavern, I was very concerned about not making players stare at too many loading screens or making them wait for several minutes while the game’s assets load. I’d say it’s one of my main technical priorities. I often see other games make players wait 5-10 minutes to fully load. I try to make sure that even with slow internet, Luna players don’t have to wait for more than 10 seconds. Solving this issue was quite difficult when it comes to animations, because the game loads video, which is 10 times bigger than images despite all the compression we use.

Phew! Well, what can I say – it wasn’t easy. I’m happy I managed to finish everything in time and that the players can finally enjoy the animations. Personally, I really like how much juicier our game looks after the remaster. It practically came to life. I hope you enjoy it too.

And thank you for your support, of course!

___

Привет, ребята, а теперь с вами Флейми!

Играть в Luna in the Tavern: Animated: https://tavern.titdang.me

Ух, ну и месяц. Честно сказать, работа над анимационной Луной далась нелегко. Чтобы сделать игру в срок, мне пришлось работать без выходных последние несколько месяцев. Казалось бы, что такого, добавить анимации в статичную игру? Разве должно это создавать новый пласт работы? Просто подмени статичную картинку на гифку? А вот и нет!

Поделюсь с вами секретами и сложностями разработки! 

Работа над технической частью состояла из трех частей - первая часть это работа над визуальным отображением. Сама задача отобразить видео нетривиальна потому, что спрайты персонажей должны отображаться “бесшовно”. Если Луна в одном кадре злится, она не должна в следующем кадре, при смене эмоции на улыбку, дергаться, или “менять позу”. Одна анимация должна плавно перетекать в другую. Мне хотелось создать у игрока ощущение, что настоящая героиня сидит прямо перед ним за барной стойкой и пьет пиво. Это потребовало жесткой технической подгонки кадров, чтобы игрок не видел “дерганий” или “мерцаний” в процессе игры.

Вторая задача состояла в том, чтобы оптимизировать потребление ресурсов. В какой-то момент стало понятно, что мы не можем попросить браузер закэшировать (то есть сохранить в оперативную память) слишком много анимаций. Это заставляло браузер потреблять гигабайты памяти. На профессиональном жаргоне программистов это называется “утечка памяти”. Мне пришлось обратиться за помощью к моему товарищу, который разбирается в таких оптимизациях, чтобы он помог мне написать алгоритм для кэширования игры. При наших тестах игра после оптимизаций в среднем потребляла не более 300 мб оперативной памяти. Это позволило игре работать на мобилках!

И третья вещь - это плавная подгрузка контента. Систему пришлось переработать чуть ли не с нуля. Дело в том что я, работая над Луной в Таверне, очень беспокоилась о том, чтобы игрокам не приходилось видеть много загрузочных экранов, или ждать по несколько минут, когда загрузятся все ассеты игры. Я бы сказала, что с технической точки зрения это один из моих основных приоритетов. Я часто вижу, как в других играх приходится ждать 5-10 минут, чтобы игра полностью загрузилась. В Луне я стараюсь делать так, чтобы даже на медленном интернете у игроков была возможность ждать не более 10 секунд. Решить эту задачу в случае с анимациями оказалось крайне сложно, потому что игра загружает не картинки, а видео, которые больше в 10 раз, несмотря на все сжатие, которое мы применяем.

Фух! Что и сказать, было непросто. Я рада, что успела все сделать в срок, и что игроки наконец-то смогут насладиться анимациями. Лично мне очень нравится, насколько сочнее выглядит наша игра после ремастера. Она прямо ожила. Я надеюсь, что и вы это оцените.

Ну и конечно, спасибо вам за вашу поддержку!