O documento descreve como criar jogos e narrativas interativas usando a ferramenta Twine. Apresenta a história das narrativas interativas, como funciona o Twine, e ensina sobre hiperlinks, HTML e dinâmicas de grupo para desenvolver projetos com a ferramenta.
Dicionário de Genealogia, autor Gilber Rubim Rangel
Slides Twine aula1
1. CRIAÇÃO DE GAMES
E NARRATIVAS
INTERATIVAS COM
O TWINE
Walter Rubens Bolitto Carvalho
2. CALENDÁRIO
08/06/2019
Introdução ao
desenvolvimento de
narrativas interativas,
Twine e HTML,
formação dos grupos
e início da
construção dos
jogos.
15/06/2019
Introdução ao CSS,
desenvolvimento e
customização da
narrativa, layouts e
HUDs do jogo, e
introdução ao
JavaScript.
29/06/2019
Propriedades de
JavaScript,
finalização e
apresentação dos
jogos
2
5. NARRATIVAS
INTERATIVAS:
HISTÓRICO
JORGE LUIS BORGES, 1941
Obra literária que deu origem à
bifurcação hipertextual, levando
ao surgimento de múltiplos finais
na mesma história.
JAMES JOYCE, 1914
Início da ficção hipertextual, com
a obra Ulysses.
VANNEVAR BUSH, 1939
Construção de uma máquina
capaz de indexar o
conhecimento, o Memex.
5
6. CHOOSE YOUR ADVENTURE, 1976
Série de livros infantis narrada em segunda
pessoa, no qual o leitor assume o papel do
protagonista e toma decisões, em formato de
jogo, onde se avança páginas de acordo com as
escolhas feitas.
COLOSSAL CAVE ADVENTURE, 1975
Primeiro adventure em computador, com
elementos de RPG e roguelike, criado por Will
Crowther, programador e espeleólogo.
6
7. O desenvolvimento
tecnológico
possibilitou o
aumento da
diversidade de
narrativas
interativas
NARRATIVAS
INTERATIVAS
NO
PRESENTE
D&D. Curse of Strahd,2016 Você decide, 1992
Life is Strange, 2015 Bandersnatch, 2018
10. Twine (https://twinery.org/)
COMO É?
Estruturado em
hipertexto, fazendo uso
de HTML, CSS e
JavaScript.
O QUE É?
Ferramenta livre e open-
source de construção de
narrativas interativas.
HISTÓRIA
Primeira versão lançada
em 2009.
Crescimento da
plataforma em 2012.
10
14. Por que usar
o Twine?
Por ser possível aprender a usar
linguagens de programação para web
enquanto se cria narrativas.
APRENDIZADO
Por ser uma das ferramentas mais
acessíveis de se usar para
desenvolvimento de jogos.
FACILIDADE DE CRIAÇÃO
Mesmo sem conhecimentos avançados,
a ferramenta tem uma interface
intuitiva para o usuário final.
FACILIDADE PARA JOGAR
14
16. -Nome do protagonista
-Recursos disponíveis
-Pontos de habilidade
-Relógio
-Marcador para eventos
-Pontuação
CONSTRUÇÃO DE
VARIÁVEIS COM
JAVASCRIPT
16
27. HTML
COMO É?
Construído por meio de elementos
HTML, delineado por tags,
estruturando o documento
O QUE É?
Linguagem de marcação utilizada
para desenvolvimento web
HISTÓRIA
Criada em 1991, surge com a
proposta de que a internet fosse
baseada em um sistema de
hyperlinks.
27
28. Estrutura
do HTML
<h1>Título do jogo</h1>
<img src="logo.jpg"
width="800" height="600">
TAG
<h1>Título do jogo</h1>
<img src="logo.jpg"
width="800" height="600">
ELEMENTOS
<h1>Título do jogo</h1>
<img src="logo.jpg"
width="800" height="600">
ATRIBUTOS
28
29. HTML
Cabeçalhos
Definido pelas tags <h1> até <h6>.
Ex: <h1>Título do jogo</h1>
Imagens
Ex: <img src="logo.jpg"
width="800" height="600">
Formatação
<b>Negrito</b>
<i>Itálico</i>
<mark>Grifado</mark>
<del>Riscado</del>
Parágrafo
Ex: <p>Este é um parágrafo</p>
29
30. HYPERLINKS NO TWINE
[[ESCOLHA 1->CENA 2]]
AO SELECIONAR "ESCOLHA 1", O
JOGADOR VAI PRA "CENA 2"
[[CENA 2<-ESCOLHA 1]]
O JOGADOR ALCANÇA A "CENA 2" AO
SELECIONAR A "ESCOLHA 1"
[[ESCOLHA 1]]
AO SELECIONAR "ESCOLHA 1", O
JOGADOR É LEVADO À CENA
"ESCOLHA 1"
HTML
CABEÇALHOS
<H1>TÍTULO DO JOGO</H1>
<H2>NOME DO CAPÍTULO</H2>
FORMATAÇÃO
<B>NEGRITO</B>
<I>ITÁLICO</I>
<MARK>GRIFADO</MARK>
<DEL>RISCADO</DEL>
IMAGENS
<IMG SRC="LOGO.JPG"
WIDTH="800" HEIGHT="600">
PARÁGRAFO
<P>ESTE É UM PARÁGRAFO</P>