Prototipar Cartas com Nandeck
Notas Prévias
Para aqueles que vieram aqui a pensar que este era o quinto tutorial da série do “Evacuate, Princess!”: más notícias! O próximo tutorial vai ser muito técnico, e vai ficar à espera em R’yleh, tapado por abóbodas cheias de lama verde e viscosa.
Download do ficheiro com a definição das cartas e as imagens usadas aqui.
Um computador com Windows (o setup é mais fácil), Linux, ou um Mac.
Nandeck – download em http://www.nand.it/nandeck/
Objectivo
Quando se cria um jogo de cartas, um jogo de tabuleiro com muitas cartas, ou até um videojogo para o qual se quer desenvolver um protótipo físico utilizando cartas (por exemplo, para simular a inteligência artificial), vai ser necessário muito tempo para as desenhar..
A minha maneira favorita para prototipar cartas é recorrendo ao Nandeck. O Nandeck é uma ferramenta gratuita fabulosa que permite criar decks apenas editando um ficheiro de texto.
Neste tutorial vais aprender o essencial para poder utilizar o Nandeck. Já vi cartas de qualidade profissional criadas com este software, mas para criar um protótipo (o objectivo com que o uso) não é necessário adicionar complexidade. Para ler o manual do Nandeck, com MUITO mais informação do que este tutorial, podes ir aqui.
Keywords
Board Game, Prototyping, Card Game, Nandeck, Game Design, Prototipagem, Jogo de Tabuleiro, Jogo de Mesa, Jogo de Cartas
O que vamos criar?
Já ouviste falar do Munchkin? Se não ouviste, lê a análise que fiz desse jogo.
Ok, agora que já sabes do que estou a falar, posso dizer que neste tutorial vamos criar as 8 cartas da imagem seguinte (4 items e 4 monstros):
Estas cartas têm o grau de complexidade necessário para eu explicar o essencial da utilização do Nandeck, dando a quem lê um bom ponto de partida para exemplos mais complexos.
Não vou perder tempo a explicar como fazer a parte de trás das cartas. Para prototipar, enfia-as dentro de sleeves. E se quiseres fazer decks diferentes… usa sleeves de cores diferentes.
E NÃO, não vou fazer um tutorial com todas as cartas necessárias para jogar Munchkin. Quem quiser, pode comprar o jogo. O Steve Jackson também precisa de dinheiro para comer.
Criar 8 Cartas Castanhas
Depois de obter o Nandeck aqui, e de o instalar, inicia a aplicação.Vais ver um editor de texto com botões à esquerda, à direita, e uma área de pré-visualização.
A primeira coisa a fazer é criar as cartas. Se olhares para a imagem, vais verificar que todas as cartas têm um rebordo castanho. É por aqui que vamos começar.
No Nandeck, podes definir um conjunto de cartas da seguinte forma:
[<nome_conjunto>]=”<número_primeira_carta>-<número_última_carta>”
Como vamos criar 8 cartas, podemos definir o conjunto assim:
[alldeck]=”1-8″
Agora temos que definir um rectângulo, correspondendo a uma carta. Para definir um rectângulo em Nandeck, usamos:
RECTANGLE=<conjunto_cartas>, <posição_X>, <posição_Y> , <largura>, <altura>, “<código_de_cor>”
Assim, para definir 8 rectângulos castanhos, temos:
RECTANGLE=[alldeck], 0, 0 , 6, 9, “#663300″
Algumas notas:
Em vez de usar [alldeck], podia-se usar “1-8”, o que significa que o rectângulo a definir devia ser mostrado nas 8 cartas. E se o ficheiro de texto que estamos a criar fosse apenas de duas linhas, era suficiente. Mas definir [alldeck] é uma forma de tornar mais inteligível, e eventualmente poupar algum trabalho… porque contrariamente ao que disse inicialmente, não é uma forma de definir um conjunto de cartas, mas uma forma de definir uma constante.
Um àparte sobre constantes:
Constantes podem ser úteis. São uma forma de definir… basicamente qualquer coisa de uma forma que torna fácil obter os seus valores em qualquer lugar no ficheiro. Neste caso, define o conjunto de cartas, mas pode ser usado, por exemplo, para definir o texto a mostrar. Imagina que estavas a criar uma espécie de terreno básico para um tipo de jogo qualquer, que te ia dar um tipo de energia. Podias usar:
[texto_ilha]=”Uma ilha dá-te uma unidade de energia azul no teu turno”.
Se quisesses usar este texto em múltiplos sítios no ficheiro, podia simplesmente pôr [texto_ilha], em vez de teres que repetir a frase toda.
Para as “dimensões totais” das cartas, tipicamente começas nas coordenadas (0, 0). Para criar uma área “interior”, usas diferentes pontos de início. Isto vai ser melhor explicado mais à frente.
(6, 9) representam a largura e altura da carta. Não tenho a certeza que sejam estas as dimensões correctas das cartas de Munchkin. Mas para dizer a verdade, não é muito relevante.
“#663300″ é o código hexadecimal para a cor que queremos. Estes códigos podem ser consultados em vários sites (“Google it”). Aqui está um exemplo, mas há mais.
Então, por enquanto, o nosso ficheiro de texto está assim:
; Sets
[alldeck]=”1-8″
; Cards’ limits
RECTANGLE=[alldeck], 0, 0 , 6, 9, “#663300″
Talvez tenhas reparado nas linhas que começam por “ponto e vírgula”. Estas linhas são comentários. O Nandeck ignora-os, mas podem ser úteis para adicionar algumas notas sobre o que as linhas seguintes fazem. Não vou perder tempo a explicar a importândia dos comentários, mas vou dizer isto: sou programador, uso bastantes comentários quando estou a escrever código, e provaram ser (quase) sempre úteis.
Vamos ver como estão as cartas actualmente?
-
Primeiro, no menu do lado esquerdo, carrega em Validate Deck.Vais ver o resultado no centro, ao fundo, a dizer que tudo correu bem.
- Depois, no menu do lado esquerdo, clica em Build Deck
- Agora, usando as setas, podes navegar nas cartas no menu direito. Não são muito excitantes, mas foste tu que as fizeste, portanto deves gostar delas de qualquer forma!
Só uma nota: as cartas não têm cantos arredondados. Existem tutoriais online que ensinam a fazer isso, mas não me interessa. As cartas são mais fáceis de cortar como estão. E, uma vez mais, isto é apenas um protótipo.
Definir os Rebordos e Adicionar Texto
No Nandeck, os rebordos são criados pondo rectângulos de cores diferentes uns dentro dos outros. Assim, para as nossas cartas, temos que adicionar 2 constantes e 2 rectângulos:
[items]=”1-4″
[foes]=”5-8″
RECTANGLE=[items], 0.2, 0.2 , 5.6, 8.6, “#F0F07E”
RECTANGLE=[foes], 0.2, 0.2 , 5.6, 8.6, “#F9F9D9″
Como podes ver na figura com as cartas, estas podem ser classificadas em 2 tipos: 4 representam items, e 4 representam monstros que enfrentas. Uma das diferenças está na côr de fundo das cartas.
As linhas adicionadas começam por declarar 2 novas constantes, usadas para referir as primeiras 4 cartas (items) e as restantes 4 (monstros). Desta forma, sempre que nos quisermos referir a items/monstros, podemos usar a constante respectiva. Usando estas constantes, declaramos 2 rectângulos de cores diferentes, dentro dos rectângulos com as cores do rebordo, funcionando como “área de conteúdo” das cartas.
Caso quiséssemos adicionar uma área de texto (como nas cartas de Magic, por exemplo), podíamos simplesmente adicionar um novo rectângulo dentro destes.
Uma nota: o Nandeck “lê” o ficheiro “do topo para o fundo”, o que significa que “desenha” primeiro o que está escrito primeiro no ficheiro de texto. Isto significa que para fazer algo aparecer “em cima” de outro elemento, o elemento “de topo” tem que ser escrito depois do elemento “de fundo”. Por exemplo, para este exemplo, se se definissem primeiro os rectângulos “interiores” e depois os castanhos, as cartas seriam completamente castanhas.
Agora o texto: como podes ver, o design das cartas de Munchkin não é padronizado. Isto quer dizer que os vários elementos de uma carta variam em estilo e localização. Neste tutorial vamos ignorar esse facto. O que nos importa é ter o texto correcto nas cartas, permitindo ao protótipo ser jogável. Assim, começamos por identificar que informação devemos ter, de acordo com o tipo da carta
- Item
- Bónus
- Pré-condição
- Nome
- Classificação
- Valor
- Monstro
- Nível
- Nome
- Especial
- Tesouros
Vamos colocar o texto sempre no mesmo sítio, no espaço de cima ou de baixo da carta, deixando o espaço do meio para as imagens. Mas primeiro, 8 constantes, referindo as 8 cartas individuais:
[boots]=”1″
[potion]=”2″
[armor]=”3″
[helmet]=”4″
[geek]=”5″
[golem]=”6″
[troll]=”7″
[chicken]=”8″
Para definir texto em Nandeck, primeiro é necessário definir a fonte, da seguinte forma:
FONT=”<nome_da_fonte>”, <tamanho_da_fonte>, “<flag>”, “<cor_da_fonte>”
Então, por exemplo, para a classificação e valor de um item, e os tesouros dos monstros, vamos usar a próxima fonte:
FONT=”Arial”, 8, “T”, “#000000″
Usamos a flag “T” porque queremos que o fundo do texto seja transparente. Podes ler mais sobre flags no manual do Nandeck.
Quando definimos uma “FONT” em Nandeck, os valores são válidos para todo o texto depois dessa definição, até definirmos uma “FONT” diferente.
Para adicionar texto a uma carta em Nandeck, usamos:
TEXT=<conjunto_cartas>, “<texto>”, <posição_X>, <posição_Y> , <largura>, <altura>, “<alinhamento_horizontal>”, “<alinhamento_vertical>”
Assim, para as “Boots of Butt-Kicking”, temos:
TEXT=[boots], “Footgear”, 0.3, 7.7, 5.2, 1, “left”, “bottom”
TEXT=[boots], “400 Gold Pieces”, 0.5, 7.7, 5.2, 1, “right”, “bottom”
Fazendo isto para todas as cartas ficamos com o ficheiro de texto que se segue:
; Sets
[alldeck]=”1-8″
[items]=”1-4″
[foes]=”5-8″
; Individual Cards
[boots]=”1″
[potion]=”2″
[armor]=”3″
[helmet]=”4″
[geek]=”5″
[golem]=”6″
[troll]=”7″
[chicken]=”8″
; Cards’ Special Text
[potion_special_text]=”Use during any combat. +3 to either side. Usable once only.”
[armor_special_text]=”Not usable by Wizard”
[geek_special_text]=”+6 against Warriors”
[golem_special_text]=”You may choose whether to fight the Stoned Golem or just wave, walk past and let him keep his treasure. (Exception: Halflings look tasty and must fight.)”
[troll_special_text]=”He has no special powers, and he’s really mad about it.”
[chicken_special_text]=”Fried Chicken is delicious. Gain an extra level if you defeat it with fire or flame.”
; Foes’ bad stuff text
[geek_stuff_text]=”You become a normal, boring Human. Discard any Race or Class cards in play.”
[golem_stuff_text]=”He has the munchies. He eats you. You’re dead.”
[troll_stuff_text]=”Screws up the game balance by forcing you to let the player(s) of the highest level take any one item (each) from you.”
[chicken_stuff_text]=”Vary painful pecking. Lose a level.”
; Cards’ limits
RECTANGLE=[alldeck], 0, 0 , 6, 9, “#663300″
RECTANGLE=[items], 0.2, 0.2 , 5.6, 8.6, “#F0F07E”
RECTANGLE=[foes], 0.2, 0.2 , 5.6, 8.6, “#F9F9D9″
; Bottom text
FONT=”Arial”, 8, “T”, “#000000″
TEXT=[boots], “Footgear”, 0.3, 7.7, 5.2, 1, “left”, “bottom”
TEXT=[boots], “400 Gold Pieces”, 0.5, 7.7, 5.2, 1, “right”, “bottom”
TEXT=[potion], “100 Gold Pieces”, 0.5, 7.7, 5.2, 1, “right”, “bottom”
TEXT=[armor], “Armor: Big”, 0.3, 7.7, 5.2, 1, “left”, “bottom”
TEXT=[armor], “600 Gold Pieces”, 0.5, 7.7, 5.2, 1, “right”, “bottom”
TEXT=[helmet], “Headgear”, 0.3, 7.7, 5.2, 1, “left”, “bottom”
TEXT=[helmet], “600 Gold Pieces”, 0.5, 7.7, 5.2, 1, “right”, “bottom”
TEXT=[geek], “2 Treasures”, 0.5, 7.7, 5.2, 1, “right”, “bottom”
TEXT=[golem], “4 Treasures”, 0.5, 7.7, 5.2, 1, “right”, “bottom”
TEXT=[troll], “3 Treasures”, 0.5, 7.7, 5.2, 1, “right”, “bottom”
TEXT=[chicken], “1 Treasure”, 0.5, 7.7, 5.2, 1, “right”, “bottom”
; Foes’ level Text
FONT=”Arial”, 10, “T”, “#000000″
TEXT=[geek], “Level 6″, 0.5, 0.3, 5.2, 1, “center”, “top”
TEXT=[golem], “Level 14″, 0.5, 0.3, 5.2, 1, “center”, “top”
TEXT=[troll], “Level 10″, 0.5, 0.3, 5.2, 1, “center”, “top”
TEXT=[chicken], “Level 2″, 0.5, 0.3, 5.2, 1, “center”, “top”
; Items’ bonus Text
FONT=”Arial”, 10, “T”, “#000000″
TEXT=[boots], “+2 Bonus”, 0.5, 0.3, 5.2, 1, “center”, “top”
TEXT=[armor], “+3 Bonus”, 0.5, 0.3, 5.2, 1, “center”, “top”
TEXT=[helmet], “+1 Bonus (+3 for Elves)”, 0.5, 0.3, 5.2, 1, “center”, “top”
; Title text
FONT=”Arial”, 12, “T”, “#000000″
TEXT=[boots], “Boots of Butt-Kicking”, 0.3, 0.8, 5.2, 1, “center”, “top”
TEXT=[potion], “Flaming Poison Potion”, 0.3, 0.8, 5.2, 1, “center”, “top”
TEXT=[armor], “Mithril Armor”, 0.3, 0.8, 5.2, 1, “center”, “top”
TEXT=[helmet], “Horny Helmet”, 0.3, 0.8, 5.2, 1, “center”, “top”
TEXT=[geek], “Shrieking Geek”, 0.3, 0.8, 5.2, 1, “center”, “top”
TEXT=[golem], “Stoned Golem”, 00.3, 0.8, 5.2, 1, “center”, “top”
TEXT=[troll], “Net Troll”, 0.3, 0.8, 5.2, 1, “center”, “top”
TEXT=[chicken], “Large Angry Chicken”, 0.3, 0.8, 5.2, 1, “center”, “top”
; Special Effects’ Text
FONT=”Arial”, 8, “T”, “#000000″
TEXT=[potion], [potion_special_text], 0.3, 1.4, 5.2, 1, “center”, “wordwrap”
TEXT=[armor], [armor_special_text], 0.3, 1.4, 5.2, 1, “center”, “wordwrap”
TEXT=[geek], [geek_special_text], 0.3, 1.4, 5.2, 1, “center”, “wordwrap”
TEXT=[golem], [golem_special_text], 0.3, 1.4, 5.2, 2, “center”, “wordwrap”
TEXT=[troll], [troll_special_text], 0.3, 1.4, 5.2, 1, “center”, “wordwrap”
TEXT=[chicken], [chicken_special_text], 0.3, 1.4, 5.2, 1, “center”, “wordwrap”
; Bad Stuff’s label
FONT=”Arial”, 10, “TB”, “#000000″
TEXT=[foes], “Bad Stuff:”, 0.3, 6.4, 5.2, 1, “left”, “top”
; Bad Stuff’s text
FONT=”Arial”, 8, “T”, “#000000″
TEXT=[geek], [geek_stuff_text], 0.3, 6.9, 5.2, 1, “center”, “wordwrap”
TEXT=[golem], [golem_stuff_text], 0.3, 6.9, 5.2, 1, “center”, “wordwrap”
TEXT=[troll], [troll_stuff_text], 0.3, 6.9, 5.2, 1, “center”, “wordwrap”
TEXT=[chicken], [chicken_stuff_text], 0.3, 6.9, 5.2, 1, “center”, “wordwrap”
Uma vez mais, algumas considerações:
-
Adicionei algumas constantes para representar os textos das cartas. Isto serve para que as linhas de “TEXT” sejam mais legíveis. Como extra, isto exemplifica que efectivamente uma constante pode ser utilizada para qualquer tipo de informação.
-
Aconselho a análise do resultado final e as linhas de “FONT” correspondentes. Vai ser possível ver diferentes variações (texto a bold, tamanhos diferentes, ou como fazer o texto continuar na linha seguinte ao chegar ao limite de largura).
Com o que foi até agora, e apenas usando texto, já é possível criar protótipos para cartas. No entanto, as cartas ficam com melhor aspecto com alguma arte, e as pessoas que forem testar o jogo também vão preferir. Então, vamos adicionar bonecada!
Adicionar Imagens, e Acabar com Isto!
Antes de adicionar as imagens, “roubei-as” das cartas originais, editei-as (mal, e à pressa), e guardei-as numa sub-pasta da pasta onde está o ficheiro de texto que criámos. Roubar é feio, pequenitos. Então, para me penenticiar do meu pecado (o primeiro da minha vida), aproveito para dizer que a arte do Munchkin é feita por John Kovalic, que merece todo o crédito.
Honestamente, para prototipagem, uso imagens que encontro com pesquisas no google, sem me preocupar com licenças de utilização. O protótipo nunca vai ser comercializado “como está”, portanto não há problema. Se queres imagens, obtêm-as onde conseguires, ou desenha-as rapidamente, sem perder muito tempo com isso por enquanto.
Para adicionar uma imagem, basta usar a directiva seguinte:
IMAGE=<conjunto_de_cartas>,”<localização_imagem>”,<posição_X>, <posição_Y> , <largura>, <altura>,”<flag>”
Existem mais formas de usar imagens, mas uma vez mais, isto é suficiente para os protótipos que fiz até agora. Lê o manual para mais informações.
Assim, para adicionar as imagens às cartas, adicionamos o texto seguinte ao nosso ficheiro:
; Images
IMAGE=[boots],”pics/boots.png”,1.0,2.6,4,4,0,”T”
IMAGE=[potion],”pics/potion.png”,1.0,2.7,4,4,0,”T”
IMAGE=[armor],”pics/armor.png”,1.0,2.7,4,4,0,”T”
IMAGE=[helmet],”pics/helmet.png”,1.0,1.8,4,5.5,0,”T”
IMAGE=[geek],”pics/geek.png”,1.5,2.1,3,4,0,”T”
IMAGE=[golem],”pics/golem.png”,1.5,3.0,3,3,0,”T”
IMAGE=[troll],”pics/troll.png”,1.5,2.6,3,3,0,”T”
IMAGE=[chicken],”pics/chicken.png”,1.5,2.3,3,4,0,”T”
Agora já podes validar (Validate) e construir (Build) o deck, para ver o resultado final dos teus (bem, principalmente meus) esforços.
Agora clica no botão que diz “PDF” no lado esquerdo, escolhe a pasta e o nome do ficheiro para salvar o teu deck, e clica “SAVE”. Vais obter um PDF bem catita com 8 cartas, preparado para imprimir e cortar.
Parabéns, acabaste de aprender a prototipar cartas.
Conclusão
Para dizer a verdade, podias simplesmente arranjar uns bocados de cartolina do tamanho de cartas, e escrever à mão o texto. E ia ser válido para fazer um protótipo, de qualquer forma.
Ou se tiveres alguma experiência com indesign, illustrator, photoshop ou outros softwares “do estilo” podes usá-los para desenhar cartas.
Eu uso o Nandeck.
Uso o Nandeck porque é simples (pelo menos no nível em que o uso), é rápido (depois de criar a primeira carta para um baralho, as restantes tornam-se geralmente básicas), e permite-me evoluir as minhas cartas sem muito trabalho extra (basta alterar o ficheiro de texto e gerar um novo deck).
Também é “à borla”.Ser “à borla” é porreiro. Para mim, é bem melhor que ser pago.
E corre em computadores velhos e novos.
Mas eu sou “um tipo dos computadores”, portanto ter uma espécie de “linguagem de scripting” para criar cartas atrai-me, porque me evita a fastidiosa (para mim) tarefa de ter que usar “software para designers gráficos”. Para aqueles que não têm grande aptidão/gosto por “coisas tecnológicas”, o Nandeck pode parecer demasiado difícil à primeira vista. Espero que este tutorial tenha mostrado que não, e tenha ensinado o suficiente para que possas criar cartas com esta ferramenta “do caraças”.
Finalmente, se queres tirar MUITO mais do Nandeck, lê o manual, e lê/vê mais tutoriais sobre este assunto. O Google vai ajudar-te nessa missão.
Como uma motivação, carrega aqui, e faz um scroll para ver cartas EXTRAORDINARIAMENTE BEM FEITAS que um português desenhou com o Nandeck.
OH, TÃO BONITAS!
Pingback: Using Nandeck to Prototype Cards | The Legend of Johnny