Tutorial: Desenvolvendo Histórias Interativas Não Lineares com o Twine – Parte 5 – Imagens e Links

Já estamos criando várias histórias interativas não lineares com o Twine. O tutorial nessa etapa oferece recursos para brincarmos com bastantes coisas.

Mas ainda tem outros recursos para dar mais uma incrementada. Hoje veremos a inserção de imagens e outros tipos de links, sem ser aqueles relativos às passagem que já sabemos.

Desafio da História

Espero que conseguiram criar a sua história no Twine. Mais adiante colocaremos algumas enviadas para nós.

Fiquem com uma feita por mim para verem o potencial do programa. As imagens foram tiradas da internet e tem recursos inseridos que veremos na parte de programação: contagem de chaves coletadas, HUD, tirar portas já entradas das opções etc.

 

Inserção de Imagens no Twine

A aplicação de imagens tem várias abordagens. Pode ser um gif animado, imagem estática, título mais elaborado (logo) entre outras opções.

A sintaxe é:

[img[nome do arquivo com extensão dele ou link]]

A seção da documentação do Twine, que explica tal uso, é esta: Image Twine.

twine_P4_12Você pode inserir uma imagem de um arquivo do computador ou de um link na internet. Recomendo a primeira opção, pois carregar imagens que estão em outros lugares armazenadas (hotlinks) não é uma boa. Podem ser que saiam do ar e você fique sem imagem e, ao carregá-la em sua história, vai puxar o arquivo de lá, gerando tráfego onde estava, não para você.  Saiba mais aqui sobre hotlinks.

Primeiro, temos que aprender como o Twine organiza as imagens. Você não conseguirá ver a imagem direitinho pelo software. É necessário transformar sua história primeiro em HTML (veja imagem ao lado) na seção “Publish to File”.

Onde você salvou o HTML da história, ele terá como diretório principal para buscar as imagens.

Aqui eu fiz assim: criei o código HTML (Uso de Imagens.html) e criei uma pasta chamada “images” para separar a história delas. No caso, vou inserir aquela imagem de hipopótamo fofa ali. Haha.

twine_P5_02

Nesse caso, como usei uma pasta separada, veja como faço no código da história:

twine_P5_03

Eu não coloquei só o nome da imagem e extensão. Também adicionei antes a pasta, barra (/) e depois o nome. Isso indica ao arquivo para entrar na pasta imagens e depois abrir a imagem respectiva (hippo_tamo.png).

Onde você inserir a imagem, ela aparecerá ali no texto. Pode ser no meio dele, antes, depois, onde quiser.

Veja como ficou o resultado final:

twine_P5_04

No Twine, não encontrei nenhum recurso para regular largura e altura de imagem por ele, mas eu, particularmente, recomendo que você ajuste em outro programa o tamanho dela, depois levando ao Twine. A imagem fica no tamanho certo já, evita dor de cabeças e consome menos espaço em disco. A minha ficou gigantesca por estar no tamanho original.

Se for postada em web então, a preocupação é maior ainda para agilizar a abertura dela na história. É o mesmo cuidado de quem desenvolve aplicações web.

 

Alinhamentos de Imagens e Outros Recursos

Vamos ver os alinhamentos de imagem. O alinhamento padrão é à esquerda. Mas, caso queira forçar o uso dele, só utilizar o símbolo de menor (<). Já à direita, é o símbolo de maior (>).

O que achei falho foi não ter, como padrão, recurso para centralizar. Mas, para isso, use a tag HTML <center> … </center>, pois ele aceita. Apliquei aqui para ver como funciona. Segue o código:

twine_P5_05

Segue o resultado final (o sapo apareceu inteiro, mas cortei aqui senão ia ficar muito grande 😛 ):

twine_P5_06

Também podemos criar uma imagem que é um link que nos leva a uma passagem. Código abaixo e resultado também:

twine_P5_07

Esses são recursos mais úteis e que você usará em suas histórias. Botar imagem de fundo até dá, mas não… fica muito feio e ilegível para o texto. É preferível usar outros recursos.

 

Aplicação de Links no Twine

Os links são aqueles que vão tornar nossa história mais interativa e não linear. São essencias para isso.

O acesso a documentação está em Link – Twine.

Não vou entrar aqui nos links de passagens, pois já tratamos deles em parte 1 e parte 4  (dica sobre passagens) dos tutoriais do Twine. Vou focar nos outros tipos de links.

Também não abordarei agora a parte de uso de variáveis, pois veremos na parte de programação esse recurso. Mas, aos curiosos, pode ver na documentação Twine. Verão sintaxe bem PHP para elas. 🙂

Vamos aos recursos de links que explicarei. Um deles são os links externos. Como referencio uma página já existente na internet? Simples.

Sintaxe:

[[texto que aparecerá no link | (página de acesso do link)]]

Um exemplo de uso e resultado final:

twine_P5_08

Perceba que há a opção de não colocar texto que aparecerá nenhum. Aí vai ficar a própria URL do site.

Também observe que usamos a barra ( | ), recurso que vimos para dar um nome a um link em passagem. Ou seja: demos um nome diferente para aparecer ao nosso leitor, mas o acesso é ao link depois.

Outros recursos da documentão envolvem programação, variáveis e serão vistos em outra parte do tutorial. Mas perceba que tem variáveis com a sintaxe PHP ali. 😉

 

 

Nesse tutorial vimos como inserir imagens e links diferentes no Twine. Assim, damos mais uma incrementada na história, deixando-a mais bonita e interessante.

Dessa vez vou dar uma folga nos desafios, mas recomendo que já faça uma história para botar em prática os conceitos vistos. Mande para nós depois: fabiano@fabricadejogos.net que publicamos aqui.

Para o próximo tutorial, será a última parte envolvendo recursos dele sem envolver programação. Depois desse próximo, vamos começar a parte que deixará sua história com cara de game.

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