O Poema do Fim
Como trazer uma experiência de jogo para a web?

Inicialmente

O ano era 2011, a primeira versão de Minecraft estava para ser lançada oficialmente, seu criador, o inominável, fez um chamado em público para autores escreverem o que viria a ser o que o jogador leria ao terminar o jogo.

Julian Gough foi escolhido. Após isso, um mundo inteiro aconteceu, indo de uma alegre colaboração criativa até um processo judicial. (você pode ler tudo sobre isso pelas palavras do próprio Julian, aqui)

O texto é um poema extenso, cheio de significado e que marcou muita gente. Desde a sua publicação, você via na internet criações em cima desse poema, a frase que ficou mais famosa foi: "e o universo disse eu te amo porque você é amor". Isso foi base para artes, tatuagens e populou o imaginário de quem pensava em Minecraft como um jogo sem "propósito".

No próprio jogo o poema aparece antes dos créditos finais, rolando na tela por 7 minutos e 38 segundos. Algumas liberdades artísticas foram tomadas, como palavras "censuradas" ou "indecifráveis" sendo ilegíveis, também tem o fato do nome do jogador ser citado ao longo do poema. Não é um texto estático e eu jamais poderia trazer ele para a Biblioteca Poeta dessa forma.

Tecnicamente

Antes mesmo de tentar adicionar esse poema ao site, tive que refazer toda a estrutura de como um texto é renderizado para poder tomar as liberdades que eu estava planejando. Existiam três coisas que estavam na minha mente: o jogador precisava ser mencionado, as partes censuradas do texto precisavam circular entre caracteres e o texto precisava ser apresentado como uma conversa entre dois sujeitos.

Se você já leu o poema como ele foi publicado aqui, pode ter percebido que esse último item da lista não foi implementado. Isso foi por questões de estética, porque ao mesmo tempo que eu queria reproduzir fielmente o sentimento do texto, eu também não poderia fazer isso completamente porque isso iria contra algumas decisões de estilo do próprio site. Então me prendi apenas aos dois itens restantes.

Todo texto que se encontra no site é formatado com base em Markdown, é um formato de arquivo de texto universal, simples e direto. Só que eu precisava de algo que elevasse as capacidades de um arquivo .md.

O @comark/nuxt é um motor de renderização de Markdown que oferece, assim como o @nuxt/content, a possibilidade de passar componentes diretamente no texto, fazendo com que uma implementação de artefatos interativos seja possível. E então o fiz.

O jogador era você

Primeiramente teria que implementar um sistema para receber a gamertag do usuário e armazenar ela na memória do navegador. E assim o fiz.

MineUser.vue
<script lang="ts" setup>
const gamertag = ref();

const get_tag = () => {
  const tag = localStorage.getItem("extra:minecraft:gamertag");
  if (tag) {
    gamertag.value = tag;
  } else {
    gamertag.value = "PLAYERNAME";
  }
};

emitter.on("extra:minecraft:change", get_tag);

onMounted(get_tag);
</script>

<template>
  <span>{{ gamertag }}</span>
</template>

Não era preciso algo avançado, algo extraordinário. Apenas armazenar uma string no localStorage do navegador serve para todo o propósito. Dentro da função get_tag, é feita uma simples checagem para saber se já existe a informação na memória, caso contrário, é dado um valor padrão.

Um prompt é oferecido ao visitante do site na primeira vez que ele acessa esse poema, não sendo obrigado a fornecer esse dado ele apenas pode clicar fora e o poema se lê da mesma forma. Mas após adicionar um nome, não existe outra interface que te faça mudar isso, porque não é uma feature, é um easter-egg.

De qualquer forma, você sempre pode ir no console do seu navegador e modificar esse pedaço de informação ao seu desejo, . Mas como eu não sou uma pessoa ruim, vou te dar a oportunidade de modificar essa informação caso você ainda esteja lendo esse artigo até aqui, como recompensa.

Do que você está falando?

No texto original, a ideia do Julian sobre esses seres conversarem se dava através da troca de cor ao longo do texto, são vozes falando sobre o jogador. Em conceito algumas dessas palavras são incompreensíveis para a gente, o Julian então exemplificou isso no texto original usando caracteres como **??§§ ou ***§§§???, só que quando isso foi para o jogo, no arquivo, ficamos com caracteres ainda mais esquisitos: §f§k§a§b. Eles funcionam para o renderizador gráfico do Minecraft fazer sua animação de texto com caracteres randomizados.

Seguindo o mesmo conceito de busca e substituição desse grupo de caracteres especiais ao longo do texto, o seguinte componente foi criado.

ForbiddenWords.vue
<script lang="ts" setup>
const text = ref();

const shuffled = () => {
  const sorted =
    "à, è, ì, ò, ù, À, È, Ì, Ò, Ù, á, é, í, ó, ú, ý, Á, É, Í, Ó, Ú, Ý,â, ê, î, ô, û, Â, Ê, Î, Ô, Û, ã, ñ, õ, Ã, Ñ, Õ, ä, ë, ï, ö, ü, ÿ, Ä, Ë, Ï, Ö, Ü, Ÿ, å, Å, æ, Æ, œ, Œ, ç, Ç, ð, Ð, ø, Ø, ¿, ¡, ß"
      .replaceAll(" ", "")
      .split(",")
      .toSorted(() => Math.random() - 0.5);

  return [
    sorted.at(0),
    sorted.at(1),
    sorted.at(2),
    sorted.at(3),
    sorted.at(4),
    sorted.at(5),
    sorted.at(6),
    sorted.at(7),
  ].join("");
};

const loop = setInterval(function () {
  text.value = shuffled();
}, 100);

onUnmounted(() => {
  clearInterval(loop);
});
</script>

<template>
  <span class="font-mono">
    {{ text }}
  </span>
</template>

Novamente é um código muito básico, raramente precisamos de enfeite. Temos uma seleção de caracteres acentuados para dar aquele efeito de fragmentos existentes na versão renderizada do Minecraft. Escolhi elas para poder aplicar uma fonte monoespaçada, porque assim consigo randomizar a seleção de caracteres sem ela afetar o tamanho no texto final.

Você pode perceber também que para maximizar a escolha pseudoaleatória dos caracteres, eu ainda seleciono eles dentre 8 espaços de sequência e depois junto tudo para então termos nosso fragmento. Eu particularmente acho isso algo muito , além de . Você não acha, ?

Enfim, ao final do código a gente roda esse gerador de fragmentos em intervalos de 100 milissegundos. Para isso não sair do controle, esse loop é desfeito assim que você deixa a página e o componente é desmontado.

Você pode ter percebido que muito do funcionamento desses componentes levam em conta o fato deles montarem e se desmontarem, fazendo com que o seu funcionamento seja contido neles mesmos. Informação muito relevante, não é?

Localmente

Esse poema está em domínio público, essa foi a resolução do Julian após toda sua desventura lidando com executivos. Você consegue ler ele em sua forma completa em qualquer lugar da internet sem problemas. Após fazer bastante pesquisa, eu ainda assim não consigo atribuir a tradução para português a uma pessoa ou grupo, no entanto... Diversos sites que disponibilizam a tradução como um mod para o jogo citam a versão publicada no site da Fuzzy, Escola de Ciência e Tecnologia, como fonte.

Entrei em contato com o fundador da Fuzzy, o professor Michel Girotto Brum, perguntando sobre a publicação desse poema em específico. Me revelou que além de não ser o autor da tradução, também não sabia quem havia traduzido e que apenas achou o poema em sua totalidade já traduzido para o nosso português, fazendo apenas algumas correções no texto.

De qualquer forma, eu não poderia deixar de publicar a tradução de um poema tão importante aqui só por não saber a origem de sua tradução, tudo o que eu tinha era algo próximo disso e então peguei. Na mesma conversa com o professor eu falei que iria creditar ele como autor dessa tradução pois não havia mais a quem creditar, ele aceitou.

Finalmente

Ter a oportunidade de traduzir uma experiência de jogo para um formato "estático" de texto na internet e ainda assim dar interatividade para isso me divertiu bastante, espero que você também tenha se divertido ao descobrir até onde eu fui para tornar isso possível.

Lembre-se: ninguém consegue competir com alguém que está se divertindo.

Alpha Te vejo na próxima!

Voltar ao blog
Nada por aqui.