Este blog esta em reforma no momento.

Lua e LibRocket - Relatório de uso



Não achei uma referencia do uso da biblioteca na API Lua da GameKit, oque parece dizer que ainda não esta implementado, e como eu estava com pressa improvisei uns métodos de acesso.

Este é um relatório do processo para chegar neste vídeo.



HTML (RML)
A marcação aceita é denominada RML (Rocket Markup Language) e aceita a maioria das tags fundamentais da HTML4.
Entre as não listadas na documentação estão as STRONG, I e U.
Ela tem recursos chamados "decorators" que facilitam o fatiamento e controle de imagens permitindo que você use texturas para fazer o backgroud de botões e janelas.

Algumas tags próprias para você criar itens arrastáveis e redimencionáveis.

Curiosamente a INPUT não tem o tipo "buttom", oque é de de estranhar para uma lib feita para criar GUI de jogos onde botões são muito importantes.
Uma saída é usar o tipo "submit" como um botão normal já que os FORMs não aparentão utilidade sem o C++. Ou "text input" sem fundo assim eu simularia Links.

A tag IMG pode ser usada tranquilamente, mas só carrega imagens locais.
Inserir ícones no texto também é fácil, só esige um certo cuidado, como usar uma imagem inteira ao invés das texturas grandes.

Estou pensando seriamente em usar o set de emotions criados pelo sgmbas do DeviantArt.

Mãnhas da RML
Por padrão a LibRocket posiciona o documento no centro da janela. Então para posicionar um elemento como no caso da "caixa de fala" o jeito é usar posicionamento absoluto assim:

div#window {
    z-index: 1;
    position: absolute;
    left: 0px;
    bottom: 0px;
    
width: 480px;
    height: 128px;
padding: 10px 15px;
overflow: hidden auto;


background-decorator: tiled-box;
background-top-left-image: gui_rocket.png 10px 13px 84px 139px;
background-top-right-image: gui_rocket.png 118px 13px 126px 139px;
background-top-image: gui_rocket.png repeat-stretch 84px 13px 118px 139px;
background-bottom-left-image: gui_rocket.png 10px 139px 17px 139px;
background-bottom-right-image: gui_rocket.png 118px 139px 126px 139px;
background-bottom-image: gui_rocket.png repeat-stretch 18px 139px 100px 139px;
background-left-image: gui_rocket.png repeat-stretch 10px 87px 17px 137px;
background-center-image: gui_rocket.png stretch 18px 87px 100px 137px;
}

Ela também tem um bom mecanismo de debug.

Dentro do C++
Criei uma ponte para as funções da LibRocket e fui trabalhando meio nas coxas mesmo. Esta dando certo e não tive que fazer muita coisa, em outras palavras quando tiver uma implementação descente na própria GameKit o trabalho de migração deve ser mínimo.

Na verdade onde preciso de um método que levo mais de 30 segundos para encontrar na referência de Lua da engine eu corro pra minha classe WWP_Ex e meto o método la dentro.

Para encorajar o uso da LibRocket vou compartilhar o código que criei:
LRocket.h
LRocket.cpp
Não esta aquela beleza de código mas esta operacional.

Um método conveniente para alterar o conteúdo HTML dinamicamente é o innerHTML que na libRocket foi definido como SetInnerRML e GetInnerRML.
Curiosamente o Get retorna void (nada!) na biblioteca. O que faz aparentar que por algum motivo esse método não esta satisfatoriamente implementado.

Quando fui inserir conteúdo obtive uma falha critica bem destrutiva. Aparentemente o problema ocorre quando se insere marcação RML no texto.
Esse contratempo me fez pesquisar melhor e parece ter umas dicas na seção do site que explica a manipulação de um datagrid. Vou ver com calma. Talvez tenha que improvisar um analisador com a TinyXML para suprir as falhas.

Eventos
O exemplo da GameKit mostra a adição de eventos no botão no nível do C++ e se eu usasse o mesmo padrão teria que criar código a mais nos scripts Lua para adicionar monitores de evento.

Achei isso um saco então parti para uma solução menos potente mas que permite fazer tudo pela RML facilmente:
Ao carregar o documento RML eu adiciono monitores a todos as INPUT que acho.
Ao receber o evento verifico a existência da string "luascript:". Fica como a JavaScript só que passo dois parâmetros separados por virgula: o nome da função Lua e uma string qualquer.
Assim:

<form>
            <input type="submit" value="luascript:cameraTarget,entrada_cidade">+</input> entrada da cidade.<br />
            <input type="submit" value="luascript:cameraTarget,coreto">+</input> coreto da praa.<br />
            <input value="luascript:cameraTarget,veia_louca">+</input> casa da veia louca.<br />
</form>


Momento off-topic: Meu Desktop

Bati um print-screen da tela enquanto pensava em elementos pro jogo...
É... fazer jogos tumultua a mente e as áreas de trabalho.

Comentários