Tópico original do Viprin Topic-162564

Com a atualização do Editor de Mapas, temos novas configurações e uma delas é que podemos ''colorir'' usando joints, como pode ver nesse tutorial: Topic-154261

A pouco tempo o usuário Viprin criou esse ferramente que facilita e muito a criar mapas artes.
http://vipstats.s372.xrea.com/draw/

Nesse tópico vou mostrar como ele funciona.



-Settings

Modifica o modo de seleção das linhas.

Selectors:
Start:Mostra o começo com uma cruz amarela, que com ela podemos esticar a linha mantendo fixo o final.
Middle:Mostra o meio com uma cruz branca, que com ela podemos mover e selecionar uma linha.
End:Mostra o final com uma cruz amarela, que com ela podemos esticar a linha mantendo fixo o comelo.
Target:Mostra a linha seleciona com uma bola branca, com ela podemos indentificar e mover-las.
Bezier1: Mostra o Bezier no começo da curva.
Bezier2:Motra o Bezier no final da curva.
Background properties:
Funciona como o tfm.Overlay

-Zoom
Da Zoom no trabalho feito.

-Selected Elements
Ferramentas de posição

Z: Determina em que posição estará o piso visualvelmente, exmplo: Z=1 o piso está atraz dos outros, Z=10 o piso está bna frente dos outros.
P1: Determina em que pixel o começo da linha selecionada estará X=horizontal Y= vertical.
P2: Determina em que pixel o término da linha selecionada estará X=horizontal Y=vertical.
C1: Marca em que pixel o começo da curva está.
C2: Marca em que pixel o fim da curva está.
Color: Muda a cor da linha
ForeGround:Indica se a linha estará em primeiro plano ou não.
Weight:Define a espessura do pincel.
Alpha:Define a opacidade e tranparência do pincel.
Fineness: Define a finura da curva da linha selecionada.

-Draw Tool

Ferramentas que modificam o ''pincel'' usado.

O quado principal, indica como o seu pincel está no momento.

Color: Muda a cor do pincel, clique 2 vezes que aparece uma caixa de cor em HEX e RGB.
ForeGround: Indica se a linha estará em primeiro plano ou não.
Weight:Define a espessura do pincel.
Alpha:Define a opacidade e tranparência do pincel.
Use Bezier curve: Tranforma a linha em curva. (Ainda tem alguns bugs)
Fineness: Define a finura da curva. (Vai de 2 a 30)

-Save/Load

Contém as ferramentas de salvar e carregar XML.

Load:Carrega um XML ja utilizado.
Generate XML:Dá o XMl final da obra.
Genertae min XML:Dá um XML reduzido do final da obra.

-Help

Help: Contém os atalhos e as funções de cada ferramenta.
Change Log:Mostra as atualizações do programa.
Visit thread on TFM forum: vai para o tópico oficial do Viprin no forum do jogo.

-Layer
Funcionam como camadas, se você ja usou um programa para edição de imagens como o Photoshop ja está familiarizado com esse sistema.
Layer = Camada.

New layer: Adiciona uma nova camada.
+: Abre a camada mostrando cada linha contida nela.
-: Fecha a camada ocultando as linhas
Seta para cima: Coloca a camada acima da anterior. Exemplo: Se a camada está em cima ela está na frente , se ela esta em baixo ela está atraz das outras camadas.
Seta para baixo: Coloca a camada abaixo da anterior. Exemplo: Se a camada está em cima ela está na frente , se ela esta em baixo ela está atraz das outras camadas.
Sinal de positivo: Define se a camada está visível ou não.

Raname: Renomear o nome da camada
Delete: Delete a camada
None: Faz com que o piso que se ligará a todas as joints da camada seja o que tem Z=0. Você pode modificar esse valor conforme sua preferência.
Link: Se você modificou o valor de Z=0 (None), clique nesse botão para que a mudança surta efeito.
Copy: Duplica a camada.
MargeDown: Une a camada de cima com a de baixo. Impossível usar esta função na primeira camada.
FlipX: Inverte todos os elementos da camada na horizontal.
FlipY: Inverte todos os elementos da camada na vertical.
X: Faz com que todos os elementos da camada se movamNpx na horizontal. Sendo N= O número de pixels que as joints irão se mover. Se N for negativo se moverá para a esquerda, se for positivo se moverá para adireita.
Y: Faz com que todos os elementos da camada se movam Npx na vertical. Sendo N= O número de pixels que as joints irão se mover. Se N for negativo se moverá para a baixo, se for positivo se moverá para cima.

Usando o Drawing Editor

Postarei algumas dicas de como usá-lo

Tutorial simples:
Primeiro desmarque todas as caixas do -Selecter para melhor visualização.Para começar o seu desenho sugiro que utilize um pincel com pouca opacidade, fazendo um rascunho com alguns rabiscos só para demarcar, depois use um pincel normalpara fazer o contorno (o contorno pode estar com ForeGround marcado, mas ficará estranho no jogo). Para apagar os riscos marque a caixa Middle e vá clicando e apertando a tecla D (delete). Depois pinte com um pincel mais grosso colorido.
Enfim clique em -Generate XML e selecione, copie e cole no seu Editor de Mapas, lembrando que para poder ver a arte você tem que adicinar algum piso e que a arte não colidirá com os ratos, para colidir você deve construir pisos por trás.
Adicione uma boa jogabilidade e seu mapa estará pronto.

Imagens:

Rascunho


Contorno


Preenchimento


Jeito avançado:
Na primeira layer, faça o contorno do desenho. Em seguida, clique em New Layer e depois clique na setinha para baixo,para que essa camada fique atráz da(s) outra(s), dai vc pinta normalmente.

Como é que "pinta normalmente"?

Escolha as propriedades da linha como espeçura, cor etc.. e vai clicando e arrastando dentro do contorno, eufaço assim em tudo depois pego uma cor mais escura e faço uma sombra.

Versões e atualizações

10/12/12 - Version 0.7.0: Pré lançado.
11/12/12 - Version 0.8.0: Adicionado LineTool e a função carregamento.
12/12/12 - Version 0.8.1: Arrumado o problema com a Opacidade.
15/12/12 - Version 0.8.2: Mudou algumas coisas.
16/12/12 - Version 0.9.0: Layers adicionadas.
16/12/12 - Version 0.9.1: Arrumado o Generate XML.
17/12/12 - Version 1.0.1: Arrumado o problema com seleção de cores.
18/12/12 - Version 1.1.0: Zoom adicionado.
18/12/12 - Version 1.1.1: Arrumado um erro.
19/12/12 - Version 1.2.0: Adicionado CurveTool e arrumaldo problemas com as janelas.
19/12/12 - Version 1.2.1: A capacidade é mostrado na parte superior esquerda, quando se gera XML.
19/12/12 - Version 1.2.2: Arrumado ''Espaço+Arrastar''
20/12/12 - Version 1.2.3: Corrigido problemas relacionados a curva. Alterou o limite de finura de 30 a 120. Adicionado "Gerar min XML".
21/12/12 - Version 1.2.4: Arrumado problema relacionado a Layes.
22/12/12 - Version 1.2.5: Adicionado ferramentas copiar e colar e o modo Scroll.
27/12/12 - Version 1.2.6: Arrumado um erro.
05/01/13 - Versão 1.3.0: Adicionado "propriedades de fundo".
Adicionado Desfazer (tecla Z) e Refazer (tecla Y).
Mudou o layout.
Mudou um monte de coisas pequenas.
Problema keypress arrumado.
05/01/13 - Versão 1.3.1: Corrigido não pode carregar uma imagem do local.
06/01/13 - Versão 1.3.2: Adicionado imzZoom.
06/01/13 - Versão 1.3.3: Função de carregamento melhorada
30/01/13 - Versão 1.3.4: Está agora possível alterar "Z" o valor dos elementos da caixa de entrada.
02/02/13 - Versão 1.3.5: Adicionado uma propriedade que pode mostrar a imagem na frente.
Corrigido problemas do KeyPress.
08/02/13 - Versão 1.3.6: Corrigido alguns bugs.
09/02/13 - Versão 1.4.0: Adicionada funções de camadas relacionadas. Copiar/Merge/Flip/Move já estão disponíveis.
Corrigido um bug.
09/02/13 - Versão 1.4.1: "Camada flip" fixos não funciona corretamente para curva.
11/02/13 - Version 1.4.2: Melhora no
compressing XML.
11/02/13 - Version 1.4.3: Adicionado '"Generate XML for cjobjects".

a dit :

Tutorial em construção, ainda arrumarei algumas coisas e colocarei imagens.

DICAS

Background properties
Uma dica para essa ferramenta é que se use o imgur para hospedar a imagem e colocar o link lá, ao invéz de baixar direto do computador. Com isso ocorre-se menos erros.

Mais ferramentas
O Viprin desenvolvel também junto com esse progrma, outros, um deles é o Move qie ajuda na separação do XML facilitando seu entendimento. O link para o aplicativo é:
http://vipstats.s372.xrea.com/draw/move/


VÍDEO + TUTURIAL

• Utilizando o Viprin's Drawing Editor - 1.4.1 - by: Esitter:

retirado



• Manuseando o Viprin's Drawing Editor:
retirado

MacroEditor

VÍDEO COMPLETO EM INGLÊS
• Transformice MapEditor Tutorial S2E12: How to make art? (Viprin's Drawing Editor):
http://www.youtube.com/watch?v=uVsxE0Ljq3Q

Impuredeath

Bom tuto! Além de eu não levar jeito...

muito legal
^^

Olha esse site é maravilhoso por que a pecisão no pixel e no pincel é preciso ao máximo, o que dá pra fazer inúmeras coisas com ele... O que eu espero é que de pra selecionar todo o desenho pra mover/arrastar na tela e que ele coloque a função de Zoom, por que melhor que a precisão do pincel seja não tem como visualizar direito, até pra deletar fica impossível de clicar. Tirando isso boa sorte com as idéias a todos! =)

@Edit:
Se alguem souber de algum meio pra mover o desenho geral, agradeço desde já!

Bom tópico!!

Um exemplo de mapa feito com o site, que mostra ser diferente e bem legal, mas no Cheseformice não aparece a imagem, @3283533  

ótimo :D

é com essa ferramenta q o queijospraeu, fez o mapa dela?

Playbiw a dit :

é com essa ferramenta q o queijospraeu, fez o mapa dela?

Dela??

Mas sim, foi com isso '-'

DEL = Ctrl Z

Tuliomumic a dit :

DEL = Ctrl Z

Não é exatamente o Ctrl Z, pq se você tirou um piso e quer colocar ele de novo não dá com delete, só da pra excluir.

Obrigado pessoal.

Flashwj a dit :

Figoi, você poderia colocar imagem para um melhor compreendimente ^^!
~Gostei no que você colocou~

Vou por, o tópico ainda não está pronto.

@EDIT Imagens adicionadas

Ficou bem melhor de entender agora, Bom tópico

Thx :)

Fui tentar fazer, não deu certo :S

Faz o contorno com Foreground e pinta sem foreground.

Figoi a dit :

Faz o contorno com Foreground e pinta sme foreground.

Ah tendi, com letra sou melhor.



Artiih

Hey EU GOSTEI

dps vou baixar pra da uma sacada nesse programa