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.

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

3. >Narrativas Interativas
Twine
Dinâmica
Hyperlinks no Twine
HTML
3

4. NARRATIVAS
INTERATIVAS
Introdução
Construção de histórias por meio de
experiências interativas,
4

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

8. O ALCANCE
DE
NARRATIVAS
INTERATIVAS
EM 2018.
Detroit: Become Human Florence
Return of the Obra Dinn Frostpunk
8

9. Narrativas Interativas
>Twine
Dinâmica
Hyperlinks no Twine
HTML
9

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

11. 11

12. 12

13. 13

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

15. No World Dreamers:
Sticky Zeitgeist
Forgotten
CONSTRUINDO
INTERFACES COM
HTML E CSS
15

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

17. Narrativas Interativas
Twine
>Dinâmica
Hyperlinks no Twine
HTML
17

18. Dinâmica
PREENCHIMENTO DE
QUESTIONÁRIOS
FORMAÇÃO DE GRUPOS DE 3
A 5 PESSOAS
APRESENTAÇÃO PESSOAL
18

19. PREENCHIMENTO
DE QUESTIONÁRIO
19
HTTP://TINY.CC/QUESTIONARIOTWINEDS

20. QUAL O
SIGNIFICADO DE
CAMINHOS PARA
VOCÊ?
TEMA DO PROJETO
20

21. ROTERIZAÇÃO DE
NARRATIVAS
INTERATIVAS
Personagens
Tempo
Espaço
Foco Narrativo
Atividade do jogador
21

22. Objetivos de hoje
NOME DO JOGOTEMA CONSTRUÇÃO DOS
PRIMEIROS
HYPERLINKS
22

23. Narrativas Interativas
Twine
Dinâmica
>Hyperlinks no Twine
HTML
23

24. HYPERLINK
O QUE É?
Referência dentro de um
documento para outro
documento
COMO É?
<a href="http://www.w3.
org">W3C</a>
W3C
24

25. [[ESCOLHA 1->CENA 2]]
[[CENA 2<-ESCOLHA 1]]
[[ESCOLHA 1]]
CRIAÇÃO DE HYPERLINKS
NO TWINE
25

26. Narrativas Interativas
Twine
Dinâmica
Hyperlinks no Twine
>HTML
26

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>

31. Obrigado