Share
La mise à jour 4.3 d'Unity était une grande porte ouverte pour les développeurs de jeux 2D, avec de nombreux nouveaux outils et façons d'aborder le développement de jeux 2D dans ce moteur déjà puissant. Dans ce tutoriel, je vais vous montrer comment créer un personnage dans Inkscape pouvant être utilisé dans le nouvel éditeur incroyable de Unity 4.3..
Quelques conseils sur la création de personnages de jeu avant de commencer:
Ouvrez Inkscape et sélectionnez Fichier> Nouveau . Dans la liste des options disponibles, sélectionnez la taille la plus susceptible d'être la résolution de votre jeu.. 640 x 480, 800 x 600, ou 1024 x 768 sont des résolutions de jeu communes pour le PC - pour ce projet, je choisirai 800 x 600.
Créez un nouveau calque en sélectionnant Calque> Ajouter un calque (Maj-Contrôle-N) et nommez-le "Esquisse". Réglez-le sur Sous la couche actuelle.
Rassemblez vos concepts. Dans ce cas, je viens d'utiliser un simple croquis que j'ai créé dans Carnet de croquis pro. J'ai tendance à créer au moins deux vues d'action du personnage pour que je puisse avoir une bonne idée de la façon dont je veux l'animer et des éléments dont j'ai besoin pour la décomposer..
Vous pouvez simplement copier et coller votre concept depuis un autre programme ou faire glisser le fichier dans Inkscape..
Si vous faites glisser le fichier, sélectionnez intégrer, ne pas lien. De toute façon, vous rejetterez l'esquisse plus tard, car ce n'est pas nécessaire pour l'ensemble du processus..
Les croquis conceptuels aident à solidifier votre idée afin que vous ne travailliez pas à l'aveuglette. Redimensionnez votre dessin à la taille que vous souhaitez utiliser avec les poignées de dimensionnement..
Cliquez sur l'esquisse et fermer à clé les proportions de l'image en cliquant sur le Icône de verrouillage.
Verrouiller les proportions empêche la distorsion. Comme les palettes Inkscape Preset ne sont généralement pas très jolies pour les jeux, j’ai tendance à créer les miennes à l’avance..
Vous pouvez éditer votre palette Inkscape en allant dans votre dossier Inkscape sous le Partager> Palettes sous-dossier.
Le fichier peut être à un emplacement différent en fonction de votre système d'exploitation. Clic-droit "Inkscape.gpl" et sélectionnez Ouvrir avec votre éditeur de texte préféré. Je viens d'utiliser Wordpad.
Vous pouvez maintenant ajouter votre propre RVB et Hex valeurs à la liste et elles apparaîtront dans l’ordre dans lequel vous les mettez. Si vous ne connaissez pas bien les codes hexadécimal et RVB, vous trouverez de nombreux graphiques facilement accessibles sur Internet ou dans le sélecteur de couleur de presque tous les programmes de traitement d'images..
Vous pouvez en trouver un ici:
Voici les gammes que j'ai utilisées pour les différentes parties du corps de la pieuvre pour ceux d'entre vous qui aiment collectionner les palettes:
Corps principal
Accentsconagua
# 6E0454 # A4005C # BC1878 # DC4470 # EB636D # F39383 # FAC9AC Les yeux
# 392131 Coquille d'escargot
# 343059 # 43467E # 3E5796 # 5A69C0 # 6796E8 # 7EAFEE # 7EC7D9 Corps d'escargot
# 84473C # A5674F # CE894E # F3B46B # F9CE64 # F9E57A # FBFB9E Vous pouvez copier et coller ces codes dans votre fichier .gpl et les enregistrer. Ils seront là la prochaine fois que vous exécuterez Inkscape..
Je vous recommande de conserver une copie de votre fichier .gpl d'origine en cas de problème..
Ajoutez les codes tels qu'ils sont affichés dans le fichier. Vous pouvez les placer dans l’ordre dans lequel vous souhaitez qu’ils apparaissent.. Dessinez le corps principal en premier. J'utilise simplement une forme de cercle simple pour le corps de la pieuvre. Je donne le coup à 3.5px dans l'éditeur d'objets (Maj-Contrôle-F) mais vous pouvez faire ce que vous voulez.
Dessinez les jambes comme des pièces séparées sur un nouveau calque en utilisant le Outil courbe de Bézier (Maj-F6).
Rappelez-vous, pour obtenir une courbe réelle, vous devez maintenir le bouton de la souris enfoncé après avoir cliqué pour positionner le deuxième nœud / point et le faire glisser.. Plutôt que d’ajuster manuellement le trait et la couleur de la jambe, nous pouvons cliquer sur un objet similaire (comme le cercle) et le copier. (Control-C) et allez à Édition> Coller le style ou (Ctrl + Maj + V) pour correspondre au style de l'objet copié.
C'est un bon moyen de vous assurer que tous vos objets sont remplis et que vos traits sont uniformes.. Vous voudrez peut-être aussi dessiner les jambes dans différentes positions, afin qu'elles puissent être réutilisées pour créer plus d'animations..
Sinon, vous pouvez dessiner tout le corps avec les jambes dans différentes positions si vous ne voulez pas que les jambes bougent toutes seules..
Rappelez-vous que vous pouvez joindre des morceaux en sélectionnant les deux objets et en les combinant via Chemin> Union ou Control-Shift-+ ou juste Contrôle-+ avec le pavé numérique.
Pour obtenir une courbe plus lisse, j'ajoute souvent des points supplémentaires, puis les supprime après avoir obtenu la forme souhaitée..
J'éteins le Corps couche en utilisant le icône d'oeil à côté du nom de la couche que je veux désactiver.
Entrer dans Modifier le chemin par nœuds mode (F2) et cliquez sur le noeud que vous voulez supprimer, puis appuyez sur le bouton Supprimer la clé.
Vous pouvez ajuster à l'aide des poignées des autres nœuds en cas de problème ou en modifiant le type de nœud dans la barre d'outils.. Puisque je veux que les jambes à l'extrême gauche et à droite soient presque identiques, je vais copier celle de gauche et l'éditer légèrement.
Ramener le Corps couche en déplaçant vers la couche dans la liste déroulante et en cliquant sur le icône d'oeil encore une fois, afin que vous puissiez positionner la jambe correctement. Sélectionnez la jambe (qui vous ramènera automatiquement au calque jambe) et copiez-la (Control-C) puis le coller (Contrôle-V).
Retournez l'image en utilisant le Retourner horizontalement bouton ou en appuyant sur la H clé.
Cela rendra également la pieuvre plus facile à animer.
Déplacez la jambe dans la position souhaitée. Je l'ai aussi légèrement écrasé horizontalement pour la perspective, en utilisant les poignées de dimensionnement.
Si vous rencontrez des problèmes avec la capture d'image lorsque vous la redimensionnez, reportez-vous à la section Voir> Snap. Je vais faire les pattes avant en plusieurs morceaux pour ajouter plus de profondeur. Faire un nouveau calque (Maj-Contrôle-N) ajouter les jambes qui seront devant le corps.
Ajouter un ovale avec le Outil ovale et copier et coller le style des jambes sur l'ovale.
Nous serons en mesure d’ajouter un mouvement de cran au tentacule avant si nous voulons. Maintenant, ajoutez un deuxième ovale et faites-le pivoter. Vous pouvez faire pivoter des objets en cliquant deux fois dessus, puis en utilisant les poignées..
Maintenant, cette partie du tentacule peut se déplacer séparément! Maintenant, vous pouvez simplement copier la jambe et la retourner pour remplir l’autre jambe.
Ne vous inquiétez pas trop de la position du tentacule pour le moment, elle sera ajustée dans Unity. Ajoutons de l'ombrage et des reflets à la pieuvre avant de passer au visage. Je le fais en créant des ovales puis en utilisant un autre ovale pour "soustraire" les parties que je ne veux pas.
Placez la surbrillance à l'endroit souhaité. Maintenant, copiez et collez le cercle et ajustez-le à l'endroit où vous souhaitez le découper. Faites-en une couleur différente pour qu'il soit plus facile à voir. Je préfère en faire la même couleur que le corps principal.
Je trouve cette méthode idéale pour les ballons et autres objets ronds et brillants. À présent Shift-Select les deux cercles, en veillant à sélectionner le cercle en surbrillance en dernier et à aller à Chemin> Différence.
Un joli point culminant! Sélectionner tous les objets et Groupe leur (Contrôle-G) pour vous assurer qu'ils ne sont pas déplacés de l'endroit où vous les voulez.
Remarque: vous pouvez toujours copier et coller le style d'un objet à l'aide du chemin de sélection / modification direct par noeud, même lorsqu'ils sont regroupés..
Dessinez également quelques points forts sur les jambes, en utilisant le Outil Bézier (Maj-F6). Assurez-vous que vous dessinez sur la couche avec le tentacule approprié et regroupez-les avec leur pièce correspondante lorsque vous avez terminé. Essayez d'utiliser la même couleur de la surbrillance précédente.
Vous pouvez ajouter moins ou plus de rehauts, à votre goût. J'ai dessiné les yeux à l'aide du Outil Cercle (F5). Je fais la même chose ici que j'ai fait avec les tentacules pour m'assurer qu'ils étaient les mêmes; copier et coller l'oeil gauche et ajuster à nouveau pour la position et la perspective.
Il a maintenant un simple ensemble de miroirs. Dessine une bouche simple avec le Outil de courbe de Bézier, et ajustez les paramètres dans le menu Contour et Remplissage (Maj-Contrôle-F).
Vous pouvez jouer avec ces paramètres pour les obtenir comme vous le souhaitez.. J'ai décidé d'ajouter quelques points saillants pour lui donner un peu plus de profondeur. Si vous constatez ultérieurement, lors de l'ajout de nouveaux éléments, que ceux-ci apparaissent au-dessus des objets précédents lorsque vous les regroupez, sélectionnez et coupez l'objet qui se trouve derrière. (Control-X), cliquez sur l'objet que vous souhaitez coller sur le même calque, puis sélectionnez Édition> Coller en place ou (Contrôle-Alt-V).
Garder vos groupes propres vous aidera à organiser votre feuille de sprite plus tard. J'ai également ajouté un second point fort, en utilisant à nouveau Courbes de Bézier et le Outil de cercle, seulement cette fois-ci j'utilise le # F39383 Couleur.
Bien que quelques programmes prometteurs permettent d'ajouter facilement un éclairage dynamique à l'art 2D (tel que Sprite Lamp), ils sont encore très rudimentaires et principalement destinés au pixel art. Nous devrons les ajouter nous-mêmes pour l'instant.!
Pour un point d'intérêt, j'ajoute également un escargot au sommet de la tête du poulpe. Je vais faire le corps d'abord avec le Outil de courbe de Bézier (Maj-F6). Je vais créer l'escargot sur un nouveau calque, mais je n'ai pas besoin d'en créer un également pour le coquillage tant qu'ils sont correctement groupés. Vous pouvez les faire sur des calques séparés si vous préférez.
Comme auparavant, je vais supprimer tous les nœuds inutiles et lisser le corps avec le Modifier le chemin par nœud (F2) mode. Vous pouvez également sélectionner plusieurs nœuds et les déplacer dans ce mode..
Ajoutez maintenant des nuances plus claires pour faire ressortir le volume de l’escargot. Encore une fois je vais utiliser le Courbe de Bézier outil (Maj-F6).
Si vous constatez que lorsque vous créez une courbe, vous l’avez rendue trop raide et vous ne pouvez pas la connecter sans que cela se produise:
Vous pouvez clic-droit pour sortir de la courbe, puis le reconnecter manuellement.
Pour faire la base de la coquille, tracez un cercle avec le Outil Cercle (F5). j'ai utilisé # 5A69C0 comme le trait et # 7EC7D9F comme le remplissage.
Utilisez le Courbe de Bézier outil (Maj-F6) pour créer la "lèvre" inférieure de la coque.
Utilisez le Outil en spirale ajouter la forme appropriée à la coque (F9) et mettre le se tourne à 1,50.
Maintenant, tournez et positionnez la spirale pour qu'elle ressemble à une vraie coquille. Je mets également le cap pour la spirale à Casquette ronde pour éviter un bord dur.
Pour la mise en évidence de la coquille d'escargot, nous allons à nouveau utiliser la courbe de Bézier. Je vais juste utiliser du blanc pour la couleur, mais je vais définir la forme à 50% Opacité pour qu'il se mélange. Vous pouvez ajuster l'opacité dans le Menu Remplissage et Contour (Maj-Contrôle-F).
Continuez avec le reste des faits saillants. Vous pouvez copier et coller le style de la première surbrillance sur les autres surbrillances. L'opacité sera également copiée et collée, ce qui facilitera grandement la tâche..
Il est à noter que j'ai séparé la coquille et le corps d'escargot. Je vais les sauvegarder séparément au cas où je voudrais les animer plus tard.
Tout d'abord, supprimons l'esquisse pour l'éliminer. Cliquez sur le "croquis" et appuyez sur le bouton Supprimer la clé. Assurez-vous de déverrouiller le calque avant de tenter de le supprimer, sinon vous ne pourrez pas le faire. Vous pouvez également supprimer le calque actuel de la Menu de calque. Assurez-vous simplement que le calque que vous souhaitez supprimer est actif au moment où vous le supprimez..
Assurez-vous de sauvegarder votre fichier avant de passer à la partie suivante (même s’il convient de noter que vous devriez quand même sauvegarder fréquemment, juste au cas où). Pour ce faire, allez à Fichier> Enregistrer sous (Shift-Control-S).
Vous devez maintenant séparer les morceaux de la pieuvre de manière à ce qu'ils soient suffisamment éloignés pour que l'outil de tranchage dans Unity reconnaisse qu'il s'agit de pièces séparées. Il existe certains paramètres que vous pouvez modifier dans Unity pour vous aider, mais une feuille de sprite organisée est toujours préférable..
Ce sera un bon test de vos compétences de groupement. Si vous avez regroupé toutes les bonnes pièces, cela devrait être relativement facile. Vous pouvez en apprendre plus sur le regroupement dans Inkscape grâce à un didacticiel utile créé ici sur Tuts+. Cliquez-glissez chaque pièce pour les organiser comme vous les aimez.
J'aligne également les bords des objets à l'extérieur de la feuille. Bien que les ordinateurs soient si rapides maintenant que vous ne le remarquiez peut-être pas trop, il est toujours préférable de gagner de la place et de réduire la taille de la feuille. Ouvrez votre Aligner menu (Maj-Contrôle-A) et assurez-vous Relatif à est réglé sur le Dernier sélectionné plutôt que la page, car les objets seront ce qui est exporté et non la page.
Cela signifie que le premier objet et tous les objets sélectionnés suivants seront alignés en fonction de la position du dernier objet placé..
L'alignement ne doit pas nécessairement être parfait. Ici, vous essayez simplement de réduire autant que possible l'espace blanc, et l'alignement est un moyen facile de le faire. L'essentiel est de s'assurer qu'un objet ne va pas développer la feuille plus que nécessaire.
Emballez la feuille aussi étroitement que possible. Il existe des programmes pour le faire mais beaucoup trouvent plus rapide de le regarder dans Inkscape.
Toutefois, si vous préférez en utiliser une (ou avez déjà exporté chaque image séparément pour l’utiliser dans d’autres moteurs de jeu), vous pouvez télécharger Texture Packer ici:
Il est disponible gratuitement pour Mac, Windows et Linux.!
Enregistrez la feuille en tant que fichier séparé afin que vous disposiez de la composition originale (vous pouvez également les conserver dans le même fichier si vous le souhaitez)..
Vous remarquerez que les yeux semblent inutilement éloignés l'un de l'autre pour l'emballage de la texture. C'est parce que j'ai choisi de les traiter comme un seul objet plutôt que de laisser chaque œil fonctionner indépendamment. Vous pouvez le faire, puis les séparer en un seul yeux séparés.
Sélectionnez tous les objets à la fois en cliquant et en glissant sur toute la zone comme si vous essayiez de les contenir tous dans une boîte (voir l'image ci-dessous).
Maintenant, pour exporter votre feuille! Sélectionner Fichier> Exporter (Shift-Control-E). Vous pouvez exporter la feuille sous une taille adaptée à vos besoins, mais je viens de la conserver presque identique à celle utilisée au début d'Inkscape..
Vous pouvez éditer le nom de fichier dans la zone Nom de fichier pour qu'il soit reconnaissable. Sinon, il sera nommé par Inkscape comme dernier chemin ou groupe sélectionné (par exemple. g720.png).
Vous remarquerez peut-être le Objets d'exportation par lots option. En fait, vous pouvez simplement tout exporter dans son propre fichier de cette manière, mais gardez à l'esprit que la forme sous Inkscape sera sa taille exportée. Vous devrez donc peut-être l'ajuster manuellement..
Note: Il y a actuellement un bogue dans Inkscape. Si vous nommez le fichier lorsque tous les objets sont sélectionnés et que vous tentez d'exporter par lots, il n'exportera que le dernier objet car ils portent désormais tous le même nom..
Si vous regardez maintenant le fichier exporté, vous devriez voir la feuille avec transparence.
Pour cette partie du didacticiel, je vais supposer que vous savez ouvrir Unity et démarrer un projet. Si vous n'êtes pas familier avec Unity, de nombreux documents sont destinés aux débutants sur le site Web de Unity. Je vais simplement expliquer le processus d'obtention d'une feuille de sprite dans Unity et sa découpe pour une utilisation dans un jeu..
Ouvrez votre projet et assurez-vous que votre éditeur est en mode 2D (pour simplifier les choses) en allant à Édition> Paramètres du projet> Editeur et en sélectionnant 2D comme le Mode de comportement par défaut.
Faites glisser la feuille de sprite de votre Explorateur de fichiers Dans votre Les atouts dossier.
Sélectionnez la feuille de sprite et ouvrez l'inspecteur via Fenêtre> Inspecteur (Control-3).
Changer la Mode Sprite à Plusieurs. Cela vous permettra d'ouvrir l'éditeur de sprite.
Vraie couleur est un bon choix pour le Format comme il est préférable d’obtenir des images propres et nettes, en particulier lorsqu’il s’agit d’images-objets pixel art. Vos autres paramètres peuvent dépendre du projet individuel.
Ouvrez le Éditeur de sprite.
Vous pouvez également y accéder depuis l'inspecteur Cliquez sur Tranche. Normalement je choisirais juste Automatique et le laisser tel quel, mais je ne peux pas le faire dans ce cas car cela diviserait les yeux en deux parties, comme suit:
Pour résoudre ce problème, cliquez sur l'un des cadres de sélection et sur Effacer il. Maintenant étirez l’autre cadre englobant pour inclure les deux yeux et cliquez Appliquer.
Si vous perdez une boîte ou devez en créer une nouvelle car elle ne les a pas tranchées correctement, cliquer-glisser dans un espace vide.
Cliquez sur Revenir pour annuler les modifications que vous n'avez pas appliquées. Vous remarquerez peut-être aussi que la case en bas à droite contient un emplacement pour nommer chaque pièce. C’est très important pour l’organisation, car si vous faites glisser l’un des sprites sur l’écran, ils seront automatiquement nommés quel que soit le motif. prénom la case indique. Un autre paramètre que vous pouvez ajuster ici est Pivot qui indique le point d'ancrage principal du sprite. Lorsque vous faites pivoter le sprite dans l'animateur, il tourne autour de ce point..
Ajustez tous les pivots où vous voulez par cliquer et faire glisser le cercle au milieu de chaque sprite, ou en les tapant manuellement dans le champ Champ de pivot.
Cliquez sur Appliquer lorsque vous avez terminé. Maintenant, vous pouvez voir tous vos sprites comme des objets individuels dans le Projet> Dossier actifs.
Maintenant, nous pouvons faire glisser les morceaux sur la scène pour créer Objets de jeu. Cependant, commençons par créer un vide Objet de jeu (Control-Shift-N) et l'appeler "pieuvre".
Clique sur le Objet de jeu dans le Hiérarchie et aller au Inspecteur le renommer.
Maintenant, vous pouvez faire glisser les autres parties du corps sur la pieuvre Objet de jeu dans le Hiérarchie et arrangez-les comme vous le souhaitez, mais assurez-vous qu'ils sont centrés sur le vide Objet de jeu.
Il y a un léger problème… Donc, comme vous l'avez peut-être remarqué, les tentacules de pieuvre ne sont pas tout à fait dans l'ordre où nous les voulons. Nous pouvons résoudre ce problème avec Tri des couches dans le Inspecteur. Normalement, je pourrais créer un nouveau calque de tri pour Octopus mais pour le moment je le laisserai par défaut et ajusterai les chiffres.
Plus le nombre est élevé, plus l'objet est proche de la caméra. Sauvegardons maintenant une scène de test et le projet (Fichier> Enregistrer la scène). Unity peut se bloquer lorsque vous commencez à vous lancer dans des actions plus approfondies. Je vous recommande donc de sauvegarder souvent.
Puisque je ne fais pas un projet de jeu réel, je vais juste nommer ce "testscene" pour l'instant. Ce personnage n'a pas encore d'animation, il n'est donc pas "prêt à jouer". L'animateur dans Unity est extraordinairement puissant, mais la courbe d'apprentissage est un peu longue.!
Il est bon que les artistes sachent à quoi leur art ressemblera dans le moteur et comment ils peuvent être animés pour rendre les graphiques plus adaptés au développement de jeux. Il convient de noter que même une fois que vous êtes arrivé à ce point, vous pouvez facilement mettre à jour votre feuille et la replacer dans le dossier des ressources (Unity définit par dé
