1 00:00:00,000 --> 00:00:03,330 Bienvenue à mes collègues développeurs de jeux 2 00:00:03,330 --> 00:00:04,740 dans une toute nouvelle vidéo. 3 00:00:04,740 --> 00:00:06,690 Et celui-là, vous remarquerez que nous avons 4 00:00:06,690 --> 00:00:09,000 la décoloration. 5 00:00:09,000 --> 00:00:11,070 Et à quoi cela sert-il ? 6 00:00:11,070 --> 00:00:12,480 Eh bien, si nous regardons ici, 7 00:00:12,480 --> 00:00:15,210 nous avons une énorme boîte noire. 8 00:00:15,210 --> 00:00:17,100 Et vous pouvez le voir maintenant. 9 00:00:17,100 --> 00:00:19,290 Nous ne voyons rien dans le jeu. 10 00:00:19,290 --> 00:00:20,190 Pourquoi est-ce que c'est ? 11 00:00:20,190 --> 00:00:20,880 Que s'est-il passé ? 12 00:00:20,880 --> 00:00:21,960 Que nous quittions le jeu ? 13 00:00:21,960 --> 00:00:23,460 Pourquoi est-il si petit en ce moment ? 14 00:00:23,460 --> 00:00:24,710 Pourquoi sommes-nous zoomés ? 15 00:00:24,705 --> 00:00:27,215 Tellement de questions, si peu de réponses. 16 00:00:27,210 --> 00:00:28,380 Si je lance le jeu, 17 00:00:28,380 --> 00:00:30,630 vous remarquerez que nous commençons le niveau 18 00:00:30,630 --> 00:00:33,010 en s'estompant de l'image noire. 19 00:00:33,010 --> 00:00:34,660 Et si nous nous promenons, 20 00:00:34,655 --> 00:00:36,895 vous pouvez voir que dès que nous entrons sur le portail, 21 00:00:36,890 --> 00:00:38,470 non seulement nous ralentissons, 22 00:00:38,465 --> 00:00:39,995 mais nous nous estompons, 23 00:00:39,995 --> 00:00:43,615 puis nous nous estompons lorsque nous passons au niveau suivant. 24 00:00:43,610 --> 00:00:44,930 Donc, ne perdons 25 00:00:44,930 --> 00:00:48,770 plus de temps et nous allons échouer. 26 00:00:48,770 --> 00:00:50,560 Oh, d'accord. 27 00:00:50,555 --> 00:00:52,225 Nous sommes donc 28 00:00:52,220 --> 00:00:55,220 train de passer d'un niveau à l'autre. 29 00:00:55,220 --> 00:00:58,040 Nous avons l'effet d'échelle temporelle 30 00:00:58,040 --> 00:00:59,680 où nous ralentissons tout. 31 00:00:59,675 --> 00:01:02,095 La prochaine chose que nous voulons faire, c'est que nous voulons 32 00:01:02,090 --> 00:01:04,580 avoir un effet de décoloration. 33 00:01:04,580 --> 00:01:06,380 Donc, ce que nous voulons, c'est B1, 34 00:01:06,380 --> 00:01:10,070 l'image ou le jeu entier s'estompe en noir. 35 00:01:10,070 --> 00:01:12,050 Et puis, lorsque nous entrons dans un nouveau niveau, 36 00:01:12,050 --> 00:01:13,790 nous voulons disparaître. 37 00:01:13,790 --> 00:01:16,160 Allons-y, faisons-le. 38 00:01:16,160 --> 00:01:18,010 La première chose que nous devons faire, 39 00:01:18,005 --> 00:01:20,695 ou comment la décoloration sortante fonctionne-t-elle ? 40 00:01:20,690 --> 00:01:24,380 Nous aurons ici une grande image noire qui s'estompera 41 00:01:24,380 --> 00:01:27,920 puis disparaîtra au fur et à mesure que nous passerons de niveau à l'autre. 42 00:01:27,920 --> 00:01:29,930 Il s'agit donc d'une image noire 43 00:01:29,930 --> 00:01:32,500 et nous utilisons l'alpha dessus. 44 00:01:32,495 --> 00:01:34,415 Alors, faisons-le. 45 00:01:34,415 --> 00:01:38,785 Comment allons-nous ajouter une image dans Unity ? 46 00:01:38,780 --> 00:01:41,600 Eh bien, nous avons besoin de quelque chose appelé une toile. 47 00:01:41,600 --> 00:01:43,730 Je vais donc créer un canevas. 48 00:01:43,730 --> 00:01:45,800 Je vais cliquer avec le bouton droit de la souris dans la hiérarchie, 49 00:01:45,800 --> 00:01:48,950 aller à l'œil et trouver le campus. 50 00:01:48,950 --> 00:01:51,170 Vous y allez. Nous avons maintenant un campus. 51 00:01:51,170 --> 00:01:52,720 Si je double-clique dessus, 52 00:01:52,715 --> 00:01:55,145 vous y allez, vous pouvez voir qu'il s'agit d'une toile énorme 53 00:01:55,145 --> 00:01:57,425 et grande et vous vous demandez peut-être 54 00:01:57,425 --> 00:02:01,955 pourquoi la toile est-elle si grande alors que notre jeu est si petit ? 55 00:02:01,955 --> 00:02:03,835 C'est ainsi que Unity gère l' 56 00:02:03,830 --> 00:02:06,520 utilisation de Canvas et l'ajout d'images. 57 00:02:06,515 --> 00:02:09,775 Il vaut mieux jouer avec les images ici. 58 00:02:09,770 --> 00:02:12,320 Au lieu de jouer dans les images, 59 00:02:12,320 --> 00:02:14,320 écrivez-le et ayez tout devant 60 00:02:14,315 --> 00:02:16,945 le joueur et les objets du jeu. 61 00:02:16,940 --> 00:02:19,220 Il s'agit donc d'une meilleure façon ou 62 00:02:19,220 --> 00:02:22,060 la façon dont l'unité utilise pour gérer les choses. 63 00:02:22,055 --> 00:02:23,545 Vous pouvez également constater que nous avons 64 00:02:23,540 --> 00:02:25,090 quelque chose qui s'appelle le système événementiel. 65 00:02:25,085 --> 00:02:27,175 Et cela nous permet, par exemple, 66 00:02:27,170 --> 00:02:30,020 d'avoir une sorte de bouton sur la toile. 67 00:02:30,020 --> 00:02:32,000 Nous voulons cliquer dessus pour pouvoir 68 00:02:32,000 --> 00:02:34,300 ajouter un système d'événements sous le Canvas, 69 00:02:34,295 --> 00:02:36,935 faire un enfant et le conserver pour le moment. 70 00:02:36,935 --> 00:02:40,475 Et ce système d'événements nous permet d'appuyer sur 71 00:02:40,475 --> 00:02:42,445 boutons sur l'écran et de nous permettre 72 00:02:42,440 --> 00:02:44,530 d'interagir avec le canevas. 73 00:02:44,525 --> 00:02:46,985 Nous verrons comment cela fonctionne en un instant. 74 00:02:46,985 --> 00:02:48,955 Mais pour l'instant, nous voulons entrer 75 00:02:48,950 --> 00:02:51,050 dans le scaler de canevas ici. 76 00:02:51,050 --> 00:02:54,490 Vous pouvez voir que nous pouvons évoluer en fonction de la taille de l'écran. 77 00:02:54,485 --> 00:02:57,625 Et nous voulons changer cela de 100 à 1920 d' 78 00:02:57,620 --> 00:03:01,000 ici là huit, 79 00:03:00,995 --> 00:03:03,505 soit la taille de l'écran que 80 00:03:03,500 --> 00:03:06,260 nous utilisons ou créons le jeu. 81 00:03:06,260 --> 00:03:07,330 Appuyez sur Entrée. 82 00:03:07,325 --> 00:03:10,295 Vous y allez. Maintenant, tout est fait. 83 00:03:10,295 --> 00:03:12,865 Vous pouvez voir que nous avons la roulette à rayons et un élément 84 00:03:12,860 --> 00:03:15,440 pour la toile, ce qui n'est pas si important. 85 00:03:15,440 --> 00:03:18,040 Nous ne changerons rien de trop ici. 86 00:03:18,035 --> 00:03:21,295 Nous voulons seulement nous assurer que le scaler de canevas 87 00:03:21,290 --> 00:03:26,170 l' échelle de la taille de l'écran et nous voulons le faire 1920 par 1080. 88 00:03:26,165 --> 00:03:26,795 Ok, super. 89 00:03:26,795 --> 00:03:28,075 Maintenant que cela est fait, 90 00:03:28,070 --> 00:03:30,280 étape suivante consiste à ajouter une image. 91 00:03:30,275 --> 00:03:32,285 Je vais donc cliquer ici avec le bouton droit de la souris, 92 00:03:32,285 --> 00:03:35,305 aller vers vous et trouver une image. 93 00:03:35,300 --> 00:03:37,870 Maintenant, vous pouvez voir que nous avons 94 00:03:37,865 --> 00:03:39,265 une image au milieu de 95 00:03:39,260 --> 00:03:41,450 l'immense toile et je vais le faire, 96 00:03:41,450 --> 00:03:43,990 c'est l'image qui s'estompe. 97 00:03:43,985 --> 00:03:47,215 Mais même si nous l'avons sur la toile, 98 00:03:47,210 --> 00:03:49,040 vous pouvez voir ici dans le jeu que 99 00:03:49,040 --> 00:03:51,070 nous l'avons comme un petit bloc. 100 00:03:51,065 --> 00:03:53,525 Et si je le déplace vers le haut, 101 00:03:53,525 --> 00:03:56,425 vous remarquerez qu'il se trouve dans la partie supérieure du jeu, 102 00:03:56,420 --> 00:03:57,620 et au milieu, c'est au 103 00:03:57,620 --> 00:04:00,010 milieu que réside le joueur. 104 00:04:00,005 --> 00:04:02,035 Et en bas à gauche, vous pouvez le voir. 105 00:04:02,030 --> 00:04:04,250 Ce n'est donc pas même si l'image 106 00:04:04,250 --> 00:04:07,100 en haut du jeu est énorme. 107 00:04:07,100 --> 00:04:09,220 Mais vous pouvez voir que sur la toile, 108 00:04:09,215 --> 00:04:11,875 c'est vraiment petit et il diminue. 109 00:04:11,870 --> 00:04:16,750 C'est ainsi que nous représentons les choses dans Unity sur le canevas de l'interface utilisateur. 110 00:04:16,745 --> 00:04:19,015 Maintenant, que va-t-on faire ? 111 00:04:19,010 --> 00:04:21,950 Nous voulons que cette image remplit toute la toile, 112 00:04:21,950 --> 00:04:23,650 rende complètement noire. 113 00:04:23,645 --> 00:04:25,135 Ensuite, nous allons utiliser 114 00:04:25,130 --> 00:04:28,580 la transparence qui s'y trouve pour s'estomper et s'estomper. 115 00:04:28,580 --> 00:04:31,990 Tout d'abord, comment le rendre aussi grand que l'écran ? 116 00:04:31,985 --> 00:04:34,015 Eh bien, il y a une option ici. 117 00:04:34,010 --> 00:04:36,260 Vous pouvez voir que c'est l'outil rect. 118 00:04:36,260 --> 00:04:38,390 Lorsque vous cliquez dessus, vous pouvez faire glisser 119 00:04:38,390 --> 00:04:40,690 cette image et la rendre plus grande et plus petite. 120 00:04:40,685 --> 00:04:42,145 Et vous remarquerez ici que nous avons 121 00:04:42,140 --> 00:04:43,820 beaucoup de choses 122 00:04:43,820 --> 00:04:46,070 à gérer et à modifier l' 123 00:04:46,070 --> 00:04:49,030 apparence de l'image. 124 00:04:49,025 --> 00:04:51,085 Nous pouvons également maintenir Alt enfoncé 125 00:04:51,080 --> 00:04:53,260 et choisir l'un des coins, ou l'armée. 126 00:04:53,255 --> 00:04:55,715 Choisissez l'un des coordinateurs et maintenez la touche Alt enfoncée. 127 00:04:55,715 --> 00:04:57,625 Et vous pouvez voir que nous pouvons l'élargir 128 00:04:57,620 --> 00:04:59,830 et tous les moyens. 129 00:04:59,825 --> 00:05:03,355 Mais il existe une solution encore meilleure à cela. 130 00:05:03,350 --> 00:05:05,350 Et c'est que si nous cliquons ici, 131 00:05:05,345 --> 00:05:07,345 vous pouvez voir que nous avons quelques 132 00:05:07,340 --> 00:05:09,650 options qui s'appellent l'ancre. 133 00:05:09,650 --> 00:05:11,930 Par exemple, si je clique sur cette ancre, 134 00:05:11,930 --> 00:05:15,050 l'image baissera grande et petite avec une 135 00:05:15,045 --> 00:05:18,455 échelle de haut en bas en fonction de ce point ici, nous pouvons également cliquer sur 136 00:05:18,455 --> 00:05:21,155 celle-ci où elle sera mise à l'échelle 137 00:05:21,155 --> 00:05:23,875 fonction de l'ensemble du canevas. 138 00:05:23,870 --> 00:05:25,130 Vous verrez ce que je veux dire par 139 00:05:25,130 --> 00:05:27,040 mise à l'échelle lorsque nous avons besoin d'évoluer. 140 00:05:27,035 --> 00:05:29,615 Mais que se passe-t-il si nous maintenons Alt enfoncé ? 141 00:05:29,615 --> 00:05:32,405 Vous pouvez voir que nous pouvons agrandir l'image de cette façon. 142 00:05:32,405 --> 00:05:34,045 Nous pouvons l'agrandir au milieu, 143 00:05:34,040 --> 00:05:35,900 nous pouvons l'agrandir vers la gauche, 144 00:05:35,900 --> 00:05:38,030 et nous pouvons l'agrandir tout autour 145 00:05:38,030 --> 00:05:40,250 pour qu'il remplit tout le carré. 146 00:05:40,250 --> 00:05:42,050 Tout le Canvas immédiatement. 147 00:05:42,050 --> 00:05:44,240 Et vous pouvez voir que maintenant l'image a 148 00:05:44,240 --> 00:05:46,690 complètement bloqué le jeu. 149 00:05:46,685 --> 00:05:49,985 Et si je vais sur la toile et l'image qui s'estompe, 150 00:05:49,985 --> 00:05:52,945 je peux changer la couleur ici même sur l'image, 151 00:05:52,940 --> 00:05:55,310 et la rendre complètement noire. 152 00:05:55,310 --> 00:05:59,410 Maintenant, comment allons-nous changer la transparence ? 153 00:05:59,405 --> 00:06:02,395 Tout d'abord, nous pouvons le faire 154 00:06:02,390 --> 00:06:05,740 ici pour pouvoir modifier l'alpha de l'image. 155 00:06:05,735 --> 00:06:08,515 Mais il est difficile d'accéder à l'alpha 156 00:06:08,510 --> 00:06:11,390 sur l'image car nous devons accéder à toutes les couleurs rouge, 157 00:06:11,390 --> 00:06:13,010 vert et bleu. 158 00:06:13,010 --> 00:06:15,380 D'une autre façon de le faire, c'est en ajoutant 159 00:06:15,380 --> 00:06:17,650 quelque chose appelé un groupe de campus. 160 00:06:17,645 --> 00:06:22,985 Donc, si je vais ici et que j'ajoute un groupe de canevas, 161 00:06:23,080 --> 00:06:27,460 vous pouvez voir que j'ai la possibilité d'avoir Alpha. 162 00:06:27,455 --> 00:06:29,305 Et si je déplace cet alpha 163 00:06:29,300 --> 00:06:31,280 de 0 à un ou de un à 0, 164 00:06:31,280 --> 00:06:34,600 vous pouvez voir à 0, il est complètement transparent. 165 00:06:34,595 --> 00:06:36,635 À un moment donné, ce n'est pas le cas. 166 00:06:36,635 --> 00:06:38,875 Et je peux bloquer la refonte. 167 00:06:38,870 --> 00:06:40,280 Cela signifie que la refonte 168 00:06:40,280 --> 00:06:42,620 signifie que chaque fois que je veux cliquer sur quelque chose, 169 00:06:42,620 --> 00:06:44,660 cela peut aider à bloquer la refonte et 170 00:06:44,660 --> 00:06:47,480 l'interactable cette image est-elle interactable ? 171 00:06:47,480 --> 00:06:49,760 Disons que ce n'est pas le cas. Et voilà. 172 00:06:49,760 --> 00:06:54,170 Notre objectif est donc maintenant de créer une animation. 173 00:06:54,170 --> 00:06:56,870 À l'aide de cette animation, nous allons contrôler 174 00:06:56,870 --> 00:06:59,750 le groupe de canevas alpha ici. 175 00:06:59,750 --> 00:07:02,000 Ensuite, nous allons disparaître et disparaître à 176 00:07:02,000 --> 00:07:04,730 chaque fois et à notre gain. 177 00:07:04,730 --> 00:07:07,070 Cela étant expliqué, 178 00:07:07,070 --> 00:07:09,250 je vais vous lancer un défi. 179 00:07:09,245 --> 00:07:12,635 Et votre défi est de faire disparaître l'image. 180 00:07:12,635 --> 00:07:13,925 Je vais donc vous expliquer 181 00:07:13,925 --> 00:07:16,645 comment procéder étape par étape. 182 00:07:16,640 --> 00:07:18,380 Tout d'abord, vous devrez créer 183 00:07:18,380 --> 00:07:19,940 une animation pour le fondu 184 00:07:19,940 --> 00:07:21,800 et le fondu et être noir 185 00:07:21,800 --> 00:07:23,810 à transparent et disparaissant, 186 00:07:23,810 --> 00:07:26,320 ce qui sera transparent au noir. 187 00:07:26,315 --> 00:07:29,495 Vous devez créer une transition entre la transition entre 188 00:07:29,495 --> 00:07:31,615 les deux animations en fonction d' 189 00:07:31,610 --> 00:07:32,930 un déclencheur. 190 00:07:32,930 --> 00:07:34,940 N'oubliez pas que nous avons créé 191 00:07:34,940 --> 00:07:36,530 la transition basée sur un booléen. 192 00:07:36,530 --> 00:07:38,600 Il est maintenant temps d'utiliser un déclencheur. 193 00:07:38,600 --> 00:07:41,020 Vous devez ajouter un paramètre de déclenchement. 194 00:07:41,015 --> 00:07:43,085 Il est évident que vous devez créer 195 00:07:43,085 --> 00:07:47,405 un script UI Manager et l'ajouter au canevas. 196 00:07:47,405 --> 00:07:49,555 Vous devrez créer une méthode 197 00:07:49,550 --> 00:07:51,350 qui déclenche la décoloration. 198 00:07:51,350 --> 00:07:53,720 Enfin, vous devez appeler cette méthode depuis 199 00:07:53,720 --> 00:07:56,560 le chargement de Colton dans le gestionnaire de niveaux. 200 00:07:56,555 --> 00:07:59,455 Nous connaissons donc presque toutes les étapes. 201 00:07:59,450 --> 00:08:02,230 Vous ne savez peut-être pas comment régler un déclencheur. 202 00:08:02,225 --> 00:08:05,195 C'est donc ce que vous devez chercher vous-même. 203 00:08:05,194 --> 00:08:08,064 Et tout le reste, je crois que c'est quelque chose que 204 00:08:08,060 --> 00:08:10,880 nous avons vécu avec testé. 205 00:08:10,880 --> 00:08:13,490 N'oubliez pas que le fonctionnement de l'animation consiste à appuyer 206 00:08:13,490 --> 00:08:15,500 sur le petit bouton rouge 207 00:08:15,500 --> 00:08:19,250 de l'enregistrement de l'animation pour que l'information, 208 00:08:19,250 --> 00:08:24,330 suspendre la vidéo dès maintenant et aller faire le Chavan. 209 00:08:24,550 --> 00:08:26,780 Bon, bon retour. 210 00:08:26,780 --> 00:08:28,910 La première chose que nous allons faire 211 00:08:28,910 --> 00:08:31,660 c'est que nous allons entrer dans l'animation. 212 00:08:31,655 --> 00:08:34,765 Je vais aller de l'avant et m'assurer 213 00:08:34,760 --> 00:08:38,020 d'avoir l'image décolorée et de créer une animation. 214 00:08:38,015 --> 00:08:40,285 Et maintenant, je peux aller dans les animations, 215 00:08:40,280 --> 00:08:45,980 cliquer avec le bouton droit de la souris ici et créer l'image décolorée. 216 00:08:45,980 --> 00:08:48,500 Je suis donc dans les animations des actifs et 217 00:08:48,500 --> 00:08:50,860 ici je vais tout d'abord créer 218 00:08:50,855 --> 00:08:57,085 la décoloration, la décoloration et l'enregistrer. 219 00:08:57,080 --> 00:08:59,170 Maintenant, qu'avons-nous dit que le pistolet à décoloration devrait 220 00:08:59,165 --> 00:09:01,505 être la décoloration en noir à transparent. 221 00:09:01,505 --> 00:09:04,885 Ok, super. Combien de temps est-ce que je veux que cela prenne ? 222 00:09:04,880 --> 00:09:09,140 Faisons donc environ 1,5 seconde. 223 00:09:09,140 --> 00:09:11,860 Je vais donc cliquer sur le bouton Enregistrer. 224 00:09:11,855 --> 00:09:14,755 Et qu'est-ce que j'ai dit encore, noir trop transparent. 225 00:09:14,750 --> 00:09:18,530 Oups, ce n'est pas la clé que je cherchais. 226 00:09:18,530 --> 00:09:22,660 Et où est-il ? Bon, de retour ici. 227 00:09:22,655 --> 00:09:27,845 Nous commençons donc par le noir et à la fin, nous enregistrons. 228 00:09:27,845 --> 00:09:30,155 Je veux ramener l'alpha à 0. 229 00:09:30,155 --> 00:09:32,455 Que se passe-t-il maintenant lorsque je joue l'animation ? 230 00:09:32,450 --> 00:09:35,890 Il commence en noir, puis s'estompe trop transparent. 231 00:09:35,885 --> 00:09:36,775 Excellent. 232 00:09:36,770 --> 00:09:40,640 La prochaine chose que je vais faire est de créer le fondu. 233 00:09:40,640 --> 00:09:44,720 Alors, s'évanouit. 234 00:09:44,720 --> 00:09:50,300 Et maintenant, nous commençons à 0 235 00:09:50,300 --> 00:09:55,690 , puis nous entrons dans l'obscurité complète après 1 seconde. 236 00:09:55,685 --> 00:09:57,655 Nous avons donc arrêté l'enregistrement, 237 00:09:57,650 --> 00:10:00,290 lançons le jeu si transparent, fondu au noir. 238 00:10:00,290 --> 00:10:01,220 Excellent. 239 00:10:01,220 --> 00:10:06,520 Maintenant, la prochaine chose que nous allons ouvrir l'Animator. 240 00:10:06,515 --> 00:10:10,105 Et ici, nous allons tout d'abord, d'accord, 241 00:10:10,100 --> 00:10:11,960 donc la décoloration et la décoloration 242 00:10:11,960 --> 00:10:14,480 signifient que nous passons du noir au transparent. 243 00:10:14,479 --> 00:10:17,269 Cela devrait commencer dès que nous recommençons. 244 00:10:17,270 --> 00:10:19,460 Donc, nous n'apparaissons pas seulement en mode jeu, 245 00:10:19,460 --> 00:10:21,490 nous passons en mode jeu, 246 00:10:21,485 --> 00:10:23,365 puis nous avons le fondu vers le noir qui créera 247 00:10:23,360 --> 00:10:26,270 une transition ici. 248 00:10:26,270 --> 00:10:28,370 Cette transition ne doit pas avoir 249 00:10:28,370 --> 00:10:32,450 de temps de sortie et les paramètres doivent être un, 250 00:10:32,450 --> 00:10:35,380 je veux dire que la durée de la transition doit être à 0. 251 00:10:35,375 --> 00:10:38,935 Je vais créer un paramètre qui sera un déclencheur, 252 00:10:38,930 --> 00:10:43,240 et je vais juste l'appeler Start, fondu. 253 00:10:43,235 --> 00:10:44,945 Faites de cette capitale. 254 00:10:44,945 --> 00:10:49,075 Vous y allez. Et ajoutez-le comme condition ici. 255 00:10:49,070 --> 00:10:50,180 Excellent. 256 00:10:50,180 --> 00:10:52,580 J'espère que vous avez fait toutes ces étapes. 257 00:10:52,580 --> 00:10:54,170 Ce sont des choses que nous avons déjà 258 00:10:54,170 --> 00:10:56,120 couvertes et déjà créées. 259 00:10:56,120 --> 00:10:57,500 Et avant de passer à autre chose, 260 00:10:57,500 --> 00:11:00,590 nous devons nous assurer que cette toile est également 261 00:11:00,590 --> 00:11:04,250 présente au deuxième niveau Y ou au niveau 1. 262 00:11:04,250 --> 00:11:07,450 Pourquoi ? Parce que si on passe au niveau 1, 263 00:11:07,445 --> 00:11:08,675 où sont les scènes ? 264 00:11:08,675 --> 00:11:10,435 Si nous passons au niveau 1, vous verrez 265 00:11:10,430 --> 00:11:12,370 que nous n'avons pas de canevas, 266 00:11:12,365 --> 00:11:14,515 sorte que nous ne pourrons pas s'estomper 267 00:11:14,510 --> 00:11:17,590 lorsque nous commencerons le niveau 1 ou lorsque nous passerons au niveau 1. 268 00:11:17,585 --> 00:11:19,465 Donc, au niveau 2, 269 00:11:19,460 --> 00:11:24,470 je vais appeler cela le canevas de l'interface utilisateur Entrée. 270 00:11:24,470 --> 00:11:28,160 Et je vais aller dans les Prefabs. 271 00:11:28,160 --> 00:11:29,900 Où sont les préfabriqués ? 272 00:11:29,900 --> 00:11:36,690 Et je vais créer et ici un dossier d'interface utilisateur. 273 00:11:36,685 --> 00:11:40,045 Et ici, je vais faire glisser le campus de l'interface utilisateur. 274 00:11:40,045 --> 00:11:41,245 Gardez ça. 275 00:11:41,245 --> 00:11:44,025 Et maintenant, regardez à quel point les préfabriqués sont incroyables. 276 00:11:44,020 --> 00:11:45,970 Eigen ne croit pas que nous en ayons parlé. 277 00:11:45,970 --> 00:11:48,760 Mais si nous entrons dans les scènes du premier niveau, 278 00:11:48,760 --> 00:11:50,170 nous pouvons immédiatement accéder à 279 00:11:50,170 --> 00:11:53,890 interface utilisateur de Prefabs et ajouter un canevas et nos jeux. 280 00:11:53,890 --> 00:11:57,190 Nous avons donc maintenant un canevas ici même 281 00:11:57,190 --> 00:11:58,900 au niveau 1 et nous n' avons 282 00:11:58,900 --> 00:12:00,880 plus eu à le créer à nouveau. 283 00:12:00,880 --> 00:12:03,330 C'est la beauté d'avoir des préfabriqués. 284 00:12:03,325 --> 00:12:06,135 C'est ce qui a été fait au niveau 2. 285 00:12:06,130 --> 00:12:08,070 Voyons ce que nous avons ici. 286 00:12:08,065 --> 00:12:09,585 Donc les animations jouent, 287 00:12:09,580 --> 00:12:12,360 tout devrait fonctionner maintenant lorsque nous lançons notre jeu, 288 00:12:12,355 --> 00:12:15,045 nous devrions avoir une décoloration et une animation. 289 00:12:15,045 --> 00:12:17,585 Je dirige donc le jeu. 290 00:12:17,860 --> 00:12:19,580 Vous y allez. 291 00:12:19,580 --> 00:12:23,420 Vous pouvez donc voir que j'ai une décoloration en boucle dans l'animation. 292 00:12:23,420 --> 00:12:25,880 Je vais donc entrer dans les animations, 293 00:12:25,880 --> 00:12:28,730 trouver la décoloration et la décoloration, et 294 00:12:28,730 --> 00:12:33,080 m'assurer qu'il n'y a pas de temps de boucle. Gardez ça. 295 00:12:33,080 --> 00:12:37,640 Et maintenant, lorsque nous lançons le jeu et le second, nous 296 00:12:37,640 --> 00:12:42,910 avons une décoloration d'un pouce. 297 00:12:42,905 --> 00:12:43,705 Excellent. 298 00:12:43,700 --> 00:12:46,130 Savez-vous pourquoi cela se produit ? 299 00:12:46,130 --> 00:12:47,900 Eh bien, parce qu'à l'entrée, 300 00:12:47,900 --> 00:12:49,960 première chose que nous faisons est de s'estomper. 301 00:12:49,955 --> 00:12:52,295 C'est donc déjà prévu pour nous. 302 00:12:52,295 --> 00:12:55,375 Maintenant, la prochaine chose que nous devons faire est de créer 303 00:12:55,370 --> 00:12:58,820 le gestionnaire d'interface utilisateur et de l'ajouter au campus. 304 00:12:58,820 --> 00:13:01,910 Je vais donc entrer dans mes scripts ici, 305 00:13:01,910 --> 00:13:05,500 cliquer avec le bouton droit de la souris et créer un nouveau dossier pour l'interface utilisateur. 306 00:13:05,495 --> 00:13:07,715 Nous changeons énormément le nom de ce dossier, 307 00:13:07,715 --> 00:13:11,245 mais pour l'instant, allons créer un script C-sharp, 308 00:13:11,240 --> 00:13:14,470 qui sera le gestionnaire d'interface utilisateur 309 00:13:14,465 --> 00:13:17,945 ou aurait dû être dans le gestionnaire. 310 00:13:17,945 --> 00:13:19,405 Et cela ne s'inquiète pas. 311 00:13:19,400 --> 00:13:20,910 Attendez que cela soit compilé. 312 00:13:20,914 --> 00:13:23,314 Passons ça aux gestionnaires. 313 00:13:23,315 --> 00:13:26,465 Je crois que c'est du beurre ici ou peut-être pas. 314 00:13:26,465 --> 00:13:28,585 Je ne sais pas. Cela dépend de vos préférences. 315 00:13:28,580 --> 00:13:32,560 Je pense que dans le manager, c'est peut-être mieux. 316 00:13:32,555 --> 00:13:35,155 Annulez ou non, gardons ça. 317 00:13:35,150 --> 00:13:36,310 Gardons ça dans vos yeux. 318 00:13:36,305 --> 00:13:40,135 Même s'il s'agit d'un gestionnaire, il le conservera dans l'interface utilisateur. 319 00:13:40,130 --> 00:13:43,090 Je vais ouvrir le gestionnaire d'interface utilisateur, 320 00:13:43,085 --> 00:13:44,665 ouvrir Visual Studio. 321 00:13:44,660 --> 00:13:46,250 Et la première chose dont nous aurons 322 00:13:46,250 --> 00:13:48,110 besoin, c'est une référence à l'image 323 00:13:48,110 --> 00:13:51,560 que nous voulons revenir ici. 324 00:13:51,560 --> 00:13:53,660 J'espère que ce n'était pas trop difficile car 325 00:13:53,660 --> 00:13:55,930 il va s'agir d'un champ sérialisé, 326 00:13:55,925 --> 00:13:58,625 qui est une image de type image. 327 00:13:58,625 --> 00:14:01,255 Oh, il y a eu quelque chose que j' 328 00:14:01,250 --> 00:14:04,120 espère que certains d'entre vous ont pu comprendre. 329 00:14:04,115 --> 00:14:06,725 Si j'essayais d'utiliser l'image ici. 330 00:14:06,725 --> 00:14:09,875 Vous remarquerez que je n'ai pas d'option pour cela. 331 00:14:09,875 --> 00:14:11,905 Ce dont j'ai besoin, c'est que j'ai besoin d'utiliser 332 00:14:11,900 --> 00:14:15,040 votre moteur Unity dot u i 333 00:14:15,035 --> 00:14:18,635 , donc j'espère que ce n'était pas un problème énorme pour vous. 334 00:14:18,635 --> 00:14:21,175 J'espère que vous avez trouvé cette erreur ou 335 00:14:21,170 --> 00:14:23,630 trouvé cet inconvénient dans le défi et 336 00:14:23,630 --> 00:14:26,110 vous avez essayé de trouver 337 00:14:26,110 --> 00:14:29,020 la solution si vous ne l'avez pas fait, ne vous inquiétez pas. 338 00:14:29,015 --> 00:14:30,935 C'était en mon nom. 339 00:14:30,935 --> 00:14:33,685 J'aurais dû vous avertir à l'avance. 340 00:14:33,680 --> 00:14:34,900 Ne vous inquiétez pas. 341 00:14:34,895 --> 00:14:38,545 L'image du destin. 342 00:14:38,540 --> 00:14:40,370 Certains d'entre vous pensent peut-être : Oui, pas de soucis, 343 00:14:40,370 --> 00:14:43,030 bien sûr, juste ma confiance a été détruite. 344 00:14:43,025 --> 00:14:46,075 Quoi qu'il en soit, qu'allons-nous faire dans 345 00:14:46,070 --> 00:14:49,660 cette classe ici et dans le gestionnaire d'interface utilisateur ? 346 00:14:49,655 --> 00:14:50,725 Eh bien, comme nous l'avons dit, 347 00:14:50,720 --> 00:14:52,400 nous avons besoin d'une méthode. 348 00:14:52,395 --> 00:14:55,545 Créez une méthode qui déclenche la décoloration et appelez 349 00:14:55,540 --> 00:14:59,010 cette méthode à partir du coworking de chargement dans Level Manager. 350 00:14:59,005 --> 00:15:02,365 Je vais donc m'assurer qu'il s'agit d'un public. 351 00:15:02,365 --> 00:15:09,295 Je vais donc créer une image de fondu vide public. 352 00:15:09,810 --> 00:15:12,850 Et ici, je vais aller de l' avant et accéder à 353 00:15:12,850 --> 00:15:15,460 l'image pour qu'elle s'estompe. 354 00:15:15,460 --> 00:15:18,100 Je vais y avoir un composant, 355 00:15:18,100 --> 00:15:20,930 qui est l'animateur. 356 00:15:22,140 --> 00:15:26,390 Et je vais mettre la gâchette. 357 00:15:26,490 --> 00:15:29,320 Et ce déclencheur sera la 358 00:15:29,320 --> 00:15:34,970 référence d'une chaîne au fondu Démarrer. 359 00:15:34,965 --> 00:15:39,865 Et aujourd'hui, maintenant, copiez ceci ici, 360 00:15:39,860 --> 00:15:42,730 collez-le ici, fermez-le, enregistrez-le. 361 00:15:42,725 --> 00:15:44,345 Alors, que faisons-nous ? 362 00:15:44,345 --> 00:15:46,485 Parce que nous avons créé l'animation 363 00:15:46,489 --> 00:15:48,169 sur l'image réelle pour qu'elle s'estompe. 364 00:15:48,170 --> 00:15:50,150 Vous pouvez voir que l'animateur est ici 365 00:15:50,150 --> 00:15:52,780 sur cet objet de jeu. 366 00:15:52,775 --> 00:15:55,615 L'un des composants de l'image à estomper. 367 00:15:55,610 --> 00:15:58,190 Ce que nous faisons, c'est que nous accédons à l'animateur sur 368 00:15:58,190 --> 00:16:01,760 l'image, puis nous définissons le déclencheur qui est lancé. 369 00:16:01,760 --> 00:16:02,680 Ok, super. 370 00:16:02,675 --> 00:16:04,645 Maintenant, la prochaine étape consiste à 371 00:16:04,640 --> 00:16:06,910 l'appeler Level Manager. 372 00:16:06,905 --> 00:16:09,505 Et il y a deux façons de le faire. 373 00:16:09,500 --> 00:16:11,090 Nous pouvons soit aller de l'avant et trouver 374 00:16:11,090 --> 00:16:13,790 l'objet du jeu, soit trouver le gestionnaire d'interface utilisateur. 375 00:16:13,790 --> 00:16:16,750 Ou allons-y et créons une instance de cela. 376 00:16:16,745 --> 00:16:23,905 Je vais créer un gestionnaire d'interface utilisateur statique public. 377 00:16:23,900 --> 00:16:28,570 Par exemple. Gardez ça. 378 00:16:28,565 --> 00:16:31,655 Et je vais commencer ici. 379 00:16:31,655 --> 00:16:37,685 Et puis démarrez l'instance sera égale à cela. 380 00:16:37,685 --> 00:16:39,125 Gardez ça. 381 00:16:39,125 --> 00:16:42,095 Maintenant, dans le gestionnaire de niveau, 382 00:16:42,095 --> 00:16:43,765 où devrions-nous mettre ça ? 383 00:16:43,760 --> 00:16:46,480 Eh bien, je crois que dès que nous 384 00:16:46,475 --> 00:16:50,455 atteignons ou dès que nous entrons dans le niveau de chargement. 385 00:16:50,450 --> 00:16:53,590 Nous avons donc l'échelle temporelle à 0,2. 386 00:16:53,585 --> 00:16:56,245 Je vais aller de l'avant et accéder au 387 00:16:56,240 --> 00:17:01,410 gestionnaire d'interface utilisateur, l'instance. 388 00:17:01,405 --> 00:17:04,935 Et je vais aller de l'avant et estomper l'image. 389 00:17:04,930 --> 00:17:07,000 Maintenant, vous remarquerez quelque chose que parce que 390 00:17:07,000 --> 00:17:10,470 nous avons dit l'échelle de temps à 0,2, 391 00:17:10,465 --> 00:17:12,225 la décoloration de l'image sera 392 00:17:12,220 --> 00:17:14,950 plus lente que ce que nous avons ici. 393 00:17:14,950 --> 00:17:17,730 Essayons donc cela et voyons si cela fonctionne. 394 00:17:17,725 --> 00:17:20,325 Si vous pensez que c'est un peu lent, 395 00:17:20,320 --> 00:17:21,640 vous pouvez aller de l'avant et 396 00:17:21,640 --> 00:17:23,890 ralentir la décoloration de l'image. 397 00:17:23,890 --> 00:17:25,500 On y va donc. 398 00:17:25,495 --> 00:17:28,285 Nous commençons, nous courons. 399 00:17:28,285 --> 00:17:32,815 Et quand nous entrons sur ce portail ici, nous y allons. 400 00:17:32,815 --> 00:17:36,735 Nous ralentissons et nous avons oublié d'ajouter un hé, 401 00:17:36,730 --> 00:17:39,190 nous avons oublié d'ajouter la référence. 402 00:17:39,190 --> 00:17:40,750 Vous pouvez voir ici l'erreur. 403 00:17:40,750 --> 00:17:42,200 Si je double-clique dessus, 404 00:17:42,195 --> 00:17:45,985 vous verrez que l'image du gestionnaire d'interface utilisateur s'estompe, 405 00:17:45,980 --> 00:17:48,700 il y a quelque chose qui ne va pas. Qu'est-ce qui ne va pas ? 406 00:17:48,695 --> 00:17:51,985 Eh bien, il n'y a pas de cas. 407 00:17:51,980 --> 00:17:54,360 Ok, donc si je vais sur le canevas de l'interface utilisateur, 408 00:17:54,364 --> 00:17:57,934 je remarquerais que je n'ai même pas ajouté le manager, 409 00:17:57,935 --> 00:18:00,145 donc je ne suis pas sûr de ce qu'on appelle. 410 00:18:00,140 --> 00:18:03,160 Faites-le glisser dans le gestionnaire d'interface utilisateur. 411 00:18:03,155 --> 00:18:05,485 Assurez-vous que nous avons dit 412 00:18:05,480 --> 00:18:09,110 l'image décolorée et appliquons les modifications. 413 00:18:09,110 --> 00:18:12,100 Remarquez maintenant que le canevas 414 00:18:12,095 --> 00:18:15,865 ce niveau n'avait pas de gestionnaire d'interface utilisateur, n'est-ce pas ? 415 00:18:15,860 --> 00:18:19,780 Et c'est celui que nous avons utilisé dans le premier niveau. 416 00:18:19,775 --> 00:18:22,235 Si je passe maintenant au premier niveau, 417 00:18:22,235 --> 00:18:24,215 je clique sur le canevas de l'interface utilisateur. 418 00:18:24,214 --> 00:18:28,234 Il dispose d'un gestionnaire d'interface utilisateur et l'image est déjà configurée. 419 00:18:28,235 --> 00:18:32,725 Vous pouvez ainsi voir à nouveau la puissance de l'utilisation des applications de deuil. 420 00:18:32,720 --> 00:18:34,270 Est-ce que c'est cool ? 421 00:18:34,265 --> 00:18:37,385 Donc de retour au niveau pour lancer le jeu, 422 00:18:37,385 --> 00:18:40,705 on s'estompe. Plus d'erreurs. 423 00:18:40,700 --> 00:18:43,750 Nous montons, nous passons par le portail, 424 00:18:43,745 --> 00:18:45,445 et nous y allons, nous ralentissons. 425 00:18:45,440 --> 00:18:48,020 Nous avons ce sucre ici. 426 00:18:48,020 --> 00:18:51,110 Il y a donc eu un léger problème ici. 427 00:18:51,110 --> 00:18:53,020 Comme vous remarquez que nous n'avons même pas eu 428 00:18:53,015 --> 00:18:55,385 le temps de s'estomper. 429 00:18:55,385 --> 00:18:57,835 Je vais donc accéder à nouveau au fondu et à 430 00:18:57,830 --> 00:19:00,910 l'image qui s'estompe. 431 00:19:00,905 --> 00:19:02,845 Et où est-ce que c'est ? 432 00:19:02,840 --> 00:19:05,090 Eh bien, cela dépendra de la durée ou 433 00:19:05,090 --> 00:19:07,610 de l'échelle de temps que vous avez ici. 434 00:19:07,610 --> 00:19:11,270 Je vais donc faire 0,5. Gardez ça. 435 00:19:11,270 --> 00:19:14,090 Et au lieu de 1,5 seconde, 436 00:19:14,090 --> 00:19:16,210 je vais faire le tour, 437 00:19:16,205 --> 00:19:18,955 passons à 0, 438 00:19:18,950 --> 00:19:22,520 peut-être 1 seconde ou 2,5. 439 00:19:22,520 --> 00:19:26,300 Disons que c'est environ 40 ans du jeu. 440 00:19:26,300 --> 00:19:28,940 Testez-le, voyez si nous avons le temps de s'estomper. 441 00:19:28,940 --> 00:19:32,570 Alors, je monte, je passe à travers. 442 00:19:32,570 --> 00:19:34,070 On y va, on s'estompe 443 00:19:34,070 --> 00:19:36,340 complètement, puis on a cessé de s'estomper. 444 00:19:36,335 --> 00:19:37,985 Et très normalement. 445 00:19:37,985 --> 00:19:39,355 Donc, avec cela, 446 00:19:39,350 --> 00:19:40,500 j'espère que vous apprécierez. 447 00:19:40,500 --> 00:19:42,950 Assurez-vous de valider nos modifications. 448 00:19:42,950 --> 00:19:46,740 Stage tous valident les modifications. 449 00:19:47,230 --> 00:19:51,070 créé une image décolorée en entrant et en sortant 450 00:19:51,065 --> 00:19:56,845 Vous avez créé une image décolorée en entrant et en sortant à l'aide d'innombrables. 451 00:19:56,840 --> 00:19:58,000 Commettez les modifications. 452 00:19:57,995 --> 00:20:02,735 J'espère que ça vous plaira et je vous verrai dans la prochaine vidéo.