out 282008
 

Blz!

Para mostrar a um amigo, alguns dos jogos/demos que estou desenvolvendo, coloquei no youtube dois videos, mas cuidado!, É uma super produção caseira 😛

Para quem não conhece temos, o Pancada, o famoso jogo de boxing, que um dia vou terminar, pior que só esta faltando coragem pra fazer a pseudo-ia do jogo 😉

E o TechDemo, Caveman (que nome original), o qual é a base de futuros testes para o desenvolvimento de jogos estilo plataforma, existe alguns problemas relacionados a movimentação, regras de saltos, movimento de queda, mas em fim, é o começo 😉

out 252007
 

Blz!

Conforme foi sugerido, um amigo perguntou o que de fato era a interface gráfica que eu havia desenvolvido, então resolvi falar um pouco sobre ela e mostrar a versão atual que agora é parte integrante do framework GBF (Gamework’s Brazilian Framework).

O GBF é um framework em C++, criado para o desenvolvimento de jogos 2D (jogos estilos: nes/snes e mega), seu foco é no uso da programação orientada a objetos além de ser multiplataforma (é compatível para compilação em ms-windows e gnu/linux) e poder ser utilizado em jogos que exijam pouco hardware, confesso que posso estar saindo deste trilho, mas por vez ou outra, volto para otimizar o framework e testa-lo no outro pc que tenho (AMD K6-II 500mhz / 192mb RAM / GeForce 2 MX 400 64 mb).

Tem algum tempo que voltei a mexer no projeto “pancada”, o qual nasceu junto com o framework (por volta de 2004) porém ficou meses(anos) parado e surgiu a necessidade de eliminar aquela codificação chata de preparar as janelas de dialogo, como aquelas telas de vitória, créditos e afins.

Sendo assim comecei a rascunhar (como pode ser visto nos links no final deste post) algumas possibilidades para criação de uma interface gráfica bem simples, que visavam só apresentar um texto dentro de uma área de tela, a qual chamei de janela, e que algumas vezes tivesse um botão “OK” para fechar, para não inchar o desenvolvimento com mil e uma possibilidades, tomei como política básica o de desenvolver/suportar apenas o que de fato é necessário, tentando assim talvez otimizar e ganhar um pouco de performance, futuramente pode ser que adicione outros botões (como os utilizados em jogos de RPG/Quests) por hora não é o foco.

Vamos para de enrolar, e mostrar logo como a coisa funciona.
Abaixo podemos ver o diagrama de classes das janelas

O que de fato acontece é que o desenvolvedor utilizando o framework faria apenas isto:

//Criando um padrão visual com janela transparente - segue o pattern Prototype (GoF)
UserInterfaceVisualImagem *uiVisualImagem = new UserInterfaceVisualImagem();
uiVisualImagem->setCorBorda(255,0,0);

//ou caso seja o desejo utilizar uma janela de cor solida (fundo de uma única cor)
//sendo necessário apenas passar para o método "setVisual".
UserInterfaceVisualSolido * uiVisualSolido = new UserInterfaceVisualSolido();
uiVisualSolido->setCorBorda(255,0,0);
uiVisualSolido->setCorFundo(100,200,100);

UserInterfaceWindowTitulo *janelaAjuda;
janelaAjuda = new UserInterfaceWindowTitulo();
janelaAjuda->setPosicao(40,50);
janelaAjuda->setDimensao(560,400);
janelaAjuda->texto.setFonte("texto");
janelaAjuda->texto.setChaveTexto("tela_ajuda_%02d");
janelaAjuda->titulo.setFonte("menu");
janelaAjuda->titulo.setChaveTexto("titulo_ajuda");
janelaAjuda->setVisual(uiVisualImagem->clone());
janelaAjuda->adicionarBotao(new UserInterfaceBotao("menu","botao_enter",SDLK_RETURN));
janelaAjuda->inicializar();

UserInterfaceVisualImagem *uiVisualImagem = new UserInterfaceVisualImagem();
uiVisualImagem->setTipoBackground(BACKGROUND_LINES);
uiVisualImagem->setCorBorda(255,0,0);

UserInterfaceWindowTitulo janelaCredito = new UserInterfaceWindowTitulo();
janelaCredito->setPosicao(40,50);
janelaCredito->adicionarBotao(new UserInterfaceBotao("menu","botao_enter",SDLK_RETURN));
janelaCredito->inicializar();
janelaCredito->setDimensao(560,400);
janelaCredito->texto.setFonte("texto");
janelaCredito->titulo.setChaveTexto("titulo_credito");
janelaCredito->setVisual(uiVisualImagem->clone());
janelaCredito->titulo.setFonte("menu");
janelaCredito->texto.setChaveTexto("tela_credito_%02d");
A classe “UserInterfaceVisualImagem”, provê o efeito do fundo da janela, o qual aparenta ser transparente, talvez até por meio do canal “alpha”, porém muito pelo contrario, a questão é muito simples, ele desenha no fundo da janela uma imagem, que possui alguns pontos que são transparentes, definido pelo que chamamos de colorkey, onde uma cor(RGB) é mapeada para não ser desenhada, no caso o mais comum é a magenta RGB(255,0,255), essa é uma técnica simples que possivelmente é mais rápida para desenhar que a utilização do canal alpha, ganhando talvez alguns pontos de performance. A figura em questão que possui alguns padrões de “transparência” pode ser vista abaixo, e a seleção de qual utilizar é baseada na enumeração “UserInterfaceVisualTipoBackground”.

Na classe “UserInterfaceWindow” e “UserInterfaceWindowTitulo” existe os atributos “texto” e “titulo” o qual possibilita a utilização do recurso de “localização”, que é a mudança de idioma nos textos de acordo com o sistema operacional do usuário(no caso o jogador), para finalizar o método “inicializar” realiza os ajustes finais para determinar algumas características que devem ser executadas apenas uma vez ou o menos possível.

Após entender assim, mesmo por cima o que deve ser feito, temos a parte importante que é “Como de fato eu uso e desenho a janela”, bem para isso vou mostrar o código:

void Jogo::menuCredito()
{
rameLayerManager::getInstance()->getFrameLayer("background")->desenhar();

janelaCredito->executar();

if (janelaCredito->isBotao(UserInterfaceWindow::BOTAO_OK)){
setMenuPrincipal();
}
Este metodo “menuCredito” é provido por meio de uma classe chamada GAT (GBF Application Template) a qual tem o uso apenas recomendado, de fato começa a oferecer uma estrutura pronta para utilização do GBF.

Neste método podemos observar uma chamada ao “FrameLayerManager” (é um singleton), no caso esta chamada é apenas pq queríamos desenhar o cenário do jogo abaixo da nossa janela. (Ver Figura 1)

O desenho de fato da janela é feito pelo método executar, o qual cuida de renderizar o que for necessário da janela e seus componentes. (Ver Figura 2)

O método “isBotao” verifica se o botão “OK”, único suportado no momento foi acionado ou não, (o botão responde pelo código das teclas definida no SDL), onde caso seja acionado executará os comandos informados (Só a título de curiosidade este método faz o sistema de máquina de estados do GAT retornar ao exibição do menu principal).

Para finalizar podemos entender que o que chamamos de janela, basicamente é uma região da tela, a qual podemos fazer alguma manipulação, no caso da GBF e do Pancada tudo que necessitamos é desenhar as bordas da janela, uma imagem de fundo com efeito de “transparência”, que seja capaz de exibir alguma mensagem(texto e título) e que possa responder ao acionamento de algum botão.

Caso tenham interesse em saber mais detalhadamente como funciona ou detalhes da implementação podem entrar em contato 😉

Figuras Anexas
Figura 1: Tela do Menu Principal

Figura 2: Tela de Crédito


T+!
Vida Longa e Próspera!

———————————————-

Referência
[1]http://davidferreira-fz.blogspot.com/2007/09/gbf-interface-grafica-v05.html
[2]http://davidferreira-fz.blogspot.com/2007/09/rascunho-de-interface-grfica.html
[3]http://pjmoo.wiki.sourceforge.net/
[4]http://pjmoo.wiki.sourceforge.net/GBF
[5]http://www.libsdl.org

set 172007
 

Blz!

Dando continuidade ao desenvolvimento da interface gráfica para as mensagens no Pancada[1], consegui um novo rascunho de classes as quais possuem uma abstração mediana, visto que resolvi especializar conforme a demanda, para não adicionar tantas classes no framework GBF[2] que acabem não sendo uteis, apresento abaixo o resultado das novas classes de interface gráfica e um pequeno exemplo do que mudou na forma de se fazer as “caixas de mensagens”, as quais são bem simples porém era chato de fazer.
//Criando um padrão visual com janela transparente - segue o pattern Prototype (GoF)
UserInterfaceVisualImagem *uiVisualImagem = new UserInterfaceVisualImagem();
uiVisualImagem->setCorBorda(255,0,0);

//ou caso seja o desejo utilizar uma janela de cor solida (fundo de uma única cor)
//sendo necessário apenas passar para o método "setVisual".
UserInterfaceVisualSolido * uiVisualSolido = new UserInterfaceVisualSolido();
uiVisualSolido->setCorBorda(255,0,0);
uiVisualSolido->setCorFundo(100,200,100);

UserInterfaceWindowTitulo *janelaAjuda;
janelaAjuda = new UserInterfaceWindowTitulo();
janelaAjuda->setPosicao(40,50);
janelaAjuda->setDimensao(560,400);
janelaAjuda->texto.setFonte("texto");
janelaAjuda->texto.setChaveTexto("tela_ajuda_%02d");
janelaAjuda->titulo.setFonte("menu");
janelaAjuda->titulo.setChaveTexto("titulo_ajuda");
janelaAjuda->setVisual(uiVisualImagem->clone());
janelaAjuda->adicionarBotao(new UserInterfaceBotao("menu","botao_enter",SDLK_RETURN));
janelaAjuda->inicializar();

Onde o uso da janela criada se da da seguinte forma:

void Jogo::menuAjuda()
{
    FrameLayerManager::getInstance()->getFrameLayer("background")->desenhar();

    janelaAjuda->executar();

    if (janelaAjuda->isBotao(UserInterfaceWindow::BOTAO_OK)){
        setMenuPrincipal();
    }
}

Para efeito de comparação logo abaixo um exemplo de como era criada a tela do menu ajuda:

void Jogo::menuAjuda()
{
    char textoFormatado[30];
    FrameLayerManager::getInstance()->getFrameLayer("background")->desenhar();

    for (int i=0; i>;11;i++){
        writeSystem->escreverLocalizado("texto",70,120+(26*i),textoFormatado);
    }

    frameworkGBF->writeSystem->escreverLocalizado("menu", 220, 88,"titulo_ajuda");

    if (desenharBotaoEnter()){
        if ((frameworkGBF->inputSystem->teclado->isKey(SDLK_RETURN))
        || (frameworkGBF->inputSystem->joystick->isButtonA())){
            setMenuPrincipal();
        }
    }
}

Logo abaixo:

  • Janela com fundo transparente
  • Janela com Fundo em cor Sólida

E para matar a curiosidade o novo rascunho do diagrama de classes “ainda não integrante do GBF” pode ser visto abaixo:

T+!
Vida Longa e Próspera!

———————————————-

Referência
[1]http://pjmoo.wiki.sourceforge.net/Pancada
[2]http://pjmoo.wiki.sourceforge.net/GBF