Criação de jogos e narrativas com Twine
•
0 likes•126 views
O documento discute a criação de jogos e narrativas interativas usando a ferramenta Twine. Ele apresenta um cronograma de workshops sobre desenvolvimento com Twine, HTML e JavaScript e discute conceitos e propriedades de CSS, layouts e como implementar interatividade com JavaScript.
Recommended
More Related Content
Similar to Criação de jogos e narrativas com Twine
Similar to Criação de jogos e narrativas com Twine (20)
More from Diversão Séria UFABC
More from Diversão Séria UFABC (20)
Recently uploaded
Recently uploaded (20)
Criação de jogos e narrativas com Twine
- 1. CRIAÇÃO DE GAMES E NARRATIVAS INTERATIVAS COM O TWINE VENTURING INTO E-COMMERCE Walter Rubens Bolitto Carvalho 01
- 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. 29/06/2019 Introdução ao JavaScript na construção de variáveis, finalização e apresentação dos jogos 2
- 3. 3 CSS e TWINE DEFINIÇÃO E SINTAXE IMPLEMENTAÇÃO PROPRIEDADES E FORMATOS INTRODUÇÃO AO JAVASCRIPT
- 4. 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
- 6. 6 CSS e TWINE DEFINIÇÃO E SINTAXE IMPLEMENTAÇÃO PROPRIEDADES E FORMATOS INTRODUÇÃO AO JAVASCRIPT
- 7. Implementação INLINE <p style="color: red">Texto com a cor de fonte vermelha.</p> 7
- 8. 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
- 9. Implementação EXTERNO <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> 9
- 10. 10 CSS NO TWINE
- 11. 11 CSS e TWINE DEFINIÇÃO E SINTAXE IMPLEMENTAÇÃO PROPRIEDADES E FORMATOS INTRODUÇÃO AO JAVASCRIPT
- 13. 13 FONTES
- 14. 14 FUNDO
- 16. 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.
- 20. Harlowe 20 Formato padrão, desenhado para iniciantes no Twine. [tags="mar"] { background: blue; }
- 21. Snowman 21 Formato básico, para otimização completa de CSS e Javascript. .passage.mar{ background: blue; }
- 22. Sugarcube 22 Formato que oferece mais funcionalidades, mas exige maior conhecimento de programação. .mar{ background: blue; }
- 23. 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
- 24. 24 SOM
- 25. 25 Layouts HTTPS://DRIVE.GOOGLE.COM/DRIVE/FOLDERS/1WUDQ QHEHVHTXRUMBGECXPNZH1DQRJYLP?USP=SHARING
- 26. 26 CSS e TWINE DEFINIÇÃO E SINTAXE IMPLEMENTAÇÃO PROPRIEDADES E FORMATOS INTRODUÇÃO AO JAVASCRIPT
- 27. 26 DEFINIÇÃO E SINTAXE IMPLEMENTAÇÃO PROPRIEDADES E FORMATOS 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
- 28. 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. 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. 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
- 31. 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. 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
- 33. 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
- 34. Funções 34 JAVASCRIPT <p id="demo"></p> <script> function myFunction(p1, p2) { return p1 * p2; } document.getElementById("demo").innerHTML = myFunction(4, 3); </script>
- 35. 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
- 36. 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]
- 37. OBRIGADO