Създаване на игра на карти във Figma
Как да използваме Figma, за да създадем игра на шансове с произволна логика.
Smart Animate + Логика с разклоняване = Игра на произволностти
Когато за пръв път научих за motion design в прототипирането на инструменти като Figma и Adobe XD, моята първа мисъл бе — “Могат ли да бъдат използвани, за да се направи игра!?”
Оказа се, че могат.
Представям ви игра на произволности, създадена чрез прототипиране.3 Card Figma
Игра в инструмент за дизайн?
Идеята за използване на прототипирането, за да се създаде игра не е нов. Всъщност, има цяла RPG игра, която есъздадена по този начин, за да разнообразим и преодоолеем социалната си дистанция.
Но никога не съм виждал прототипирането да се използва, за да се създаде игра на шансове. Обикновено сме виждали стриктна потребителска пътека от точка А до точка Б, минавайки през определени екрани. Така работи и потребителското тестване. В крайна сметка се стига до сценарийна последователност и караме потребителя да премине през тях. Сценарият никога не се променя, не еволюира и рядко реагира с разклонена логика, базирана на избора на потребителя. Прототипирането е направено, за да се създават изживявания, а не игри.
Тази RPG игра, всъщност би работила много добре в инструмент като Figma (и някой НАИСТИНА трябва да я направи), но този стил на игра се играе по-скоро като история за играча. Аз исках нещо друго. Игра, която променя резултата си всеки път, когато се играе.
Исках играта да има избор и ако е възможно, късмет и случайност. Като се имат предвид тези цели, исках нещо с по-малко елементи и кратко време за зареждане, кратки анимирани цикли и лесно да може да се играе повторно. Моята цел беше по-скоро “доказателство за концепция”, отколкото следващата хитова игра.
Докато мислих как да създам тази игра чрез прототипиране, внезапно се сетих — има начин, по който да симулирам произволност във Figma. С малко креативност, произволността се превърна в ключов фактор, който превръща една статична, линеарна потребителска пътека в една от многото при избор да се играе повторно. Или по-просто казано в контекста на играта — всеки път, когато се избере карта, лицето и ще бъде различно от предходния избор.
С North Star set за карти, ще ви покажа как създадох своята Игра с 3 карти:
Та, как го направих?
Няма да ви прекарам през логиката на всяка рамка по отделно (има 65 от тях), но ще споделя някои доста полезни съвети, за това как създадох моята Игра с 3 карти.
Произволност
За да разберете къде да се намесва произволността, трябва да разделите играта на потребителски пътеки. Основата се състои от стартиране на играта, избиране на карта и резултат(победа/загуба).
Общо взето, потребителят има три избора — да избере лявата, средната или дясната карта. Ако потребителят избере правилната карта — печели. В противен случай — губи. В обикновения прототип, това би било една от трите позиции и евентуално потребителят бързо ще научи къде се крие правилната карта всеки път.
Но ако помислим как да внедрим произволност в този прототип, можем да намерим основи, с които да изградим логика за разклоняване:
Ако въведем произволност и редуваме рамките след разбъркването на картите, потребителят никога не избира една и съща рамка — прототипът постоянно преминава между 3 различни рамки, които изглеждат еднакви, но водят до различни резултати. По този начин можем да симулираме произволност, защото играчът никога няма да разбере на кой кадър сме. Играта винаги се променя, тъй като случайната логика също се променя.
За да постигнете това, трябва да създадете три рамки, които изглеждат еднакво (елементите вътре също трябва да са с еднакви имена) и да настроите кадрите така, че да се променят след 1ms закъснение(After-Delay) и без анимация на прехода(No transition). Резултатът е следният: Играта изглежда статична, но всъщност се движи между различните резултати, една милисекунда в даден момент.
Движение
За да дадем на играта повече живот и наслада, реших да се съсредоточа върху анимация, която да продаде преживяването допълнително. Картите за игра бяха идеални за това, тъй като лесно се манипулират в софтуера за прототипиране. Използвайки Smart Animate и принципите за дизайн на движение като завъртане, промяна на височината X и промяна на позицията, можете да симулирате идеите за разбъркване, раздаване и обръщане.
Поздрави на Alexunder Hess за това, че ми помогна да рафинирам моите умения в анимацията и да мисля по-систематично.
Игрово изживяване
Играта трябваше да бъде лесна за разбиране — не всеки играе игри, а умственият модел на лесно разбираем и общ игрови опит ще позволи на другите да играят (и да преиграят) изживяването с по-малко затруднения. Монтето с 3 карти е лесна, ясна и общо разбираема игра и идеална за целта — показване на това, което може да направи Figma.
Размерът на дисплея на устройството също е от решаващо значение — оптимизирах го за мобилни устройства, тъй като очаквах повечето хора да четат за него на телефоните си от Instagram, LinkedIn, Medium или други източници в социалните медии. Не исках и да предполагам, че хората ще отидат до компютъра, само за да играят моята игра.
Също така беше важно да изградя играта в платформа, която лесно може да достигне до други хора. Figma има публични връзки за споделяне, които работят доста бързо, така че натоварването на елементите в даден файл не е огромен проблем (въпреки че може да хълца от време на време). В миналото имах проблеми с връзките за споделяне, защото отнемаха много време, но се доверих на напълно онлайн инструмент като Figma, който се справи с това. В крайна сметка очаквайнията ми бяха напълно покрити.
Заключителни мисли
Бих искал да мисля за това като източник на вдъхновение за другите. С идеята, че можете да имате произволност в прототип е напълно възможно да създадете много различни игрови преживявания във Figma. Не е нужно да кодирате, за да направите напълно функционална игра. Днес можете да го направите с инструментите за прототипиране, които съществуват безплатно. Бариерата никога не е била по-ниска.
Вече знаете, че може да създадете игра във Figma и е време да преминем към по-важния въпрос. КАКВО ще създадете?
Оригинална статия на Anthony Conta.
За всички, които все още не са разбрали! Напомням, че предстои първото от поредица безплатни събития на живо, които ще се провеждат под форма, наподобяваща подкаст — #1 Livepod. Научете повече като последвате линка.
За още полезни и интересни материали, газ към facebook и нашата facebook група. Там може да задавате своите въпроси, а ние ще ви отговорим. С удоволствие ще дискутираме конкретни теми и специфики. Пишете ни.
Очакваме вашите мнения, предложения и съвети в нашия Slack канал. #location-Bulgaria.
За накрая, най-важното. Присъединете се към нас на Friends Of Figma, Sofia.
