Criando e Configurando Skin do Neoncube

Programas necessários:

• NeonCube 1.2 (Download aqui)

• Editor de imagens (Photoshop, Photoscape, Paint, etc.)

1 - Primeiros Passos
Faça o download do NeonCube e extraia o arquivos em alguma pasta de seu computador.
Dentro da pasta de seu Neoncube, contém a pasta com o próprio nome "neoncube", dentro dela encontramos a pasta padrão do skin chamada "skin_default" que é onde se localiza o skin e suas respectivas configurações.

1.1 - Entendendo os arquivos para a configuração
Farei uma lista dos arquivos contidos na pasta skin_default:

bg.bmp
imagem de estrutura da skin, ou seja, o fundo.

cancel.bmp
botão de cancelar do menu. (sua função é fechar o neoncube).

cancel_hover.bmp
o mesmo que o cancelar acima, porém essa é a imagem utilizada para quando o mouse é passado sobre o botão.

close.bmp
esse é o famoso "X", que no caso, também fecha o Neoncube.

close_hover.bmp
imagem utilizada quando o mouse é passado sobre o "X".

minimize.bmp
botão de minimizar o neoncube, localizado ao lado do X.

minimize_hover.bmp
imagem utilizada quando o mouse é passado sobre o botão de minimizar.

register.bmp
botão contido no menu para abrir a página de registro de seu servidor.

register_hover.bmp
imagem utilizada quando o mouse é passado sobre o botão de registro.

startgame.bmp
o grande "Start Game"/"Jogar". Botão também do menu, sua função é abrir o jogo.

startgame_hover.bmp
imagem utilizada quando o mouse é passado sobre o botão acima, o start game.

neoncube.STYLE
Esse arquivo é essencial para a configuração do seu skin, com ele você modifica as posiçoes dos botões e faz do jeito que achar melhor.


2. Estilizando sua Skin
Irei criar um exemplo diferente do padrão que já vem programado no neoncube, para assim aprendermos melhor á customizar a skin por intera.
Aconselho a criar o skin inteiro em uma imagem só e assim recortar depois para o alinhamento. Favor salvar em formato BITMAP (.bmp)
Ou se preferir, editar as imagens já presentes na pasta skin_default.

Exemplo que criei:


Como podem ver, eu criei as principais imagens para a formação da skin.
São elas: bg , close , minimize , startgame , cancel e register.

Agora antes de partir para o próximo passo, vamos dividir essa estrutura para separar as imagens que citei acima.
Isso é bem facil, pode até ser feito no Paint (com zoom para melhores resultados).



Pronto.
A dica que eu dou é a seguinte... Nos botões do menu, tente recortar sempre da mesma forma, deixando o mesmo tamanho (recortei em 109x27 cada um).. O mesmo vale para o minimize e close (aqui deixei 9x9)



Usando as imagens acima, voce pode criar a imagens de hover (quando o mouse é passado sobre a imagem).
Utilizarei uma coisa bem simples para isso, apenas adicionarei uma seta ao lado nos botoes do menu, assim quando o mouse passar sobre a imagem, a seta aparecerá dando a entender que a opção está sendo selecionada.



E não se esqueçam de salvar como "startgame_hover" , "register_hover" e "cancel_hover".. formato bitmap .bmp.

Para close e minimize, apenas copiarei os arquivos e os renomearei para close_hover e minimize_hover, pois não quero fazer alterações nessas imagens.

Terminamos as imagens, agora vamos configurar para que elas fiquem certinhas no neoncube.

3. Configuração da SKIN
Essa parte muita gente quebra a cabeça e acaba não entendendo nada.. Tentarei ser o mais claro possível, pois isso é bem fácil, basta interpretar o seu funcionamento.

Primeiro de tudo vamos adicionar as dimensões das imagens..

O Arquivo para todas as configurações é o neoncube.STYLE encontrado dentro da pasta skin_default.
Vamos alterá-lo.
Clique 2 vezes sobre o arquivo, "Abrir com...", Bloco de notas ou WordPad. Eu aconselho o WordPad, pois as vezes o arquivo fica todo junto em apenas 2 linhas (não me pergunte o porquê), o wordpad faz separar o arquivo direitinho..

Bom, vou postar o padrão aqui:
Abra a spoiler para visualizar.

Spoiler

O que vamos alterar?
A principio, colocarei as dimensoes das imagens que criei..

Destaquei as alterações na spoiler a seguir:

Spoiler

Agora vamos entender como funciona as coordenadas X e Y para customizar a skin da forma que quisermos!

Para você que é mais novo e ainda não chegou a estudar gráficos, o que você precisa saber é que X = horizontal e Y = vertical.
Fiz uma imagem para entenderem melhor a localização de um ponto usando coordenadas X e Y.


http://img187.images...coordinates.png

A estrutura da SKIN tem o tamanho de 500x500px, então o centro da imagem é x250 y250 como mostra a imagem acima.
Ao fazer, vocês entederão melhor e pegarão o jeito rapidinho

3.1 Montando SKIN com as coordenadas X e Y.
Iremos agora finalizar a configuração da sua skin.
começaremos por cima (minimize e close)

farei um exemplo com imagem da configuração de minimize, que é a primeira.
colocarei no canto superior direito, onde geralmente ele se localiza mesmo..

Minimize:

;minimize button [minimize] xcoord=470 ycoord=7 width=9 height=9 

http://img522.images.../5672/cord2.png

Acho que com isso já dá pra entender exatamente como funciona certo?
Farei outro logo.

Close:

;close button [close] xcoord=484 ycoord=7 width=9 height=9 

Reparem que a ycoord é a mesma, pois é a distancia do topo, apenas 7 pixels. Já a Xcoord, é mais elevada, por estar mais a frente(pra direita).


Startgame:

;start game button [startgame] xcoord=43 ycoord=162 width=109 height=27 

http://img38.imagesh.../5565/cord3.png

Agora entenderam, né? ^^

Register:

;register button [register] xcoord=159 ycoord=162 width=109 height=27 

Do Xcoord do Startgame pro xcoord de Register, a diferença foi de 117 pixels..
então faremos 159 (do xcoord de register) + 117 (a diferença entre eles) = 276 = xcoord de Cancel.
^^ se não entendeu, deixa isso pra lá e continue o processo xD

Cancel:

;cancel button [cancel] xcoord=276 ycoord=162 width=109 height=27 

pronto.. agora uma parte que vai de sua preferencia:
Notice window, progress bar, frame window e status message..
vou fazer do meu jeito e postar o resultado final pra vocês.

Notice window é aquela janelinha que você pode adicionar uma página da internet para os usuários visualizarem.

;notice (browser) window [notice] xcoord=20 ycoord=225 width=460 height=185 

Os 3 abaixo formam a barra de atualização do autopatch.. é bom deixar sempre junto.

;progress bar [progressbar] xcoord=30 ycoord=463 width=440 height=15 style=1  ;frame window [frame] xcoord=20 ycoord=415 width=460 height=70  ;Status message [text] xcoord=30 ycoord=420 width=445 height=40 

Resultado final:


http://img32.imagesh...822/finalwn.png

------------------------------------------------------

Arquivos do tutorial para download:
Clique Aqui!
------------------------------------------------------

Espero que tenham gostado.