Usando o Inkscape como Level Editor

No post sobre o meu projeto de jogo atual eu mencionei que iria deixar de lado o Level Editor in-game para usar uma forma mais ágil de criar as fases do jogo. A solução então que já tinha na cabeça foi a de adotar o Inkscape para isso.

Não poderia ter sido mais feliz. Com o Inkscape, além de tornar a edição dos níveis mais robusta, fácil e agradável, o esquema da programação se tornou extremamente simples, ao contrário do complicado e limitado (em boa parte pelo tamanho da janela do game em Flash) editor in-game.

Para ser bem breve, o Inkscape é um programa de gráficos vetoriais (como o CorelDRAW e o Illustrator), e é gratuito e de fácil aprendizado, mas nem por isso menos poderoso. Ele trabalha com gráficos em SVG, um formato em vetor que gera arquivos em texto XML, ao contrário do Corel e do Illustrator, que geram arquivos binários (eles podem exportar SVG se você quiser, também).

A vantagem do SVG é que, por ser XML, ele pode ser lido e compreendido tanto por máquinas quanto por humanos. Por exemplo, uma elemento <rect /> descreve o desenho de um retângulo. Assim, você desenha e reproduz no game, bastando abrir no Inkscape para fazer alterações e salvar. Legal, né? 😀

Analisando um SVG com Actionscript 3 (Flash)

Os arquivos SVG do Inkscape trabalham com namespaces, então é preciso lidar com isso na hora de fazer uma análise usando AS3. Eu não vou esticar esse assunto por na Web você encontra fácil várias referências e tutoriais sobre isso (aqui vão dois links: este sobre ler XML no AS3 e usando Namespaces, este último em inglês). Veja o código a seguir:


var xml:XML = new XML(svgFile); // svgFile é a String do arquivo SVG, contendo os dados

// namespace da camada de desenhos
var svgNS:Namespace = new Namespace("svg", "http://www.w3.org/2000/svg");
var xlinkNS:Namespace = new Namespace("xlink", "http://www.w3.org/1999/xlink");
var xmlChildren:XMLList = xml.svgNS::g

// vai iterar entre os retangulos dentro do layer 'g'
for each(var rect:Object in xmlChildren.svgNS::rect.(@type == "platform"))
    trace(rect.@id, rect.@type, rect.@width, rect.@height);

for each(var img:Object in xmlChildren.svgNS::image.(attribute("type") == "door"))
    trace(img.@type, img.@xlinkNS::href);

No caso, xmlChildren vai guardar o elemento “g” do arquivo SVG e seus filhos. A tag “g” do SVG se refere à grupo (é exatamente isso: quando você agrupa vários desenhos para arrastar todos juntos). No caso, o Inkscape desenha tudo em camadas (similar ao Photoshop) e no exemplo o arquivo só trabalhei na camada 1.

A seguir, dois loops for: ambos vão iterar nos elementos de “g”, porém um só vai ler os retângulos que tem o atributo type igual a “platform” e outro em imagens com o type similar a “door”. Ambos vão exibir via trace() informações como o link da imagem, largura, altura, etc.

O Editor XML do SVG

Aí você vai dizer: “type? mas o padrão SVG não tem esse atributo”. Sim, eu adicionei “type” para o caso do meu jogo. Essa é outra vantagem do Inkscape: você pode adicionar atributos e valores no mesmo momento em que desenha com o Editor XML do programa. Esse editor aparece quando você dá um Shift+Control+X ou vai no menu Editar>>Editor XML.

A janelinha do Editor XML do Inkscape. Clique para ampliar.

 

Essa janela de edição do XML/SVG é uma mão na roda para adicionar atributos específicos ao seu arquivo, permitindo enriquecer de informações (como no caso em que adiciono type como “door”, querendo dizer para filtrar esse elemento como uma porta do game).

–x–

Essa ideia de usar o Inkscape como Level Editor não é minha e está longe de ser original – aliás, como o software é opensource, passeando pela Web é possível encontrar versões do Inkscape customizadas para atender especificamente a esse propósito. Bom, #ficadica e espero ter sido útil. Até a próxima!

Be Sociable, Share!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Time limit is exhausted. Please reload the CAPTCHA.