Tutorial: Programando no Twine – Parte 6 – Macros Interativas e de Entrada de Dados

Oi, pessoal!

Vimos no nosso último tutorial algo sobre algumas macros para links bem especiais.

Hoje, continuando nesse assunto de macros vamos explorar algumas que permitem interações interessantes e entrada de dados do usuário.

Chega mais que só está começando.

Macros de Interação no Twine

Vamos aprender duas específicas aqui: button e click. As duas acionam diversos eventos ao serem clicadas. Isso é útil para, por exemplo, mudarmos status de variáveis, chamar caixas de diálogo, tocar música, levar a outra passagem e outras funções ao clicar em apenas um item.

Existem algumas diferenças entre elas e vou ressaltar aqui:

  • button: cria um botão que pode disparar uma ou diversas ações. A diferença aqui é que simplesmente gera um botão gráfico mesmo, com rótulo e bonitinho;

button_example

  • click: nesse caso, é um link comum (como já vimos normais das passagens), mas permite diversos comandos dentro dele. Nesse sentido ele se torna mais vantajoso que a sintaxe de link de passagem.

Sintaxe de uso:

<<button (rótulo do botão ou link de passagem)>> (lista de comandos em macros) <<endbutton>>
<<click (rótulo do botão ou link de passagem)>> (lista de comandos em macros) <<endclick>>

Portanto, se perceberem, o uso dos dois é igual, as funcionalidades também, a única diferença é que button gera um botãozinho mesmo, bonitinho. O resto é igual ao click.

Como esses comandos estão um pouco diferentes da documentação oficial Twine, recomendo acessar na documentação do SugarCube. Inclusive já vão estar aquelas macros de entrada de dados também.

 

Macros de Entrada de Dados no Twine

Para podermos pegar entradas do usuário, temos alguns recursos no Twine em específico na SugarCube.

Vamos conhecer cada um deles. Se você já está habituado com interfaces gráficas em programação ou marcadores HTML na web, vai ver que é bem parecido. São eles:

  • checkbox: botão para selecionar várias escolhas, não apenas uma. Faz um V, ao clicar nele, para marcar em um formulário;

Checkbox_example

  • radiobutton: botão para selecionar apenas uma escolha. Faz uma marcação de bolinha, ao clicar nele, para marcar em um formulário;

radio_button_example

  • textbox: caixa de texto para preencher dados curtos. Um exemplo: Nome para preencher;

Textbox_example

  • textarea: caixa de texto para preencher dados mais longos. Um exemplo: Comentários para escrever.

textarea_example

Com estes, já dá para brincar bastante.

Sintaxe de uso de textbox e textarea:

<<textbox (variável entre aspas duplas) (texto de prenchimento) (se leva a outra passagem ao dar enter)>>
<<textarea (variável entre aspas duplas) (texto de preenchimento) >>

Os dois funcionam de maneira semelhante. O valor do texto digitado pelo usuário irá à variável atribuída à macro.

Também pode-se fazer a sintaxe para os dois assim:

<<(macro textarea ou textbox) (variável entre aspas duplas) (texto de preenchimento) autofocus>>

O que muda? Acrescer autofocus no final faz o cursor ir direto para ali, quando abre a tela da passagem.

 

Já a sintaxe de checkbox e radiobutton:

<<checkbox (variável entre aspas duplas) (valor se não escolhido) (valor se escolhido)>>
<<radiobutton (variável entre aspas duplas) (valor se escolhido)>>

Ambos também aceitam, ao final, uma expressão chamada checked. O que é isso? A opção marcada com isso já vai ficar selecionada automaticamente. 😉

Eu sei que tudo isso já parece complicado só na teoria. Por isso, “bóra” praticar.

 

Prática de Macros Interativas – Formulário de Cadastro de Jogador

Um exemplo bem tranquilo para começar: vamos pensar em um início de jogo:  quero cadastrar um jogador.

Vamos pegar alguns dados dele:

  • Nome: pegar completo. Típico caso para textbox;
  • Sexo: masculino ou feminino. Típico caso para radiobutton;
  • Preferências: Jogar, ler e desenhar. Típico caso para checkbox;
  • Comentários: escrever opiniões. Típico caso para textarea.

Depois, vou exibir todos estes dados na próxima passagem. Como será feita a transição para essa passagem? Pelo botão “Cadastrar”. Nele, já vou aproveitar e inserir uma caixa de diálogo também para mostrar “Cadastro efetuado com sucesso!”.

Aí vocês verão como se montam estes recursos, além de como pegar as entradas de dados feitas pelo jogador. 😉

Vamos nessa!

Primeiro, fiz a passagem com cada um dos elementos do formulário. Perceba o uso de cada um deles, o nome de variáveis que dei, além do final: o botão. Ele vai levar à outra passagem. Veja que adicionei entre <<button>> e <<endbutton>> o comando da caixa de diálogo. Ele será acionado ao clicar no botão.

Observe também os valores que coloquei para quando ficar escolhida a opção em radiobutton e checkbutton. No primeiro, caso escolha masculino, a variável $sex_jogador recebe “masculino”. Feminino de maneira análoga.

Já no checkbutton, caso não escolha a opção mostrará a variável com o valor falso e se escolher, aparece verdadeiro. Exemplo: se marcar que gosta de jogar, a variável $jog_jogador receber o valor true. Senão, false. E assim para as outras opções.

Isso é feito para depois ficar fácil de descobrir qual opção ele marcou ou não no checkbutton.

Tutorial_Twine_Prog_P6_05

Veja como ficou o formulário bonito e já preenchido por mim.

Tutorial_Twine_Prog_P6_06

Agora, vamos a passagem que mostrará os dados. Observe que basta fazer um print para cada variável. Quais variáveis? Aquelas que foram escolhidas para cada macro de entrada de dados.

No caso do checkbutton, é necessário uma verificação com <<if>> para ver qual opção realmente foi escolhida pelo jogador. Qual foi escolhida? Apenas aquelas que a variável tiver como valor “true”.

Tutorial_Twine_Prog_P6_07

Vejam como fica na visualização aquele cadastro que fiz. Primeiro, a caixa de diálogo:

Tutorial_Twine_Prog_P6_08

Depois, mostrando os dados do formulário:

Tutorial_Twine_Prog_P6_09

Muito legal, né? Mais recursos para vocês. \o/

 

 

Vimos nesse tutorial o uso de duas macros para interações simples, mais outras para entrada de dados.

No próximo tutorial, vamos para estruturas de repetição. Fiz uma pesquisa e encontrei uma macro <<for>> para o SugarCube. Então poderemos usar repetição de maneira mais fácil, sem precisar criar uma macro específica. Pois bem, vou explicar os dois meios de qualquer forma. 😀

Até semana que vem!

Fabiano Naspolini de Oliveira

Fabiano Naspolini de Oliveira

Fabiano Naspolini de Oliveira (Editor-Chefe) – Formado em Análise e Desenvolvimento de Sistemas, Pós-Graduado em Docência para Educação Profissional, MBA em Game Design e Mestrado em Tecnologias da Informação e Comunicação. Foi redator do portal Nintendo Blast, professor de cursos técnicos e Game Designer/Sócio-Fundador do estúdio Céu Games por 6 anos. Atualmente, é professor de jogos digitais e escritor.

Send this to a friend