Share
Ce que vous allez créerDans ce tutoriel, nous concevrons un écran de jeu pour un jeu de type «match trois». Nous allons transformer des formes géométriques de base pour créer de jolies icônes d'animaux et appliquer divers types de dégradés pour rendre les objets plus vivants et tridimensionnels. Nous finirons par créer un arrière-plan pour configurer un modèle d'écran de jeu..
Les jeux «Match trois» sont très populaires, en particulier pour les appareils mobiles. Le gameplay est assez simple, mais crée une dépendance: placez trois objets identiques à la suite pour marquer de plus en plus de points. Dans ce tutoriel, nous allons concevoir un panneau de jeu dynamique avec des animaux carrés fantaisistes. De plus, cette leçon vous aidera à vous inspirer et à concevoir tout autre type d’écran de match 3, par exemple un jeu avec des pierres précieuses ou des fruits plats. N'hésitez pas à parcourir Envato Market pour plus d’idées sur la conception d’écrans de jeux plats, et commençons!
Commencez par créer un Nouveau fichier de 600 x 800 px. Si vous n'aimez pas travailler sur un fond blanc, utilisez le Outil Rectangle (M) pour créer une forme recouvrant la toile et la remplir de jaune. Fermer à clé dans le Couches panneau en cliquant sur un petit icône de cadenas en haut. Nous garderons cette forme dans le bas et nous pourrons le recolorer plus tard.
Commençons à former la tête de notre premier animal: un ours mignon. Prendre le Outil Rectangle Arrondi (M) et faire un 200 x 200 px forme lilas. Rappelez-vous que vous pouvez ajuster le Rayon de coin de votre forme à partir de la barre d’outils de contrôle en haut. Gardons-le à 25%.
Prendre le Outil de remplissage (G), tenir Décalage et placez le Remplir curseur vertical sur la forme, appliquant une couleur bicolore Linéaire remplissage en dégradé.
Nous pouvons ajuster la couleur du remplissage en cliquant sur les pointes du curseur et en sélectionnant la couleur appropriée dans Couleur panneau. Choisissons une couleur lilas claire pour la pointe supérieure et une couleur plus foncée pour le bas de la forme, ajoutant ainsi de la dimension.
Commençons à former l'oeil. Prendre le Outil Ellipse (M), tenir Décalage et faire un cercle pair de 50 x 50 px. Basculer vers le Outil de remplissage (G) et changer le Type de remplissage à Radial dans le panneau de commande en haut. Appliquez une couleur blanche au centre de la forme et une couleur grise sur le bord, rendant l'œil sphérique.
Maintenant façonnons l'iris. Copie et Coller (Commande-C> Commande-V) le globe oculaire, tenez Commande-Shift et réduisez la copie en la réduisant à environ 35 x 35 px avec l'aide du Outil de déplacement (V). Remplissez-le de remplissage radial de couleur turquoise au centre et de turquoise foncé au bord.
Dupliquer (Commande-C> Commande-V) l'iris et réduisez la copie en formant un élève. Remplissez-le de couleur unie turquoise foncé. Faites un petit point culminant blanc sur le dessus des yeux, en utilisant le Outil Ellipse (M).
Maintenant que l'oeil est prêt, Groupe (Command-G) tous ses éléments, tenez Option-Shift et faites glisser vers la droite, faisant une copie. Groupe les deux yeux, sélectionnez-les avec la forme de la tête et utilisez le Aligner panneau sur le dessus pour Aligner les formes Horizontal au Centre.
Continuer à utiliser le Outil Ellipse (M) faire un nez écrasé de 50 x 15 px Taille. Appliquez un remplissage linéaire vertical allant du rose clair en haut au rose foncé en bas. Créez une ellipse rose foncé plus petite et changez de Mode de fusion à Écran dans le Couches panneau, formant ainsi un point culminant semi-transparent.
Ensuite, nous allons former une bouche. Utilisez le Outil stylo (P) et maintenir Décalage faire une ligne carrée. Met le Remplir couleur à aucun dans le Couleur panneau et appliquer une couleur sombre-lilas à la Accident vasculaire cérébral. Dirigez-vous vers le Accident vasculaire cérébral panneau et définir le Largeur à 2 pt, laissant toutes les autres options par défaut.
Prendre le Outil de coin (C) et rendre les coins de la forme complètement arrondis en tirant les noeuds de coin vers le haut.
Dupliquer la forme et utiliser le Retourner horizontalement fonction de la barre d'outils de contrôle en haut pour refléter la forme.
Maintenant, nous allons ajouter les oreilles. Utilisez le Outil Ellipse (M) faire un 70 x 70 px cercle. Faisons-le bien se fondre avec la tête en choisissant la couleur appropriée. Trouvez le Pipette à couleurs outil dans le Couleur panneau, tenir et faire glisser sur la tête de l'ours. Vous verrez une loupe qui vous aidera à localiser la couleur dont vous avez besoin. Choisissez la couleur lilas clair à côté de l'oreille et relâchez le bouton de la souris. Maintenant, vous pouvez sélectionner l’oreille et appliquer la couleur de la nuance à côté de la Pipette à couleurs. Là nous l'avons!
Voyons maintenant comment copier le style de remplissage complexe à partir d'autres objets. Dupliquer (Commande-C> Commande-V) l'oreille et faire la copie plus petite. Copier (Commande-C) la tête, sélectionnez la partie supérieure de l’oreille et allez à Édition> Coller le style. Editez la position du remplissage en utilisant le Outil de remplissage (G). Ajouter une deuxième oreille sur le côté opposé de la tête.
Comme vous pouvez le constater, nous pouvons copier non seulement les objets eux-mêmes, mais également leur apparence..
Terminons avec l'ours en ajoutant un élément supplémentaire: un ventre stylisé. Utilisez le Outil Ellipse (M) pour faire un ovale et le remplir avec une couleur sombre-lilas, en changeant la Mode de fusion à Écran dans le Couches panneau.
Nous pouvons placer l'ellipse créée à l'intérieur la forme de la tête, masquant ainsi les morceaux inutiles. Sélectionnez l'ovale créé dans le Couches panneau et faites-le glisser sur la forme de la tête jusqu'à ce que vous voyiez une étroite bande bleue, comme indiqué dans l'image ci-dessous. Déposez l'ellipse en la plaçant dans le calque principal.
Et nous avons fini! Passons à la prochaine icône animal.
Utilisons l'icône ours que nous avons déjà créée pour créer un nouvel élément. Dupliquer et changeons les couleurs du remplissage linéaire en blanc en haut et gris en bas. Recolorez ensuite les oreilles du lilas au gris très foncé. Changez également le remplissage linéaire du nez en gris foncé et ajustez la couleur de la bouche Accident vasculaire cérébral, passer au rose.
Enfin, réglez la couleur des yeux en modifiant le remplissage radial en marron clair au centre et en marron foncé sur les bords, en appliquant la couleur brun foncé à la pupille..
Nous ajouterons ensuite des points noirs autour des yeux pour que notre personnage ressemble davantage à un vrai panda. Utilisez le Outil Ellipse (L) faire un 75 x 95 px forme, le remplissant avec remplissage linéaire de teintes gris foncé.
Faire pivoter la forme 45 degrés et placez-le sous l'œil en faisant glisser la forme dans le Couches panneau.
Remarquez la différence entre placer une forme à l'intérieur l'autre et en plaçant une forme sous L'autre. Cette fois, vous verrez un marqueur bleu plus long, comme dans l'image ci-dessous.
Dupliquer (Commande-C> Commande-V) l'endroit et Retournez-le horizontalement de l'autre côté, en utilisant le Se transforme fonction dans la barre d’outils de contrôle en haut. Déplace la copie de la tache pour la faire correspondre au deuxième œil.
Et là nous avons notre panda! Allons-nous en.
Let's dupliquer le personnage de panda et le transformer en un raton laveur mignon! Tout d’abord, changez la couleur de la forme de la tête en un remplissage linéaire vertical allant du bleu clair en haut au bleu plus foncé en bas.
Continuez en changeant les couleurs des yeux en rouge rosé et remplaçons la bouche. Utilisez le Outil stylo (P) créer une forme de bouche coudée en gris foncé Accident vasculaire cérébral.
Modifions maintenant les oreilles. Sélectionnez le plus grand cercle de la forme de l'oreille et Convertir en courbes, en utilisant le bouton dans la barre d’outils de contrôle en haut. Prendre le Outil de nœud (A) et sélectionnez le noeud supérieur de la forme. Convertir en Sharp à partir du panneau de commande sur le dessus, en faisant l'oreille pointue. Faites la même chose pour la partie interne de l'oreille: Convertir en courbes et Convertir le noeud supérieur à Sharp.
Changer la couleur de l'oreille, la faire correspondre à la tête et faire pivoter l'oreille 45 degrés. Dupliquer l'oreille et Retourner horizontalement, placer la copie du côté opposé.
Sélectionnez la tache autour de l'œil avec le Outil de remplissage (G) et ajustez les couleurs du remplissage en les changeant en des teintes de bleu plus claires et plus foncées. Copier (Commande-C) l'endroit, sélectionnez le deuxième endroit et Édition> Coller le style, appliquer une nouvelle apparence.
Terminez avec le personnage en ajoutant une ellipse gris clair sous la zone du nez. Et c'est tout pour le raton laveur! Passons à notre dernière icône!
Reproduisons notre toute première icône, l'ours violet, et utilisons-la pour créer un perroquet amusant. Changez la couleur de la tête en remplissage linéaire du vert clair en haut au vert plus foncé en bas. Supprimez la forme du ventre elliptique et la bouche de l'ours car nous n'en aurons plus besoin.
Changer la couleur des yeux en brun orangé.
Tournons le nez de l'ours dans le bec d'un perroquet! Faire pivoter 90 degrés et Convertir en courbes. Sélectionnez le noeud inférieur avec le Outil de nœud (A) et Convertir en Sharp depuis la barre d'outils de contrôle en haut.
Changez les couleurs du remplissage linéaire en jaune en haut et en orange en bas.
Prendre le Outil Ellipse (M) et faire une forme étroite de 15 x 40 px. Remplissez-le de couleur vert clair et changez le Mode de fusion à Multiplier, faire une plume noire semi-transparente.
Tenir Option-Shift et faites glisser la plume vers la droite pour en faire une copie. presse Command-J quelques fois pour faire deux autres copies.
Ajoutons un dernier détail à notre perroquet. Utilisez le Outil Ellipse (M) faire un 40 x 70 px forme au milieu sur le front, en choisissant la couleur appropriée du point le plus clair du front et en appliquant une couleur vert clair à la forme.
Ajoutez deux ellipses plus petites des deux côtés de la forme centrale. Sélectionnez les trois formes et utilisez le Ajouter une opération à partir du panneau de commande situé en haut pour fusionner toutes les ellipses en une seule forme.
Dupliquer (Commande-C> Commande-V) la forme et déplacez la copie du bas un peu en appuyant sur la Flèche vers le bas touche quelques fois. Change la couleur de la forme en vert foncé, faisant une ombre à plat.
Et là nous l'avons! Notre icône de perroquet est prête!
Voici notre ensemble d'animaux carrés mignons que nous allons utiliser comme éléments d'un jeu de «match trois». Passons à autre chose et réalisons un simple écran de jeu pour voir comment cela fonctionne!
Let's ouvrir notre fond forme et change sa couleur en orange doux. Utilisez le Outil Rectangle Arrondi (M) faire un 415 x 600 px forme jaune avec Rayon de coin de 10%.
Dupliquer (Commande-C> Commande-V) la forme et réduire la taille de la copie en changeant la couleur de remplissage en jaune plus foncé.
Dupliquer la nouvelle forme et diminuer à nouveau la taille de la copie, en commutant la couleur sur le même jaune clair que nous avons pour le grand rectangle arrondi.
finalement, dupliquer le plus grand rectangle arrondi et déplacez la copie du bas un peu en appuyant sur le Flèche vers le bas touche quelques fois. Agrandissez un peu la copie et changez le Mode de fusion à Multiplier dans le Couches panneau, formant une ombre subtile. En tout, nous avons quatre rectangles arrondis pour le panneau de jeu.
Utilisez le Outil Ellipse (M) et maintenez Décalage faire un grand cercle vert dans la partie inférieure de la toile. Placez-le entre l'écran de jeu et la forme d'arrière-plan. Ajouter plus de cercles, couvrant la partie inférieure de la toile.
Sélectionnez une teinte verte plus claire et continuez à utiliser les touches Outil Ellipse (M) faire des cercles plus petits et plus légers, illustrant de simples arbustes stylisés.
Continuez en utilisant la même technique et remplissez le haut de la toile avec des cercles orange clair, représentant des nuages stylisés.
Nous pouvons maintenant commencer à placer les icônes des animaux sur le panneau de jeu. Ici, j'utilise un truc simple pour rendre tous les éléments égaux. Comme vous l'avez probablement remarqué, notre perroquet est légèrement plus petit que le reste des personnages, car il n'a pas d'oreilles. Cela peut rendre l’alignement des formes un peu compliqué, et c’est pourquoi je copie les oreilles de l’icône du panda et les attache au perroquet. Rendre les oreilles complètement transparentes en réglant la Remplir et Accident vasculaire cérébral couleurs à aucun, puis regrouper les éléments ensemble.
Maintenant, nous pouvons placer les icônes dans une rangée et réduire leur taille, ce qui les rend compatibles avec l'écran de jeu. Gardez les icônes sélectionnées, allez dans la barre d’outils de contrôle en haut et ouvrez le Organiser panneau. De là, cliquez Espace horizontalement et décochez la Distribution automatique case à cocher, définissant la valeur de l'écart sur 0 px.
Vous pouvez Aligner les formes à Bas aussi, en utilisant le même Organiser panneau.
Groupe (Command-G) la rangée d'icônes, maintenez Option-Shift et faites-le glisser pour en faire une copie. presse Command-J plusieurs fois, en remplissant l'écran de jeu avec des icônes. Sélectionnez toutes les lignes, dirigez-vous vers le Organiser panneau, et cliquez Espace verticalement. Décocher Distribution automatique et définissez la valeur de l'écart sur 2 px, faire des écarts étroits entre les bords des icônes.
Vous pouvez ajuster la disposition en rendant les icônes plus petites ou plus grandes et en ajustant la distance entre les rangées, pour que les icônes s’adaptent au panneau de jeu..
Juste après cela, nous pouvons mélanger les icônes au hasard, donnant à la scène entière l’apparence d’un véritable écran de jeu. Double-cliquez sur la rangée d'icônes pour isoler le groupe et déplacer les icônes à l'intérieur du groupe horizontalement tout en maintenant enfoncée. Décalage.
Bon travail! Notre écran de match 3 est prêt! J'espère que vous avez apprécié suivre ce didacticiel et découvrir quelques astuces et conseils utiles lors de l'utilisation de formes de base, de remplissages en dégradés et de diverses opérations de transformation d'Affinity Designer. N'hésitez pas à appliquer vos connaissances lors de la création de nouveaux jeux et conceptions de personnages, et n'oubliez pas de partager vos résultats impressionnants!
Si vous souhaitez apprendre à créer davantage de contenu de conception de jeu dans Affinity Designer, assurez-vous également de consulter les didacticiels suivants:
Accentsconagua