5 de agosto de 2015 | Tech & Games | Texto: | Ilustração: Gabriela Sakata
Games 101: Twine

No mês passado usamos o RPG Maker para fazer um joguinho com uma das ferramentas gratuitas mais simples de serem usadas por principiantes. Hoje vamos subir um tiquinho mais a dificuldade e apresentar uma outra engine: o Twine. Assim como o RPG Maker foi produzido com determinado gênero de game em mente (ele é um “fazedor de RPG”, afinal), o Twine também é indicado para experiências um tanto quanto específicas – o que não o torna desinteressante!

Não se restringindo apenas a “jogos”, o Twine é antes de qualquer coisa uma ferramenta para se contar histórias interativas. Por isso, se você não manja nada de mecânicas interativas, física, modelagem e simplesmente quer contar uma boa história num formato digital, o Twine pode ser um lugar bacana para começar.

O principal material que usamos aqui são palavras. É possível importar imagens e sons também, mas o cerne aqui é texto. Você não vai conseguir criar um tradicional Super Mario ou um Pokémon no Twine. Mas se você sempre se perguntou por que não existem mais fanfics explorando a vida de criaturas monocórdias que passam a vida em esferas minúsculas e batalhando para agradar crianças melequentas que as tiraram da liberdade em primeiro lugar, bem, você acaba de encontrar o seu lugar!

Ou seja, no Twine você criará principalmente jogos text-adventure (aventuras em texto). Usando principalmente ramificações de hyperlinks, suas histórias lembrarão os antiquíssimos livros Choose your Own Adventures (Escolha a sua própria aventura). É um estilo em desuso hoje em dia, mas divertido se você só está interessada em fazer suas histórias acontecerem.

O Twine não requer programação para fazer o basicão, mas, como sempre, conhecimentos de lógica de programação, CSS e HTML poderão te ajudar a deixar o jogo mais esperto quando você estiver dominando a ferramenta um pouco mais.

1. Baixando o programa

A primeira coisa a fazer é baixar o programa, gratuitamente, em sua página oficial. Você pode também trabalhar diretamente online, mas nesse tutorial usaremos a versão de desktop. 

2. Criando a história

Assim como no caso do RPG Maker, é ideal que você tenha uma ideia da história que pretende contar antes de começar. Principalmente o início e os finais idealizados.

A sua imaginação é o limite. Na real, se você quiser largar de lado a ideia de fazer um game e simplesmente criar uma narrativa com cadência linear, você pode. A história é sua, afinal! Mas o Twine foi feito para se criar histórias multilineares e você deve manter isso em mente quando for mexer nele.

Para esse tutorial, eu vou usar de exemplo um jogo incompleto que estou desenvolvendo para um projeto. Provisoriamente o estou chamando de Sometimes I Feel Like a Cyborg, e ele foi feito em paralelo com um texto que escrevi para a Capitolina. É bem bobinho e simples. A ideia central é de ser um típico Escape the Room (Fuja da Sala) no qual lidamos com um narrador não confiável que guia um jogador/personagem vulnerável por todo o percurso. O jogador, presumivelmente, começa o game sem saber o que está acontecendo e precisa ser guiado pelo narrador. Ao mesmo tempo, o personagem também nada sabe e parece ter acordado ferido e sem partes suficientes do próprio corpo para julgar por si próprio o que está acontecendo ao redor. A premissa da história é que o jogador vá aceitando a ajuda da voz/narrador misteriosa e se tornando, cada vez mais, uma máquina – em sua tentativa de deixar o galpão misterioso.

3. Funcionalidades

Com a história em mente, vamos conhecer a nossa ferramenta de criação. Clique no ícone do Twine na pasta onde você o instalou. Ele não cria um atalho na sua área de trabalho automaticamente, então talvez você queira fazer isso manualmente, clicando com o botão direito no ícone, então em “Criar Atalho” e aí colando-o em outra área mais visível de seu computador.

Quando você abrir o Twine pela primeira vez, deverá ver uma tela como a de baixo.

twine2

O primeiro quadrado à esquerda é a primeira frase que o leitor lerá ao abrir a página. O segundo é o título de sua história. E o terceiro é onde você vai colocar o seu nome ou pseudônimo. Simples, né?

Nas barras superiores você vê funcionalidades clássicas, como a possibilidade de dar zoom, criar um novo projeto do zero, salvar ou testar como está o seu game. Vamos mostrando essas coisas conforme forem necessárias aqui.

4. Começando a montar seu jogo: o Menu Inicial

A primeira coisa a fazer é criar sua “tela inicial”. Clique duas vezes no quadradinho de cima para escrever.

twine3

Um erro comum é fazer com que, assim que abrir a página, o leitor vá parar direto na sua história, sem mais nem menos. A maioria dos jogos possuem um menu antes do jogo em si começar. Isso dá tempo do jogador/leitor estabelecer seu próprio ritmo e talvez conhecer um pouco mais do clima geral de seu projetinho antes mesmo de iniciar.

Vamos então criar o nosso menu dentro da janela Start.

twine4

Ok, passo a passo agora. Eu criei três opções de hyperlink:

  • A opção de iniciar o jogo – que vai levar o jogador/leitor para a história em si. [[Começar jogo|Despertar1]]
  • A opção de ver créditos mais detalhados do que a inicialmente oferecida pela própria ferramenta (útil se você não estiver trabalhando sozinha ou se quiser fazer notas específicas sobre a produção). [[Créditos]]
  • A opção de sair do jogo e ser levada diretamente para outra página da web. [[Sair do jogo|link pro Google]]

O que são esses colchetes duplos? 

Os colchetes duplos [[ ]] sinalizam que a sentença entre eles será hypertexto – ou seja, que ao clicar nela, o jogador será levado para outra passagem, como se estivesse virando uma página. Os colchetes diferenciam um texto comum, feito para ser lido, de um texto que também é porta para outros.

Por que você escreveu [[Começar jogo|Despertar1]], usando a barra vertical ali no meio, mas depois escreveu só [[Créditos]] sem a barra? O que isso significa?

Eu não precisava, mas organização é muito importante quando se trabalha com histórias, lineares ou não. No caso de [[Créditos]] o texto que vai aparecer pro jogador será o mesmo que estarei usando internamente no Twine para me guiar pela ferramenta. Dá uma olhada.

twinec

Tanto o jogador – fora da ferramenta -, quanto eu/desenvolvedora – dentro da ferramenta, através do quadradinho de hyperlinks -, usamos a mesma palavra-chave.

Agora, eu quero que o jogador leia o “Começar Jogo”, mas não que meu quadradinho do Twine tenha esse nome. Isso porque eu estabeleci, no rascunho, que meu texto será dividido em trechos narrativos que começam com um despertar e avançam progressivamente para a aventura em si. Eu poderia manter o “Começar Jogo” sem problemas, mas, por questão de organização interna, preferi enumerar meu progresso. O jogador não vai ver isso, mas quando você tiver uma história com milhões de caminhos diferentes, vai ser muito mais fácil identificar que Despertar45A é paralelo a Despertar45B do que caso se as passagens se chamem “Ir para a sala” e “Passar batom”. Isso também evita repetições, que poderão criar loops no seu game.

Então o que [[Começar jogo|Despertar1]] significa é que tudo o que estiver antes da barra vertical é o que o leitor vê, tudo o que estiver depois da barra vertical é o que o programa entende. É o nome da passagem.

E logo, isso funciona para links externos também…

Sim. E por isso mesmo usamos uma função parecida em [[Sair do jogo|https://www.google.com.br]] . O jogador lê “Sair do jogo”, mas ao clicar será direcionado para o site de buscas. Eu não preciso deixar aquela penca de texto feioso para gentilmente guiar o jogador para outro canto da internet.

5. Narrativa

Com o menu pronto, vamos à história em si. Você vai notar que, assim que escrever algo entre os colchetes duplos, automaticamente o Twine criará uma nova passagem de texto (ou seja, uma nova janelinha). Vamos escolher aquela associada a “Começar jogo”, que chamamos aqui de “Despertar1”.

twine5

Todo o texto que você digitar livremente no bloquinho vai aparecer para o seu leitor.  Aqueles sem colchetes serão textos simples, e os entre colchetes guiarão o leitor através da história.

twined

Repare que a segunda opção (“Como é?”) está apontando para a própria passagem Despertar1, o que faz com que, ao clicar ali, o texto volte a este mesmo ponto. Isso, nesse caso específico, foi proposital, numa tentativa de dar ao jogador um senso de limitação. Para avançar, é obrigatório clicar na primeira alternativa (“Hã… onde estou?”), que levará o player de fato para Despertar2.

twine6

A partir daí é continuar sua história de acordo com como você acha mais adequado. Como eu disse antes, a boa do Twine é criar narrativas multilineares em que o que seu jogador interfere no andamento do game.

twine7

E isso é muito massa e panz, mas, miga, vou te dar uma dica daora antes que você se empolgue demais: TENHA UMA NARRATIVA CENTRAL! (Caps não acidental.)

twine9

Eu sei que essa pode parecer uma experiência um pouco falsa, e não deixa de ser verdade. Afinal de contas, que narrativa multilinear é essa que, no final, afunila mais ou menos para o mesmo lugar? Bem, uma coisa que é importante de entender é que hoje em dia, mesmo nos games que mais se gabam de produzir “narrativas emergentes” ou na qual você pode supostamente escolher seu próprio caminho, é muito complicado criar milhares de resultados diferentes para todas as suas ações.

Pense nos termos do próprio Twine: imagine que cada ramificação cria mais duas ramificações completamente diferentes, ad infinitum. Multiplique, multiplique e multiplique e pense só no tamanho das histórias que você terá de escrever, mesmo se forem curtas. Você provavelmente nunca vai conseguir terminar de escrever todas elas. E, mesmo se conseguir, quantas de fato terão a qualidade que você imaginou inicialmente? Digamos que num determinado momento, o ponto crítico seja que seu herói fuja do combate e que isso lhe cause tamanha culpa que vai afetar seu relacionamento com todos os demais personagens. Se eu preciso que isso aconteça porque é um ponto crítico de minha história, faz sentido cercar a narrativa de modo que o jogo só avance quando meu personagem fugir. Eu posso, por exemplo, fazer um vilão tão poderoso que qualquer chance de lutar contra ele automaticamente mate meu herói (e o Game Over é o beco sem saída dos jogos). Esse trabalho de seleção é game design, e deve ter sempre em mente a experiência do jogador.

Jogos requerem agência, isso é, a sensação de que o que você faz produz resultados diferentes e significativos. Mas mais importante que a agência em si é a sensação de agência. Existem diversas maneiras de manter o seu game nos trilhos e ainda assim dar a impressão de que a ação do jogador foi significativa.

Para começo de conversa, só porque você tem uma narrativa central isso não significa que seu jogo precise ser o equivalente digital de um corredor. Garanta que escolher caminhos diversos dará ao jogador uma compreensão um pouco diversa. Por exemplo, se seu protagonista tiver de escolher entre conversar com duas testemunhas de um crime, faça com que falar com um personagem ou outro dê impressões diferentes sobre o acontecido. Talvez uma das testemunhas seja idosa e tenha problemas de visão e audição, mas a outra seja parente do suspeito. No fim das contas, elas provavelmente relatarão uma cena muito semelhante, mas diferentes o suficiente para que cada experiência seja única.

A outra maneira é salvando, em momentos mais pontuais e específicos, os resultados de suas escolhas. Gamifiquemos com variáveis.

6. Variáveis

Variáveis são “lugares” onde você pode guardar determinadas informações dinâmicas para a posterioridade. Na nossa história, digamos que o nosso narrador misterioso instrua o protagonista/jogador a se levantar.

O texto em questão pode ser algo assim:

twinee

A alterativa “certa” neste caso deverá ser a primeira, ou seja, fazer como foi pedido e se colocar de pé. Porém, vamos dizer que nosso protagonista está machucado e que não quero que consiga se colocar de pé sem um apoio. Assim, se simplesmente tentar se levantar neste primeiro momento, ele deverá receber um texto informando-o de que caiu de bunda no chão. Por outro lado, se ele tiver escolhido a segunda opção (“Tatear ao redor”), por acaso descobrirá um cano solto que poderá usar como bengala provisória. Ou seja: ao clicar na segunda opção, eu vou “gravar” que meu personagem achou um apoio e que agora é capaz de se erguer.

Fazemos isso criando uma variável na passagem referente ao momento em que encontro o apoio, ou seja em Tatear ao Redor/Despertar5B.

twinef

O que <<set $apoio=true>> significa?

É aqui que a variável é criada. Usa-se a macro << >> para inserir um pedaço de código dentro da passagem. O “set” estabelece que estamos criando uma variável e que daremos um valor a ela. O cifrão $ é usado para estabelecer que estamos falando de uma variável chamada “apoio”, que é definida (=) como “true”, ou seja, como verdadeira ou “ligada”. Ou seja, “apoio está ligada” – pense como se fosse um interruptor elétrico. Parece chatinho, mas é bem simples de pegar depois de um tempo.

Daria na mesma se eu estivesse chamando a variável de “bengala”, por exemplo, com a única diferença que nesse caso a macro seria <<set $bengala=true>>. Nesse caso, o importante é saber se o objeto (bengala ou apoio) existe. Por outro lado, seu eu, em vez de falso ou verdadeiro estivesse trabalhando com valores numéricos, a função seria ligeiramente diferente. Por exemplo, se minha personagem está carregando um revólver com seis balas e quero registrar esse número, a macro em questão seria: <<set $balas to 6>>. Isso é, no lugar de “=”, eu deveria usar “to” e o número em questão.

Mas divago. Voltemos ao tutorial em si. Agora que criei a minha variável, eu preciso que o jogo aja diferente caso ela esteja ligada ou desligada, certo? Voltemos à nossa janela Despertar 5 e façamos uns ajustes.

twineg

O que há de diferente aqui? Bem, eu agora estou usando a função if/se para, numa mesma janela, poder gerar duas passagens diferentes. Leia desse jeito:

Se a variável apoio estiver ligada, geram-se as seguintes opções
Levantar-se
Fazer perguntas

senão, geram-se as seguintes opções
Levantar-se
Tatear ao redor
Fazer perguntas

Fim_Se

A minha janela NÃO vai gerar ambos os textos, mas apenas o que corresponder ao meu “se”: se apoio for “true” (ou seja, se o jogador já tateou ao redor e foi parar na janela Despertar5B), o meu texto terá apenas as opções de fazer perguntas ou levantar-se. Se apoio for “false” (ou seja, se ele sequer tiver sido criado em primeiro lugar), o jogo ainda me dará a opção de tatear ao redor.

Agora, posso fazer com que quando meu jogador clica em  “Levantar-se”, embora em ambos os casos ele seja levado à janela Despertar5A, ele também verá resultados diferentes. Veja só.

twineh

Que se lê:

Se variável apoio estiver ligada
Jogador pode avançar na história

Senão
Personagem cai e volta para janela Despertar5

Fim_Se

7. Finalizando

Agora que você já sabe o básico sobre o Twine pode acrescentar alguns detalhes para deixar sua história mais interessante. Você pode, por exemplo, criar uma variável numérica HP (pontos de vida) para seu personagem e, cada vez que ele se machucar, pode ir reduzindo esses pontos. Digamos que ele comece com dez pontos de vida. Para isso, é só ir lá no começo da sua história (na primeira passagem depois da janela Start) e escrever <<set $HP to 10>>. Então, nas passagens em que seu personagem se machucar é só você diminuir esses pontos. Por exemplo, consideremos que, ao cair por falta de apoio, seu personagem perca 1 ponto de vida. Lá na janela Despertar5A você botaria a função <<set $HP-=1>>  no trecho abaixo do <<else>>. Só não esqueça de, depois que a contagem dos pontos perdidos poder ser superior a 10, criar uma função If/Se que confira se o HP é menor que zero – que nesse caso levará ao Game Over.

Outra coisa legal que você pode fazer é inserir imagens. Para isso, basta incluir a imagem no seu projeto clicando lá em cima no menu Story > Import Image > From File (se for pegar direto de seu computador); e aí, na passagem em questão, inseri-la com a função [img[nomedaimagem]]. Eu peguei na internet (em uma página aleatória) uma imagem para esse exemplo.

twinei

twinej

Vale lembrar que o Twine não ajusta a imagem à tela, então você terá que fazer os cálculos por conta própria.

Finalmente, uma vez que seu jogo estiver lindo, prontinho e cheiroso você vai querer compartilhar com o universo, né? Nesse caso, você deverá clicar no menu Build, lá em cima, e então em Build Story. Agora você tem um jogo em HTML que pode ser exportado para qualquer site. Para publicar gratuitamente em portais especificamente voltados para o Twine recomendo um desses três: Adventure Cow, philome.la ou Neocities.

8. Congratule-se

Parabéns, você criou seu segundo joguinho! Depois mostra pra gente como ficou!

Existem diversos outros tutoriais na internet, e, sacando um pouco de inglês, na própria página da engine, você encontra centenas de dicas e exemplos que podem ser usados para aprender um pouco mais. Se quiser tirar dúvidas ou fazer qualquer comentário é só entrar em contato com techgames@revistacapitolina.com.br.

E mês que vem a gente vai falar do Construct 2 Free!

Vanessa Raposo
  • Coordenadora de Tech & Games

Vanessa é carioca, mas aos 25 anos sente que o mundo é grande demais para se pertencer a só um lugar. Por isso, passa boa parte do tempo em paisagens imaginárias e planejando suas próximas viagens - que podem ou não acontecer (“As passagens pra Plutão ainda estão disponíveis, moço?”). Gosta de filmes da Disney e de musicais mais do que dizem ser aconselhável para sua idade. Quando não está pseudofilosofando sobre o papel dos videogames na cultura pop, pode ser encontrada debruçada sobre seu laptop, arrancando os cabelos por alguma história que cisma em não querer ser escrita. 

  • Emily

    Adoreeeei! Desde já brincando aqui, talvez a ferramenta nova me estimule a voltar a escrever <3

    • http://criandomundos.wordpress.com/ Vanessa Raposo

      Espero que esteja se divertindo, Emily!
      Fico megafeliz de ler isso! <3

  • Pingback: Games 101: Construct 2 Free — Capitolina()

  • Luan Oliveira

    Haha pena que não existem mais topicos para o twine, obrigado. principalmente pela dica de direcionar a historia. Assim que finaliza-lo eu mando o link aqui (Se eu lembrar 🙂 )

Sobre

A Capitolina é uma revista online independente para garotas adolescentes. Nossa intenção é representar todas as jovens, especialmente as que se sentem excluídas pelos moldes tradicionais da adolescência, mostrando que elas têm espaço para crescerem da forma que são.

Arquivos