С новым семестром университета, начиная только за пару дней, я решил бросить вызов себе, чтобы выпустить еще 1 боковую проект, прежде чем я снова подвергсь разбиванию с заданиями.
Я играл в Phasmophobia, забавную кооперативную игру ужасов на паре, где вы поручили охотничьи и идентифицирующие призраки. Игра включает в себя журнал, который содержит подробную информацию о призраках, что позволяет вам определить правильный тип призрака (Полтергейст, демон и т. Д.) Phasmophobia выпущена в конце сентября и быстро видели всплеск игроков и популярных стримов, которые пробуют игру. Это фантастически, и я настоятельно рекомендую каждый поклонник ужасов, чтобы попробовать его с другом или двумя, однако, журнал In-Game занимает весь экран и носится навигации.
Будучи программным инженером, я сделал то, какие программные инженеры делали, я решил решить свои проблемы, создавая приложение. Цель Phasmophobia Companion (имя моего приложения) было воспроизведение этого журнала In-Game на мобильном телефоне с легкой навигацией и гладкими анимациями.
Имея в виду, что игра только что выходила, и что игры раннего доступа имеют короткую срок службы популярности, я знал, что пришлось спешить. К счастью, не было никакой фазмофобии, похожих на игры, связанные с игровым магазином, однако не спешивая производство позиционировало интересную проблему, каждый день, когда он принял к разработке приложения, могло бы быть в день, когда конкурент выпустил свою собственную версию. Phasmophobia Companion не должен был быть полированным продуктом, а скорее быстро бросил решение, чтобы утолить жажду рынка.
Я провел большую часть дня 1, разработав приложение в фигне и глядя на реагирование собственные библиотеки карусели (больше на этом позже).
Мой дизайн макет на фиг.8А:
В духе развивающихся под давлением времени я решил придерживаться дизайна, с которой мне было удобно. Это в основном использование карт, которые пользователь может продвигаться влево или вправо, чтобы прогрессировать. Я решил реплицировать журнал игры и почувствовать, как используйте желтую старую бумагу текстуры. В поисках «жуткового» шрифта я нашел тени в свет, который, как я думал, подобрал тему игры, это в конечном итоге используется для заголовков каждой карты, значок приложения и рекламным материалом.
Одним из ключевых функций для Phasmophobia Companion была простая навигация. Включенные только журнал In-Game включали стрелки, чтобы повернуть страницы влево или вправо, а двойную стрелку на первой странице, чтобы перейти на последнюю и самую важную страницу. Насколько раздражало меня больше всего во время использования журнала In-Game, было насколько сложно ориентироваться от где-то в середине журнала на начало или конец. Я решил, что дневник в Phasmophobia Companion будет разделен на несколько разделов с кнопкой навигации для начала каждого раздела. Есть 4 раздела: введение (основная игровая механика), призраки (подробные описания каждого призрака), предметы (объяснение, какие предметы собирают какие доказательства) и доказательства (где пользователь может сузить тип призрака, который они столкнулись).
Журнал In-Game:
Столько, сколько я ценю, составив дизайн для каждого из моих приложений перед началом кодирования, я чувствовал, что потратил весь день на проектировании UI и UX проглотил много времени. Мне пришлось закончить основную функциональность приложения сегодня.
Я решил использовать React Nounge, потому что это технология, с которой мне наиболее удобно, однако после недавно создания моего первого приложения без использования EXPO I было впечатлено тем, насколько маленьким нативному приложению Vanilla Regact можно разместить. Как таковой я решил не использовать EXPO (он не спас меня много времени …)
После создания базового карточного компонента, смоделированного после дизайна 1 дня, мне пришлось выяснить решение о карусели. Там не так много библиотек Carousel для реагирования на arent, самая популярная натуральная компенсация-карусель не обновляется в течение длительного времени и по-прежнему использовалась ваниль, анимированная вместо библиотеки, такой как реанимированная. Тем не менее, я ранее использовал реактивную карусель в проекте (грими) и думал, что результаты были достаточно хорошими. В конце концов, у меня не было времени, чтобы создать свою карусель в реанимировании.
Итак, я остановился на реагированной карусели. Далее мне пришлось фактически заполнить данные для каждой карты, это заняло некоторое время, так как мне пришлось ввести его вручную. На полпути через набрав весь журнал, я подумал об использовании программы Image-Text, чтобы сэкономить время, однако я был слишком упрямым, чтобы изменить на этом этапе. Далее я создал компонент нижнего бара, мне пришлось пройти карусель Ref для этого компонента, чтобы навигаться в программно. Для значков я использовал React-National-Vector-Icons, удивительную библиотеку, которую я использую в значительной степени каждый из моих приложений.
К концу дня я в значительной степени завершил основную функциональность приложения, единственное, что осталось – создать последнюю страницу. На последней странице пользователи могут заполнить доказательства того, что они собрали, чтобы определить, с какого призрака они имеют дело с. На данный момент самая сложная страница требуется больше логики, чем просто показывая текст на экране.
Определено, чтобы отправить приложение к Play Console сегодня, я быстро добрался до завершения приложения. Я должен был закончить логику последней страницы. На последней странице пользователи заполняют три объекта доказательств или оставьте слот. Каждый призрак состоит из 3 доказательств, комбинация которых уникальна для этого конкретного призрака. Например, доказательства Духа – это спиртная коробка, отпечатки пальцев и запись призрака, в то время как доказательства призрака – это ящик для духов, отпечатки пальцев и температуры замораживания. Если пользователь заполняет доказательства в виде спиртовой коробки, отпечатки пальцев и пустой слот, как Дух, так и WRAITH, являются возможными призраками, которые столкнулся с игроком.
Страница доказательств:
Я создал массив объектов призраков со своими соответствующими доказательствами и именами. Я создал отдельный массив, заполненный только именами призраков, которые я отфильтровал на каждом рендере, используя следующую функцию:
// Filter out the ghost list
// evidenceArr is the list of selected evidence
ghostPickerList = ghostNames.filter((ghostName, index) => {
let passes = true;
evidenceArr.forEach((e) => {
if (e > 0 && !ghostList[index].evidence.includes(e) && index > 0) {
passes = false;
}
});
return passes;
});
С финальной страницей работает правильно, я почти закончил! Мне пришлось только создать значок приложения, всплеск экрана и рекламный материал, все из которых я сделал с помощью Figma. Чтобы реализовать всплеск экрана, который я использовал реагировать-нативно-брызг-экран.
Наконец я был сделан! Единственное, что осталось сделать, это отправить приложение в игровой магазин и ждать его одобренного.
Создание Phasmophobia Companion было превосходным опытом обучения и забавным проектом для завершения до начала семестра. Время давления заставило меня принимать решения о том, что я бы не сделал иначе, например, с использованием коммузера реагирования-карусели вместо того, чтобы реализовать собственную карусель в реанимировании. Из-за этого мое приложение пострадало в размере сборки, а в производительности на низкокачественных устройствах Android. В будущем я хотел бы создать свою собственную библиотеку CAROUSEL или внести свой вклад в rac racted-snap-carousel для повышения его производительности. Разве это не только улучшит производительность Phasmophobia Companion, но он также экономит время разработки в будущем в случае другого проекта временного давления.
Что касается самого компаньона Phasmophobia, я поделился своим проектом с сообществом, и жду отзывы о том, что улучшить, и какие функции добавлять.
Вы можете проверить компаньон Phasmophobia на Google Play Store , и вы можете проверить мою грязную попытку Спагетти на Github Действительно
Оригинал: “https://dev.to/redseb/how-i-made-a-phasmophobia-companion-app-in-3-days-bl0”