Корабли в нашей игре — это самое главное потому, что именно с ним должен отождествлять себя игрок. Кроме того большая часть врагов это тоже корабли. Да и вообще какая космическая игра без них :)Первые модели были разработаны ещё в прошлом году, когда мы занимались препродакшеном. И после непродолжительной доработки они стали выглядеть вполне прилично и радовать глаз редких тестеров.
Problems, officer?
Но в один прекрасный сентябрьский день стало очевидно, что когда на экране находится десяток кораблей, в глаза бросается их клонированность. Со стандартным кораблем сложнее себя ассоциировать и, следовательно, слабее связь игрока с игрой. Осознав проблему, мы начали обдумывать варианты их «разноображивания» или как принято говорить — кастомизации.На первом этапе мы выделили декоративные детали кораблей (между собой мы называем их декалями) и систематизировали их. Получилось, что на каждом корабле 6 различных декалей: по два на нос, корпус и корму корабля. В каждой паре есть основной элемент, он больше по размеру, и дополнительный.
Идея заключалась в том, чтобы позволить игроку при регистрации создать свой корабль, и чем больше у него будет при этом возможностей тем лучше. Очевидно, что несколько наборов декалек и возможность их перекрашивать, позволят создать уникальный корабль. А это в свою очередь повысит лояльность и в будущем позволит тюнинговать корабль не хуже спорткара.
Проблема выбора
Но всё оказалось не так просто. Первый вопрос был в выборе технологии, которая должна быть гибкой, создавать минимальную нагрузку на сервер и ни в коем случае не замедлять работу браузера клиента. Ввиду того, что современные браузеры ещё не достаточно производительны, последний пункт стал определяющим.Логично было обратиться к SVG. Оказалось, что он позволяет с помощью фильтров реколорировать картинки. Казалось бы — вот оно счастье, ан нет. Однострочные фильтры использовать нельзя, и для каждого корабля приходится создавать отдельный фильтр. Можно конечно создать их сотню и дать игрокам на выбор только эти цвета, но ведь это совсем не правильно.
Планом Б было использование канваса, задача не совсем простая, но вполне выполнимая. Ввиду отсутствия такого функционала в стандартном наборе действий нужно использовать низкоуровневые функции — обходить массив пикселей и применять к ним смещение hue, что весьма затратно.
Но планом Б мы так и не воспользовались в полной мере. Достаточно было представить, что вместо одной картинки корабля у нас будет летать 7 слоев, к которым будут применяться сложные алгоритмы перекрашивания. Стало ясно, что нужно переносить эту логику с клиента на сервер. Так и вышло.
Собрать корабль из набора декалек оказалось не сложно, причем скрипт не работает каждый раз при запросе картинки, а единожды создает нужный файл, который в последствии кэшируется и отдается через nginx.
Вырезано цензурой
Отдельного рассказа достойны все приключения по переводу различных цветовых пространств друг в друга, а так же их адаптация для различных библиотек. Ведь каждый горазд придумать собственный велосипед и градации saturation. Но мне очень не хочется переживать тот кошмар еще раз.План Б
Как я и сказал, вариант с реколорированием канваса мы все-таки использовали в регистрации. Каждый игрок при выборе корабля перебирает десятки декалей и цветов, поэтому постоянное их создание на сервере является не самым лучшим выбором. Интерфейс проходной, а тормоза и глюки реколоризации удалось элегантно спрятать под анимацией.Когда же дело дошло до создания монстров, мы решили вместо анимации использовать тот же фокус со сборкой. Теперь найти одинаковых роборазбойиков очень и очень трудно :)
Надеюсь, что совсем скоро Вы сможете создать свой собственный корабль и попасть в наш чудесный космический мир Дальности 7.
1253 просмотра
15 комментариев