Twine on FiloQuest

Template Twine Básico (Ficção de Mistério)

Fri, 01 May 2026 00:00:00 +0000

O que está incluído

Estrutura de 15 passages com fluxo narrativo de mistério
CSS com tema escuro e atmosférico
Sistema de inventário básico (Harlowe)
3 finais alternativos
Comentários explicativos em cada passage

Como usar

Baixe o arquivo .html
Abra o Twine e clique em “Import From File”
Selecione o arquivo baixado
Personalize as histórias de acordo com sua criação!

[PLACEHOLDER] — O arquivo de download será adicionado em breve. Por enquanto, consulte o Tutorial 1 para criar sua própria estrutura.

Twine: Introdução à Ficção Interativa

Sun, 15 Mar 2026 00:00:00 +0000

O que é Twine?

Twine é uma ferramenta gratuita e de código aberto para criar histórias interativas e jogos de texto. Não é necessário saber programar para começar — mas há recursos avançados para quem quiser ir mais longe.

Com Twine você cria histórias no formato de grafo: cada trecho da história é um nó (chamado de passage), e os links entre nós representam as escolhas do leitor/jogador.

💡

Por que Twine?

Twine é amplamente usado em games indie, trabalhos acadêmicos e arte digital. O editor funciona no navegador sem instalação, e os jogos exportados são arquivos HTML que funcionam em qualquer dispositivo.

Instalação e Acesso

Há duas formas de usar o Twine:

Twine: Variáveis, Condições e Inventário

Wed, 01 Apr 2026 00:00:00 +0000

O que são Variáveis?

Em Twine, variáveis são como “memórias” da história: guardam informações sobre o que o jogador fez, escolheu ou possui. Com elas você pode criar histórias que se adaptam às decisões do jogador.

No formato Harlowe, variáveis começam sempre com $ (dólar).

Tipos de Variáveis

(set: $nome to "Maria")        /* string — texto */
(set: $vida to 100)            /* number — número */
(set: $temChave to false)      /* boolean — verdadeiro/falso */
(set: $inventario to (array:)) /* array — lista de itens */

ℹ️

Onde colocar o (set:)?

O comando (set:) pode ser posto no início de qualquer passage. O jogador não o vê — ele só executa silenciosamente quando o passage é visitado.

Exemplo Prático: O Quarto com Inventário

Passage: “Início”

(set: $temChave to false)
(set: $inventario to (array:))
(set: $visitouEscrivaninha to false)

Você acorda em um quarto misterioso.

[[Examinar a escrivaninha]]
[[Tentar abrir a porta]]

Passage: “Examinar a escrivaninha”

(set: $visitouEscrivaninha to true)

Sobre a escrivaninha há papéis espalhados e uma gaveta entreaberta.
Dentro da gaveta você encontra uma chave enferrujada.

(link: "Pegar a chave")[
  (set: $temChave to true)
  (set: $inventario to it + (array: "Chave enferrujada"))
  Você guarda a chave no bolso.
  [[Voltar ao centro do quarto]]
]

[[Ignorar a gaveta → Voltar ao centro do quarto]]

💡

O que é 'it'?

Em Harlowe, it se refere ao valor atual da variável que está sendo modificada. $inventario to it + (array: "Chave") adiciona “Chave” ao array existente.

Passage: “Tentar abrir a porta”

Aqui usamos uma condição para verificar se o jogador tem a chave:

Twine: Estilizando com CSS e Imagens

Mon, 20 Apr 2026 00:00:00 +0000

Por que Estilizar?

O Twine gera histórias como HTML. Isso significa que você pode usar CSS para transformar completamente a aparência — de um simples texto em um ambiente visual imersivo.

Onde Colocar o CSS

No Twine, há um passage especial chamado StyleSheet (ou STYLESHEET):

Clique em "+" para criar um novo passage
Nomeie-o exatamente como StyleSheet
No menu do passage, marque como “Stylesheet” (ícone de tag)
Tudo que você escrever aqui será CSS puro

CSS Básico para Twine/Harlowe

Fundo e tipografia

/* Estilo global da história */
tw-story {
  background-color: #1a1a2e;
  color: #e0e0e0;
  font-family: 'Georgia', serif;
  font-size: 1.1em;
  line-height: 1.8;
}

/* Área de texto de cada passage */
tw-passage {
  max-width: 700px;
  margin: 0 auto;
  padding: 2em;
}

/* Links (escolhas) */
tw-link, a {
  color: #a78bfa;
  text-decoration: none;
  border-bottom: 1px solid #a78bfa;
  transition: color 0.2s, border-color 0.2s;
}

tw-link:hover, a:hover {
  color: #c4b5fd;
  border-color: #c4b5fd;
}

Cabeçalhos e seções

h1, h2, h3 {
  color: #c4b5fd;
  font-family: 'Cinzel', 'Times New Roman', serif;
  letter-spacing: 0.05em;
}

/* Separador visual */
hr {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.15);
  margin: 2em 0;
}

/* Destaque para texto importante */
em {
  color: #fbbf24;
  font-style: normal;
  font-weight: bold;
}

Inserindo Imagens

Método 1: URL externa (sem instalação)

<img src="https://picsum.photos/700/300" alt="Paisagem do quarto misterioso">

Você acorda em um quarto desconhecido...

Método 2: Imagem como base64 (incorporada)

Para histórias offline, você pode converter imagens para base64:

Twine + IA: Gerando Texto com Modelos de Linguagem

Sun, 10 May 2026 00:00:00 +0000

Ficção Interativa com IA: Uma Nova Fronteira

A combinação de Twine com modelos de linguagem (LLMs) abre possibilidades fascinantes: personagens que respondem de forma única a cada jogador, descrições que se adaptam ao contexto, ou mesmo uma IA que coescreve partes da narrativa em tempo real.

Neste tutorial, usaremos o formato SugarCube (mais amigável para JavaScript) e integraremos com uma API de LLM.

⚠️

Requisitos

Este tutorial requer conhecimento básico de JavaScript e acesso a uma API de LLM (OpenAI, Anthropic ou Ollama local). Chaves de API da OpenAI têm custo; o Ollama permite rodar modelos localmente e gratuitamente.

Configurando o Story Format SugarCube

No Twine, abra as configurações da story (ícone ≡ → “Change Story Format”)
Selecione SugarCube 2.36

O SugarCube tem suporte nativo a JavaScript e macros como <<script>>.

Twine: Publicando sua História Online

Mon, 01 Jun 2026 00:00:00 +0000

Do Editor ao Mundo

Uma história Twine é, no fundo, um arquivo HTML — isso significa que ela pode ser hospedada em qualquer servidor web, incluindo opções gratuitas. Neste tutorial, cobriremos as principais plataformas.

Exportando do Twine

Passo 1: Publicar para arquivo

No editor de story, clique no nome da história (barra inferior)
Selecione “Publish to File” (ou “Publicar como Arquivo”)
Salve o arquivo .html no seu computador

Verificação local

Antes de publicar, abra o arquivo no navegador (duplo clique) e teste toda a história. Certifique-se de que:

Inscrições abertas para a oficina de introdução ao Twine

Mon, 15 Jun 2026 00:00:00 +0000

Estão abertas as inscrições para a oficina de introdução ao Twine, atividade de extensão do projeto FiloQuest voltada a estudantes e professores interessados em ficção interativa.

O que você vai aprender

Na oficina, os participantes criam sua primeira história interativa do zero:

O que é ficção interativa e por que ela interessa às Letras e à Computação;
Primeiros passos no Twine: passagens, links e escolhas;
Como dar personalidade à história com variáveis e condicionais;
Como publicar sua história na web gratuitamente.

Como participar

A oficina é gratuita e não exige conhecimento prévio de programação. As vagas são limitadas — consulte a página de eventos para datas, local e formulário de inscrição.

Série completa de tutoriais de Twine já está no ar

Fri, 05 Jun 2026 00:00:00 +0000

A equipe do FiloQuest concluiu a publicação da série de tutoriais de Twine, um percurso completo — e gratuito — para quem quer criar ficção interativa, mesmo sem experiência com programação.

O percurso

Introdução à ficção interativa — o que é o Twine e como criar sua primeira história;
Variáveis e lógica — estados, condicionais e um sistema de inventário;
Estilo e aparência — CSS para dar identidade visual à sua história;
Integração com IA — conectando sua história a modelos de linguagem;
Publicação na web — como colocar sua obra no ar de graça.

Para salas de aula

Os tutoriais foram escritos pensando também em professores: cada um pode ser usado como roteiro de uma aula prática. Materiais complementares estão disponíveis na seção de downloads.

Workshop: Criando Ficção Interativa com Twine

Fri, 15 May 2026 00:00:00 +0000

Sobre o Evento

Neste workshop de 4 horas, os participantes aprenderão do zero a criar histórias interativas usando o Twine. Não é necessário nenhum conhecimento prévio de programação.

Programação

Horário	Atividade
14h00	Abertura e apresentação do projeto FiloQuest
14h20	O que é ficção interativa? Panorama histórico
14h50	Instalação e primeiros passos com Twine
15h30	Prática guiada: criar uma história em 30 minutos
16h10	Intervalo
16h20	Estilização com CSS e recursos avançados
17h00	Hackathon rápido: tema surpresa
17h40	Apresentação dos resultados e encerramento

Requisitos

Notebook próprio com navegador atualizado
Nenhum software a instalar (usaremos a versão online do Twine)
Vontade de criar histórias!

Vagas Limitadas

O workshop tem capacidade para 20 participantes. Inscrições pelo link acima.