Tutorial: Desenvolvendo Histórias Interativas Não Lineares com o Twine – Parte 3 – Usando Stylesheets

Nós já conseguimos criar uma história básica, além de formatá-las com vários tipos de estruturas encontradas em editores de textos, conforme vimos no último tutorial.

Agora, chega o momento de tornar a padronização dessas formatações mais fácil, usando folhas de estilo (CSS).

“Bora” para mais trabalhos aqui no Tutorial de Twine, focando agora em Stylesheets.

O que é o CSS?

CSS3Vale a pena uma explicação rápida sobre o conceito. Quem trabalha com web, já ouviu falar muito sobre CSS. Até porque isso padroniza as formatações das páginas de internet. Como Twine é baseado em linguagens web, nada mais natural usar tal recurso.

CSS é a sigla para “Cascading Style Sheets”, uma linguagem voltada para folhas de estilo. Elas ajudam a definir como será o formato da página.

A vantagem de usá-las é que você faz uma formatação que serve para várias passagens. Não precisa ir uma a uma fazendo toda a formatação. Senão, imagina a trabalheira que teríamos com uma história com 40, 50 passagens. Já pensou? Haja trabalho braçal.

Elas seguem esse formato:

CONTAINER {
      atributo1: valor;
      atributo2:valor;
      ...
}

Exemplo:

.passage {
      font-size: 30px;
      font-family: “Verdana”;
}

Então vamos conhecer como fazer isso no Twine.

 

Desafio do Tutorial Anterior

Conseguiram fazer o proposto no tutorial anterior? Tem várias formas e já vai nos servir para mostrar, na prática, o uso de folhas de estilo.

Vamos ao jeito trabalhoso de fazer: vimos o comando de aplicar um CSS em um trecho de história. Dessa forma, poderíamos fazer assim, em cada passagem:

twine_P3_01

Veja bem: adicionei o atributo font-family para setar como “Arial” a fonte padrão. Também já aproveitei e usei o atributo fonte-size para setar o tamanho em 40 pixels. Em que texto será aplicado isso? Aquele que estiver dentro das arrobas (observe lá no final que joguei as arrobas perto dos links de passagens).

Resultado Final:

twine_P3_02

Só que, como falei sobre o não uso de CSS: já pensou ter que fazer isso para cada passagem? Imagine que seu jogo/história tenha mais de 50 passagens, está disposto a fazer isso para cada uma?

Com esse desafio, já te sensibilizo para a importância do conceito que será passado nesse tutorial.

Vamos agora ver o jeito fácil. Vem comigo.

 

Aplicando Estilos nas Passagens do Twine

No Twine, por padrão já temos um container para trabalhar, o .passage. Fazendo alterações nele, vão se aplicar a todas as passagens de sua história/jogo.

Primeiro, como chego na seção para alterar todas as passagens? Tranquilo. Vá no nome da sua história e escolha a opção “Edit Story Stylesheet”. Faça as configurações e feche a janela depois.

twine_P3_03

Veja aqui, usando .passage e o resultado final. No caso, fiz para mudar fonte e tamanho novamente:

twine_P3_04

Outra alternativa é usar o container body. Só que ele vai alterar a barra ao lado também, ou seja, onde fica o título da história, save, load etc. Veja aqui, usando body e resultado final:

twine_P3_05

Percebeu como mudou do lado? Compara com o resultado do . passage que perceberá bem isso. Bem simples assim de usar.

Agora você pode aplicar os atributos ali. Procurando por CSS na internet você acha uma lista de atributos configuráveis. Eu uso os mais básicos que são fonte, tamanho, cor de fundo e cor de letra. O resto deixo padrão, pois já está bom.

Em algumas passagens específicas, uso aquele de arrobas e aplico somente ali algo diferente. Acho o mais usual para nossas histórias/jogos.

Você pode também consultar tudo sobre isso na página do Twine – Documentação – Stylesheet, mas em inglês. Recomendo a tabela ali brincar com os atributos, pois você verá que pode configurar somente links, formato de imagens e outros.

Eu falei mais de .passage e body, pois são os mais usados para formatação geral do Stylesheet.

 

Estilos para Transição das Histórias

Outro que é legal de ser usado para Stylesheet geral no Twine é o .transition. Eles servem para aplicar na transição de uma passagem para outra. Sabe aqueles efeitos de troca de slides no Powerpoint? É a mesma coisa. Existem dois tipos:

  • .transition-out: quando uma passagem está sendo mudada, dando lugar a outra;
  • .transition-in: quando uma passagem está se abrindo para assumir o lugar de outra.

Podemos fazer configurações como tempo da transição, efeito etc. O .passage também aceita brincar com alguns atributos também.

Esse recurso acho interessante quando se quer fazer um efeito em alguma passagem específica, uma abertura mais elaborada, impactante.

Fiz um exemplo aqui, usando. Veja o código:

twine_P3_06

Apliquei o uso de opacity 0, pois, se colocar número alto, ele vai passar a passagem tão rápido que você mal verá efeito algum. Tente jogar 5 que você verá a mudança.

Também coloquei transition em .passage para 10 segundos. Você verá que as transições serão bem demoradas até aparecer o texto.

Veja a animação aqui. O texto vai abrir lentamente:

twine_P3_07

 

Desafio para Este Tutorial

Tente colocar um fundo branco na passagem e cor de letra preta. Dessa forma, estamos alterando o padrão do estilo que estamos usando (fundo preto, letras brancas).

Uma dica é procurar por background, color como atributos de CSS.

Vemos como fazer isso no próximo tutorial. 😉

 

 

Dessa vez, vimos como formatar rapidamente os textos por meio de folhas de estilo no Twine. Isso agiliza bastante o trabalho para formatações que se aplicam a todas as passagens.

Também já vimos efeitos e alguns detalhes como bônus.

No próximo tutorial, vamos estudar o recurso de tags. Dentro das passagens, você verá em cima o recurso, mas ele tem alguns usos específicos bem interessantes.

Um abraço e até a próxima.

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