О дизайне Cosplay2 для 8bit: game party
Vik HollowКогда я туда впервые зашла, то изначально не понравился дизайн. Что за пчёлы вообще, почему там картинка с пчелой из Майнкрафта. Причём здесь вообще Майнкрафт, когда фест про 8-битные игры. Вы хотите привлечь ретрогеймеров, или у нас тут лолофест? (К сожалению, как впоследствии оказалось, да). С намерением спасать ситуацию и дать мероприятию хоть небольшой налёт видимости олдскульности, чтобы оправдать название, я обратилась к Эди, а через некоторое время с удивлением обнаружила у себя админские права.
Что вообще такое Cosplay2? Это конструктор сайтов прямиком из нулевых. Тебе даётся ограниченная возможность создать разделы со статьями через специальное меню. Сначала я переразметила статьи под стандарты HTML, а потом... потом в админке обнаружила вот это поле:
Мне казалось важным сохранить изначальную цветовую схему (не знаю, кто её прописывал), и лишь освежить внешний вид.
Поправив CSS, можно немного преобразить сайт. Первым делом я поменяла шрифт в заголовках на тот, который использовался на NES. NES - это 8-битная приставка, её китайский клон известен у нас как Денди. Также я вдохновлялась интерфейсом игры Nier: Automata. Так, например, слева от заголовков третьего уровня появился декоративный квадратик.
Вообще, как мне показалось, весь сайт должен кричать о том, какой он весь олдскульный и пиксельный. Так появилась рамка из квадратов и ряд пикселей над заголовками третьего уровня. Вместе они создают ощущение отрывного листа и отсылают нас к перфокартам.
В подвал страницы я решила добавить отсылку на команду, капитаном которой является главорг, поэтому там появилась пиксельная рыба. Но этого было мало. В какой-то момент я вспомнила про игру Pacman. Сама рыба была анимированна с помощью gif, а падающие пиксели, которые она пожирает - это CSS-анимация. Поэтому у них такой десинхрон. Позднее к рыбе был добавлен скрипт, чтобы по щелчку она говорила случайные фразы из сценок Северной рыбы.
Дальше под раздачу пошло верхнее меню. В Cosplay2 нельзя назначать отдельные иконки для пунктов меню, но мне казалось важным показать иконку сайта, на который ведет ссылка, чтобы пользователь понимал, что он переходит на внешний ресурс. На картриджах Денди с многоигровками в меню вместо курсора обычно использовались либо треугольник ▶, либо символ руки. Я добавила треугольник к большинству пунктов меню, к части гиперссылок и кнопок на страницах. Не хватало ещё одного элемента - звуков.
Звуки, которые проигрываются при наведении и щелчках - честно выдраны с той же многоигровки. И вот теперь навигация по сайта лично меня захлёстывает ностальгией по тем временам. Кстати, а как были добавлены шрифты и звуки на сайт? Cosplay2 позволяет загружать к себе на сервер только изображения. Но, поменяв расширение файла на jpg, можно загружать и звуки, и шрифты, и возможно zip-архивы.
Также для сайта требовалось создать favicon, чтобы он висел в закладках и отличался от других фестов с Cosplay2. В процессе были нарисованы несколько размеров картинки, и чем я особо горжусь - иконкой 32x32, где всё ещё можно прочесть надпись "game party" из каши пикселей. На странице самого феста к иконке феста добавлена анимация, которая как бы "вынимает картридж из приставки".
На главной странице сайта остро не хватало блока новостей, поэтому он был добавлен самым простым и менее трудозатратным способом - через виджет телеграм каналов 8-бит и тгк Уральских фестов. Идея лежала на поверхности, как говорится.
У каждого косплеера на странице и панели пользователя есть декоративные сердечки, обозначающие "жизни" в играх. Мне очень нравится эта находка. На фон сайта с помощью CSS наложены сканлинии. Сканлинии помогают скрыть низкое качество картинки. Сам фон был расширен из изначальной картинки с помощью ChatGPT. Также на все изображения тоже наложены сканлинии, эффект пикселизации, а ещё постоянно прыгают яркость и контраст, а изображения едва заметно дёргаются из стороны в сторону. Это придаёт эффект старого лампового телевизора. Раньше помехи были сильнее, но Эди попросил уменьшить, потому что его тогда укачивало после поезда.
Редактируя CSS, попутно я правила и визуальные косяки самого сайта в пределах возможного, как-то прыгающие кнопки в мобильной версии, неверное положение некоторых элементов, цвет текста, и т.п.
Для кнопочек и панели пользователя в углу была нарисована текстура сот. Мне показалось логичным, если пчела полетит на медовые соты.
Кстати, а откуда взялась пчёлка? Я честно украла её из картинок в интернете. По хорошему, если Эди будет использовать этого маскота в будущих фестах, то её стоит перерисовать. Мне показалось странным, что главный маскот мероприятия (который был на всех рекламных картинках), отсутствует на самом сайте. Поэтому, с помощью Java Script и CSS анимации пиксельная пчёлка теперь следует за курсором. При этом она поворачивается при смене направления курсора.
Двигаешь курсором, пчелка летает за ним. Прикольно, но мне этого показалось мало. Я нарисовала горшочек, который пчёлка могла собрать. Причём, со звуком поднятой монетки из Марио. Само собой пришло на ум, что можно ввести счётчик собранных горшочков. Чтобы убедиться, что горшки собраны не случайно, счётчик появлется только после трёх собранных горшков. Ну и раз у нас получилась миниигра, то азарт пользователя стоило подкрепить какой-нибудь наградой. Этой наградой стали сообщения, которые показываются за определенное количество горшочков. Вот эти сообщения:
10: "Хой!",
20: "Замученный дорогой...",
25: "И в доме лесника я...",
30: "С улыбкой добродушной...",
35: "И жестом дружелюбным",
40: "Будь как дома, путник",
45: "Я ни в чём не откажу...",
50: "Множество историй",
55: "Коль желаешь расскажу",
60: "Панки Хой!",
70: "Я люблю Готику",
90: "Вот я был и вот меня не стало...",
100: "Поздравляю, вы прошли игру! Благодаря вашим усилиям Горшок жив!",
110: "Дальше ничего не будет",
120: "Я серьёзно",
130: "Вот знаешь...",
140: "Ты лучше готовься к фестивалю",
150: "А то опять будешь доделывать всё в последнюю ночь",
160: "Ты не устал?",
170: "Ты не устала?",
190: "В конце покажут мультик, по-любому...",
210: "Чо не смотришь, интересно же",
220: "Я вот смотрю",
256: "Поздравляем, вы достигли 256 горшков!",
265: "Какой чудесный на улице день",
270: "Птички поют,",
275: "Цветочки благоухают",
280: "В такие дни дети",
285: "Как ты",
290: "ДОЛЖНЫ ГОРЕТЬ В АДУ!",
300: "Честно говоря,",
310: "Мы поражены всей командой 8bit",
330: "Откуда у тебя столько свободного времени?",
350: "ЕКБ косплей км проблематеке",
360: "Либерти-момент",
380: "Мадис ни в чём не виновен",
390: "Всё подстроила Джунко",
400: "Такое усердие должно награждаться",
420: "Мы тут думаем",
440: "Не зря же ты собираешь эти горшки",
500: "Мы дадим тебе приз",
550: "Выйдешь прямо на сцену",
600: "И там уже вручим",
650: "На тысячу горшков скажем кодовую фразу",
670: "И на сцене у тебя её спросим",
700: "Осталось ещё 300 горшков",
713: "Бу! Испугался? Не бойся",
750: "Слава богине ТЕНЕБРИС!",
800: "Осталось 200 горшков...",
850: "Давай рассказывать анекдоты",
870: "Сначала ты",
950: "Я так и не вспомнил ни одного анекдота",
990: "Ещё десять горшков...",
1000: "Кодовое слово:",
1002: "Щас, минуту",
1002: "Кодовое слово: ТЕТРИАНДОХ",
1010: "Повторить?",
1015: "Кодовое слово: ТЕТРИАНДОХ",
1020: "Мы тут подумали...",
1030: "А если победителей будет много?",
1040: "Тогда победит тот, у кого больше горшков",
1050: "Поэтому собирай горшки, а когда надоест",
1060: "Сделай скриншот",
1070: "Потом на сцене покажешь",
1100: "Ты ещё тут? Я спать...",
1200: "ZZZ...",
1300: "Парички... мои парички...",
1500: "СКУФЫ! СКУФЫ!",
1600: "Раз ты такой хардкорный игрок, то",
1700: "Айда к нам в косбенд по Фронтирам Шангри-Ла?",
2000: "Напиши Тенебрис"
Так как мы собираем горшки, я не могла не пошутить про Горшка. Оттуда же появились строчки песни из "Лесника". Позднее мы сделали отсылку на это в дефиле по "Симулятору камня". Также в скрипте используется переменная {username}. Она берет имя пользователя из панели пользователя в правом верхнем углу, и отображается в тексте. Мне кажется, это должно напугать игрока.
После 2000 начинается зацикленная история, которую мне сгенерировал ChatGPT:
2010: "Йо, я {username}, косплей — жизнь!",
2015: "Мечтаю попасть на 8bit!",
2020: "Готовлю костюм, ищу детали!",
2025: "Фест — это вайб, семья, сцена!",
2030: "Эди тоже шьёт, как зверь!",
2035: "Открыл cosplay2.ru — всё просто!",
2040: "Заполню форму, нажму 'отправить'.",
2045: "Но интернет лагал весь вечер.",
2050: "Ладно, утром всё решу.",
2055: "Проспал. Паника. Где мой парик?",
2060: "Собираюсь в такси, ем пудру.",
2065: "Приехал. Очередь. Плюс жара.",
2070: "Костюм мнётся, клей не держит.",
2075: "Вижу Эди, кричу: ‘Йооо!’",
2080: "Он в доспехах — красавчик жёсткий!",
2085: "Я в шоке: забыл заявку.",
2090: "cosplay2: ‘Ошибка. Доступ запрещён.’",
2095: "Смотрю, народ уже проходит внутрь.",
2100: "Подхожу к входу: ‘{username} кто?’",
2105: "Меня нет в списках. Больно.",
2110: "Показываю скрин, умоляю охрану.",
2115: "Он говорит: ‘Зови координатора!’",
2120: "Эди ищет, бегает, зовёт кого-то.",
2125: "Координатор приходит — строгий, суровый.",
2130: "Говорю: ‘Я {username}. Очень нужно!’",
2135: "Он такой: ‘Ты с Эди?’",
2140: "Кивает. Пропускают. Адреналин жёсткий.",
2145: "Я влетаю. Люди, музыка, свет!",
2150: "Залитый потом, но счастливый!",
2155: "Успеваю на фотосессию. Ура!",
2160: "Позирую. Флексю. Все аплодируют.",
2165: "Жара, линза отклеилась внезапно.",
2170: "Фотограф орёт: ‘Ещё дубль!’",
2175: "Эди смеётся: ‘Ты как всегда!’",
2180: "Иду в зону чила анимешного.",
2185: "Пью воду. Парик уехал назад.",
2190: "Нахожу зеркало. Ору про себя.",
2195: "Но все вокруг — свои ребята!",
2200: "Подходит косплеерша, даёт заколку.",
2205: "Говорит: ‘Ты классный. Держи.’",
2210: "Краснею. Благодарю. Вайб вечера — топ!",
2215: "Уходим с Эди. Устали очень.",
2220: "Дома. Смотрю фотки, улыбаюсь.",
2225: "Открываю cosplay2. Заявка мигает...",
2230: "Заполняю заранее. Больше — без фейлов!",
2235: "В следующем году я готов!",
2240: "Костюм шьётся. Время летит быстро!",
2245: "День фестиваля. Всё под контролем.",
2250: "Форма отправлена. Бейджик в кармане.",
2255: "Эди в костюме робота-оса.",
2260: "Я — полуэльф в худи светящемся.",
2265: "На сцене. Толпа ревёт мощно!",
2270: "Свет. Фото. Интервью. Фанаты рядом!",
2275: "Вечер. Устал. Счастлив. Всё сбылось.",
2280: "Возвращаюсь домой. Снимаю грим.",
2285: "cosplay2.ru открыт, привычка уже.",
2290: "Заявка открыта, форма пустая.",
2295: "Щёлкаю мышкой. Всё начинается снова."
После 2295 история показывается с самого начала, и так до бесконечности.
Я не думала, что игра со сбором горшков станет настолько популярной. Я купила три баночки с "Лисьим мёдом", чтобы наградить ими трёх победителей, набравших больше всех очков, но по какой-то причине они не были вручены. Поэтому очень надеюсь, что Эди разыграет их среди игроков в ближайшее время.
Я должна честно признаться, что Java Script я не знаю, и что большую часть кода писал ChatGPT, а я лишь фонтанировала идеями и правила его. Если бы не он, то сайт никогда бы не стал таким в такие короткие сроки. В удивительное время живём. Ещё пять лет назад такое казалось невозможным.
Краем уха услышала от ярмарочников, что сайт феста выгодно отличается от других, а многие даже залипали в игру со сбором горшков. Думаю, что мне удалось сделать первое впечатление при знакомстве с фестивалем приятным и запоминающимся (а значит, и кому-то продать билет).