Imagens para painéis e botões

Vou focar a aprendizagem baseando o conteúdo em um engine, para não diversificar muito os formatos. Na maioria das engines no mercado os procedimentos serão bem parecidos diferindo formatos de imagens e formas como elas são aplicadas.

Optei pela engine da conitec A6 pois é de fácil aquisição e é capaz de produzir jogos com boa qualidade. A engine atual está na A7, mas pretendo usar a A6 pois foi bem difundida no Brasil e capaz de muitos leitores terem a versão comercial ou profissional dela. Para quem não tem, existe a versão básica que pode ser usada gratuitamente.

Os painéis são áreas retangulares com um padrão de fundo, ou revestimento e instrumentos opcionais ou controle sobre eles. Eles podem ser usados para cabines de piloto, painéis, inventários e itens de inventário, botões, splash screens ou imagens. Eles estão definidos do modo habitual:

Usualmente costuma-se usar imagens com possibilidade de transparência de backgrownd, ou canal alpha, 32 bit, 24 para cores e 8 para a transparência. Para se entender como funciona, vou colocar aqui um exemplo de como sua imagem seria usada dentro de um jogo, no caso de uma equipe produzindo o jogo esta informação quando artistas e programadores são pessoas distintas, não tem muita importância e o artista pode pular isso se quiser, mas para o desenvolvedor solitário ou pequenas equipes onde os membros desenvolvem múltiplos papéis pode ser interessante observar bem os detalhes.

PANEL name { … } Define um painel de exibição com o nome name.

Exemplo:

Aqui o gráfico vai ser associado com o nome compass_map. Depois é chamado quando for preciso por uma função. Quando falarmos sobre a área código do livro vou explicar em detalhes isso. Note que coloquei o compass_map verde para destacar, o nome da imagem vermelha, em outra parte do programa já foi especificado em que diretório ele pode procurar pelo arquivo.

bmap compass_map =<compass.tga> ;

panel aircraft_pan {

pos_X = 4;
pos_y = 4;
digits = 0,0,4,digit_font,1000,player._RPM;
digits = 60,0,4,digit_font,1,player._SPEED_X;
digits = 120,0,4,digit_font,1,my_height;
window = 200,0,40,20,compass_map,compass_pos.x,compass_pos.y;
flags = REFRESH,VISIBLE;
}

Uma definição de painel podem conter – na seqüência dada – os seguintes parâmetros

BMAP = bmap; Nome do bitmap para o fundo do painel. O tamanho deste bitmap determina o tamanho do painel. Normalmente só será desenhado uma vez. Se o painel é movido em cima da tela, exemplo, a posição do painel é mudada, o bitmap de fundo será redesenhado. Deste modo um painel pode ser usado para um sprite 2-D. Painéis podem ser de qualquer tamanho. Quando o bitmap do painel é maior que as restrições dadas pela placa 3D, é automaticamente duplicado e renderizado em várias partes pelo engine.

LAYER = number; Determina a ordem do painel, se ele se sobrepõe com outros objetos. Serão colocados elementos com valor de LAYER mais alto em cima de elementos com valor mais baixo de LAYER. O parâmetro de LAYER não pode ser mudado durante o gameplay.

POS_X = number; POS_Y = number; Distância da borda esquerda superior do painel da borda esquerda superior da tela. Estes valores podem ser mudados durante gameplay para mover o painel sobre a tela.

Determina a transparência de um painel translúcido em modos 16 ou 32-bit (não em todas as edições). Em 0 o painel é totalmente transparente, em 100 é totalmente visível.

Elementos do painel como botões herdam o valor alpha do painel. Deste modo painéis, botões etc. podem ser intensificados ou enfraquecidos suavemente.

A flag transparent do painel (veja abaixo) deve ser definida. Exemplo para enfraquecimento em um painel:

my_panel.transparent = ON;
my_panel.alpha = 0;
while (my_panel.alpha < 100) {
my_panel.alpha += 20*time; wait(1);
}
my_panel.transparent = OFF;
FLAGS = Flag1, Flag2...; Aqui uma lista de todas as flags de painel que podem ser dadas, que serão definidas no início do jogo. Todas as outras flags são OFF por padrão. As flags seguintes podem ser definidas:

VISIBLE

Somente definindo esta flag o painel será visível na tela. Se for para ele aparecer em cima de uma visão, a flag refresh deve ser definida adicionalmente.

OVERLAY Se esta flag é definida, a cor 0 (preta) do BMAP não será desenhada, de forma que o painel de fundo pareça como um revestimento.

TRANSPARENT Se esta flag for definida, o painel de fundo e os botões serão desenhados semi transparentes sobre a tela.

REFRESH

Se esta flag for definida, o painel é redesenhado a todos os ciclos de frames. Isto é necessário para exibir um painel sobre uma visão, ou tendo um texto rolante pelo painel sem sobrescrever o fundo. Sem o REFRESH, o painel só é redesenhado se sua posição for mudada, e seus elementos só são redesenhados se a variável correspondente é mudada. Especialmente em grandes painéis que constantemente são redesenhados custando tempo de renderização e redução da taxa de frames.

D3D

Se esta flag for definida, o painel é renderizado por hardware em modos 16 ou 32-bit. Caso contrário é renderizado por software. A renderização por hardware é mais rápida e tem uma melhor aparência, mas consome valiosa memória de textura. Pode ser dado a um painel vários elementos substitutos, para compor cabines de piloto ou menus.

Dentro das definições de elemento seguintes, as posições de x e y referem-se à distância do canto esquerdo superior do respectivo elemento à extremidade esquerda superior do painel:

BUTTON = x, y, bmapOn, bmapOff, bmapOver, actionOn, actionOff, actionOver; Define um botão no painel. O tamanho do dado botão corresponde ao tamanho do bitmap com o nome dado por bmapon. Este bitmap será visível se o botão do mouse esquerdo for apertado sobre o botão. Bmapoff será visível se o mouse estiver em cima do painel, mas não em cima do botão. Bmapover será visível contanto que o mouse esteja sobre o botão. ActionOn será executado se o mouse clicar em cima do botão; será executado actionoff se o mouse for segurado durante certo tempo e então liberado em cima do botão; e o actionover será executado se o mouse tocar o botão. Devem ser dados nomes reais de função aqui, não sinônimos. Com exceção de bmapon que determina o tamanho do botão, cada um dos bitmaps e nomes de função podem ser substituídos por NULL. Vários botões no mesmo painel podem compartilhar a mesma função, se ela estiver definida com um parâmetro. O número do botão que ativou a função é entregue como parâmetro àquela função. O número 1 corresponde ao primeiro botão na definição de painel.

Exemplo:

function count_up_skill(button_number) {
PLAY_SOUND click,50; if (button_number == 1) { player.SKILL40 += 1; } if
(button_number == 2) { player.SKILL41 += 1; } if (button_number == 3) { player.SKILL42 += 1; }
}
panel skill_pan { ...
button = 0,0,on_map,off_map,off_map,count_up_skill,NULL,NULL; button =
0,10,on_map,off_map,off_map,count_up_skill,NULL,NULL; button =
0,20,on_map,off_map,off_map,count_up_skill,NULL,NULL; ...
}

VSLIDER = x, y, len, bmap, min, max, var;

HSLIDER = x, y, len, bmap, min, max, var;

O deslizador vertical ou horizontal pode ser arrastado com o mouse para colocar valores. O número len dá a altura ou largura do alcance do deslizador em pixels. O bitmap bmap é usado para o botão deslizante que é arrastado com o botão do mouse esquerdo apertado. Os números min e max determinam o valor de alcance do deslizador. A variável é definida a um valor dentro deste alcance dependente da posição atual do deslizador. Se movido para a posição superior ou esquerda, var é definida para o valor de min, para a posição mais baixa ou direita é definida ao valor de max. Exemplo:

HSLIDER = 10,10,40,slider_map,1,8,my_var; // troca my_var de 1 para 8 sobre 40 pixels

VBAR = x, y, len, bmap, factor, var; HBAR = x, y, len, bmap, factor, var;

Exibição de barra gráfica vertical ou horizontal para a representação gráfica de uma variável não-array no painel. O bitmap é trocado verticalmente ou horizontalmente dependendo do valor da variável. Len é o tamanho vertical ou horizontal da barra em pixels. Factor é um número de ponto fixo que quando multiplicado pela variável var resulta na troca do bitmap em pixels. Bmap deve ter um mínimo de (len + factor*( valor máximo de var)) pixels em tamanho vertical ou horizontal.

WINDOW = x, y, dx, dy, bmap, varX, varY; Exibe uma janela ‘recortada’ de um bitmap. O números dx e dy dão o tamanho do recorte em pixels. O bitmap fonte bmap não deve ser menor que dx e dy. Ambos varX e varY dão a posição da janela do recorte no bitmap em pixels, relativo ao canto esquerdo superior. A janela só pode ser colocada dentro das extremidades do bitmap.

DIGITS = x, y, len, font, factor, var; Display numérico. Font é uma definição de caractere previamente definida consistindo em 11 caracteres (números de 0 ..9 e espaço) ou de 128 ou 256 caracteres em ordem ASCII. A parte integra da variável não-array var é mostrada com dígitos de len no painel. O valor da variável é primeiro multiplicado pelo factor. Em vez de uma variável, pode ser dado o nome para qualquer parâmetro numérico de qualquer objeto.

São suprimidos os primeiros zeros. Se a fonte não tiver um caracter ‘menos’ , não serão mostrados valores negativos. Em vez de exibir números, você poderia usar um bitmap de fonte especial para exibir símbolos com um display de um dígito.

MOUSE_MAP = bmap; Ponteiro alternativo do mouse dentro do painel. Se este nome não for determinado, o ponteiro do mouse mantém sua aparência normal.

ON_CLICK = function; Em vez da função ‘global’ ON_CLICK, esta função dada é executada em qualquer lugar clicando com o ponteiro do mouse dentro do bitmap do painel.

Exemplo de painel contentor de dígitos, texto e bitmap. Dados trocados no painel para clarificar o entendimento. Os personagens e textos contidos nele são imagens.

image1

image2

Exemplos de botões.

image3

Exemplo de barra de informação, VBAR. Pode ser usado para diversos fins. E inclusive como banco de imagens para os mais variados tipos de usos dentro de um jogo. No exemplo a baixo a esquerda a barra de informação esta presente no ultimo item do painel representando o estado de avarias e condição do carro no jogo GSV8.

image4

Postado por
Siga em:
Compartilhe
Deixe seu comentário
Img de rastreio
Localize algo no site!