Tutoriels vidéo YouTube

Pixel art rétro animé pour l'écran de démarrage du jeu

26 070

babeoded

Introduction

Bonjour! Je m'appelle Hira Karmachela. À cette occasion, je partagerai mon expérience pour créer du pixel art rétro animé pour l'écran de démarrage du jeu à l'aide de Clip Studio Paint.

J'espère que cet article sera des conseils intéressants pour ceux d'entre vous qui cherchent à créer du pixel art et un design rétro à l'aide de CSP.

À propos du design rétro

Le rétro est un style de design qui a tendance dans les années 70 à 90. Le rétro est différent du style vintage connu depuis longtemps. Le style rétro a une impression contemporaine et même futuriste sur son époque. La caractéristique unique du rétro se retrouve dans la sélection de couleurs plus pétillantes, également appelées couleurs fluo. Les styles de design rétro se sont développés à l'époque avec l'essor de la discothèque, de la fête et du style de vie sportif.

À la même époque, les jeux vidéo ont été développés avec des graphismes à basse résolution, désormais connus sous le nom de pixel art. C'est intéressant pour moi de faire des astuces pour faire du pixel art dans un style rétro.

Configuration de la toile pour Pixel Art

Commençons! Ouvrez Clip Studio Paint, puis créez une nouvelle toile. Le travail final que nous allons créer sera de 1280px sur 720px mais pour créer du pixel art, nous n'avons besoin de créer que 10% de cette taille. Les dimensions de la toile dont nous avons besoin sont donc de 128 pixels sur 72 pixels.

Ensuite, nous devons définir la grille pour faciliter le dessin des pixels. Accédez à Affichage > Grille.

Maintenant, nous pouvons le voir sur la toile. Mais nous devons encore ajuster la taille de la grille. Accédez à Affichage > Paramètres de grille/règle. Définissez l'origine au centre et définissez l'écart (D) et le nombre de divisions sur 1.

Jeu de couleurs rétro

Avant de commencer à compiler les pixels. Tout d'abord, nous devons créer une palette de couleurs qui correspond au style rétro. Créez un nouveau calque pour en faire une palette, nommez le calque "palette rétro".

Ensuite, double-cliquez sur la couleur de premier plan dans la boîte à outils pour ouvrir les paramètres de couleur. La première couleur que nous allons créer est "Hot Pink". Dans le champ HEX, entrez le code "ff69b4". Badigeonnez ensuite la toile.

Vous trouverez ci-dessous les couleurs de la palette rétro dont nous avons besoin.

Pour le reste, nous avons encore besoin de noir et blanc que nous pouvons prendre dans le panneau de palette standard.

Configuration des outils pour Pixel Art

D'ACCORD! Il existe plusieurs outils que nous pouvons utiliser pour créer du pixel art avec des paramètres spéciaux. Le premier outil, nous pouvons utiliser "l'outil Figure" tel que les lignes, les courbes et les outils de forme pour créer des objets pixel précis.

Pour utiliser l'outil Figure pour créer du pixel art, nous devons désactiver la fonction Anti-Aliasing. L'anti-crénelage est une fonction qui rend les bords des objets d'image numériques lisses en ajoutant et en manipulant la couleur des échantillons de pixels qui les entourent.

Avec l'anticrénelage, bien sûr, le pixel art n'aura pas l'air bien. Nous devons donc désactiver cette fonctionnalité dans le panneau de propriétés de l'outil à gauche. Dans la section Anti-Aliasing il y a plusieurs niveaux, sélectionnez "Aucun".

Deuxième outil, nous pouvons utiliser "Pen Tool" avec un sous-outil de type Marker et Dot Pen. Ce type de stylo produira un dessin au trait d'une épaisseur de 1px afin que nous puissions facilement créer des objets pixel organiques.

Troisième outil, nous pouvons utiliser "Fill Tool" pour remplir facilement les champs de pixels. Sélectionnez le type Consulter d'autres couches afin que nous puissions remplir les champs qui se chevauchent même s'il s'agit de couches différentes. Ensuite, dans la propriété de l'outil, décochez la case Mise à l'échelle de la zone. Cette fonctionnalité est presque similaire à l'Anti-Aliasing qui produit du bruit sur les objets pixel.

Quatrième outil, bien sûr, nous avons besoin de "l'outil Gomme" pour effacer les pixels inutiles sur le travail. Sélectionnez le type Vecteur pour effacer les pixels sans laisser de trace.

D'ACCORD! Le reste, nous pouvons utiliser d'autres outils au besoin.

Fond rétro

Maintenant, faisons un festin de pixels. Nous commençons par créer le fond de l'écran de démarrage que nous allons créer, bien sûr dans un style rétro.

Je divise la toile avec une ligne épaisse de 1px comme horizon divisant le ciel et le sol.

Utilisez ensuite "l'outil Pipette" pour prendre la couleur de la palette de calques que nous avons créée précédemment. J'ai rempli le ciel de couleur Ametyhst et le sol de Carmine.

Créez maintenant un nouveau calque, nous allons créer l'objet coucher de soleil qui est typique du célèbre design rétro. Utilisez l'outil de forme d'ellipse et faites un cercle tout en maintenant la touche "Shift" du clavier enfoncée pour que la forme soit proportionnelle.

Utilisez l'outil gomme pour faire des rayures sur le coucher du soleil. Vous pouvez imiter le motif comme je l'ai fait.

Maintenant, créez à nouveau un nouveau calque, nous allons décorer l'arrière-plan avec l'image de la silhouette des montagnes. Utilisez l'outil ligne avec du noir pour dessiner les montagnes à droite et à gauche de l'image du coucher de soleil.

Remplissez les montagnes de noir puis changez l'opacité du calque à 50%.

Créez un nouveau calque, nous ajouterons l'image de la silhouette des bâtiments devant le coucher du soleil. Cette fois, j'utilise un stylo à points.

Décorez l'image du bâtiment avec quelques pixels colorés comme lumières.

Passons maintenant à la zone du sol, créons un nouveau calque pour créer un maillage sur le sol. Encore une fois, j'utilise l'outil de ligne avec la couleur bleu turquoise pour créer un dessin précis.

Tracez la ligne en diagonale reposant sur un seul point pour la perspective.

Copiez ce calque, puis allez dans Édition> Transformer> Retourner horizontalement. Positionnez le maillage de manière à ce qu'il soit symétrique sur la toile. Sélectionnez ensuite le calque de maillage et la copie, allez dans Calque> Fusionner les calques sélectionnés.

Faites maintenant des lignes horizontales à travers les lignes diagonales qui ont été créées pour créer une image de maillage.

Environnement de rue rétro

Ensuite, nous créons des objets pour l'environnement. On va créer une ambiance street rétro. C'est simple, je vais faire des marquages routiers et une ligne de palmiers sur les accotements gauche et droit de la route.

Créez un dossier de couches pour collecter les couches de l'objet d'environnement. Créez un nouveau calque pour créer un chemin.

Remplissez maintenant l'intersection de la forme qui forme le chemin, dans l'image avec Electric Yellow. Changez l'opacité du calque à 50%.

Créez un nouveau calque pour créer des marquages routiers. Faites des marquages routiers blancs à l'aide de l'outil ligne.

Ensuite, créez un autre nouveau calque pour créer un palmier. Utilisez l'outil stylo à points pour le faire. Faites-le symétrique à droite et à gauche.

Objet de voiture rétro

D'ACCORD! Il est maintenant temps de créer le modèle principal. Créez un nouveau calque pour l'objet voiture rétro. Utilisez un stylo à points pour le dessiner.

Créez un nouveau calque au-dessus du calque de voiture, utilisez du noir pour faire une ombre sur la surface du modèle de voiture. Changez l'opacité du calque à 50%. Fusionnez ensuite le calque avec le calque de la voiture.

En complément, faites une ombre sous la voiture sur un nouveau calque. Changez l'opacité du calque à 50%.

Processus d'animation

Il est maintenant temps de donner vie à la scène. Il y a deux parties que nous allons animer, à savoir l'environnement de la rue et les lumières dans les bâtiments.

Pour cela, préparez le panneau de chronologie. Allez dans Fenêtre > cochez Chronologie. Vous trouverez le panneau de chronologie apparaissant au bas de l'écran.

Dans le panneau Montage, cliquez sur Nouveau montage. Ensuite, un nouveau paramètre de chronologie apparaîtra, remplissez le nom de la chronologie. Définissez la fréquence d'images et la durée de lecture sur 24. Scène et prise de vue au numéro 1 et ligne de division au numéro 6. Ensuite, modifiez l'interpolation de l'image sur Bords durs.

Pour créer une animation, nous avons besoin d'un dossier d'animation contenant des calques spéciaux qui seront liés au cel d'animation.

Pour cela, cliquez sur Nouveau dossier d'animation. Ensuite, le dossier d'animation apparaîtra en haut dans le panneau Calques. Renommez le dossier en "Animation". Actuellement, le dossier d'animation est vide. Nous devons traiter les modèles qui ont été créés pour compiler et devenir des cel animés.

Sélectionnez tous les calques de modèle, de la voiture rétro au calque d'arrière-plan. Vous pouvez exclure la palette des calques et l'enregistrer en bas. Ensuite, allez dans Calque> Créer un dossier et insérez un calque. Ensuite, toutes les couches sélectionnées seront rassemblées dans un dossier. Renommez le dossier en "Compilation".

Copiez le dossier Compilation et renommez le dossier de copie en "cel_01". Ensuite, allez dans Calque> Convertir le calque (H), de sorte que le dossier cel_01 se transforme en un calque d'unité. Faites glisser le calque cel_01 dans le dossier Animation.

Dans le panneau de la chronologie, assurez-vous de sélectionner l'image numéro 1 marquée en rouge pour chaque image sélectionnée, puis cliquez sur Spécifier les cellulos. On nous demandera de sélectionner le calque qui sera lié au cel. Sélectionnez cel_01.

Pour faire le cellulo suivant, faites de même. Copiez le dossier Compilation puis renommez la copie en "cel_02". Avant d'être converti en une couche d'unité. Nous devons transformer certains des modèles de ce dossier pour créer l'illusion de mouvement.

Sélectionnez maintenant le calque de marquage routier dans le dossier cel_02. Nous allons éditer l'image pour qu'elle donne l'impression que les marqueurs de route avancent vers le bas de la toile. Il suffit de supprimer ou d'ajouter des pixels dans certaines parties.

Au fur et à mesure que les marquages routiers se déplacent, les palmiers doivent également se déplacer vers le bas de la toile. D'un point de vue logique, l'objet qui s'approche de la vue paraîtra plus gros. Ainsi, au fur et à mesure qu'il se déplaçait, le palmier a dû être agrandi.

Sélectionnez le calque palmier, puis allez dans Edition > Transformer > Transformation libre. Dans la propriété de l'outil à gauche, modifiez le paramètre Méthode d'interpolation sur Bords durs afin que la mise à l'échelle ne provoque pas de bruit de pixel.

Maintenant, sélectionnez le calque de construction, modifiez la décoration des lumières pour donner l'impression que les lumières scintillent.

Ensuite, sélectionnez le dossier cel_02. Allez dans Calque> Convertir le calque (H). Faites glisser le calque cel_02 dans le dossier Animation. Sélectionnez l'image numéro 3 dans la chronologie, puis cliquez sur Spécifier les cellulos. Sélectionnez cel_02. Dans cette animation, je vais régler le cel toutes les 2 images pour le temps de lecture de 24.

Sélectionnez l'image numéro 3 dans la chronologie, puis cliquez sur Spécifier les cellulos. Sélectionnez cel_02.

Dans cette animation, je vais régler le cel toutes les 2 images pour le temps de lecture de 24.

Pour les cellules suivantes, veuillez faire la même chose en modifiant la transformation continue afin qu'elle produise l'illusion de mouvement.

Rendu et publication

D'ACCORD! J'ai fini de composer et de remplir toutes les 2 images avec le cellulo animé pour un total de 24 images.

Avant de rendre et de publier cette animation. Permettez-moi de vous rappeler que cette animation a des dimensions de 128px par 72px. Donc, si nous le rendons tout de suite, le résultat que nous pouvons voir sera de cette taille.

Pour cela, nous devons d'abord le redimensionner. Allez dans Édition > Modifier la résolution de l'image. La fenêtre de réglage de la résolution apparaîtra.

Changez la largeur en 1280px et la hauteur en 720px. Changez ensuite la méthode d'interpolation en Hard Edges. Ensuite, l'image sera agrandie sans détruire l'arrangement des pixels.

Maintenant, nous rendons cette animation. Si vous avez besoin d'un résultat animé pouvant être visualisé avec la fonction de boucle, nous devons l'exporter au format GIF animé. Allez dans Fichier > Exporter l'animation > GIF animé. Spécifiez un répertoire de stockage.

La fenêtre de rendu apparaîtra, changez la largeur en 1280px et la hauteur en 720px.

Cependant, dans certains projets de jeux. Habituellement, le développeur demande que l'écran de démarrage soit présenté dans des séquences d'images. En effet, l'animation sera créée à l'aide d'un script de programmation. Pour cela, nous pouvons aller dans Fichier> Exporter l'animation> sélectionner Séquence d'images.

La fenêtre des paramètres de rendu apparaîtra. Spécifiez un répertoire de stockage. Sélectionnez le format PNG et la liste de contrôle Exporter les cadres.