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

  6 Responses to “GBF Interface Grafica”

Comments (6)
  1. Legal seu framework cara, mas pq os nomes sao todos em portugues? Nao eh padrao faze-los em ingles?

  2. Blz!Bem é uma questão meio complicada.O meu desejo era faze-lo todo em português, não vejo o pq de ter que cria-lo todo em inglês(Quem disse que tinha que ser padrão ser na língua inglesa?), até pq em português é um diferencial para ele.O maior problema que tive é que muita coisa em português fica “estranha” ou representa idéias diferentes, então tentei na medida do possível colocar em português e deixar em inglês aquelas coisas(métodos, atributos, classes) que representem algum padrão ou técnica consagrada.A grosso modo o que está em inglês é o nome da classe (pacote+classe) ou parte dele, sei que isso pode dar uma confusão danada, mas foi o meio termo que consegui encontrar para poder representar a nossa língua mãe ;), o ideal seria escrever tudo em português porém não ficou muito legal no meu ponto de vista, mas isso é questão de gosto 😉 tenho amigos que conseguem escrever bibliotecas/jogos/frameworks 100% em português sem o menor problema, porém eu não creio ter esta habilidade ;)Valeu pelo comentário ;)Agradeço a visita e volte sempre

  3. fala David, seria bom um workshop de uma manha inteira sobre esse framework, vamos marcar qualquer dia para uma explicação in loco

  4. Blz!Christiano por mim, é tranqüilo, e creio que as curiosidades e recursos técnicos desenvolvidos no framework levam realmente um bom tempo para serem explicados e o melhor de tudo?É que faz uso de técnicas básicas que podem ser implementada em diversos ambientes ;)O maior problema talvez seja o fato dele ser em C++, o pessoal aqui em fortaleza para não ser muito fã dessa linguagem :\

  5. Ei, David! Muito legal isso. Mas pra usar agora, está pronto?Gostaria de ver um workshop sobre ele, sou doido pra aprender pelo menos um pouco de c++Quem sabe eu aprenda a tempo de ver este workshop!

  6. Olá David, ótimo framework, pode ter certeza que estudarei ele nos tempos livres ehehe.

    O que achei muito legal no seu framework é a iniciativa de fazê-lo em português, é muito bom respaudar a nossa linhgua natal.

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(requerido)

(requerido)