Эта история о том, как я подошел к задаче устройства оригинального конкурса Вконтакте с ноткой безумного фанатизма.

Для начала, попробуйте сами (только не с мобильного устройства) и оцените масштаб работы: попробовать. Там даже прикручено игровое обучение. Ниже я постарался на своём примере дать последовательность действий и отразил основные нюансы создания квеста.

Это далеко не последняя моя работа на вики-разметке, но уж точно самая масштабная. У проекта не было бюджета на дизайн и верстку, на счету была каждая копейка, всё концентрировалось в рекламном бюджете. У меня была записная книжка, коленка и много идей. Это был жаркий август 2015 года.

Размышления о том, что будет внутри квеста

Безумный черновик квеста

При совмещении коленки и записной книжки рождался алгоритм и наброски частей квеста. Комнаты, предметы, мебель, двери — я проводил в голове инвентаризацию всего, что должно составлять игру и яростно выливал на бумагу. Главное, что нужно придумать — последовательность действий, вплоть до мельчайших ответвлений. Любое взаимодействие с чем бы то ни было в игре рождало новую версию игры, где все оставалось точно таким же, кроме измененной раннее детали, конечно же. После того, как алгоритм прохождения готов, набрасывайте на бумаге примерный вид пространств для будущей отрисовки. В процессе лишнее будет уходить, а необходимое додумываться.

Как я уже упомянул выше, бюджетом на художника я не располагал. Вот так выглядит часть квеста в разобранном виде:

Части квеста

Составные части игры, которые объединялись и превращались в готовые изображения

А вот так выглядит одна из частей комнат после сборки элементов в единое изображение:

Комната в квесте на вики-разметке

Один из видов первой комнаты квеста

Для того, чтобы сделать из множества элементов подобное изображение, художником быть не нужно. Мне хватило навыков на уровне “уверенный пользователь фотошопа”. После того, как изображение из нескольких частей составило единую комнату…нужно разрезать изображение на несколько частей. Это весьма обидный момент и одна из самых кропотливых частей работы. Дело в том, что каждый элемент игры представляет собой картинку с присвоенной ссылкой или без неё. Для того, чтобы присвоить отдельной картинке ссылку, нужно разрезать изображение на составные части. Вот так это выглядит на примере одного из первых видов комнаты в игре:

Изображения для вики-квеста

Готовые изображения для загрузки на вики-страницу

Каждый кусочек комнаты – потенциально кликабельная область. Основной недостаток такого обширного подхода (крайне много элементов) в том, что подобную вики-страничку практически невозможно оптимизировать для мобильных устройств. Но оно того стоит. Открываем приложение исходный код вики-страниц, выбираем своё сообщество и создаём новую страницу. В режиме вики-разметки загружаем картинки на страничку и добавляем параметры(без них никак):

  • noborder – стирает границу у фотографии
  • nolink – убирает ссылку (картинка больше не кликабельна)
  • nopadding – убирает рамку у изображения и стирает расстояние между картинками
  • Перед скобками ]] вставляем ссылку на другую вики-страничку или на внешний сайт
Код вики-квеста

Код одной из страничек игры. Множество фотографий с присвоенными параметрами

Смысл в том, что на одном из изображений стоит ссылка на вики-страничку, которая отражает итог взаимодействия с тем или иным предметом в игре. На общем плане есть выключатель. На картинке с выключателем стоит ссылка на точно такую же комнату в тёмных цветах. То есть, пользователь нажимает на выключатель на общем плане и в комнате гаснет свет.

Алгоритм создания квеста в итоге сводится к тому, чтобы до мелочей продумать логику игры, нарисовать исходники и разбить на части, старательно загрузить все части, присвоить параметры и ссылки, перелинковать все изображения между собой. Ну и основное  — проверять, перепроверять и тестировать все элементы игры. Просите проходить квест друзей, распечатывайте и отправляйте его бабушкам. При большом объеме работы и замыленности глаза косяки неизбежно будут всплывать. Отшлифованную игру/тест/квест  останется только запустить и наблюдать за результатом. В данном конкретном примере я в разы увеличил активность в сообществе и получил больше двух тысяч новых подписчиков при минимальном рекламном бюджете. Бонусом — переходы на сайт и даже несколько продаж (да, в квесте заложена возможность перехода в интернет-магазин).

Если у вас есть вопросы по созданию подобного на wiki-разметке — обращайтесь