[Tutorial] Editando Sprites no TibiaCanvas

[EdMignari 187]

Introdução

É sempre bom ver pessoas com força de vontade pra começar a 'spritear', mas muitos desistem no começo. Não é um trabalho fácil e a perspectiva em 45° (usada nos clientes Cip) deixa tudo ainda mais complicado.
Desde que comecei a jogar Tibia, minha maior expectativa nos updates era os sprites novos! Como é bom visitar um lugar novo, com itens novos, criaturas novas, enfim, com sprites novos. Enquanto no mundo Open-Tibia pouco se vê de novidades com relação a sprites. Talvez pela dificuldade de criá-los.
Quando comecei a 'spritear', percebi a dificuldade de visualizar o sprite in-game. Tinha que compilá-lo em um programa editor do arquivo SPR pra poder ver o resultado. Então nasceu a necessidade de criar um programa que pudesse ver em tempo real, que pudesse criar um cenário completo, que pudesse ver como ficaria os itens animados, que pudesse ver o resultado dos efeitos das magias, etc.

O TibiaCanvas ainda é um projeto em desenvolvimento, mas acredito que já dá pra fazer muita coisa legal com ele.

(TibiaCanvas - Exemplo de cenário criado com sprites editados)

Esse é o primeiro tutorial de alguns que pretendo fazer sobre o programa e sobre as melhores práticas de edição.

Alguns sprites que fiz quando iniciei a ideia do programa:
http://www.xtibia.com/forum/topic/192437-sprites-edmignari/

Baixe uma versão Beta do programa:
http://www.xtibia.com/forum/topic/189324-sprite-editor/


Ferramentas:

- Move
Modo Game

• Clique com o esquerdo do mouse para mover o personagem.
• Clique e arraste um item para movê-lo entre tiles.

Modo Imagem

• Clique e arraste para mover uma camada.

 

- Pencil
Modo Game

• Clique e/ou arraste o mouse sobre a tela do jogo para adicionar itens ao mapa.

Modo Imagem

• Clique e/ou arraste o mouse sobre uma camada para pintar à mão livre com traços.

 

- Eraser
Modo Game

• Clique e/ou arraste o mouse sobre a tela do jogo para remover itens do mapa.

Modo Imagem

• Clique e/ou arraste o mouse sobre uma camada para apagar pixels.

 

- Eyedropper
Modo Game

• Clique sobre a tela do jogo para copiar uma cor para a switch principal.

Modo Imagem

• Clique sobre a imagem para copiar uma cor para a switch principal.
• Segure Ctrl e clique sobre a imagem para definir a paleta de cores com as tonalidades da imagem ou marque a opção set switches.

 

- Bucket
Modo Game

Modo Imagem

• Preenche áreas coloridas semelhantes com a cor do switch principal.

 

- Zoom
Modo Game

• Amplia e reduz a visualização da tela do jogo.

Modo Imagem

• Amplia e reduz a visualização de uma imagem.

 

- Magic Wand
Modo Game

• Exibe o efeito mágico e o míssil selecionados.

 

- Tile
Modo Game

• Seleciona uma tile no mapa.

Os itens contidos na tile serão exibidos na widget Tile.

Clique com o direito para exibir as opções.

Edit: Abre o item no modo edição de imagem.
Paint-Brush: Seleciona o item como pincel.
Remove: Remove o item da tile.


Paleta de cores:

• Clique na switch principal para abrir a janela Color Picker.
• Clique nas switches menores para trocar uma cor com a switch principal ou segure Ctrl para apenas copiar a cor para a switch principal.
• Arraste uma switch sobre as outras para copiar uma cor.
• Segure Crtl com ferramenta Eyedropper para definir a paleta de cores com as tonalidades da imagem ou marque a opção set switches da ferramenta Eyedropper.

Algumas teclas de atalho:

M - Ferramenta Move
B - Ferramenta Pencil
E - Ferramenta Eraser
I - Ferramenta Eyedropper
G - Ferramenta Bucket
Z - Ferramenta Zoom
W - Ferramenta Magic Wand
T - Ferramenta Tile
F2 - Zoom - Tamanho original
F3 - Zoom - Ajustar à tela
F4 - Zoom - Preencher tela
Ctrl+Scroll - Zoom
Ctrl++ - Mais Zoom
Crtl+- - Menos Zoom
Ctrl+F1 - Abre a aba Game
Ctrl+F2 - Abre a aba Items
Ctrl+F3 - Abre a aba Outfits
Ctrl+F4 - Abre a aba Magic Effects
Ctrl+F5 - Abre a aba Missiles
Ctrl+F6 - Abre a aba Layers
Ctrl+F7 - Abre a aba History
Ctrl+F8 - Abre a aba Project
Ctrl+F9 - Abre a aba Tile
Ctrl+F10 - Abre a aba Colorize
Ctrl+F11 - Abre a aba Goto Position
Ctrl+Z - Desfazer uma ação.
Ctrl+Y - Refazer uma ação.
Ctrl+V - Cola uma imagem da área de transferência me uma nova camada (Apenas no modo edição de sprite).
Ctrl+P - Exibe as divisões de textura em uma imagem (Apenas no modo edição de sprite).
Ctrl+D - Exibe linhas diagonais em 45° (Apenas no modo edição de sprite).
Ctrl+G - Exibe uma grade mostrando as separações entre tiles (Apenas no modo game).
Page Up - Vai para o piso de cima no mapa.
Page Down - Vai para o piso de baixo no mapa.

Criando um novo projeto:

1- Vá ao menu Project>New Project
2 - Na janela New Project, defina um nome para o projeto. Escolha o local onde o projeto deve ser salvo ou deixe o local selecionado por padrão.


Até mais.

edmignari@xtibia.com

Editado Janeiro 14, 2014 por Lucasmml

[Nu77 81]

Gostei da utilidade de visualizar as sprite in-game, bem interessante o programa... Vai ajudar bastante gente nova que não sabe spritear muito bem.

[vital900 570]

muito mas muito bom!!

[kttallan 318]

Vital acho que ta na area errada acho que deveria ser tutoriais aprovados ^^.

 

Parabens otimo tuto

[vital900 570]

Na verdade, existe uma regra que diz:

O Tutorial postado ficará no mínimo 3 dias e no máximo 7 dias na seção. Isso ocorrerá para se manter um padrão no número de tópicos na seção e para que os usuários comentem a aprovação ou reprovação do mesmo.

[LuckOake 400]

Poxa, brilhante ideia de programa.

 

Deve ter dado um trabalho bom pra fazer, adorei.

[SwordArtSprite 11]

Pergunta: quais versões que roda? tentei uma aqui e não foi...

[EdMignari 187]

Pergunta: quais versões que roda? tentei uma aqui e não foi...

 

8.60, 8.70, 9.50, 9.51, 9.52, 9.53, 9.54, 9.60, 9.61, 9.62, 9.63, 9.70, 9.80, 9.83, e 9.86

 

Qual versão vc tentou?

Se vc encontrar um bug ou se tem alguma sugestão, deixa lá no tópico do editor. Eu agradeço.

 

Abraço.

Editado Outubro 28, 2013 por EdMignari

[vital900 570]

Tutorial aprovado!

[Desnecessario 59]

Tem como importar sprites maiores doque 32x32 direto ?

[SwordArtSprite 11]

pode passar um SPR 8.6 ae? O meu bugou e n da pra dar compile. Quero testar In-Game como fica.

[EdMignari 187]

pode passar um SPR 8.6 ae? O meu bugou e n da pra dar compile. Quero testar In-Game como fica.

 

Baixa pelo site do RME:

 

http://remeresmapeditor.com/marklar.php?clients

 

Lembrando que eu postei um atualização pro programa. Agora abre a partir da versão 8.10.

 

http://www.xtibia.com/forum/topic/189324-sprite-editor/page-5#entry1577603

Tem como importar sprites maiores doque 32x32 direto ?

 

Tem. Quando vc for criar um grafico, pode importar uma imagem maior que 32x32, mas tem que ter as mesmas dimensões da imagem toda ou de cada textura.

 

exemplo:

 

Importando uma imagem inteira 128x96

 

 

Importando uma textura 64x64

 

[Desnecessario 59]

Mt bom mesmo man ! virei seu fã esse programa é FODA

[ArticFox 21]

Só não entendi muito bem aquela parte de Texture na criação de um item, tem como explicar ?

[EdMignari 187]

Só não entendi muito bem aquela parte de Texture na criação de um item, tem como explicar ?

 

ArtcFox, uma textura seria a combinação dos sprites(32x32) pra formar um gráfico. O programa usa sprite sheet com várias texturas pra formar um item animado, por exemplo.

 

Sprites(32x32) ---> Texture --->Sprite Sheet ---> Graphic

 

 

 

 

Pretendo fazer um tutorial sobre isso.

Editado Novembro 2, 2013 por EdMignari