WWDC18: The Rainbow after the storm

Eu tenho uma má noticia pra você: o arco-iris foi roubado e como se isso não bastasse, toda a cor do mundo está deixando de existir.

A boa notícia é que a C.H.A.M.E.L.E.O.N Spy Agency pode recuperá-lo, contanto que você, é claro, nos ajude.

As inscrições para o WWDC Scholarship desse ano foram abertas, e junto com elas, a crise de ansiedade sobre o que eu iria fazer. Eu ja tinha uma palpite forte que seria com Swift Playgrounds novamente, e fiquei animado (combinado com que parecia muito com uma crise de pânico) que essa previsão se cumpriu.

Eu já tinha algumas ideias de com o que eu queria trabalhar, e qual "estilo" de experiência eu ia seguir, e a conclusão que cheguei foi continuar na área educativa (como no ano passado) e usar um conceito novíssimo pra mim: a teoria da cor.

Mas bem, o que eu sei de teoria da cor? Não muito ainda.

Só que é exatamente esse o ponto, quis mostrar a minha forma de aprender, ainda mais sobre os misteriosos conceitos de design. E eu sei que pode parecer complicar um conceito "simples" de aprender (de aprender, não de executar), mas é a forma que eu costumo aprender melhor, uma visão algorítmica, quase matemática das harmonias de cor.

Sobre o "The Rainbow Robbery"

Resumidamente, você deve atingir uma cor objetivo (representado aqui, pelo chápeu do inimigo (e sim, eu escrevi isso no texto, duas vezes (eu sei que ninguém quer ler (eu sei que tem parênteses demais aqui (a culpa é sua por isso))))) usando os conceitos de harmonias (ou esquemas, mas que nesse playground vou chamar de operações) de cor: complementares, análogas, tríades e split-complementary (que eu to em dúvida sobre a tradução), além do próprio círculo cromático.

O desafio é entender o funcionamento delas, e aplicá-las em cadeia, pra que no fim, o espião que você está ajudando consiga se camuflar das vistas do inimigo.

Para introduzir a história e algumas informações iniciais, usei uma .cutscenepage feita em HTML (e um pequeno código em javascript), tentando simular uma espécie de introdução a missão como no início de filmes clássicos de espiões.

Algumas das páginas da introdução

Depois disso, o jogador começa a interação "jogável" propriamente dita.

A primeira página introduz alguns elementos do jogo, e uma breve introdução sobre o círculo cromático.

Essa página inicial, dá algumas instruções de como jogar também. E objetivo dessa fase é mostrar o funcionamento básico do jogo. A primeira missão é que o camaleão (com a sua ajuda) chegue na cor do chapéu, sem muitas dificuldades.

Lembrando que a cor do chapéu é aleatoriamente gerada a cada vez que o código é executado, pra evitar que a resposta seja "memorizada".

Quando você consegue passar de fase, uma mensagem de sucesso é mostrada, com um acesso a próxima página.

Com o passar das páginas os desafios vão ficando mais difíceis, e com restrições variadas. As restrições usadas foram:

• Mínimo de operações necessárias para que o botão Play seja liberado;
• A quantidade de cores iniciais disponíveis;
• As operações de cor disponíveis;

Em cada página, um conceito novo é introduzido, bem como a possibilidade de usar a operação nova para resolver a missão. Eu demorei algum tempo pra escrever os textos, muito por que queria que fosse simples de entender, e por que a quantidade de texto tinha que ser equilibrada, pra que a experiencia não durasse tempo demais (mesmo que eu saiba que toda ela deva durar mais que três minutos).

Quando todos os conceitos já foram introduzidos, há ainda mais uma página que testa todos os elementos em conjunto e, em seguida, caso consiga cumprir o objetivo, há uma custscene final, informando sobre o sucesso da missão.

E finalmente, a ultima interação é uma página 4Fun que gera desafios aleatórios pra brincar um pouco mais com as operações e cores.

Extras

Sobre as ilustrações

A maioria das ilustrações foram feitas no Sketch (e algumas no Illustrator), com super dicas e opiniões dos designers que estavam por perto (que sabem quem são, obrigado galera!).

Fiquei bastante satisfeito com o resultado, conhecendo minhas limitações de ilustração e o tempo que eu tinha pra fazer, sei que muitas vezes dá vontade de ficar escovando pixel, mas a vida tem que seguir e o projeto tem que evoluir.

Sobre o contexto

Como na história contada o arco-iris foi roubado e a cor do mundo está desaparecendo, cada página avançada tem diminuída um pouco a sua saturação, o que torna o jogo mais desafiador e imersivo.

(Algumas pessoas comentaram que com essa perda de saturação, perde-se um pouco a referência com o conteudo informativo da esquerda (que contem imagens de aplicações no circulo cromático com a cores "originais"), o que é verdade, mas ao meu ver isso é contextualizado pela história).

Sobre as "semelhanças" com o Log1c L0ve

Ok, sei que pode haver alguém que vai dizer que o "The Rainbow Robbery" lembra demais meu outro playground.

Mas eu tenho um exemplo de como isso soa pra mim quando escuto isso:
http://adoonay.com/MoitaShow.m4a

A verdade é que esse aplicativo foi feito do zero, e levou três longas semanas, então dizer que é igual outro aplicativo (mesmo que seja outro que eu fiz também), além de não ser verdade, é injusto com todo o trabalho que tive.

É verdade que o modelo estrutural que usei é semelhante com o do Log1c L0ve, mas é só.

Essa além de ser sobre outro tema, foi projetado pra se adaptar a cada escolha do jogador. (Tanto, que eu não sei qual vai ser a forma que cada um que jogar vai chegar no resultado, e realmente não importa).