POSTS BY MARCELO LA CARRETTA

  • TWINE COOKBOOK

    AUTHOR: // CATEGORY: Textos

    http://twinery.org/

    Para baixar/usar o software (ele é todo baseado em html/php/css)

     

    COOKBOOK

    # Criar links/passagens
    # Abrir/descortinar texto
    # Imagens
    # Som
    # Nome Customizado
    # Box de Alerta
    # Dados
    # HUD
    # Variáveis
    # Range
    # Timer

    # Layout


    Como inserir links para as passagens (construção de árvore de opções):

    Sempre que você colocar um texto entre colchetes duplos [[  ]], automaticamente surgirá uma passagem/página nova.

    Exemplo:
    Na página, você escreve:

    E agora? 
    Você quer [[explorar a caverna]]
    Ou quer [[dar mais uma olhada?]]

    Irão surgir duas pranchas novas (ou links para as pranchas, se elas já existirem com esses nomes), com setas indicando de onde elas vieram.

    Mas, se você quiser outro nome para o link, mas direcioná-lo para uma prancha específica, é só colocar o comando assim:

    [[Você quer explorar a caverna? |CHECK POINT]]
    [[Ou quer dar mais uma olhada? |GAME OVER]]

    Na árvore de escolhas, o nome que está após o comando | será o nome da prancha. Isso evita que você tenha que colocar a palavra GAME OVER como hiperlink, por exemplo, e fazer com que o leitor saiba que está indo para um mau final.

    Lembre-se: todos os caminhos devem ter hiperlinks de navegação!
    Mas, para não criar “setinhas demais” na árvore de opções, basta colocar este comando nas páginas que não precisa ter hiperlinks em fluxo, como finais e capítulos novos:

    Exemplo:

    (link:”Começar de novo?”)[(goto:”intro”)]

    Onde “intro” seria o nome da primeira prancha da sua aventura!

    Se quiser um html de exemplo, baixe esse aqui

    # Voltar ao topo

    Abrir/descortinar texto
    Use o seguinte comando:

    Então… você opta por abrir o armário!

    (link: “abrir armário”)
    [
    Ao abrir o armário, você sofre um ataque de morcegos… fim da linha para você!
    GAME OVER
    ]

    Isso, além de aproveitar melhor a página, cria momentos de tensão para a sua história!

    # Voltar ao topo


    Como inserir imagens

    Por exemplo, inserir imagem que está no meu computador
    1 – abrir a imagem via browser; copiar o caminho da imagem
    2 – Colar assim:

    <img src=”caminho_da_imagem_dentro_do_seu_computador.png”>

    Ou, de forma mais específica (com tamanho definido, por exemplo):

    <img src=”caminho_da_imagem_dentro_do_seu_computador.png” style=”width:100px”>

    Para fazer com que a imagem seja também um link (neste caso, indo para a passagem “página 02”:

    [[<img src=”caminho_da_imagem_dentro_do_seu_computador.png”>|pagina02]]

    Se ele estiver já publicado, deve-se inserir o link da pasta de destino, ou o endereço dele na web:
    Exemplo:

    <img src=”imagens/capa.png”>

    Ou o endereço na web:

    <img src=”https://lacarreta.com.br/imagens/capa.png”>

    Note que neste caso, a imagem “capa.png” está em uma pasta organizada, e não na raiz (no caso, imagens/capa.png). tentem fazer isso de forma organizada, dessa forma.
     

    # Voltar ao topo

    SOM
    Use o seguinte comando:

    <audio src=”caminho_do_mp3.mp3″autoplay>
    </audio>

    Para colocar um som dentro de uma imagem (ao clicar nela, toca o som):

    <a href=”javascript:document.getElementById(‘darplay’).play();”><img src=”caminho_da_imagem.png”></a>
    <audio id=”darplay” src=”caminho_do_mp3.mp3″></audio>

     

    Se quiser um html de exemplo, baixe esse aqui

    # Voltar ao topo

    Como inserir um nome customizado:
    Na primeira página, coloque o seguinte código:

    (Set:$name to (prompt:”Coloque o seu nome:”, “Zezinho”))

    E, uma vez no texto, lembrar de escrever $name ao invés de um nome

    Exemplo:

    $name, o que você está fazendo aqui?

    Vira

    Zezinho, o que você está fazendo aqui?

    # Voltar ao topo

    Box de Alerta

    Use o seguinte comando:

    (alert:”Cuidado com a próxima escolha!”)

     

    # Voltar ao topo

    Dados
    Use o seguinte comando:

    Então… você rola o dado para enfrentar o monstro!
    (link:”Rolar dado”)
    [
    (set: $dado to (random: 1,6))

    O resultado do dado foi: $
    dado
    (if: $dado <=4)[Você não derrotou o monstro!]
    (if: $dado >4)[Você derrotou o monstro!](if: $dado <=4)[[[e então…|péssimo final]]]
    (if: $dado >4)[[[e então…|ótimo final]]]
    ]

    Se quiser um D20, altere o (random: 1,6) para  (random: 1,20)
    Se a sua pegada é fazer algo no estilo RPG de mesa, sua hora de brilhar é agora! =]]

     

    # Voltar ao topo

    HUD com vida, munição, dinheiro
    Tem um excelente vídeo no Youtube que explica de forma bem tranquila como implementar isso, mas, em resumo, use o seguinte comando:

    (set:$health to 100)(set:$ammo to 3)(set:$credits to 50)<b>Munição=$ammo | Vida=$health | Dinheiro=$credits</b>

    Na tela, irá aparecer na parte de cima uma HUD assim:
    Munição=3 | Vida=100 | Dinheiro=50

    Para continuar com a HUD nas outras passagens da história, basta continuar com o seguinte comando:

    <b>Munição=$ammo | Vida=$health | Dinheiro=$credits</b>

    Mas, para tirar um pouco da vida, por exemplo, basta digitar

    (set:$health to ($health-49))
    <b>Munição=$ammo | Vida=$health | Dinheiro=$credits</b>

    Para inserir opções que só aparecem depois de perder vida, por exemplo, insira:

    (set:$health to ($health-49))<b>Munição=$ammo | Vida=$health | Dinheiro=$credits</b>

    (if:$health >49)[[continua correndo|corre]]
    (if:$health <49)[[continua correndo|Game Over]]

    (notem que se o valor da vida for maior que 49, surge a 1a. opção; se a vida for menor que 49, surge o 2o. link).

    Se quiser um html de exemplo, baixe esse aqui

     

    # Voltar ao topo

    Como criar uma variável que desbloqueia novas passagens:

    Criar um item que desbloqueia novas páginas
    Por exemplo:
    Na primeira passagem, digite o seguinte comando:

    (set:$machado to false)

    Na passagem onde você encontra o machado, digite:

    (set: $machado to true)
    Encontrei um machado!

    E, na página onde você quer usar ou não o machado, coloque

    Você decide (if: $machado is true) [usar o machado!] (if: $machado is false) [forçar a fechadura:]

    (if: $machado is true) [[Abrir a porta|consegue abrir]] (if: $machado is false) [[Abrir a porta|não consegue abrir]]

    Note que a variável (usar o machado) irá surgir somente se passar pelo local onde se pega o machado; senão, somente a variável de escolha – forçar a fechadura – será vista).

    OBS.: Notem, nessa altura do campeonato, que isso aqui [ ] habilita ou não visualizar um texto;
    já isso aqui [[ ]] habilita um link para uma passagem.

    # Voltar ao topo


    Usando a mesma lógica de variáveis, mas com valores crescentes ou descrescentes, dá para fazer os famosos Dating Games
    (mudanças de valor – Range – novas possibilidades vão surgindo)!

    Por exemplo:
    Coloque este comando na primeira passagem:

    (set:$amor to 0)

    Depois, pincele pelas passagens, se ele fez algo ruim, comandos como

    (set:$amor to ($amor-2)) 

    e, se ele fez algo bom no relacionamento:

    (set:$amor to ($amor+2))

    No final deste exemplo, temos 3 finais possíveis, mas apenas uma opção surge, pela soma dos $amor das passagens:

    (if:$amor <=-1)[[E então…|péssimo final]]
    (if:$amor >=0 and $amor <=1)[[E então…|final meio ruim]]
    (if:$amor >1)[[E então…|ótimo final]]

    Se quiser um html de exemplo, baixe esse aqui

     

    # Voltar ao topo

    Como colocar um timer nas passagens:
    Por exemplo: Fizemos uma passagem com apenas um link [[clique aqui]], e caso ele não seja clicado em 9 segundos, o jogo entra automaticamente na passagem [[demorou]] :

    (set: $counter to 9)
    Clique no link abaixo…Você tem |amount>[$counter] segundos!(live: 1s)[
        (set: $counter to it – 1)
        (if: $counter is 0)[(go-to: “demorou”)]
        (replace: ?amount)[$counter]
    ]
    [[Clique aqui!]]

    Isso pode ser utilizado de forma bem interesssante em lugares onde a decisão a ser tomada precisa ter uma certa rapidez (ou aumentar a sensação de perigo/ansiedade).

    Se quiser um html de exemplo, baixe esse aqui

     

    # Voltar ao topo

    E, para fechar:
    LAYOUT
    Estamos usando o formato de layout mais novo (e famoso) do Twine, o Harlowe

    Normalmente, o layout dele é preto com texto branco… E como trocar esse layout? Podemos colocar um “código de encantamento”, como esse aqui, nas pranchas que queremos que troquem esse layout:

    (enchant:?page,(text-colour:black)+(bg:white))

    ou

    (enchant:?page,(text-colour:black)+(bg:”caminho_da_image.png”))

    Se quiser uma imagem como background.

    Falando em imagens: Infelizmente, o pessoal que fez o Harlowe “esqueceu” de colocar uma linha de comando na folha de estilos para deixar as imagens responsivas (que encolhem ou aumentam de acordo com a janela do navegador). Então, na folha de estilos do projeto de vocês, basta colar esse comando aqui:

    img {
        max-width: 100%;
        height: auto;
    }

     

    COMO COLOCAR FONTES DIFERENTES NAS PASSAGENS:

    Exemplo:

    (font:’Arial’)
    [Colocar aqui o texto todo, incluindo as opções]

    No final, ficará assim:

    Colocar aqui o texto todo, incluindo as opções

    Fontes “Web-Safe”:
    Arial (sans-serif)
    Verdana (sans-serif)
    Helvetica (sans-serif)
    Tahoma (sans-serif)
    Trebuchet MS (sans-serif)
    Times New Roman (serif)
    Georgia (serif)
    Garamond (serif)
    Courier New (monospace)
    Brush Script MT (cursive)

    Aproveitem as dicas! Ah, e novas dicas são bem vindas!

    # Voltar ao topo