Tutorial de SugarCube

Janos Biro

fev 24, 2025

Um tutorial para criação de um jogo simples usando o Twine no formato SugarCube, atualizado para a versão 2.37.

Comprar zine

Baixar zine

Tutorial básico

Introdução

Este é um tutorial para criação de um jogo simples usando o Twine versão 2.10 no formato SugarCube versão 2.37.

O que é Twine?

Twine é uma ferramenta de código aberto para criação de ficção interativa em formato HTML criado por Chris Klimas. Ele permite que qualquer pessoa crie facilmente jogos de hipertexto, sem muitos conhecimentos de programação. Além disso, pode ser acessado via web, sem necessidade de instalação. Embora ele não seja muito conhecido no Brasil, é bastante usado para criação de jogos independentes e projetos artísticos ou educacionais.

Embora seja criado para jogos baseados em texto, áudios e imagens também podem ser usadas. Os formatos de história permitem que você adicione variáveis e lógica de programação. Os formatos mais conhecidos são o Harlowe e o SugarCube.

O que é SugarCube?

Embora o Harlowe seja o formato padrão do Twine, o formato SugarCube é o preferido de muitos criadores por ser mais flexível e integrado ao JavaScript. Ele possui um sistema de salvamento integrado e uma barra lateral que pode ser facilmente modificada. É ideal para quem deseja criar jogos de texto com mecânicas mais complexas, como por exemplo elementos de RPG.

O SugarCube tem maior suporte para a inclusão de instruções personalizadas; ferramentas de depuração de código mais sofisticadas para encontrar e corrigir “bugs” e a interface está completamente traduzida para Português Brasileiro.

Como usar o SugarCube

Primeiro, abra o site do twine[1]. Baixe e instale o Twine 2, ou use online. Se decidir usar online, lembre-se que os arquivos temporários ficam salvos no cache do navegador, e não no seu dispositivo, então tome cuidado ao apagar seus dados de navegação, pois você pode perder seu trabalho. Exporte os arquivos para o seu dispositivo frequentemente para evitar perdas. Não use o Twine em modo anônimo do navegador, pois ele necessita da permissão de uso de cookies para funcionar corretamente.

Para mudar a linguagem do Inglês para Português Brasileiro, clique em Twine na barra superior, depois em Preferences, e selecione Português Brasileiro na seção Language.

Começando uma nova história

Os projetos no Twine 2 são chamados de histórias. Na Aba História clique em Novo, escreva “Tutorial” no título e clique em Criar. Isso abrirá seu novo projeto, onde você pode visualizar as passagens, que são as partes da sua história. O modo como as passagens se conectam é o que cria a estrutura interativa da sua história.

Mudando para o formato SugarCube

O formato padrão do Twine para novas histórias é o Harlowe. Para mudar o formato da sua história, clique na aba História e então em Detalhes e selecione o formato SugarCube 2.37. Para selecionar o SugarCube como formato padrão para suas novas histórias, volte à tela inicial do Twine, clique em Twine e depois na opção Formatos da história. Escolha um formato de história e clique em Usar como Formato Padrão.

Mudando o idioma do SugarCube para Português brasileiro

A tradução do SugarCube para Português brasileiro está disponível, mas é preciso adicioná-la via código de JavaScript.

O arquivo dessa tradução, assim como dos demais idiomas, atualmente não está mais disponível no site do SugarCube[2], pois a versão 2.37 alterou os sistemas internos do SugaCube e tornou os antigos arquivos de tradução incompatíveis. Mas você pode baixar a Tradução atualizada da UI do Sugarcube no site Caos e Amor[3]. A tradução é um arquivo .js (JavaScript), que pode ser aberto num editor de texto (como o Bloco de Notas). Copie o texto inteiro (Ctrl+A seguido de Ctrl+C). Em seguida, clique em História no menu superior, e em JavaScript na barra abaixo. Isso irá abrir uma janela de texto chamada JavaScript da História. Cole o texto nessa janela (Ctrl+V). Feche a janela e pronto. Agora os botões da barra lateral aparecerão, assim como o resto da interface, estará em Português do Brasil.

Criando, editando e linkando passagens

Quando você começa uma nova história, ela já tem uma passagem inicial chamada “Passagem sem título”. Essa passagem é marcada com o símbolo que indica que é nela que o jogo começa.

Na barra superior você verá 4 itens: Passagem, História, Compilar e Twine. Na barra de baixo você verá os itens de cada um desses menus.

O menu Passagem é composto dos itens: Novo, Editar, Renomear, Excluir, Testar a Partir Daqui, Começar a História Aqui, Ir Para e Selecionar Tudo.

Alguns itens não estarão disponíveis até que você clique numa passagem. E alguns itens não funcionam com a passagem inicial, que não pode ser excluída, por exemplo.

Clique na passagem inicial e renomeie ela para “Entrada do Teatro”. Agora clique em “Editar” ou clique duas vezes na passagem para abrir o texto da passagem. Na janela da passagem você terá as opções de Desfazer, Refazer, Etiqueta, Tamanho, Renomear e Testar a Partir Daqui. A opção “Etiqueta” e opção “Tamanho” servem para mudar a representação da passagem na tela de projeto. Essa mudança não altera em nada na execução do jogo e serve apenas para você organizar e visualizar melhor a estrutura da sua narrativa. Outros usos das etiquetas são explicados no tutorial avançado.

Adicione o seguinte texto na sua passagem:

Você está em um salão espaçoso, esplendidamente decorado em vermelho e dourado, com lustres brilhantes no alto. Além da porta para a rua, há portas à direita e à esquerda.

[[Sair do teatro]]
[[Entrar na porta da direita]]
[[Entrar na porta da esquerda]]

Note os [[colchetes duplos]]. Todo texto que você coloca entre colchetes duplos se torna um link para outra passagem. Se uma passagem com o nome especificado entre os colchetes ainda não existe, ela será criada automaticamente. Feche a janela da passagem e você terá três novas passagens. A passagem Entrada do Teatro está “linkada” a elas, o que é representado por setas direcionais.

Agora edite a passagem chamada Sair do teatro e adicione o seguinte texto:

Você acabou de chegar e, além disso, o tempo lá fora parece que está piorando.

[[Voltar|Entrada do Teatro]]

Note a barra vertical “|” entre Voltar e Entrada do Teatro. O texto à esquerda da barra é o que vai aparecer na tela do jogo como um link clicável, e o texto à direita é o nome da passagem que está sendo linkada. Agora feche novamente a janela de edição e perceba o que mudou: Você não criou nenhuma passagem nova, mas adicionou um link de retorno para a mesma passagem, indicado pela seta com direcional duplo. Clique em Compilar e depois em Jogar, na barra superior, e teste o que acontece se você tenta sair do teatro. O jogo não permite, obrigando a voltar para a entrada. Todo jogo é limitado por barreiras desse tipo, elas indicam as coisas nas quais deveríamos nos focar. No caso, é fazer algo dentro do teatro.

Clique novamente em Passagem e experimente excluir a passagem chamada Entrar na porta da direita, selecionando a passagem e depois clicando em Excluir, ou usando a tecla Delete do seu teclado. Você verá um sinal vermelho na passagem inicial, indicando que o link para uma passagem continua existindo, mas a passagem não foi encontrada pelo programa. Na execução do jogo, o link continuará existindo, mas terá uma cor diferente, e se clicado, levará a uma mensagem de erro.

Agora clique em Novo, no menu superior, e adicione uma nova passagem ao jogo. Clique e arraste essa nova passagem para o lugar onde ficava a passagem que você deletou. Agora a renomeie como “Entrar na porta da direita”, exatamente como antes, observando as maiúsculas e espaços. Edite e adicione o seguinte texto:

Está escuro como breu.

[[Voltar|Entrada do Teatro]]
[[Esperar]]

Feche a janela e veja o que aconteceu. O link da primeira passagem voltou a funcionar, se tornou um link de via dupla, e outra passagem foi adicionada.

Edite a passagem “Esperar” e adicione o seguinte para criar um final trágico para a história, fazendo uma referência ao clássico jogo Zork:

Você é devorada por um Grue. Você deveria saber que ficar no escuro é perigoso em jogos de texto.

Fim.

A história não está completa, mas já tem um final possível. Agora você sabe criar, editar e linkar passagens no Twine. Mas que tal tornar as coisas um pouco mais interessantes?

Usando variáveis

Em programação, variáveis são valores que um programa armazena quando executado. Aprender a manipular variáveis no Twine permite criar jogos mais complexos e interessantes.

Para começar, crie uma nova passagem e renomeie para StoryInit, observando as letras maiúsculas. Deixe essa passagem de lado, ela não vai linkar com nenhuma outra. Ela serve para declarar variáveis que serão usadas no jogo. No texto dessa passagem, escreva:

<<set $capa to 1>>

Os caracteres “<<” e “>>”, indicam uma macro, como são chamados os comandos no SugarCube. A macro “set” serve para definir o valor numa variável. Ela é seguida do nome da variável, $capa, o operador to e um valor numérico ou alfabético. No caso, vamos criar uma variável numérica com valor igual a 1. O cifrão ($) deve sempre ser o primeiro caractere de uma variável de história. As variáveis temporárias, começam com “_”. Para nossa história, usaremos apenas uma variável de história.

As variáveis não aparecem no texto da passagem durante o jogo a menos que especifiquemos isso. Se você incluir o nome de uma variável, como $capa, no texto de uma passagem, o valor da variável é exibido no lugar do nome da variável. O valor da variável também pode ser exibida por meio da macro <<print $variável>> ou <<= $variável>>. O valor das variáveis pode ser visto no modo de depuração, que será explicado no tutorial avançado.

Agora experimente adicionar o seguinte texto na passagem Entrar na porta da esquerda:

As paredes desta pequena sala nitidamente já estiveram cheias de pequenos ganchos para pendurar roupas, embora agora apenas um pequeno gancho de bronze permaneça afixado. <<if $capa is 0>>Sua capa de chuva está pendurada no gancho.<</if>>

<<if $capa is 1>>[[Pendurar sua capa de chuva no gancho|Entrar na porta da esquerda][$capa to 0]]<</if>>
[[Voltar|Entrada do Teatro]]

Estamos agora usando a macro if, uma macro de controle para criar uma condicional lógica. Como toda macro do SugarCube, ele precisa estar entre << e >>, mas diferente de set, ela pode conter outras instruções dentro dela, e o final precisa ser indicado por um <</if>>. Tudo que está entre o <<if>> e o <</if>> só acontece se a condição definida pelo if for verdadeira. Como definimos a variável $capa com o valor 1, inicialmente a frase “Sua capa de chuva está pendurada no gancho.” não irá aparecer no texto da passagem, mas a opção “Pendurar sua capa de chuva no gancho” irá. Quando essa opção é clicada, a passagem é repetida, pois está linkada a si mesma, e a variável $capa é mudada para o valor 0. Links com essa estrutura são chamados de setter links, porque eles alteram o valor de uma variável no momento que o link é clicado. Agora o texto indicando que a capa está no gancho irá aparecer no texto da passagem. O operador is é usado nesse caso ao invés do to. O comando “if $capa is 0” poderia ser traduzido como “se a capa é igual a 0”.

Set e if são apenas os exemplos mais básicos de macros disponíveis no SugarCube. Para conhecer outras macros e funções, consulte a documentação do SugarCube.

Finalizando a história

Você agora pode criar o final “vitorioso” dessa história. Edite novamente a passagem inicial, e mude a segunda opção, [[Entrar na porta da direita]], para:

<<if $capa is 1>>[[Entrar na porta da direita]]<<else>>[[Entrar na porta da direita|Teatro]]<</if>>

A macro else é um complemento do if. Ela indica o que acontece quando a condição NÃO é verdadeira: se a capa for 1, vá para a passagem Entrar na porta da direita, se a capa NÃO for 1, vá para a passagem Teatro. O texto do link continua o mesmo. Também é possível usar a macro elseif se você quiser encaixar mais de uma condição: se a condição não for verdadeira, então veja se esta é. Mas lembre-se de sempre fechar com /if.

Edite a nova passagem, Teatro, com o seguinte texto:

O teatro, muito mais rústico do que você imaginaria depois da opulência da entrada, está completamente vazio, aparentemente em reforma. Parece haver algum tipo de mensagem escrita na serragem que cobre o chão.

[[Ler a mensagem]]
[[Voltar|Entrada do Teatro]]

Agora edite a passagem Ler a mensagem com sua mensagem final, por exemplo:

A mensagem na serragem diz:

VOCÊ VENCEU

Pronto, você fez um jogo simples, com dois finais possíveis.

Note a seta de looping na passagem Entrar na porta esquerda. Isso acontece porque ela está linkada para ela mesma.

Agora a história precisa de um nome melhor do que “Tutorial”, não é mesmo? Clique em História, no no menu superior, e depois em Renomear. Mude o título da história para “A Capa da Escuridão”, e pronto, você tem uma história completa, baseada no Cloak of Darkness[4], um site que compara diferentes ferramentas de criação de ficção interativa. Teste sua história para ver se não acontece nada inesperado.

As outras opções do menu História são: Encontrar e Substituir, Detalhes, Etiquetas das Passagens, JavaScript e Folha de Estilos. Encontrar e Substituir é recurso de edição para encontrar palavras e substituir automaticamente por outras. Etiquetas das Passagens lista todas as etiquetas sendo usadas, e as outras duas são para conter o código JavaScript e CSS da história, respectivamente.

Clique no menu Compilar. Você verá as opções: Testar, Jogar, Revisar, Publicar para Arquivo e Exportar como Twee. Clique em Publicar para Arquivo para salvar seu jogo no formato HTML. Você pode enviar esse arquivo para outras pessoas, ou publicar na internet. Não é preciso ter o Twine instalado para jogar sua história, basta um dispositivo com navegador, mesmo que não esteja conectado na internet. Você pode abrir o arquivo do seu jogo e modificá-lo em outro local usando o Twine. Para isso, clique em Biblioteca e depois em Importar, no menu da tela inicial.

Publicando seu jogo

Depois de criar seu próprio jogo, é recomendável publicá-lo na internet. Você pode incluí-lo como uma página normal de HMTL em seu site, ou incluí-lo na biblioteca do itch.io. Isso possibilita que as pessoas possam jogar sem fazer o download.

Considere também incluir no IFDB[5] (Interactive Fiction Database). Descubra o IFID (número de identificação único para cada ficção interativa) do seu jogo na opção Detalhes, e liste seu jogo na maior base de dados de ficções interativas do mundo, para que possa ser facilmente encontrado por outras pessoas. Infelizmente o IFDB não se encontra disponível em Português Brasileiro, mas é importante incluir as ficções interativas brasileiras nele.

No Twine 2.10, você também pode exportar seu jogo para um arquivo TWEE. TWEE é um formato de texto que pode ser editado em qualquer editor de texto, e importado no Twine assim como os arquivos HTML. Isso permite que você escreva seu jogo num editor de texto de sua preferência, e só use a interface do Twine para compilar seu jogo.

Para baixar o arquivo do jogo criado nesse tutorial, visite a página do tutorial no site Caos e Amor[6].

Tutorial avançado

Agora vamos dar algumas dicas para quem pretende se aprofundar um pouco mais na criação de jogos de texto.

Etiquetas

Como você viu no tutorial básico, toda passagem tem um espaço para adição de etiquetas. Para adicionar uma etiqueta, basta clicar em Etiqueta e digitar um nome para ela. Você também pode escolher uma cor para sua etiqueta. Etiquetas tem três funções básicas:

1. Destacar passagens especiais.

2. Criar uma classe de passagens que podem ser modificadas em conjunto.

3. Modificar a função da passagem. Por exemplo, a etiqueta bookmark marca uma passagem como um ponto para o menu “Pular para”.

Estilo da fonte e cor do fundo

Para mudar a fonte e o fundo da sua história, você vai precisar conhecer alguns códigos de CSS (“Cascading Style Sheets” ou “Folhas de Estilo em Camadas”), que definem a apresentação de documentos em HTML. Clique em História e depois em Folha de Estilos, e adicione o seguinte:

body {
background-color: white;
color: black;
font-family: Futura,Impact,Helvetica,sans-serif;
font-size: 125%;
}

A palavra body indica a camada que estamos editando, que no caso se refere ao corpo do texto. As instruções para alterar uma camada devem ficar entre { } e são separadas por ponto e vírgula. Se você quiser alterar somente um elemento da página, aqui vão alguns nomes de camadas importantes:

· a: modifica todos os links clicáveis.

· .passage a: modifica apenas os links da passagem, sem mudar os links da barra lateral, por exemplo.

· a :hover modifica os links apenas quando você passa o mouse sobre eles.

Você pode modificar passagens marcadas com uma determinada etiqueta, por exemplo:

.escuridão {
background-color: black;
color: white;
font-size: 100px;}

Isso muda apenas as passagens com a etiqueta “escuridão”. Note que é preciso adicionar um ponto antes do nome da etiqueta.

Mudando o estilo de apenas algumas palavras na passagem

Você também pode mudar o estilo de trechos específicos do texto de uma passagem usando o marcador de estilo personalizado, @@. Por exemplo, se você substituir a palavra “FIM” na passagem Esperar pelo seguinte código, ela vai aparecer em vermelho:

@@color:red;FIM@@

Outros marcadores de estilo são:

//Itálico//
''Negrito''
__Sublinhado__
==Riscado==
^^Sobrescrito^^
~~Subscrito~~

Você também pode usar * no começo de uma linha para criar listas não numeradas e # para criar listas numeradas.

Cores

Como deve ter visto, background-color se refere à cor do fundo e color à cor da fonte. Você pode usar o nome padrão de uma cor (em Inglês) ou os códigos hexadecimais da cor. Para uma lista completa de nomes e códigos de cores, visite color hex[7].

Fontes

O atributo font-family indica uma lista de fontes que o Twine vai tentar usar na história ou trecho da história, em ordem de prioridade. É preciso indicar os nomes corretos da fontes que pretende usar. Nem todas as fontes estão disponíveis em todos os computadores. Veja uma lista de fontes seguras[8]. Você também pode importar uma fonte do Google Fonts[9]. Por exemplo, para importar a fonte Liu Jian Mao Cao para sua história, você teria que adicionar a seguinte linha no começo da sua Folha de Estilos:

@import url('https://fonts.googleapis.com/css?family=Liu+Jian+Mao+Cao&display=swap');

E então incluir uma linha como “font-family: Liu Jian Mao Cao, cursive;” na camada em que deseja usar a fonte.

O atributo font-size indica o tamanho da fonte. Você pode usar várias medidas de tamanho, como % (porcentagem), px (pixels) ou vmin (tamanho relativo à menor medida da tela).

A barra lateral

As histórias do SugarCube vem com uma barra lateral com várias funções, como mostrar o título da história, os botões de navegação para retornar ou avançar para passagens já visitadas, e os botões de salvar e recomeçar o jogo. Há também um ícone de setinha no canto superior direito para recolher ou expandir a barra lateral. Se você marcar alguma passagem com a etiqueta bookmark, haverá um terceiro botão de navegação entre os outros dois, com um símbolo de um raio. Clicando nele abrimos o painel de pontos de salto, que permite retornar rapidamente para pontos marcados com a etiqueta bookmark que já tenham sido visitados.

Removendo a barra lateral

Se você não quer uma barra lateral no seu jogo, você pode incluir a seguinte linha na passagem especial StoryInit, criada no tutorial básico:

<<run UIBar.destroy()>>

A macro <<run>> é usada para executar algumas funções do SugarCube. Outras funções da barra lateral que podem ser usadas do mesmo modo:

· UIBar.hide(): esconde a barra, sem mudar o texto da passagem de posição.

· UIBar.show(): mostra novamente a barra se ela estiver escondida.

· UIBar.stow(): recolhe a barra. É possível expandir ela de novo com o botão.

· UIBar.unstow(): expande a barra se ela estiver recolhida.

As variáveis de sistema UIBar.isHidden() e UIBar.isStowed() podem ser usadas com a macro if para verificar se a barra está escondida ou recolhida. Elas retornam valores booleanos, ou seja, true se for verdadeiro, false se for falso. Assim, o seguinte código recolhe a barra caso ela esteja expandida, e expande caso ela esteja recolhida:

<<if UIBar.isStowed()>><<run UIBar.unstow()>><<else>><<run UIBar.stow()>><</if>>

Modificando elementos da barra lateral

Assim como você viu na seção Estilo da fonte e cor do fundo, você pode modificar o estilo de cada elemento da barra lateral usando as seguintes camadas na Folha de Estilos:

· #ui-bar: a barra lateral por inteiro.

· #story-title: o título da história na barra lateral.

· #menu: os itens do menu da barra lateral.

· #menu-item-saves: o item Salvar do menu.

· #menu-item-restart: o item Recomeçar do menu.

· #ui-bar-tray: todos os botões no topo da barra.

· #ui-bar-toggle: o botão de recolher/expandir.

· #ui-bar-history: apenas os botões de navegação.

Se você quer remover algum elemento da sua barra, basta adicionar display: none na camada desse elemento. Por exemplo, para remover os botões de navegação, o código seria:

#ui-bar-history{
display:none
}

Adicionando elementos na barra lateral

Você pode adicionar elementos na sua barra lateral criando novas passagens e dando os seguintes nomes especiais a elas:

· StoryBanner: inclui uma imagem ou texto logo acima do título da história. Veja mais adiante como adicionar imagens.

· StorySubtitle: adiciona um subtítulo para a história, com a versão atual por exemplo. O subtítulo fica logo abaixo do título.

· StoryAuthor: adicionar o nome da pessoa que escreveu a história logo abaixo do título ou subtítulo.

· StoryCaption: adiciona o texto que você quiser à barra lateral. Você pode incluir variáveis, como por exemplo uma lista objetos que a personagem coletou. A exibição é atualizada quando uma nova passagem é carregada.

· StoryMenu: adiciona novos botões personalizados no menu, acima do botão “Salvar”. Você pode adicionar links aqui.

· StoryShare: adiciona um botão chamado Compartilhar no menu, logo abaixo de “Recomeçar”. Você pode incluir links para o website ou página do jogo nessa passagem. Ao clicar no botão, abre-se uma lista dos links.

Para editar o conteúdo desses elementos, basta editar o texto da passagem correspondente.

Incluindo imagens

Você pode incluir uma imagem no seu jogo usando o código [img[texto alternativo|endereço da imagem]] ou [img[texto alternativo|endereço da imagem]]. O texto alternativo é mostrado caso a imagem não carregue ou a pessoa tenha escolhido essa opção no navegador. Por exemplo, você pode incluir o seguinte código no topo do texto da passagem Entrada do Teatro:

[img[https://images.pexels.com/photos/5825353/pexels-photo-5825353.jpeg]]

Você também pode incluir imagens usando código HTML:

<img src=" https://images.pexels.com/photos/5825353/pexels-photo-5825353.jpeg" width="500" height="300" alt="Entrada do Teatro">

A vantagem do código HTML é que ele permite redimensionar o tamanho da imagem. O atributo scr se refere à URL da imagem. O atributo width e height são, respectivamente, comprimento e altura da imagem em pixels. Você pode usar um % para indicar que o valor é relativo ao tamanho da tela. O atributo alt é o texto alternativo. Se você não indicar comprimento e altura, a imagem carregará no seu tamanho completo.

Por padrão, as imagens seguem o alinhamento à esquerda, como o texto. Você pode centralizar as imagens na tela adicionando o seguinte código na sua Folha de Estilos:

img {
display: block;
margin-left: auto;
margin-right: auto;
}

Você pode usar a camada img para formatar as imagens com outros efeitos de CSS que se apliquem a elementos gráficos.

Você também pode usar imagens diretamente, sem depender de conexão com a internet. Basta inserir o endereço do arquivo de imagem no seu dispositivo, o qual pode ser absoluto ou relativo à pasta na qual o arquivo do jogo está sendo executado. Por exemplo, se o arquivo da imagem acima estiver na mesma pasta do arquivo sendo executado, o comando seria:

<img src="46832-fr_5.jpg" width="500" height="300" alt="Entrada do Teatro">

Você também pode usar GIFs animados nas imagens, mas observe que eles demoram mais tempo para carregar.

Não é recomendado usar imagens às quais você não possui direitos, ou endereços de sites que você não controla. Considere citar a fonte das imagens nos créditos do jogo.

Fontes sugeridas de imagens gratuitas: Public Domain Pictures[10], Pexels[11], e StockSnap[12]. Para mais recursos específicos para jogos, incluindo gráficos e sons, veja Open Game Art[13] e os recursos gratuitos disponíveis no itchio[14]. O site Ezgif[15] também é muito útil para criar e editar GIFs animados.

Usando imagens como links

Você pode usar imagens como links clicáveis com o código [img[endereço da imagem][link]]. Por exemplo, o código para usar a imagem acima como link para a passagem Sair do teatro seria assim:

[img[46832-fr_5.jpg][Sair do teatro]]

A imagem clicável também pode ser um setter link, ou seja, pode modificar uma variável ao ser clicada, por exemplo:

[img[46832-fr_5.jpg][Sair do teatro][$capa to 1]]

Você também pode usar macros mais complexas a partir do click na imagem usando a macro <<link>>. Por exemplo:

<<link [img[46832-fr_5.jpg][Sair do teatro]]>><<if $capa is 0>><<set $capa to 1>><</if>><</link>>

Incluindo áudio

Para incluir áudio nos seus jogos, é preciso antes carregá-los no cache usando a macro <<cacheaudio “ID da faixa” “endereço do arquivo de áudio”>> na passagem StoryInit. O melhor formato para arquivos de áudio no Twine é o formato .ogg, mas ele reconhece também outros formatos como .wav e .mp3. Para carregar um arquivo chamado narração.ogg, que está na mesma pasta do arquivo do jogo, adicione o seguinte código na passagem StoryInit:

<<cacheaudio "narração" "narração.ogg">>

O endereço do arquivo pode ser da internet também. Para tocar o áudio durante o jogo, use a macro <<audio “ID da faixa” play>> em qualquer passagem, com algumas limitações. Por exemplo, o áudio não toca logo na primeira passagem. Você pode contornar esse problema criando uma passagem inicial que serve de “capa” para a história, com um link para iniciar de fato a história, e então tocar o áudio que você quer a partir do link ou da outra passagem. Por exemplo:

<<audio "narração" play>>

A ação play é somente um dos argumentos disponíveis para a macro audio. Outros argumentos úteis:

· fadein: inicia a reprodução da faixa no volume mais baixo e sobe para o mais alto no intervalo de 5 segundos.

· fadeout: inicia a reprodução da faixa no volume mais alto e desce para o mais baixo no intervalo de 5 segundos.

· goto passagem: leva para a passagem com o nome especificado quando a reprodução da faixa terminar.

· loop: repete a faixa ao terminar normalmente.

· mute: silencia o volume da faixa sem alterar o nível do volume geral.

· pause: pausa a reprodução da faixa. Ela recomeça do ponto onde pausou se houver outro comando para tocar.

· stop: termina a reprodução da faixa. Ela começa do começo se houver outro comando para tocar.

· time segundos: define o tempo de reprodução atual da faixa para o número especificado de segundos, de 0 (início) até a duração máxima.

· unloop: deixa de repetir a faixa.

· unmute: deixa de silenciar a faixa.

· volume nível: define o volume da faixa para o nível especificado, de 0 (silencioso) a 1 (mais alto). Por exemplo, 0.5 é 50% do volume máximo.

Você também pode usar esses argumentos em grupos de faixas. Os grupos pré-definidos são: :all, :looped, :muted, :paused, :playing e :stopped.

Note que todo grupo de áudio começa com dois pontos e precisa estar entre aspas no código da macro. Assim, o código para abaixar o volume de todas as faixas para 30% seria:

<<audio ":all" volume 0.3>>

As faixas são executadas quando a passagem é carregada. Você pode atrasar a execução de uma faixa de áudio usando a macro <<timed segundos>>. Por exemplo:

<<timed 2s>><<audio "teste som" play>><</timed>>

Isso faz com que o áudio leve 2 segundos para tocar depois da passagem ser carregada.

Para baixar músicas gratuitas e efeitos sonoros para usar no seu jogo eu recomendo: Incompetech[16] e Freesound[17].

Aleatoriedade

Você pode usar a função either() para criar uma lista de expressões e selecionar uma delas aleatoriamente. Por exemplo:

<<print either("Bom dia!", "Boa tarde!", "Boa Noite!")>>

O resultado é uma dessas três frases, escolhida aleatoriamente.

Você pode usar a função either() em conjunto com a macro <<set>> para definir o valor de uma variável aleatoriamente, e então usar a macro <<if>> para definir eventos aleatórios. Por exemplo:

<<set $frase to either("Bom dia!", "Boa tarde!", "Boa Noite!")>>\
<<if $frase is "Bom dia!">>\
O porteiro me desejou bom dia, embora seja noite.
<<elseif $frase is "Boa tarde!">>\
O porteiro me desejou boa tarde, embora seja noite.
<<elseif $frase is "Boa Noite!">>\
O porteiro me desejou boa tarde, e eu respondi: Boa noite.
<</if>>

Note que a barra invertida “\” é usada para evitar criar quebras de linha desnecessárias.

Você também pode usar a função random(min, max) para gerar números aleatórios mais rapidamente. Por exemplo, random(1, 6) vai retornar um valor de 1 a 6. O valor mínimo pode ser omitido, e nesse caso será considerado como 0. Por exemplo, random(6) vai retornar um valor de 0 a 6. Você também pode usar operações matemáticas, como por exemplo:

<<set $resultado to random(1, 6) + random(1, 6) + random(1, 6)>>
Você joga 3 dados, e o resultado é <<print $resultado>>

Criando uma caixa de texto

Além de clicar em links com o mouse, talvez você queira que a pessoa escreva algum texto usando o teclado. Você pode fazer isso com a macro <<textbox “$variável” “padrão” “passagem”>>. O seguinte exemplo cria uma caixa de texto para o nome da personagem, que será salvo na variável $nome, e ao pressionar enter, carregará uma passagem chamada Começo do jogo. O código seria assim:

Qual o seu nome? <<textbox "$nome" "Escreva seu nome" "Começo do jogo" autofocus>>

Note o termo autofocus no final da macro. Ele é opcional e serve para que sua caixa de texto ganhe foco automático quando a passagem carregar, ou seja, o cursor vai estar automaticamente na caixa de texto. De outro modo, seria preciso clicar na caixa antes de editá-la. Declare a variável $nome na passagem StoryInit com <<set $nome to “”>> para evitar erros. O valor “Escreva seu nome” é o padrão, e vai aparecer inicialmente na caixa de texto. Se você quer uma caixa de texto inicialmente vazia, use “” como padrão. O link para carregar uma nova passagem também é opcional.

Criando uma caixa de diálogo

É possível criar uma janela de aviso ou exibir uma informação durante o jogo sem afetar a área de texto principal. Por exemplo, o seguinte código cria uma janela com o título “Aviso” e a mensagem “Isso é um jogo.“, que aparece no centro da tela, com efeito de esmaecimento:

<<run Dialog.setup("Aviso"); Dialog.wiki("Isso é um jogo."); Dialog.open()>>

Para fechar a mensagem, basta clicar em qualquer lugar fora da caixa de diálogo, ou no ícone de fechar.

Você pode adicionar o texto de uma passagem inteira na janela usando os métodos Story.get() e .processText(). Por exemplo, o código abaixo exibe a passagem Sair do teatro na janela:

<<run Dialog.setup("Aviso"); Dialog.wiki(Story.get("Sair do teatro").processText()); Dialog.open()>>

Note que, nesse caso o link carrega a passagem na tela principal do jogo, mas não fecha a janela da caixa de diálogo. Para fechar, inclua uma instrução <<run Dialog.close()>> numa <<link>>, assim:

<<link [[Voltar|Entrada do Teatro]]>><<run Dialog.close()>><</link>>

Criando novas macros

Você pode criar uma macro customizada usando a macro <<widget>>. Suponha que você criou um código que você quer usar várias vezes durante a história. Crie uma passagem com a etiqueta “widget”. Escolha o nome que quiser para essa passagem. Ela não será linkada com nenhuma outra. No texto dessa passagem ficarão armazenadas suas macros personalizadas. Você pode criar, por exemplo, uma macro para determinar se um ataque acertou o alvo, e quanto dano ele causa. Crie uma macro chamada ataque usando o seguinte código na passagem:

<<widget "ataque">>\
<<set $at to (random(6) + _args[0])>>\
<<set $def to (random(6) + _args[1])>>\
<<set $res to ($at - $def)>>\
<<if $res > 0>>\
<<set $dano to random(1, _args[2])>>\
Você acertou! Causou $dano de dano!
<<else>>\
Você errou!
<</if>>\
<</widget>>

Em qualquer outra passagem, quando quiser determinar se um ataque acertou não, e o dano provocado, você pode usar o código <<ataque 3 2 4>>, por exemplo, que seria substituído, no carregamento da passagem, pela frase de acerto e dano, ou de erro. Os três números que vem depois do nome da macro são os argumentos (_args[0], _args[1] e _args[2]), que representam o ataque, a defesa e o dano máximo. Você pode incluir quantos argumentos quiser, numéricos ou alfabéticos. Você pode também usar variáveis nos argumentos, como por exemplo <<ataque $ataque $defesa $dano>>.

Matrizes

Como você viu no exemplo acima, algumas variáveis podem guardar mais de um valor usando um só nome. Essas variáveis são chamadas de matrizes (ou arrays), são coleções de valores separados por um índice (index), que é representado pelo número entre [ ]. Antes de usar uma matriz, é necessário declará-la na passagem StoryInit. Por exemplo:

<<set $itens to []>>
<<set $baú to ["um escudo", "uma espada"]>>

Na passagem StoryCaption, por exemplo, você pode adicionar o seguinte código, que lista os itens que a personagem está carregando:

Você está carregando:
<<if $itens.length > 0>>\
<<= $itens.join(", ")>>.\
<</if>>

O sufixo .length indica a extensão (tamanho) da sua matriz. Inicialmente ela está vazia, ou seja, a extensão é 0, e nada será mostrado. Mas quando adicionarmos algo, os itens serão exibidos separados por uma vírgula e um espaço. Já a matriz $baú tem duas instâncias, que representam o conteúdo de um baú. Para fazer a personagem abrir o baú e pegar os itens contidos nele, use o seguinte código:

Você abre o baú e encontra <<= $baú.join(" e ")>>.\
<<set $itens[0] to $baú.deleteAt(0)>>\
<<set $itens[1] to $baú.deleteAt(0)>>

O sufixo .deleteAt está sendo usado aqui para mover o conteúdo de uma matriz para outra matriz. Quando o jogo carregar outra passagem, a lista de itens da personagem vai ser atualizada e exibir o seguinte:

Você está carregando:
um escudo, uma espada.

Como todos os membros de $baú foram removidos, a extensão dessa matriz agora é 0, e a extensão de $itens é 2.

Você também pode usar a macro <<for>> para preencher ou esvaziar rapidamente uma matriz com muitos membros. Por exemplo:

<<for _i to 0; _i < $baú.length; _i++>>\
<<set $itens[_i] to $baú[_i]>>\
<</for>>\
<<set $baú to []>>

Esse código irá copiar todo o conteúdo de $baú para $itens. A última linha apaga o conteúdo de $baú, reiniciando a matriz. Você também poderia usar o código:

<<set $itens to $itens.concat($baú)>>\

O sufixo .concat copia todo conteúdo de uma matriz para outra matriz. Os novos membros são adicionados na última posição válida, sem sobrepor os já existentes. Você também pode adicionar um novo membro individualmente, com o código:

<<run $itens.push("uma espada")>>

Ou remover um item pelo nome:

<<run $itens.delete("uma espada")>>

E você pode mostrar um membro aleatório da matriz usando:

<<print $itens.random()>>

Atualização em tempo real

Não é preciso esperar carregar uma nova passagem para atualizar as informações na sua tela. Você pode fazer uma atualização em tempo real usando as macros <<do>> e <<redo>>. Para isso, escreva o código que será repetido entre <<do>> e <</do>>. Por exemplo:

<<do>>\
Você está carregando:
<<if $itens.length > 0>>\
<<= $itens.join(", ")>>.\
<</if>>\
<</do>>

Depois, simplesmente inclua <<redo>> a qualquer momento em que a variável é manipulada, e o trecho será atualizado considerando o novo valor.

Melhorando as práticas de programação

Agora que você sabe criar jogos mais complexos, seria interessante utilizar uma ferramenta melhor para escrever seu código. O editor de texto do Twine não oferece muitas opções e pode te deixar na mão caso precise manipular muitas linhas de código. Eu sugiro usar o Notepad++[18]. Ele é um editor de texto capaz de reconhecer diversas linguagens de programação, incluindo SugarCube. Para instalar as definições do SugarCube no Notepad++, baixe o arquivo de UDL no site Caos e amor[19] e siga as instruções contidas lá.

Usando o modo de depuração

Quanto mais complexo o código, mais bugs tendem a aparecer. Para publicar um jogo com menos bugs é preciso testá-lo bastante. O SugarCube disponibiliza um modo de depuração, na opção Testar, no menu Compilar, que oferece algumas opções interessantes para encontrar bugs chatos. Ao testar um jogo, abra a aba de depuração clicando no retângulo com um símbolo de inseto, no canto inferior direito. Você agora verá o seu jogo sendo executado com as partes que normalmente ficam ocultas visíveis, como os códigos de manipulação de variável e condicionais.

A opção Observação, quando ligada, mostra em tempo real o valor das variáveis, para que você possa acompanhar o que está acontecendo com elas enquanto joga. A opção “Adicionar nova observação” adiciona a variável selecionada na lista de variáveis sendo observadas. Você também pode clicar na “varinha mágica” para incluir todas as variáveis do jogo, ou na “lixeira” para apagar todas as variáveis da lista de observação. Para remover uma variável de cada vez, clique no x vermelho ao lado do nome da variável.

A opção Visualizações, quando ligada, mostra o código da passagem. Diferente de apenas mostrar o código inteiro, essa opção mostra apenas informações cruciais na tela, exibindo detalhes apenas quando passamos o mouse por cima. Isso ajuda na visualização da história e do código ao mesmo tempo.

Turno permite “voltar no tempo” mais facilmente, exibindo a lista de passagens já visitadas.

Passagem permite ir diretamente para qualquer passagem do jogo.

Conclusão

Os jogos feitos no Twine e no SugarCube carregam em si uma potência subversiva. Eles rejeitam a lógica da indústria dos games, que valoriza gráficos realistas e orçamentos milionários, para resgatar a simplicidade e a força bruta da palavra. Ao fazer isso, eles se aproximam mais da literatura do que da grande maioria dos jogos tradicionais, permitindo experimentações narrativas impossíveis dentro das restrições técnicas e comerciais da indústria.

Os jogos de Twine são acessíveis: qualquer um pode fazer um. E isso significa que mais vozes, mais perspectivas, mais subjetividades marginalizadas têm a chance de se expressar e moldar um espaço dentro da cultura dos jogos. O elitismo técnico, que historicamente afastou mulheres, pessoas queer e minorias raciais do desenvolvimento de jogos, se dissolve quando a criação se torna um ato tão simples quanto escrever e estruturar ideias.

A simplicidade do Twine é também uma escolha política. Ele nos faz lembrar que um jogo não precisa de grandes recursos para ser poderoso. Um jogo de Twine pode ser um soco no estômago, uma história que você nunca viu sendo contada antes, um grito de revolta em forma de interação. Pode ser também uma experiência intimista, uma exploração sensível de memórias e emoções.

Se existe um futuro para os jogos, ele precisa passar por ferramentas como o Twine. A hegemonia dos jogos comerciais leva a um empobrecimento das experiências possíveis. A indieficação dos games muitas vezes apenas replica o mesmo mercado, mas com estética diferente. O Twine está além disso: ele convida qualquer um a criar, sem pedir permissão, sem precisar validar sua existência para gatekeepers da indústria.

Fazer jogos em Twine é um ato de resistência. É ocupar um espaço que nos dizem que não é nosso. É hackear o conceito de jogo, desprogramá-lo, reconstruí-lo. É um lembrete de que o jogo é, antes de tudo, uma linguagem. E toda linguagem pode ser reinventada.

Agora que você tem as ferramentas, crie. Escreva sua própria história. Jogue contra as regras. Transforme o jogo no que ele deveria ser: livre.

[1] https://twinery.org/

[2] http://www.motoslave.net/sugarcube/2

[3] https://caoseamor.neocities.org/

[4] http://www.firthworks.com/roger/cloak/

[5] https://ifdb.tads.org/

[6] https://caoseamor.neocities.org/

[7] https://www.color-hex.com/

[8] https://www.cssfontstack.com/

[9] https://fonts.google.com/

[10] https://www.publicdomainpictures.net/en/index.php

[11] https://www.pexels.com/

[12] https://stocksnap.io/

[13] https://opengameart.org/

[14] https://itch.io/game-assets/free

[15] https://ezgif.com/

[16] https://incompetech.com/music/royalty-free/music.html

[17] https://freesound.org/

[18] https://notepad-plus-plus.org

[19] https://caoseamor.neocities.org/

Contrafatual

Discussão sobre este post