Este documento fornece instruções sobre como criar jogos e narrativas interativas usando a ferramenta Twine. Ele inclui um cronograma de workshops sobre desenvolvimento de narrativas, HTML, CSS e JavaScript. Também explica como implementar frameworks como jQuery em projetos do Twine para adicionar interações e animações.

1. CRIAÇÃO DE
GAMES E
NARRATIVAS
INTERATIVAS
COM O TWINE
Walter Rubens Bolitto Carvalho
VENTURING INTO E-COMMERCE01

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. Javascripte
Twine
SINTAXE E IMPLEMENTAÇÃO
PROPRIEDADES
APRESENTAÇÃO DOS TRABALHOS
3

4. Implementação de
frameworks
Frameworks são um conjunto de ferramentas
previamente estabelecidas.
JQuery é utilizado na construção de interações e
animações.
JQUERY
4

5. Implementação
de frameworks
$(function () {
$.getScript("https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js",
function (data, textStatus, jqxhr) {
console.log('jquery ui file loaded');
}
);
});
USANDO JQUERY NO TWINE
5

6. Javascripte
Twine
SINTAXE E IMPLEMENTAÇÃO
PROPRIEDADES
APRESENTAÇÃO DOS TRABALHOS
6

7. Funcionalidades JQuery (HTML)
7
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").remove();
});
});
</script>
<p>Este texto está na sua memória</p>
<button>Apague estas memórias</button>

8. Funcionalidades JQuery (CSS)
8
<p>Texto à esquerda</p>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css("text-align", "center");
});
});
</script>
<button>Centralize o texto</button>

9. Interações com JQuery
9
<div id="content"></div>
<script>
$( "html" ).keydown(function(event) {
switch (event.which) {
case 37:
$("#content").text( $("[name = 'Passagem Esquerda 1']").html() );
break;
case 39:
$("#content").text( $("[name = 'Passagem Direita
1']").html() );
break;
}
});
</script>
Elvira II: The Jaws of Cerberus

10. SITES RECOMENDADOS
https://twinery.org/wiki/
https://twinery.org/wiki/harlowe
https://twinery.org/forum/
http://twinery.org/cookbook/
https://www.w3schools.com/js/
10

11. OUTROS LINKS
https://gersande.com/blog/designing-inventories-in-
twine-2-with-the-built-in-harlowe-macros/
https://videlais.com/2016/04/12/twinetuesday-saving-
and-loading-games-in-harlowe/
11

12. 12
Início da
apresentação
dos trabalhos
às 12h

13. OBRIGADO