Slides Twine aula2

CRIAÇÃO DE GAMES E
NARRATIVAS INTERATIVAS
COM O TWINE
VENTURING INTO E-COMMERCE
Walter Rubens Bolitto Carvalho
01

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.
29/06/2019
Introdução ao
JavaScript na
construção de
variáveis, finalização
e apresentação dos
jogos
2

3
CSS e
TWINE
DEFINIÇÃO E SINTAXE
IMPLEMENTAÇÃO
PROPRIEDADES E FORMATOS
INTRODUÇÃO AO JAVASCRIPT

Linguagem utilizada para
definir a aparência de
páginas que fazem uso de
linguagem de marcação
(HTML, XML, Twine, etc...)
DEFINIÇÃO
4

Sintaxe5
SELETOR{
PROPRIEDADE: VALOR;
}
EXEMPLO:
BODY {
BACKGROUND-COLOR: BLACK;
}

6
CSS e
TWINE
IMPLEMENTAÇÃO

Implementação
INLINE
<p style="color: red">Texto com a cor de fonte vermelha.</p>
7

Implementação
INTERNO
<head>
<style type="text/css">
.vermelho { color: #f00; font-weight: bold; }
</style>
</head>
<body>
<p class="vermelho">Texto com a cor de fonte vermelha e negrito</p>
</body>
8

Implementação
EXTERNO
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
9

11
CSS e
TWINE
IMPLEMENTAÇÃO
PROPRIEDADES E
FORMATOS

12
https://www.w3schools.com/css/default.asp

Estrutura de um
documento HTML16
HEADER
Tag introdutória em cada página, geralmente contém título ou ícone do site,
menu e informações de autoria.
BODY
Tag que contém o corpo de documento, composto de textos, imagens,
hyperlinks, tabelas, etc.
FOOTER
Esta tag é o rodapé da página, geralmente contém links, mapa do site,
informações de copyright, etc.

17
ALTURA,
LARGURA,
HEADER E DIV

18
ALTURA,
LARGURA,
HEADER E DIV

19
FORMATO DE HISTÓRIA
Harlowe
Snowman
SugarCube

Harlowe
20
Formato padrão, desenhado para
iniciantes no Twine.
[tags="mar"] {
background: blue;
}

Snowman
21
Formato básico, para otimização
completa de CSS e Javascript.
.passage.mar{
background: blue;
}

Sugarcube
22
Formato que oferece mais
funcionalidades, mas exige maior
conhecimento de programação.
.mar{
background: blue;
}

23 Principais tags
HEADER
A implementação se dá com uma
passagem separada, ficando
acima da passagem atual (body)
TW-SIDEBAR
Altera a barra lateral esquerda
(onde se encontra o botão voltar)
FOOTER
Assim com o header, a
implementação se dá com uma
passagem separada, ficando
abaixo da passagem atual (body)
TW-STORY
A passagem na qual o jogador se
encontra

25
Layouts
HTTPS://DRIVE.GOOGLE.COM/DRIVE/FOLDERS/1WUDQ
QHEHVHTXRUMBGECXPNZH1DQRJYLP?USP=SHARING

26
CSS e
TWINE
IMPLEMENTAÇÃO
INTRODUÇÃO AO
JAVASCRIPT

26
IMPLEMENTAÇÃO
INTRODUÇÃO AO
JAVASCRIPT
08
www.w3schools.com/js/default.asp
Linguagem de
programação utilizada
principalmente para web.
Capaz de criar interações
com o usuário.
JavaScript
27

Conceitos
Utilizada para armazenar dados (números, palavras, etc..), podendo
ser alteradas durante o período de utilização do usuário.
var name= “João”;
var x= 3;
VARIÁVEIS
28

29
JAVASCRIPT
<p id="demo"></p>
<script>
var x = 3;
var y = 7;
document.getElementById("demo").innerHTML = x + y;
</script>
TWINE
(set: $x to 3)
(set: $y to 7)
(set: $soma to $x + $y)
$x
...
var x = 3;
var y = 7;
var z = x + y;
...innerHTML = z;
</script>
...

30
JAVASCRIPT
<p id="demo"></p>
<script>
var nome, sobrenome;
nome = "João";
sobrenome = "Carlos";
document.getElementById("demo").innerHTML = nome + " " +
sobrenome;
</script>
TWINE
(set: $nome to "João")
(set: $sobrenome to "Carlos")
$nome $sobrenome

Arranjo
31
JAVASCRIPT
<p id="teste"></p>
<script>
var cores= ["verde", "cinza", "vermelho"];
document.getElementById("teste").innerHTML = cores;
</script>
TWINE
(set: $caixa to (a:))
(set: $caixa to $caixa + (a: "armadura", "espada"))
$inv

32
JAVASCRIPT
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
Math.floor(Math.random() * 10);
</script>
TWINE
(random: 1,10)
Número aleatório

Conceitos
Um conjunto ordenado de códigos que realiza uma determinada
tarefa.
Função definida como a soma de x e y
Solicite os valores de x e y
Digite o valor da soma
FUNÇÕES
33

Funções
34
JAVASCRIPT
<p id="demo"></p>
<script>
function myFunction(p1, p2) {
return p1 * p2;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>

Conceitos
Realiza determinada tarefa com base na análise de uma operação
lógica.
Se variável for igual a Brasil
Então digite "Olá"
Senão digite "Hello"
CONDICIONAIS
35

Condicionais
36
JAVASCRIPT
var pais= "Brasil";
if (pais=== "Brasil") {
console.log("Olá");
} else {
console.log("Hello");
}
TWINE
(set: $pais to "brasil")
(if: $pais is "brasil")[Olá!]
(else:)[Hello]

Slides Twine aula2

Mais conteúdo relacionado

Semelhante a Slides Twine aula2

Mais de Diversão Séria UFABC

Último

Slides Twine aula2