Pensamento computacional em dress-up?

Quando comecei a estudar o tema Pensamento Computacional (em 2016) comecei a pensar na perspectiva de game design, passando pelo gênero de jogos de dress-up. Para situar quem está lendo, a interpretação de Pensamento Computacional que eu utilizava na época era algo parecido com “o conjunto de habilidades/atitudes que cientistas da computacional utilizam no tratamento de problemas tendo recursos computacionais à sua disposição“. Já os jogos do gênero dress-up envolvem um personagem que podemos vestir de diversas maneiras, escolhendo as roupas que usarão (a diversão destes jogos é realmente compor os personagens com diversos visuais e estilos).

Comecei a trabalhar em cima da proposta de Girl’s Dressup.

Apesar de achar a arte fofinha, muito bem-feita e um traço maravilhoso, o encaixe das peças de roupa/cabelo/sapatos/adereços ocorre manualmente arrastando e encontrando a posição em cima da personagem. Outro aspecto que poderia ser melhorado neste jogo é a repetição das roupas para oferecer ao jogador uma variação de cores para elas.

Assim, na minha versão deste jogo mantive apenas uma peça de roupa de cada tipo, ignorando a variação de cores. Defini a posição que as roupas deveriam ficar na personagem, de modo que com um clique ela fosse para sobre a personagem, e outro clique, ela voltasse pro armário. Para oferecer a variação de cores, atribui a cada sprite das roupas uma variação em seu espectro de cores, que era alterado quando o mouse estivesse sobre a peça e uma das setas (direita/esquerda) fosse pressionada.

Algum tempo depois vim a conhecer um outro jogo de dress-up, com um repertório bem maior de roupas e acessórios, uma arte muito fofa, e um adicional bastante interessante. Neste jogo temos no canto inferior direito do quadro onde o personagem aparece, um dado de 6 faces. Ao clicar nele, sorteiam uma peça de cada tipo, e vestem automaticamente no personagem. O legal desta função é que as vezes saem umas combinações diferentonas e bem legais. Há também um botão (canto inferior esquerdo) que retira todas as peças do personagem (basicamente reinicia o programa). Interessante deste jogo, é que as peças no armário aparecem em tamanho reduzido, permitindo uma visão de como elas são, mas quando selecionamos, elas aumentam para o tamanho do personagem (um jeito de aproveitar melhor o espaço).

Na variação que criei repeti a mesma ideia que fiz na versão anterior, isto é, ignorar roupas de mesmo tipo com cores diferentes, e também o encaixe automático no corpo. Além disso, como para a maioria das peças de um mesmo grupo, por exemplo sapatos, a sobreposição não faz sentido, posso considerar a peça sapato como um único ator com sprites diferentes a serem alteradas com um comando do teclado (seta para cima/baixo), assim, basta ficar passando os sapatos para escolher o que vamos usar, sem a necessidade de ficar tirando e colocando vários sapatos para ver como ficam. Por esta razão, considerei o botão de reiniciar o personagem como algo desnecessário, já que na maior parte da interação, as roupas ficariam no personagem, só precisando variar entre suas sprites. Reproduzi o botão de sorteio, mas definindo além da peça, também a variação da cor como um valor aleatório. Repliquei também a ideia de reduzir o tamanho da peça quando não está no corpo do personagem, assim mesmo com muitas roupas fora do corpo, o espaço ocupado por elas poluiria tanto a tela. Por fim, um aspecto que senti falta nos jogos de dress-up foi a possibilidade de salvar os looks montados e carregá-los quando quisermos. Para isto criei 9 slots (os quadradinhos coloridos) que podem ser selecionados (o quadradinho vem a esquerda para indicar que está selecionado), com a Lupa carregamos o look salvo naquele slot. Na verdade as roupas/cabelo/sapatos mudam para a cor e tipo armazenado, mas permanecem nas posições atuais. Com a função Sobreescrever (último botão) guardamos naquele slot as informações daquele look (se houver algo salvo no slot, ele é sobreescrito).

Assim, na interação do jogador com o jogo é possível desenvolver alguns conceitos associados ao Pensamento Computacional, como a seleção dos slots, a execução/sobreposição do seu conteúdo. Por exemplo, dispondo dos slots 1, 2 e 3, como fazer a troca do look do slot 1 para o slot 2:

• Selecionamos o slot 1.
• Carregamos o look do slot 1.
• Selecionamos o slot 3.
• Sobreescrevemos o look atual neste slot.
• Selecionamos o slot 2.
• Carregamos o look do slot 2.
• Selecionamos o slot 1.
• Sobreescrevemos o look atual neste slot.
• Selecionamos o slot 3.
• Carregamos o look do slot 3.
• Selecionamos o slot 2.
• Sobreescrevemos o look atual neste slot.

Legal, quem diria que em um joguinho de vestir um personagem, poderiamos ter um problema desta natureza?

---

Como referenciar este conteúdo em formato ABNT (baseado na norma NBR 6023/2018):

SILVA, Marcos Henrique de Paula Dias da. Pensamento computacional em dress-up?. In: UNIVERSIDADE ESTADUAL DE CAMPINAS. Zero – Blog de Ciência da Unicamp. Volume 12. Ed. 1. 2º semestre de 2024. Campinas, 8 de dezembro 2024. Disponível em: https://www.blogs.unicamp.br/zero/5922/. Acesso em: <data-de-hoje>.