Estudo de caso: PK XD | Experiência e interface do jogo

Danilo Freitas
11 min readJul 22, 2022

No ultimo artigo falei sobre a direção de arte do jogo e sua concepção levando em consideração o tamanho da equipe e a necessidade da entrega em curto prazo, caso não tenha lido da um pulo nesse link Estudo de caso: PK XD | Arte conceitual e direção de arte a leitura é rápida e divertida (>ᴗ•).

Nesse artigo vou falar sobre os pilares de experiencia do jogo e sua interface, trazendo algumas curiosidades e pilares que fazem do jogo PKXD algo único (* ^ ω ^).

Sobre

PKXD é um jogo social sandbox com foco em crianças entre 8 e 13 anos (crianças mais novas e adultos também jogam) que tem como objetivo ser um ambiente social e dinâmico, um espaço onde pessoas podem criar suas próprias histórias, brincar de faz de conta e ser quem quiser dentro desse universo mágico e único.

Experiência PK XD!

No inicio do projeto tínhamos como pretenção criar um ambiente social e uma jornada não guiada, onde cada jogador teria uma experiencia única e criativa, cada pessoa jogaria PK XD da maneira que achasse mais interessante.

Para atingir esse objetivo acreditávamos que nosso papel era entregar as ferramentas certas para os jogadores, ou seja, recursos necessários para que pudessem interagir entre si, se expressar e criar suas brincadeiras.

Seguindo essas premissas optamos por mecânicas de fácil entendimento, dessa forma a pessoa que estivesse jogando poderia através de simples interações e sem muita explicação (de texto principalmente), fazer novos amigos, brincar, criar, e descobrir novas mecânicas, aliás, descobertas de novas mecânicas também faz parte da experiência.

O mundo PK XD deveria ser como um grande playground com mecânicas simples e abertas o suficiente para serem interpretadas de maneiras diversas, quanto mais aberta e sem regras mais criativo o ambiente poderia se tornar.

Imagine uma criança brincando com um pedaço de galho, não se explica para ela como se brinca, ela apenas brinca, o objeto em si é tão abstrato que as possibilidades são infinitas na imaginação infantil, essa era a experiencia que gostaríamos de entregar (/ ̄ー ̄)/~~☆’.・.・:★’.・.・:☆

Com o objetivo mais claro mapeamos os principais sistemas e áreas de interesse que pudessem fortalecer os pilares de experiencia que acreditávamos, esse mapeamento foi baseado em pesquisas de benchmark e entendimento do publico alvo.

Nossos robôs mapeando os principais sistemas e pontos de interesse

O time que iniciou o projeto era pequeno, o prazo era curto e as metas ambiciosas, por isso precisávamos ser cirúrgico em nossas escolhas e saber priorizar o que era mais importante naquele momento, priorizamos quatro sistemas que entendíamos ser os pilares centrais do jogo, que são, chat, danças, customização do avatar e edição de casas.

Além dos sistemas o cenário do jogo também deveria permitir que os jogadores se encontrassem e brincassem, por isso construções e minigames também foram priorizados para que conseguíssemos entregar a experiência completa. Uma curiosidade sobre o mapa do PK XD, o mapa é plano e sem muitas obstruções visuais para permitir que as pessoas consigam se ver mesmo que distante uma das outras, aumentando a possibilidade de se encontrarem e fortalecendo assim interação social, um dos principais pilares do jogo.

Legal, agora vamos falar um pouco mais em detalhe sobre cada uma das escolhas (.❛ ᴗ ❛.)

Os primeiros sistemas

Chat

O sistema de chat nos ajudaria tanto na experiencia social quanto de expressão, e por uma questão de segurança e publico alvo o time optou por chat com frases prontas, inibindo assim bullying e pessoas de má índole.

A ferramenta começou de uma forma simples, no inicio eram apenas emojis e criamos uma serie que pudesse expressar sentimentos básicos e locais icônicos do jogo, como casas, praia, pizzaria, etc.

Emojis PK XD

Com a primeira série de emojis criados fizemos testes internos e com um grupo de jogadores do público alvo, dessa maneira constatamos a necessidade de pelo menos algumas frases básicas pois só uso de emojis limitava a criação de diálogos mais ricos, o que poderia dificultar a criação de laços de amizades.

No lançamento o chat possuía apenas duas categorias, emojis e frases prontas, naquele momento era o suficiente para uma interação rápida e divertida entre as pessoas que jogavam juntas (o˘◡˘o).

No primeiro momento optamos pelo chat na vertical e no canto direto com o objetivo de ser um chat reduzido e de uso rápido, ao qual só dependesse da uma única mão do jogador. O comportamento esperado era, abrir o chat > enviar um emoji ou uma interação rápida > fechar ou mantar o chat aberto para novas interações. No inicio o chat ocupava menos espaço na tela do que atualmente, naquele momento era possível manter o display aberto e continuar jogando.

Com o decorrer do tempo e o chat evoluiu para uma ferramenta mais robusta, com muitas categorias, sistema de busca, balões de expressão e chat contextual. Jogadores engajados conseguem ter conversas complexas mesmo o chat sendo limitado a frases prontas (°o°).

Chat PK XD
Chat PK XD

Com o aumento das categorias e quantidade de frases talvez uma nova abordagem seja necessária, parte do time fez estudos para o chat na horizontal, pode ser que essa evolução em algum momento venha ocorrer.

O PK XD é um jogo "vivo" com certeza o chat ainda terá grandes evoluções. (´꒳`)♡.

Dance! ヾ(⌐■_■)ノ♪

O sistema de danças, assim como o chat, auxilia tanto no lado social quanto na expressão, tornando o game play mais divertido e em diversos momentos engraçados.

Esse sistema é muito usado no jogo, é simples de usar e contribui muito com a brincadeira social. As danças costumam ser usadas para demonstrar felicidade, "provocar" o outro jogador quando vence uma corrida, criar novas brincadeiras ou mostrar exclusividade se for uma dançar rara ┌(^^)┘.

Fazendo testes internos tomamos algumas decisões para tornar a brincadeira mais divertida, deixar o jogador andar enquanto dança foi uma delas. Apesar de não ser natural no mundo real essa brincadeira deixa o jogo mais engraçado (a "zoeira" faz do game play), essa mecânica simples chegou a gerar algumas teorias como "andar dançando é mais rápido que andar normal", é possível encontrar videos no youtube fazendo comentários sobre isso.

Dançando enquanto corre na Crazy Run

Com o passar do tempo a possibilidade de se expressar com o avatar se expandiu e foram adicionadas duas novas categorias, que são, gestos e poses. Em um jogo social essas interações aumentam a capacidade de expressão e comunicação entre as pessoas.

Será que teremos novas expressões futuramente? Como ainda não temos a resposta vamos para o próximo sistema (o^ ^o).

Customização do avatar

A experiencia do jogador se sentir único dentro do jogo sempre foi algo importante, então algumas ferramentas do sistema deveriam entregar esse sentimento de exclusividade, a customização do avatar é uma das ferramentas que permite essa experiencia. Com esse sistema o jogador tem a capacidade de se expressar, mostrar status e exclusividade alem de ter a possibilidade de ser totalmente original (⌐■_■).

Gosto de falar sobre a primeira interação que as pessoas tem com a customização do avatar, na verdade essa é a primeira interação que as pessoas tem com o PK XD após apertar o play, apesar de simples considero essa interação uma das mais interessantes do jogo. No primeiro contato com o avatar notamos que o personagem é cinza e não existe diferença entre menino e menina, é apenas um boneco e o jogador pode montar da maneira que achar mais interessante, pintar da cor que quiser e vestir o que achar mais legal, essa interação mostrar um pouco sobre a liberdade dentro.

Uma curiosidades, na primeiras versão do jogo a customização do avatar tinha algumas peculiaridades, uma delas era a possibilidade de colocar até 3 chapéus ou até mesmo 2 cabelos de uma única vez se sobrepondo, dessa forma os jogadores conseguiam fazer diversas combinações, essas combinações podiam ser boas, algumas vezes engraçadas, mas que em sua grande maioria das vezes eram estranhas, isso aos olhos de um adulto e como PK XD é um jogo para crianças quanto mais criatividade melhor (PK XD é sobre liberdade e possibilidades, e como já foi dito, "zoeira" faz parte da brincadeira). Após alguns testes e análises o time resolveu tirar essas funcionalidades pois gerava algumas inconsistências e não acrescentava muito na experiência para o jogador.

Outra curiosidade, tínhamos a intenção de dar mais liberdade para as pessoas no momento da customização, dando a possibilidade do jogador escolher uma perna diferente da outra, mãos diferentes, ser uma customização mais granular, e de fato o sistema chegou a ser preparado para isso, mas, como disse no inicio desse artigo, o time era pequeno e precisamos fazer algumas escolhas no primeiro momento.

Olhando o primeiro conceito visual do jogo, é possível notar o personagem na imagem com mãos de cores e pernas de formas diferentes, essa era a intenção no começo do projeto.

Concept art PK XD com o famoso piratinha

Será que um dia poderemos fazer esse tipo de customização? (↼‿↼)

Com o passar do tempo novas brincadeiras foram inseridas para aumentar o leque de customização do personagem, como o hair saloon, que alem de permitir um novo lugar para os jogadores brincarem também acrescentou a possibilidade de pintar o cabelo de diversas cores (╯✧▽✧)╯.

Hair Saloon PK XD

Bem, já falamos sobre alguns sistemas que contemplam o personagem, vamos para o próximo sistema, agora relacionado as casas.

Edição de casas

Provavelmente um dos sistemas mais interessantes do jogo. Através da edição de casas as pessoas podem se expressar, criar seu próprio mundo (algo que pode torna-lo super exclusivo dentro de uma sessão) e até criar brincadeiras para outras pessoas brincarem, dando a possibilidade de cada jogador ser criador de um conteúdo único (*^^*)♡.

No inicio do projeto o sistema era bem simples e a própria usabilidade tinha muito espaço para melhorias, mas naquele momento foi o suficiente para entendermos o potencial da ferramenta e coletar feedbacks dos jogadores, nos ajudando assim a tomar algumas decisões. Um exemplo que posso trazer foi a decisão de permitir que os jogadores pudessem deixar os objetos flutuando dentro da casa, dando ainda mais liberdade criativa. Observando o comportamento de diversos jogadores o time percebeu que muitos deles aproveitavam "bugs" do sistema para deixar objetos flutuarem ou parecer que estavam um sob o outro, com isso veio a hipótese, será que os jogadores não querem uma ferramenta que permita essa possibilidade? A resposta foi positiva e as casas se tornaram cada vez mais criativas.

Acho interessante trazer alguns pontos sobre a usabilidade da interface, durante a evolução do projeto a ferramenta obteve algumas melhorias e até mesmo uma nova versão.

Essa foi a primeira versão lançada da edição de casas.

Primeira versão da interface de edição de casas

Essa interface apresentava problemas de usabilidade, escalabilidade, hierarquia de informação e falta de clareza das categorias.

Após alguns estudos o time trouxe uma nova abordagem com objetivo de solucionar problemas citados. Essa foi a solução desenvolvida.

Versão atualizada da interface de edição de casas

A nova estrutura permitiu um melhor agrupamento de conteúdo, filtros básicos para otimizar e auxiliar em buscas simples, ocultar o menu e entrar em um modo de edição, expandir o menu para visualizar uma maior quantidade de itens, contador de móveis e a possibilidade de mover a câmera em um angulo diferente, essa ultima auxilia para colocar itens na parede por exemplo.

Para mim esse é um dos sistemas mais ricos do jogo pois possibilita a criação de novos game-plays e universos diferentes dentro do mesmo jogo, só depende da imaginação do jogador (∩ᄑ_ᄑ)⊃━☆゚

Falei um pouco sobre os sistemas que acreditávamos ser os pilares para o jogo, e trouxe algumas curiosidades, exemplos de interface e melhorias que ocorreram durante o desenvolvimento, agora vamos para o próximo tópico, a interface do jogo.

HUD, UI e Visual design

Como foi dito no inicio desse artigo, o time era pequeno e o prazo era curto, para conseguirmos atingir a data limite da entrega tivemos que priorizar e fazer escolhas. A interface foi um ponto onde tivemos que fazer algumas economias no inicio do projeto, micro interações e animações de UI não foram priorizadas para que o conteúdo e as mecânicas principais fossem entregues no prazo.

Por ser um jogo que demanda uma grande quantidade de conteúdo e mudanças constantes, em diversos momentos optamos por uma interface simples, escalável e em alguns momentos repetitivas, mas, inteligente para que o time técnico conseguisse escalar e clara para o jogador conseguisse usar sem dificuldades.

Mesmo com esses desafios o time teve a intenção de encontrar um estilo de interface mais autoral, buscando a simplicidade em diversos momentos e com foco na escalabilidade.

HUD

A HUD pode apresentar muitos elementos durante o game play dependendo das interações que o jogador tem com o mundo, com objetos ao redor e outros jogadores, por esse motivo ela foi pensada para que pudesse ser escalável.

Nossos robôs trabalhando incansavelmente para encontrar o modelo ideal

Pensando na escalabilidade usamos agrupamento de informações por categorias, dessa maneira a usabilidade se torna intuitiva já que os comportamentos tendem a se repetir nos mesmos locais.

UI e Visual Design

A ideia era criar um interface em um estilo visual cartoon futurista (que era a direção de arte do jogo) e buscar um estilo único para os botões e outros elementos da interface.

Os primeiros estudos dos botões surgiram com a ideia ser de um material mais plásticos, seguindo a premissa de que todo o universo do PK XD era feito de brinquedo.

Primeiros testes de botões para interface

Optamos não ir por esse caminho pois em alguns momentos esse botões se tornavam pesados na interface já que o jogo demandava uma grande quantidade de interações, outro ponto de tomada de decisão foi o tema, queríamos algo que passasse uma ideia tecnológica, e esse botões não passavam essa sensação.

Voltamos para algumas outras tentativas e encontramos o estilo que buscávamos, eram originais, passavam a sensação de tecnologia, aceitava bem ícones e textos com brilho que ajudaram a passar a sensação de algo mais futurista.

E logo o estilo gráfico da interface começou a tomar forma.

Momento único que o robo da uma pirada na maquina de imprimir UI

Os gráficos usados na interface se dividem em ícones flat e ícones com volume, os gráficos com volume foram criados para ícones mais relevantes como botões primários, moedas e cards das lojas, já os ícones flat para lugares onde aparecem interações em maior volume como na tela de chat e customização.

PK XD é um jogo que vive em constante evolução e com o tempo novas interações e componentes irão surgir para tornar experiencia dos jogadores ainda mais rica <( ̄︶ ̄)>.

Tentei trazer nesse artigo um pouco da interface visual, experiência, algumas curiosidades e a essência que compõe o jogo, espero que tenha se divertido com a leitura! Caso tenha um pouco mais de tempo e queira se aventurar em outra leitura é só acessar o link do bônus (≧◡≦) ♡

Bônus

Se quiser saber mais sobre como sobre UI/UX do jogo é só acessar o link : PK XD User Interface

--

--