×

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
  • /
  • [Tutoriel] Éditeur de joints
1 / 3 › »
[Tutoriel] Éditeur de joints
Unsteakhache
« Citoyen »
1402659960000
    • Unsteakhache#0000
    • Profil
    • Derniers messages
    • Tribu
#1
  3
  • Introduction
  • Traits et courbes
  • Modifications
  • Paramètres
  • Astuces
  • Import - Export
  • Exemple

Guide de l'éditeur de joints
Par Viprin

Salut à tous ! Comme beaucoup l’ont réclamé que ce soit en chuchotements ou sur le forum, j’ai fait un petit tutoriel pour essayer de vous expliquer le fonctionnement de l’éditeur de joints qu’a créé Viprin.
Pour commencer, veuillez-vous rendre sur le site de l’éditeur http://adamay000.github.io/vde/index.html

Quel est le but de cet outil ?

Cet éditeur va vous permettre de faire beaucoup de choses, vous pourrez placer des joints, faire des courbes, grossir vos courbes, placer un dessin en arrière-plan, changer l’opacité… Nous verrons tout ça dans ce tutoriel.

Les onglets

L'onglet "Traits et courbes" vous aidera à bien dessiner vos traits et vos courbes. Ces deux choses sont la base de l'éditeur de Viprin.

L'onglet "Modifications" vous expliquera comment modifier un joint déjà dessiné.

L'onglet "Paramètres" vous aidera dans la mise en place de vos paramètres sur l'éditeur de Viprin pour faciliter votre confort de création.

L'onglet "Astuces"comporte diverses astuces extrêmement utiles à cet éditeur.

L'onglet "Import/Export" vous expliquera comment bien exporter ou importer un code XML.



L'onglet "Exemple" comporte un exemple de code XML offert par Cpzeuz.


Traits

http://i.imgur.com/i6PtSWs.png

Placer un trait

http://i.imgur.com/6fpGww6.png

Pour placer un trait, rien de plus simple, il suffit de cliquer sur le bouton gauche de votre souris et de la déplacer, quand vous avez le trait que vous voulez vous relâchez le bouton.

Augmenter la taille du trait

http://i.imgur.com/oRM7kWZ.png

Rien de bien compliqué ! Vous avez le mot « Weight » ainsi qu’une flèche en dessous de ce mot, plus vous déplacez cette flèche vers la droite, plus votre trait sera gros.

Colorer son trait

http://i.imgur.com/6Koq8yp.png

De base, votre trait est blanc (ffffff), si vous voulez changer la couleur de votre trait, cliquez dans le petit rectangle à côté de « Color », un outil permettant de choisir une couleur apparaîtra. Si vous avez déjà un code de couleur, il vous suffit de sélectionner ffffff et de coller votre code à la place. Attention, ne collez jamais # devant, sinon le code de votre couleur sera invalide.

Transparence

http://i.imgur.com/07v3kvi.png

En dessous de « Color » se trouve « Alpha » avec lui aussi une flèche située en dessous de lui. Plus vous déplacez cette flèche vers la droite, plus votre trait deviendra transparent.

Mettre son trait en avant ou arrière plan

A côté de « Color » vous avez un petit rectangle avec écrit « Background », de base, Background est coché, vos traits sont donc en arrière-plan, mais si vous souhaitez qu’ils apparaissent devant tous les objets, vous devez cliquer sur Background.
Pour créer une courbe, vous devez cliquer sur « Use bezier curve ».
Le chiffre situé en dessous (par défaut : 20) est le nombre de traits que vous voulez utiliser pour faire votre courbe. Vous pouvez le modifier soit en déplaçant la flèche en bas, soit en changeant vous-même le nombre.

Courbes

http://i.imgur.com/s9Uaexk.png

Créer une courbe

http://i.imgur.com/sKS2xfI.png

Même principe que pour placer un trait. Lorsque votre trait est placé, vous aurez deux petites croix verte aux extrémités, il vous suffira de bouger ces croix pour créer la courbe de vos souhaits.

Customiser sa courbe (grosseur, transparence et couleur)

http://i.imgur.com/sKS2xfI.png

Et bien c’est tout simple, il suffit de suivre les mêmes étapes que les traits.




Modifications d'un trait


http://i.imgur.com/bFapnSF.png

Tout se passe dans le rectangle « Selected Element »
Il vous suffit de cliquer sur le/la trait/courbe que vous voulez modifier, puis changez les données que vous voulez. Couleur, grosseur, transparence, avant ou arrière-plan, vous pouvez tout changer !

http://i.imgur.com/7oZursQ.png

Vous pouvez également, dans le rectangle « Layer » cliquer sur un des trait dans la liste, ça le sélectionnera et vous pourrez le modifier.



Modifications des paramètres

Dans cet éditeur vous pouvez modifier les paramètres.


Retirer les croix pour déplacer les traits

Si ces croix vous gênes il est possible de les enlever temporairement, pour cela, placez votre souris sur « Setting » en haut, vous verrez alors plusieurs noms en anglais, pour enlever la croix que vous voulez il vous suffit de cliquer sur la phrase qui lui correspond. Attention, ça enlèvera toutes les croix, pas celle d’un seul trait.

« Show start cross » = La croix du début de votre trait
« Show middle cross » = La croix du milieu de votre trait
« Show end cross » = La croix de la fin de votre trait

Vous pouvez également enlever les croix situées à côté de vos courbes.

« Show bezier 1 » = La croix du début de votre courbe
« Show bezier 2 » = La croix de la fin de votre courbe

Activer le mode map XXL

Toujours dans « Settings », cochez « Set L"1600" » tout en bas, votre carte aura donc les paramètres pour être une map défilante.


Raccourcis clavier

La touche S : Sert à enlever la croix du début de votre trait.
La touche M : Sert à enlever la croix du milieu de votre trait.
La touche E : Sert à enlever la croix de la fin de votre trait.

La touche espace + Clic gauche souris : Sert à vous déplacer sur la carte.

La touche D : Supprime le dernier trait ajouté ou celui sélectionné.
La touche C : Copie le trait/la courbe sélectionné(e).
La touche V : Colle l’élément copié.
La touche Z : Reviens à l’action précédente.
La touche Y : Remet l’action précédente que vous avez supprimée.
Les flèches directionnelles : Permet de déplacer un trait/une courbe sans utiliser la souris.
La touche i + Clic gauche souris : Permet de déplacer une image.

Image

Vous n’êtes pas très bon en dessin et vous souhaitez vous aider d’un calque pour dessiner ce que vous souhaitez ? Et bien Viprin à tout prévu, pour cela placez votre souris sur « Settings » et cliquez sur « Background Properties »

Vous aurez alors cette fenêtre qui s’ouvrira :

http://i.imgur.com/aDzh9B6.png

Pour prendre une image directement depuis votre ordinateur, il vous suffit de cliquer sur « choisir un fichier » en dessous de «Choose an image file from your local ».
Pour prendre une image venant du net, collez son lien dans « Type url of an image from web »

http://i.imgur.com/8gM9N3r.png

Essayez de ne pas prendre des images trop grosse, 400 de large c’est très bien.
Si ça bug, relancez le site puis recommencez.

Agrandir ou rétrécir l'image

Pour cela, déplacez le curseur situé à côté d’ImgZoom.

Transparence de l'image modèle

Il vous suffit de déplacer le curseur situé à côté d’ImgAlpha.

Modifier le fond de l'éditeur

Tout simplement en changeant les données de « Background Color », soit en sélectionnant vous-même le code, soit en cliquant sur les chiffres et en choisissant la couleur que vous préférez.

Déplacer votre image

Il vous suffit de cliquer simultanément sur i et de cliquer sur votre dessin avec votre souris, puis de le déplacer.

Zoomer sur l'éditeur

Vous n’arrivez pas bien à voir vos traits et vous souhaitez zoomer, pas de problème, cela est possible. En haut de votre éditeur est écrit « Zoom » avec un curseur, déplacez ce curseur pour pouvoir zoomer. Si vous voulez déplacer votre carte il vous suffit de cliquer simultanément sur espace et d’appuyer sur la touche gauche de votre souris, puis déplacez.

Astuce de coloration

Bien colorier votre carte

Comment bien colorier votre map ? Rien de plus facile ! Pour cela nous allons utiliser la partie « Layer ». Les « Layer » servent à créer des parties pour vos joints, ce qui va vous faciliter la tâche pour colorier.

Analysons déjà ce qu’il se passe pour un layer :

http://i.imgur.com/27LFmAz.png

La petite croix dans un carré à gauche sert à cacher vos joints, à fermer la petite fenêtre en quelque sorte. Vous pouvez modifier le nom du layer, par exemple « contours ».
Le chiffre entre les crochets [ ] vous montre combien de joints ont été utilisé dans cette partie.
Et enfin le V tout à droite dans un carré sert à afficher les joints sur la map ou non.

Pour créer une nouvelle catégorie, cliquez sur « New Layer » en haut à droite. Là, des flèches haut et bas vont apparaître. Cela va servir si vous voulez placer cette partie avant, ou après certaines parties.
Par exemple, votre layer1 étant les contours, vous allez placer le layer2 en dessous du layer 1. Là, si vous colorez la carte, les contours passeront au-dessus de la couleur. Ce qui est très utile.

http://i.imgur.com/XPCstol.png

Art dynamique

Faire bouger les joints

Pour commencer, créer votre dessin/art avec les catégories que je vous ai présenté a la partie précédente.
Une fois que vous avez fini, faites un clik droit sur un layer. Vous aurez plusieurs petits boutons qui vont apparaître comme ceci :

Cliquez sur le bouton à menu déroulant "None" et choisissez sur quel sol vous voulez relier vos joints. Par exemple choisissez le sol 1. (Z:1 dans l'éditeur de carte). Vous pouvez mettre le sol plus tard en éditeur, ce n'est pas grave, tant qu'il a le bon Z.

http://i.imgur.com/xl4jncb.png

Une fois que cela est fait, cliquez sur "Link"

http://i.imgur.com/dSHKhe5.png

Comme vous pouvez le voir, les données ont changées et vous pouvez voir M1 et M2, l'opération à donc bien fonctionné !

http://i.imgur.com/PJ47o6K.png

Vous pouvez maintenant tester votre carte en éditeur =)

http://i.imgur.com/5dnVn6N.png

Ps : N'oubliez pas de rendre le sol à qui sont reliés vos joints en mode dynamique !!




Import et export d'un code XML

Importer un code XML

Cliquez sur « Save/Load » en haut de votre éditeur, puis cliquez sur « Load XML ». Collez votre code et faites load.

Exporter ma carte avec mon code XML

Vous souhaitez exporter votre code dans l’éditeur de Transformice, cliquez sur « Save/Load » puis dans « Generate XML », Copiez ce code et collez le dans l’éditeur de Transformice. N’oubliez pas de placer un sol et un spawn souris pour que vous puissiez voir votre dessin.
Vous pouvez également générer un code XML compressé en cliquant sur « Generate XML with compressing ».

http://i.imgur.com/ERZo1PH.png


Exemple

Cpzeuz a dit :
Voici le code XML de Natsu utilisé dans la carte @3811046.
Ce code doit être chargé sous l'éditeur de joint avant d'être chargé sur transformice. Le déssin a été entamé d'abord en faisant les contours.
Puis en coloriant les cheveux. Après, son visage a été colorié ainsi son écharpe.
Enfin, les ombres ont été mises.

Exemple

Dernière modification le 1459446300000
Unsteakhache
« Citoyen »
1402659960000
    • Unsteakhache#0000
    • Profil
    • Derniers messages
    • Tribu
#2
  0
#Réservé
Elyesou
« Citoyen »
1403051580000
    • Elyesou#0000
    • Profil
    • Derniers messages
    • Tribu
#3
  0
Super topic bravo Juju !
Walid
« Citoyen »
1403086680000
    • Walid#8154
    • Profil
    • Derniers messages
#4
  0
Je préfère le topic comme ça, gégé!
Elyolucas
« Consul »
1404210540000
    • Elyolucas#0000
    • Profil
    • Derniers messages
#5
  0
J'adore la présentation, c'est agréable à lire bravo ! :)
Elyesou
« Citoyen »
1404476220000
    • Elyesou#0000
    • Profil
    • Derniers messages
    • Tribu
#6
  0
Le problème avec la new version c'est qu'on peut plus voir la taille du code :'(
d'habitude on pouvait voir "0/20000"
ici http://i.imgur.com/S6LS3hb.png mais mtn y'a plus :/ du coup je peux plus faire de map :$
Cpzeuz
« Citoyen »
1404485460000
    • Cpzeuz#0000
    • Profil
    • Derniers messages
    • Tribu
#7
  0
Elyesou a dit :
Le problème avec la new version c'est qu'on peut plus voir la taille du code :'(
d'habitude on pouvait voir "0/20000"
ici http://i.imgur.com/S6LS3hb.png mais mtn y'a plus :/ du coup je peux plus faire de map :$

tu peux le voir sur la fenetre des calques ou "layer"
Walid
« Citoyen »
1404487140000
    • Walid#8154
    • Profil
    • Derniers messages
#8
  0
Vivement qu'ils augmentent la limite de KB...
Vvarriorw
« Citoyen »
1404488100000
    • Vvarriorw#0095
    • Profil
    • Derniers messages
    • Tribu
#9
  1
^ Déjà que l'éditeur a énormément de mal à supporter les 20 Ko de joints. Augmenter la limite serait impossible.

Dernière modification le 1404490800000
Elyesou
« Citoyen »
1404488760000
    • Elyesou#0000
    • Profil
    • Derniers messages
    • Tribu
#10
  1
Déjà 20KB ça fait buger tout un ordi lorsque tu mets une map ..
Walid
« Citoyen »
1404517140000
    • Walid#8154
    • Profil
    • Derniers messages
#11
  0
Vvarriorw a dit :
^ Déjà que l'éditeur a énormément de mal à supporter les 20 Ko de joints. Augmenter la limite serait impossible.

Oui mais bon, on est "limités", quand on compresse aucune modification n'est autorisée...
Arkuo
« Citoyen »
1405249740000
    • Arkuo#9521
    • Profil
    • Derniers messages
    • Tribu
#12
  0
vous savez comment dupliquer et inverser de sens une construction sur viprin >?
Yannicklin
1405251060000
    • Yannicklin#0000
    • Profil
    • Derniers messages
    • Tribu
#13
[Modéré par Nihoshi, raison : spam]
Devilyomita
« Censeur »
1406918040000
    • Devilyomita#0000
    • Profil
    • Derniers messages
#14
  0
Comment on colorie ? :(
Elyesou
« Citoyen »
1406939340000
    • Elyesou#0000
    • Profil
    • Derniers messages
    • Tribu
#15
  0
Bathchaboom a dit :
vous savez comment dupliquer et inverser de sens une construction sur viprin >?

Pour Dupliquer tu selectionne le joint ou le machin truc ché pas comment on appelle ça bref tu le selectionne Ctrl C /Ctrl V et voilà ! ( copier/ coller ) pour inverser je pense qu'on peut pas ..
Devilyomita a dit :
Comment on colorie ? :(

Tu fais un autre layer , tu le fais descendre tout en bas avec la petite flèche à côté ( en dessus du layer que tu veux colorier ) et tu commence voilà ( tout en utilisant le 2ème Layer) Je sais pas si t'a compris , mais déjà tout est expliqué dans ce topic même
Sanglots
« Citoyen »
1411895820000
    • Sanglots#0000
    • Profil
    • Derniers messages
#16
  0
Comment on fait pour influencer la collision souris avec ? (qu'on puisse marcher dessus quoi)
Walid
« Citoyen »
1411896240000
    • Walid#8154
    • Profil
    • Derniers messages
#17
  0
sanglots a dit :
Comment on fait pour influencer la collision souris avec ? (qu'on puisse marcher dessus quoi)

Il suffit de mettre des sols invisibles. ^^
Sourixl
« Citoyen »
1414764780000
    • Sourixl#0000
    • Profil
    • Derniers messages
    • Tribu
#18
  0
Une fois que j'ai mis mon image sur Choose an image file from ....

Commet faire pour enlever l'image
Hyster
« Citoyen »
1420137180000
    • Hyster#7887
    • Profil
    • Derniers messages
#19
  0
J'ai crée une map et j'aimerais dessiner dessus, comment je peux faire ?
C'est-à-dire peut-on utiliser Viprin par-dessus une map déjà faite ? (sorry si je m'exprime mal '-')
Elyolucas
« Consul »
1420138140000
    • Elyolucas#0000
    • Profil
    • Derniers messages
#20
  0
Ce topic mériterait d'être en Post-it. :o
  • Forums
  • /
  • Transformice
  • /
  • Éditeur de cartes
  • /
  • [Tutoriel] Éditeur de joints
1 / 3 › »
© Atelier801 2018

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

Version 1.27