×

Langue

Fermer
Atelier 801
  • Forums
  • Dev Tracker
  • Connexion
    • English Français
      Português do Brasil Español
      Türkçe Polski
      Magyar Română
      العربية Skandinavisk
      Nederlands Deutsch
      Bahasa Indonesia Русский
      中文 Filipino
      Lietuvių kalba 日本語
      Suomi עברית
      Italiano Česky
      Hrvatski Slovensky
      Български Latviešu
      Estonian
  • Langue
  • Forums
  • /
  • Transformice
  • /
  • Éditeur de cartes
  • /
  • [Tutorial] Viprin's Drawing Editor - Como desenhar no mapa
1 / 3 › »
[Tutorial] Viprin's Drawing Editor - Como desenhar no mapa
Viniciusdara
« Consul »
1511452920000
    • Viniciusdara#0000
    • Profil
    • Derniers messages
    • Tribu
#1
  26
  • VDE
  • Settings
  • Draw Tool
  • Layer
  • Selected Element
  • Save/Load
  • Colisão e Dinâmica
  • Dicas e Atalhos
https://imgur.com/9uTRiSY.png

Viprin a dit :
Você já se deparou com vários mapas no jogo que parecem terem sidos desenhos "a mão" como este @3283533 feito por Lolitavip, certo? Agora você irá aprender a usar o Viprin's Drawing Editor e a usá-lo no seu Editor de Mapas!


➜➜ Você é um Iniciante no Viprin? Então eu recomendo que você vá até o Comentário #2 deste tópico e Assista primeiro os Vídeos feitos pela Comunidade! Após isto sinta-se livre para poder aprender com mais calma os Painéis do Site neste Tutorial!

Neste tutorial você irá aprender que é simples desenhar em seus mapas, Siga as seguintes Abas deste tutorial para saber passo-a-passo, confira:


  • Settings - Configurações do site
  • Draw Tool - Configurações das linhas que você irá criar
  • Layer - Camadas das Linhas do seu desenho
  • Selected Element - Configurações das linhas do seu desenho
  • Save/Load - Salvar/Carregar (a XML do seu desenho)
  • Colisão e Dinâmica - Tutoriais de como deixar seu desenho colidível e com movimentos/dinâmico
  • Dicas e Atalhos - Dicas importantes para você poder desenhar melhor

  • Para facilitar: Os nome das Abas é o mesmo nome que você irá encontrar no site! Como mostrado na imagem abaixo.


    https://i.imgur.com/yqOyUpU.png


    Créditos: Viprin pelo tópico original na comunidade EN e pela criação do site
    Kenanskd pelo banner
    Apollopolo, Mcqv e Zombiewd pelo suporte na criação


https://imgur.com/9uTRiSY.png

Settings




https://i.imgur.com/TcUUQl3.png


Para visualizar este janela passe o seu mouse sobre o escrito "Settings" na esquerda superior do site.


Viprin a dit :
Na aba "Settings" voce irá configurar informações do site.


  • https://i.imgur.com/LEmClG1.png - Ao clicar neste botão irá abrir a janela de "Propriedades do Fundo"

    • https://i.imgur.com/885aDdM.png - Carregue aqui nesta caixa de texto um link de imagem para ser inserida no fundo do site

    • https://i.imgur.com/9do9nOx.png - Carregue aqui clicando neste botão uma imagem do seu computador que será inserida no fundo do site

      O resultado de adicionar uma imagem no site será esse:
      https://i.imgur.com/VHpkRzP.png


    • https://i.imgur.com/i9QSUYI.png - "ImgAlpha" controla a Opacidade/Transparência da imagem inserida, "ImgZoom" controla o tamanho da mesma

    • https://i.imgur.com/nxo9rOO.png- Clicando na caixa de texto com escrito "6A7495" você poderá mudar a cor do fundo do site (6A7495 é a cor recomendada por ser a cor padrão do jogo)


  • https://i.imgur.com/VtA3oCm.png - Seletores - Clicando nos seletores/pregos você poderá remover a visualização dos mesmos no site








    "start cross" - É o seletor que fica no começo da linha (Possibilita mover a parte esquerda da linha)
    "middle cross" - É o seletor que fica no meio da linha (Possibilita mover a linha inteira)
    "end cross" - É o seletor que fica no fim da linha (Possibilita mover a parte direita da linha)
    "bezier1" - É o seletor que fica no começo de uma linha curva (Possibilita mover ou modificar a curva do lado esquerdo da linha)
    "bezier2" - É o seletor que fica no fim de uma linha curva (Possibilita mover ou modificar a curva do lado direito da linha)

    Para aprender a criar linhas curvas vá a "Draw Tool"

    https://i.imgur.com/3Csdzh0.png


    https://i.imgur.com/A76Y4PQ.png



  • https://i.imgur.com/VqxTa3Z.png - L="1600" Adiciona largura ao seu mapa, H="800" Adiciona altura ao seu mapa (Ambos tanto no site e no jogo)



https://imgur.com/9uTRiSY.png

Draw Tool




https://i.imgur.com/r9zjIrI.png


Viprin a dit :
Na aba "Draw Tool" você irá visualizar e editar informações da linha que você irá criar.



https://i.imgur.com/BboAztD.gif

Para criar uma linha basta clicar e arrastar ou clicar na tela do site.



  • https://imgur.com/WGA9o0a.png - Determina a cor da linha que será criada, Clicando na caixa de texto você poderá modificá-la, Clicando em "Background" você irá deixar a Linha em primeiro plano


  • https://imgur.com/HusLahG.png - "Weight" determina a grossura da linha que será criada, "Alpha" define a Transparência da mesma.







  • https://i.imgur.com/OKCQdp5.png - Clique no botão https://i.imgur.com/EDVOCcL.png Caso queira criar linhas curvas no seu desenho, Não se esqueça de desmarcar quando não quiser mais.

    A "régua" determina a quantidade de linhas usadas na curva desta linha (Quanto mais linhas mais bem definido a curva porém mais pesado 'Kb' o mapa ficará) Recomenda-se deixar em 20.


https://imgur.com/9uTRiSY.png

Layer




https://i.imgur.com/Vr6og6K.png


Viprin a dit :
Na aba "Layer" você irá visualizar e editar informações das linhas e suas camadas.


  • https://i.imgur.com/Y8gqOFo.png - "Layer: x" é quantidade de Camadas que você tem em seu desenho, "Elms: x" é a quantidade de linhas que você tem em seu desenho, "-KB" é o tamanho da sua XML, lembre-se: Ao passar de 20KB o mapa não poderá mais ser carregado no Editor de Mapas*

  • https://i.imgur.com/VdZ3Rl7.png - Clique neste botão para criar uma nova Camada (As camadas são responsáveis por dar movimentos em partes diferentes do seu desenho, saiba mais em "Colisão e Dinâmica")


  • Como mostrado na imagem anteriormente ficará assim: 2 Camadas, 4 Linhas diferentes (2 linhas em cada camada)

    https://i.imgur.com/kJeoGgH.png


  • https://i.imgur.com/0Z092gf.png


    • https://i.imgur.com/Hv5RC8O.png - Clicando neste botão você irá esconder a lista de linhas dentro desta camada

    • "Layer2" - Você pode mudar o nome da Camada clicando 2x no nome (Como exemplo mudei o meu para "Ceu"**)

    • https://i.imgur.com/RkukRUA.png


    • "[2]" - é quantidade de linhas dentro da camada

    • https://i.imgur.com/TyV6F4u.png - Clicando nestas setas faz com que você mova o plano do desenho (Quando uma camada estiver em cima, o desenho estará em cima dos outros desenhos, Em baixo estará em baixo...)

    • https://i.imgur.com/yGvH1FT.gif


    • https://i.imgur.com/Y3QHuPT.png - Clicando nesta caixa você irá tirar a visualização das linhas dentro da mesma camada

  • https://i.imgur.com/OuvmZqN.gif









    Para visualizar esta janela clique com o botão esquerdo do seu mouse sobre a janela principal da camada

  • Rename - Clique neste botão para mudar o nome da sua camada

  • Delete - Clique neste botão para deletar a camada

  • None - Clicando neste botão você pode mudar o Z (piso que esta ligado ao desenho) da camada, Aprenda mais sobre em "Colisão e Dinâmica"

  • Link - Após escolher o Z novo do seu desenho clique neste botão para definir o novo Z.

  • Copy - Irá criar uma copia da camada e de todas linhas dentro dela

  • MergeDown - Irá unir a camada escolhida com a camada abaixo dela

  • FlipX - Irá inverter o desenho em um Flip no angulo X (Espelhar)

  • FlipY - Irá inverter o desenho em um Flip no angulo Y (Espelhar)

  • https://i.imgur.com/uiBCDP9.png - Para modificar a posição do desenho (camada) no mapa mude ele conforme no Plano Cartesiano, Depois disto clique em "Move" para Mover e finalizar a ação

    Ex: Mover o desenho para a esquerda da tela (←) Adicione um valor negativo em X (-1,-2,...) Conforme a imagem abaixo:

  • https://i.imgur.com/9REcwl4.gif

    É claro, o valor da imagem é apenas ilustrativo.


https://imgur.com/9uTRiSY.png

Selected Element




https://i.imgur.com/PQxtAhx.png


Viprin a dit :
Na aba "Selected Element" você irá visualizar e editar informações da linha selecionada.


  • Z - Determina o piso que será ligado no desenho (camada)

  • https://imgur.com/mjnmaWN.png - Cada um destas caixas de texto te informam coordenadas da linha selecionada (Posição no mapa, Posição dos Seletores)





  • https://imgur.com/WGA9o0a.png - Determina a cor da linha selecionada, Clicando na caixa de texto você poderá modificá-la, Clicando em "Background" você irá deixar a Linha em primeiro plano


  • https://imgur.com/HusLahG.png - "Weight" determina a grossura da linha, "Alpha" define a Transparência da mesma.







  • https://i.imgur.com/9mf8WjQ.png - Determina a quantidade de linhas usadas para criar a curva desta linha (Quanto mais linhas mais bem definido a curva porém mais pesado 'Kb' o mapa ficará)


https://imgur.com/9uTRiSY.png

Save/Load




https://i.imgur.com/H11diab.png


Para visualizar está janela passe o seu mouse sobre o escrito "Save/Load" na parte central superior do site.


Viprin a dit :
Na aba "Save/Load" você irá poder Carregar sua XML no site ou Gerar a XML do seu desenho criado.


  • Load XML - Carregue aqui a XML de um mapa (Caso queira terminar um desenho basta carrega-lo aqui)

  • Generate XML - Aqui irá carregar a XML do mapa qual você está criando, Basta Copiar a XML que foi gerada e colar no seu Editor de Mapas

  • Generate XML with compressing - Aqui você irá gerar a XML do seu mapa, porém neste botão você irá conseguir a Versão "Compactada" ou seja, Uma versão mais leve do seu desenho.

    Atenção: É recomendado só usar a XML compactada quando você tem certeza de que não irá fazer mais edições no desenho, Pois quando carregada novamente esta XML no site
    parte do seu desenho irá se perder

    Confira mais informações de como usar adequadamente esta função na aba "Dicas e Atalhos"


  • Generate XML with for cjobjects - Aqui você irá gerar uma XML pra postar no site Cjobjects (Site offline, Arquivo) Não é recomendado que gere esta XML para o Editor de Mapas.



Para visualizar o seu desenho no Editor de Mapas não se esqueça de colocar um piso no mapa assim você poderá o vê-lo.



https://imgur.com/9uTRiSY.png

Colisão e Dinâmica




Viprin a dit :
Na aba "Colisão e Dinâmica" você irá aprender a por Colisão no seu desenho e como Fazer com que seu desenho possar se movimentar (Dinâmica).



Colisão

Agora irei te ensinar a colocar colisão em seu desenho:

1° - Depois de criado o desenho e carregado no seu Editor de Mapas
2° - Preencha a área desenhada no qual você deseja que tenha colisão com o desenho com pisos conforme a imagem:


https://i.imgur.com/XLVyBuI.png




3° - Último Passo - Após isso use Alguma das Formas de Deixar o piso Invisível e deixe todos os pisos que você quer Invisíveis.


https://i.imgur.com/8Hycn2R.png




Pronto, agora a sua arte tem colisão! Mapa concluído: @520578

PS: Clique nas imagens para adquirir a XML do exemplo!


Dinâmica

Agora que você já é mestre em criar mapas aonde o seu desenho tem colisão irei te ensinar como colocar Movimentos no seu desenho (Dinâmica), Siga os passos:

1° - Diferente da Colisão a parte da Dinâmica você determina no próprio site Viprin, Primeiramente crie seu desenho no qual quer que tenha movimentos.

2° - Depois de feito vá até na Layer/Camada e clicando no botão esquerdo abra a Janela principal da camada (Como explicado na guia "Layer") Procure por "None" e escolha o número "Z" do piso no qual você irá ligar a arte.

Como mostrado na imagem eu escolhi o Z de número 3, Ou seja o piso com Z: 3 será ligado a nossa arte.

https://i.imgur.com/8ZVTv2f.gif


Clique no botão ao lado escrito "Link" para Ligar com sucesso o desenho ao piso.
Depois de feito isso irá aparecer um <3> nas informações da sua Camada:

https://i.imgur.com/qeZORVG.png

3° - Depois de terminado tudo pegue sua XML e vá para o Editor de Mapas, Para o seu desenho ter movimentos basta procurar o piso com Z: 3 e Ativar "Piso dinâmico":

https://i.imgur.com/sKjGLUH.png



Caso queira que seu desenho fique fixo (sem movimentos de ângulo) Mude o "Ângulo fixo" para 1.

https://i.imgur.com/L4hErRg.gif




Pronto, agora a sua arte tem movimentos! Mapa concluído: @3187468

PS: Clique nas imagens para adquirir a XML do exemplo!


Quadrados Transparentes
Extra por Dúvida Frequente

Uma pergunta muito frequente na sessão é de como deixar o piso transparente, acontece que o piso não é um piso, mas sim um desenho.
Neste tutorial simples vou ensinar como cria-lo:

1° - Desenhe uma linha reta, arrume suas medidas para ficar idêntica conforme na imagem abaixo.
2° - Mude a opacidade (Alpha) da linha para a transparência desejada

https://i.imgur.com/uEmF761.png



3° - Copie e cole (C e V) a linha e coloque lado ao lado sem espaços vazios e seu quadrado transparente estará pronto, Basta colocar um piso Invisível (como ensinado em Dinâmica) embaixo do desenho.

https://i.imgur.com/zdhT0tV.pngㅤㅤㅤㅤㅤㅤhttps://i.imgur.com/iEUONNX.png



Confira um mapa no qual foi usado este método: @600041

PS: Clique nas imagens para adquirir a XML do exemplo!


https://imgur.com/9uTRiSY.png

Dicas e Atalhos




Viprin a dit :
Na aba "Dicas e Atalhos" você irá aprender Tutoriais relacionados ao Viprin aonde te irá dar Dicas importantes há criar desenhos e também Atalhos do site.



Dicas

Limite de Tamanho da XML*

Como dito anteriormente o limite de tamanho de uma XML/Desenho é de 20Kb porém existe uma forma de burlar este limite, Saiba aqui como e por favor, Usem de boa forma este método!

Acentuação na XML**

Um erro comum para muitos é modificar o nome das camadas para um nome com acentuação como "Céu" "Mão", etc... , Por conta disto o mapa não irá ser capaz de ser validado no seu editor de Mapas, ou seja, Não valide mapas com acentuação! Nada de "~^´`"

Compactar XML

Como citado anteriormente na aba "Save/Load" é importante saber usar de boa forma a opção "Generate XML with compressing" na qual é usada para compactar a xml do mapa

Vamos lá: Para usar desta opção você deve ter certeza de que terminou o desenho totalmente, Mais mesmo assim é sempre recomendado: Salve a XML extensa "Generate XML" do desenho em algum lugar (Bloco de notas,Pastebin ou até mesmo em uma conversa privada aqui no fórum) Para ter certeza de que não irá perder o seu desenho que suou tanto para criar, Depois disso gere a versão compactada. (Não me diz depois que eu não avisei hã!?)

Visual

É muito comum ver erros como linhas erradas colocadas em Primeiro Plano, Para não cometer esse erro tenha certeza de que não está colocando algum linha em primeiro plano por engano cheque sempre se não está escrito "Foreground" como mostrado na aba "Selected Element" (Background/Foreground)

Jogabilidade

Caso o seu objetivo é criar um mapa para ir a rotação de Mapas Artes tenha em mente dessas duas coisas: Visual e Jogabilidade, a Jogabilidade é também de extrema importância na hora da criação do seu mapa, Busque não fazer mapas aonde a jogabilidade seja apenas WJ, Corridas e Pulos, Inove!

Atalhos do site

  • Clique na tela ou Clique + Arrastar do mouse - Cria uma linha na tela
  • Espaço + Arrastar do mouse - Move a tela do site
  • Z - Refaz a última ação feita
  • Y - Faz a última ação desfeita
  • C - Copia a linha selecionada
  • V - Cola a linha copiada
  • I + Arrastar do mouse - Move a imagem que foi inserida na tela do site
  • Esquerda, Para cima, Direita, Para baixo (Setas / ← ↓ ↑ → ) - Move a linha selecionada
  • S, M, V - Esconde/Mostra os Seletores
  • Delete - Deleta a linha selecionada



Dernière modification le 1565536680000
Viniciusdara
« Consul »
1511452980000
    • Viniciusdara#0000
    • Profil
    • Derniers messages
    • Tribu
#2
  11
  • VDE Youtube
  • Como desenhar
  • Colisão
  • Dinâmica
https://i.imgur.com/OrlHDJq.png

Viprin a dit :
Nesta mensagem você irá vizualizar Vídeos criados pela comunidade para ensinar as pessoas a Criarem mapas envolvendo Viprin's Drawing Editor e a usá-lo no seu Editor de Mapas!


ㅤ

Esta parte do tópico ainda está em desenvolvimento por isto a pouca quantidade de vídeos,
Caso tenha algum vídeo interessante relacionado a Viprin envie-o em uma mensagem privada para ajudar o projeto! :)



https://i.imgur.com/OrlHDJq.png

Como Desenhar




Viprin a dit :
Na aba "Como desenhar" voce irá encontrar vídeos da comunidade de como desenhar no site Viprin.










https://i.imgur.com/OrlHDJq.png

Colisão




Viprin a dit :
Na aba "Colisão" você irá encontrar vídeos da comunidade de como fazer seu desenho colidir no site Viprin.








https://i.imgur.com/OrlHDJq.png

Dinâmica




Viprin a dit :
Na aba "Dinâmica" você irá encontrar vídeos da comunidade de como fazer seu desenho Viprin se movimentar ou seja, Ter Dinâmica no seu Editor de Mapas.








Dernière modification le 1585345800000
Infectsoul
1511453040000
    • Infectsoul#2048
    • Profil
    • Derniers messages
    • Tribu
#3
[Modéré par Kiwrimai, raison : Removido a pedido do autor.]

Dernière modification le 1512269640000
Potato
« Censeur »
1511453340000
    • Potato#7224
    • Profil
    • Derniers messages
#4
  2
amodorei <3
antes desse tópico, tava pesquisando no youtube
Sunlight
« Consul »
1511453820000
    • Sunlight#0123
    • Profil
    • Derniers messages
    • Tribu
#5
  2
muito bom
Apollopolo
« Censeur »
1511454000000
    • Apollopolo#0000
    • Profil
    • Derniers messages
    • Tribu
#6
  2
Topper!
Tdft
« Censeur »
1511455020000
    • Tdft#0000
    • Profil
    • Derniers messages
    • Tribu
#7
  2
Ótimo tópico, Dara!
Vlump
« Consul »
1511456040000
    • Vlump#0095
    • Profil
    • Derniers messages
    • Tribu
#8
  2
Finalmente!!!!! Parabéns Vinícius ❤️

Dernière modification le 1511474580000
Iupi
« Censeur »
1511457360000
    • Iupi#0095
    • Profil
    • Derniers messages
    • Tribu
#9
  2
aaaaaaaaaa sempre quis um tutorial dessa ferramenta, obrigado <33 arrasou
Naiyme
« Sénateur »
1511460180000
    • Naiyme#0095
    • Profil
    • Derniers messages
#10
  2
EU TAVA PROCURANDO UM TUTORIAL DESSE FAZ SEMANAS AAAAAAAAAAAAAAAAA
Te amo, tá muito top
Oreidoafirst
« Consul »
1511465940000
    • Oreidoafirst#0000
    • Profil
    • Derniers messages
#11
  2
Ótimo tópico, amei <3 Agr aprendi a fazer dinâmica.
Unknown
« Censeur »
1511473080000
    • Unknown#3300
    • Profil
    • Derniers messages
    • Tribu
#13
  2
Olha ela, que pro
Reppam
« Censeur »
1511473380000
    • Reppam#0000
    • Profil
    • Derniers messages
    • Tribu
#14
  2
@Brenoouuw, leia e aprenda ai mermao
Otimo topico darinha
Sufp
« Consul »
1511475360000
    • Sufp#0095
    • Profil
    • Derniers messages
    • Tribu
#15
  2
Parabéns pelo tutorial, ficou ótimo!
Kurt
« Consul »
1511495100000
    • Kurt#0010
    • Profil
    • Derniers messages
    • Tribu
#16
  2
UMA BELEZURA
irá ajudar muita gente que precisa ❤❤❤
parabéns!
Brasouka
« Citoyen »
1511522520000
    • Brasouka#0000
    • Profil
    • Derniers messages
#17
  2
Parabéns, cara. Adorei o tutorial, sensacional! Precisava de um tutorial assim, hoje sei como funciona, mas creio que ajudará muitos ainda! :D
Baby
« Consul »
1511911020000
    • Baby#8871
    • Profil
    • Derniers messages
    • Tribu
#18
  1
Ótimo tutorial!!!! Sempre procurei e nada ajudou tanto como esse.
Viniciusdara
« Consul »
1512337200000
    • Viniciusdara#0000
    • Profil
    • Derniers messages
    • Tribu
#19
  0
Muito obrigado pelo apoio pessoal!
No segundo comentário do tópico foi adicionado um "mini-tópico" aonde disponibilizei vídeos úteis sobre o site. Espero que gostem!
Tdft
« Censeur »
1515018840000
    • Tdft#0000
    • Profil
    • Derniers messages
    • Tribu
#20
  1
vou reviver essa preciosidade
  • Forums
  • /
  • Transformice
  • /
  • Éditeur de cartes
  • /
  • [Tutorial] Viprin's Drawing Editor - Como desenhar no mapa
1 / 3 › »
© Atelier801 2018

Equipe Conditions Générales d'Utilisation Politique de Confidentialité Contact

Version 1.27