Tutorial: Desenvolvendo Histórias Interativas Não Lineares com o Twine – Parte 4 – Uso de Tags

Conseguimos já fazer algumas configurações no visual da história, conforme vimos no último tutorial.

Agora vamos conhecer um outro recurso que dá um charme e organiza um pouco as passagens: tags.

Vamos lá continuar nossas histórias no Twine.

Desafio do Fundo Branco e Letras Pretas no Twine

Conseguiram deixar a letra na cor preta e fundo branco? Vejamos como fazer isso.

Primeiro, escrevi no .passage para fonte na cor preta. Depois, escrevi no corpo da página da história (body) que queria um fundo na cor branca.

twine_P4_01

Por que não fiz isso em .passage? Porque só contornaria o texto escrito. Faça o teste que verá:

twine_P4_02

 

Mais uma dica sobre Passagens

Vimos para criar links que basta colocar o nome da passagem entre dois colchetes ([[ ]]). Assim, você referencia aquela passagem para entrar nela.

Mas e se eu quisesse referenciar uma passagem usando outro rótulo, diferente do nome da passagem? Como faço?

Vamos criar uma história com três passagens e os seguintes nomes: Início, Meio e Fim. Na “Fim”, vou fazer um link chamado “Voltar ao Meio”, mas sem usar o [[Meio]] para isso. Essa é a moral de aprendermos esse recurso: para podermos fazer isso.

Segue a estrutura da história como ficou:

twine_P4_03

Segue a edição da passagem Fim com link para meio, mas com nome diferente:

twine_P4_04

Resultado final:

twine_P4_05

No resultado final, perceberá que, ao clicar em “Voltar ao Meio”, vai ir para Meio, sem precisar usar obrigatoriamente [[Meio]] para criar esse link. Tanto faz usar -> (traço e sinal de maior: seta) ou | (barra). Mais um recurso bacana para vocês. 😉

 

Uso de Tags no Twine

A utilidade de se usar tags serve para organizarmos as passagens, adicionando informações que somente o autor da história terá acesso.

Para criar uma tag, basta abrir a passagem que deseja e verá uma seção abaixo do título da passagem. Escreva o nome das tags e pronto. Veja aqui algumas que criei e a terceira que faltava só eu confirmar para criar.

twine_P4_06

Bem simples. Vamos ver algumas especiais agora.

 

Tags Especiais Padrão

Além dessas tags que são mais para organizar, existem algumas que são palavras reservadas, ou seja, ao se usarem, geram funcionalidades diferentes para nossa história.

Vou mencionar primeiramente as que já estão criadas automaticamente.

twine_P4_07Lembra da seção de Stylesheet via “Edit Story Stylesheet”? Ela, na verdade, é uma passagem que usamos para configurar o estilo da história, transições e tudo. Fizemos isso e muito no último tutorial. 😉

Outra criada automaticamente é a passagem com tag “script”. Ela serve para colocarmos código Javascript e, ao iniciar a história, ele será executado.

Para esse último, vou demonstrar como fazer. Primeiro, acessamos a barra de opções da nossa história e selecionamos a opção “Edit History JavaScript”.

Depois, editamos o código javascript do jeito que querermos. No caso, botei um alerta simples com a mensagem “oi”. A execução vai acontecer bem antes da história aparecer.

Veja como ficou executando:

twine_P4_08

Será necessário conhecer a linguagem de programação JavaScript para poder usar bem esse recurso. Aqui no tutorial não cabe explicar a linguagem toda, mas quem quiser fuçar e aplicar mais, segue um link interessante sobre.

Agora vamos ver as tags especiais que temos que incluir.

 

Tags Especiais para Criar no Twine

Segue uma lista de outras tags especiais. A forma de uso delas segue conforme explicado em “Uso de Tags No Twine”, porém deve se escrever exatamente como está ali. Senão ele não a identifica como especial. Vamos a lista:

  • annotation: para fazer anotações diversas. O que está nessa passagem não aparecerá para o leitor/jogador. Tente vincular uma passagem annotation para acessar durante a história. Você verá que dará erro por não poder exibir a passagem. Uso aqui:

twine_P4_09

  • bookmark: cria um botão Rewind na versão que estamos usando “SugarCube”. Ao adicionar bookmark na passagem, ela vai aparecer nas opções ao clicar no bookmark;
  • nobr: faz o texto ficar todo sem espaçamentos de enter (br em HTML).

Veja um exemplo de uso de bookmark e nobr. Como fiz o código:

twine_P4_10

Como ficou o resultado final. Perceba que os espaços foram eliminados e, na exibição, o texto ficou todo grudado por isso. Também apareceu a opção de voltar à passagem que foi marcada com bookmark.

twine_P4_11

 

  • Twine.private: torna privada a passagem que usar essa tag. A passagem nem irá para o arquivo final da história.

A tabela e mais detalhes você encontra também na documentação.

 

Desafio do Próximo Tutorial

twine_P4_12Você já tem condições de criar uma história com os recursos que já vimos.

Crie uma bem bacana e mande para nós: [email protected] . Assunto: Twine História. Colocaremos aqui o acesso para o pessoal ver.

Para gerar o arquivo e nos enviar, basta ir no nome da sua história e selecionar “Publish to File”. Salve o arquivo onde quiser e nos mande. Ele irá gerar um arquivo HTML.

Nele estarão todas as passagens da sua história e será executado em seu navegador padrão (Chrome, IE, Firefox ou outro).

 

 

Nesse tutorial vimos rapidamente um recurso novo de passagem ( -> ou | ), mas nos aprofundamos mesmo nos estudos de tags, tanto criadas por nós quanto especiais. Ela nos ajudarão a organizar a história.

Para o próximo tutorial, vamos ver como inserir imagens e links que não sejam passagens necessariamente.

Até a próxima! =D

Fabiano Naspolini de Oliveira

Fabiano Naspolini de Oliveira

Fabiano Naspolini de Oliveira (Editor-Chefe) – Formado em Análise e Desenvolvimento de Sistemas, Pós-Graduado em Docência para Educação Profissional, MBA em Game Design e Mestrado em Tecnologias da Informação e Comunicação. Foi redator do portal Nintendo Blast, professor de cursos técnicos e Game Designer/Sócio-Fundador do estúdio Céu Games por 6 anos. Atualmente, é professor de jogos digitais e escritor.

Send this to a friend