Bienvenue à mes collègues développeurs de jeux
dans une toute nouvelle vidéo.
Et celui-là, vous remarquerez que nous avons
la décoloration.
Et à quoi cela sert-il ?
Eh bien, si nous regardons ici,
nous avons une énorme boîte noire.
Et vous pouvez le voir maintenant.
Nous ne voyons rien dans le jeu.
Pourquoi est-ce que c'est ?
Que s'est-il passé ?
Que nous quittions le jeu ?
Pourquoi est-il si petit en ce moment ?
Pourquoi sommes-nous zoomés ?
Tellement de questions, si peu de réponses.
Si je lance le jeu,
vous remarquerez que nous commençons le niveau
en s'estompant de l'image noire.
Et si nous nous promenons,
vous pouvez voir que dès que nous entrons sur le portail,
non seulement nous ralentissons,
mais nous nous estompons,
puis nous nous estompons lorsque nous passons au niveau suivant.
Donc, ne perdons
plus de temps et nous allons échouer.
Oh, d'accord.
Nous sommes donc
train de passer d'un niveau à l'autre.
Nous avons l'effet d'échelle temporelle
où nous ralentissons tout.
La prochaine chose que nous voulons faire, c'est que nous voulons
avoir un effet de décoloration.
Donc, ce que nous voulons, c'est B1,
l'image ou le jeu entier s'estompe en noir.
Et puis, lorsque nous entrons dans un nouveau niveau,
nous voulons disparaître.
Allons-y, faisons-le.
La première chose que nous devons faire,
ou comment la décoloration sortante fonctionne-t-elle ?
Nous aurons ici une grande image noire qui s'estompera
puis disparaîtra au fur et à mesure que nous passerons de niveau à l'autre.
Il s'agit donc d'une image noire
et nous utilisons l'alpha dessus.
Alors, faisons-le.
Comment allons-nous ajouter une image dans Unity ?
Eh bien, nous avons besoin de quelque chose appelé une toile.
Je vais donc créer un canevas.
Je vais cliquer avec le bouton droit de la souris dans la hiérarchie,
aller à l'œil et trouver le campus.
Vous y allez. Nous avons maintenant un campus.
Si je double-clique dessus,
vous y allez, vous pouvez voir qu'il s'agit d'une toile énorme
et grande et vous vous demandez peut-être
pourquoi la toile est-elle si grande alors que notre jeu est si petit ?
C'est ainsi que Unity gère l'
utilisation de Canvas et l'ajout d'images.
Il vaut mieux jouer avec les images ici.
Au lieu de jouer dans les images,
écrivez-le et ayez tout devant
le joueur et les objets du jeu.
Il s'agit donc d'une meilleure façon ou
la façon dont l'unité utilise pour gérer les choses.
Vous pouvez également constater que nous avons
quelque chose qui s'appelle le système événementiel.
Et cela nous permet, par exemple,
d'avoir une sorte de bouton sur la toile.
Nous voulons cliquer dessus pour pouvoir
ajouter un système d'événements sous le Canvas,
faire un enfant et le conserver pour le moment.
Et ce système d'événements nous permet d'appuyer sur
boutons sur l'écran et de nous permettre
d'interagir avec le canevas.
Nous verrons comment cela fonctionne en un instant.
Mais pour l'instant, nous voulons entrer
dans le scaler de canevas ici.
Vous pouvez voir que nous pouvons évoluer en fonction de la taille de l'écran.
Et nous voulons changer cela de 100 à 1920 d'
ici là huit,
soit la taille de l'écran que
nous utilisons ou créons le jeu.
Appuyez sur Entrée.
Vous y allez. Maintenant, tout est fait.
Vous pouvez voir que nous avons la roulette à rayons et un élément
pour la toile, ce qui n'est pas si important.
Nous ne changerons rien de trop ici.
Nous voulons seulement nous assurer que le scaler de canevas
l' échelle de la taille de l'écran et nous voulons le faire 1920 par 1080.
Ok, super.
Maintenant que cela est fait,
étape suivante consiste à ajouter une image.
Je vais donc cliquer ici avec le bouton droit de la souris,
aller vers vous et trouver une image.
Maintenant, vous pouvez voir que nous avons
une image au milieu de
l'immense toile et je vais le faire,
c'est l'image qui s'estompe.
Mais même si nous l'avons sur la toile,
vous pouvez voir ici dans le jeu que
nous l'avons comme un petit bloc.
Et si je le déplace vers le haut,
vous remarquerez qu'il se trouve dans la partie supérieure du jeu,
et au milieu, c'est au
milieu que réside le joueur.
Et en bas à gauche, vous pouvez le voir.
Ce n'est donc pas même si l'image
en haut du jeu est énorme.
Mais vous pouvez voir que sur la toile,
c'est vraiment petit et il diminue.
C'est ainsi que nous représentons les choses dans Unity sur le canevas de l'interface utilisateur.
Maintenant, que va-t-on faire ?
Nous voulons que cette image remplit toute la toile,
rende complètement noire.
Ensuite, nous allons utiliser
la transparence qui s'y trouve pour s'estomper et s'estomper.
Tout d'abord, comment le rendre aussi grand que l'écran ?
Eh bien, il y a une option ici.
Vous pouvez voir que c'est l'outil rect.
Lorsque vous cliquez dessus, vous pouvez faire glisser
cette image et la rendre plus grande et plus petite.
Et vous remarquerez ici que nous avons
beaucoup de choses
à gérer et à modifier l'
apparence de l'image.
Nous pouvons également maintenir Alt enfoncé
et choisir l'un des coins, ou l'armée.
Choisissez l'un des coordinateurs et maintenez la touche Alt enfoncée.
Et vous pouvez voir que nous pouvons l'élargir
et tous les moyens.
Mais il existe une solution encore meilleure à cela.
Et c'est que si nous cliquons ici,
vous pouvez voir que nous avons quelques
options qui s'appellent l'ancre.
Par exemple, si je clique sur cette ancre,
l'image baissera grande et petite avec une
échelle de haut en bas en fonction de ce point ici, nous pouvons également cliquer sur
celle-ci où elle sera mise à l'échelle
fonction de l'ensemble du canevas.
Vous verrez ce que je veux dire par
mise à l'échelle lorsque nous avons besoin d'évoluer.
Mais que se passe-t-il si nous maintenons Alt enfoncé ?
Vous pouvez voir que nous pouvons agrandir l'image de cette façon.
Nous pouvons l'agrandir au milieu,
nous pouvons l'agrandir vers la gauche,
et nous pouvons l'agrandir tout autour
pour qu'il remplit tout le carré.
Tout le Canvas immédiatement.
Et vous pouvez voir que maintenant l'image a
complètement bloqué le jeu.
Et si je vais sur la toile et l'image qui s'estompe,
je peux changer la couleur ici même sur l'image,
et la rendre complètement noire.
Maintenant, comment allons-nous changer la transparence ?
Tout d'abord, nous pouvons le faire
ici pour pouvoir modifier l'alpha de l'image.
Mais il est difficile d'accéder à l'alpha
sur l'image car nous devons accéder à toutes les couleurs rouge,
vert et bleu.
D'une autre façon de le faire, c'est en ajoutant
quelque chose appelé un groupe de campus.
Donc, si je vais ici et que j'ajoute un groupe de canevas,
vous pouvez voir que j'ai la possibilité d'avoir Alpha.
Et si je déplace cet alpha
de 0 à un ou de un à 0,
vous pouvez voir à 0, il est complètement transparent.
À un moment donné, ce n'est pas le cas.
Et je peux bloquer la refonte.
Cela signifie que la refonte
signifie que chaque fois que je veux cliquer sur quelque chose,
cela peut aider à bloquer la refonte et
l'interactable cette image est-elle interactable ?
Disons que ce n'est pas le cas. Et voilà.
Notre objectif est donc maintenant de créer une animation.
À l'aide de cette animation, nous allons contrôler
le groupe de canevas alpha ici.
Ensuite, nous allons disparaître et disparaître à
chaque fois et à notre gain.
Cela étant expliqué,
je vais vous lancer un défi.
Et votre défi est de faire disparaître l'image.
Je vais donc vous expliquer
comment procéder étape par étape.
Tout d'abord, vous devrez créer
une animation pour le fondu
et le fondu et être noir
à transparent et disparaissant,
ce qui sera transparent au noir.
Vous devez créer une transition entre la transition entre
les deux animations en fonction d'
un déclencheur.
N'oubliez pas que nous avons créé
la transition basée sur un booléen.
Il est maintenant temps d'utiliser un déclencheur.
Vous devez ajouter un paramètre de déclenchement.
Il est évident que vous devez créer
un script UI Manager et l'ajouter au canevas.
Vous devrez créer une méthode
qui déclenche la décoloration.
Enfin, vous devez appeler cette méthode depuis
le chargement de Colton dans le gestionnaire de niveaux.
Nous connaissons donc presque toutes les étapes.
Vous ne savez peut-être pas comment régler un déclencheur.
C'est donc ce que vous devez chercher vous-même.
Et tout le reste, je crois que c'est quelque chose que
nous avons vécu avec testé.
N'oubliez pas que le fonctionnement de l'animation consiste à appuyer
sur le petit bouton rouge
de l'enregistrement de l'animation pour que l'information,
suspendre la vidéo dès maintenant et aller faire le Chavan.
Bon, bon retour.
La première chose que nous allons faire
c'est que nous allons entrer dans l'animation.
Je vais aller de l'avant et m'assurer
d'avoir l'image décolorée et de créer une animation.
Et maintenant, je peux aller dans les animations,
cliquer avec le bouton droit de la souris ici et créer l'image décolorée.
Je suis donc dans les animations des actifs et
ici je vais tout d'abord créer
la décoloration, la décoloration et l'enregistrer.
Maintenant, qu'avons-nous dit que le pistolet à décoloration devrait
être la décoloration en noir à transparent.
Ok, super. Combien de temps est-ce que je veux que cela prenne ?
Faisons donc environ 1,5 seconde.
Je vais donc cliquer sur le bouton Enregistrer.
Et qu'est-ce que j'ai dit encore, noir trop transparent.
Oups, ce n'est pas la clé que je cherchais.
Et où est-il ? Bon, de retour ici.
Nous commençons donc par le noir et à la fin, nous enregistrons.
Je veux ramener l'alpha à 0.
Que se passe-t-il maintenant lorsque je joue l'animation ?
Il commence en noir, puis s'estompe trop transparent.
Excellent.
La prochaine chose que je vais faire est de créer le fondu.
Alors, s'évanouit.
Et maintenant, nous commençons à 0
, puis nous entrons dans l'obscurité complète après 1 seconde.
Nous avons donc arrêté l'enregistrement,
lançons le jeu si transparent, fondu au noir.
Excellent.
Maintenant, la prochaine chose que nous allons ouvrir l'Animator.
Et ici, nous allons tout d'abord, d'accord,
donc la décoloration et la décoloration
signifient que nous passons du noir au transparent.
Cela devrait commencer dès que nous recommençons.
Donc, nous n'apparaissons pas seulement en mode jeu,
nous passons en mode jeu,
puis nous avons le fondu vers le noir qui créera
une transition ici.
Cette transition ne doit pas avoir
de temps de sortie et les paramètres doivent être un,
je veux dire que la durée de la transition doit être à 0.
Je vais créer un paramètre qui sera un déclencheur,
et je vais juste l'appeler Start, fondu.
Faites de cette capitale.
Vous y allez. Et ajoutez-le comme condition ici.
Excellent.
J'espère que vous avez fait toutes ces étapes.
Ce sont des choses que nous avons déjà
couvertes et déjà créées.
Et avant de passer à autre chose,
nous devons nous assurer que cette toile est également
présente au deuxième niveau Y ou au niveau 1.
Pourquoi ? Parce que si on passe au niveau 1,
où sont les scènes ?
Si nous passons au niveau 1, vous verrez
que nous n'avons pas de canevas,
sorte que nous ne pourrons pas s'estomper
lorsque nous commencerons le niveau 1 ou lorsque nous passerons au niveau 1.
Donc, au niveau 2,
je vais appeler cela le canevas de l'interface utilisateur Entrée.
Et je vais aller dans les Prefabs.
Où sont les préfabriqués ?
Et je vais créer et ici un dossier d'interface utilisateur.
Et ici, je vais faire glisser le campus de l'interface utilisateur.
Gardez ça.
Et maintenant, regardez à quel point les préfabriqués sont incroyables.
Eigen ne croit pas que nous en ayons parlé.
Mais si nous entrons dans les scènes du premier niveau,
nous pouvons immédiatement accéder à
interface utilisateur de Prefabs et ajouter un canevas et nos jeux.
Nous avons donc maintenant un canevas ici même
au niveau 1 et nous n' avons
plus eu à le créer à nouveau.
C'est la beauté d'avoir des préfabriqués.
C'est ce qui a été fait au niveau 2.
Voyons ce que nous avons ici.
Donc les animations jouent,
tout devrait fonctionner maintenant lorsque nous lançons notre jeu,
nous devrions avoir une décoloration et une animation.
Je dirige donc le jeu.
Vous y allez.
Vous pouvez donc voir que j'ai une décoloration en boucle dans l'animation.
Je vais donc entrer dans les animations,
trouver la décoloration et la décoloration, et
m'assurer qu'il n'y a pas de temps de boucle. Gardez ça.
Et maintenant, lorsque nous lançons le jeu et le second, nous
avons une décoloration d'un pouce.
Excellent.
Savez-vous pourquoi cela se produit ?
Eh bien, parce qu'à l'entrée,
première chose que nous faisons est de s'estomper.
C'est donc déjà prévu pour nous.
Maintenant, la prochaine chose que nous devons faire est de créer
le gestionnaire d'interface utilisateur et de l'ajouter au campus.
Je vais donc entrer dans mes scripts ici,
cliquer avec le bouton droit de la souris et créer un nouveau dossier pour l'interface utilisateur.
Nous changeons énormément le nom de ce dossier,
mais pour l'instant, allons créer un script C-sharp,
qui sera le gestionnaire d'interface utilisateur
ou aurait dû être dans le gestionnaire.
Et cela ne s'inquiète pas.
Attendez que cela soit compilé.
Passons ça aux gestionnaires.
Je crois que c'est du beurre ici ou peut-être pas.
Je ne sais pas. Cela dépend de vos préférences.
Je pense que dans le manager, c'est peut-être mieux.
Annulez ou non, gardons ça.
Gardons ça dans vos yeux.
Même s'il s'agit d'un gestionnaire, il le conservera dans l'interface utilisateur.
Je vais ouvrir le gestionnaire d'interface utilisateur,
ouvrir Visual Studio.
Et la première chose dont nous aurons
besoin, c'est une référence à l'image
que nous voulons revenir ici.
J'espère que ce n'était pas trop difficile car
il va s'agir d'un champ sérialisé,
qui est une image de type image.
Oh, il y a eu quelque chose que j'
espère que certains d'entre vous ont pu comprendre.
Si j'essayais d'utiliser l'image ici.
Vous remarquerez que je n'ai pas d'option pour cela.
Ce dont j'ai besoin, c'est que j'ai besoin d'utiliser
votre moteur Unity dot u i
, donc j'espère que ce n'était pas un problème énorme pour vous.
J'espère que vous avez trouvé cette erreur ou
trouvé cet inconvénient dans le défi et
vous avez essayé de trouver
la solution si vous ne l'avez pas fait, ne vous inquiétez pas.
C'était en mon nom.
J'aurais dû vous avertir à l'avance.
Ne vous inquiétez pas.
L'image du destin.
Certains d'entre vous pensent peut-être : Oui, pas de soucis,
bien sûr, juste ma confiance a été détruite.
Quoi qu'il en soit, qu'allons-nous faire dans
cette classe ici et dans le gestionnaire d'interface utilisateur ?
Eh bien, comme nous l'avons dit,
nous avons besoin d'une méthode.
Créez une méthode qui déclenche la décoloration et appelez
cette méthode à partir du coworking de chargement dans Level Manager.
Je vais donc m'assurer qu'il s'agit d'un public.
Je vais donc créer une image de fondu vide public.
Et ici, je vais aller de l' avant et accéder à
l'image pour qu'elle s'estompe.
Je vais y avoir un composant,
qui est l'animateur.
Et je vais mettre la gâchette.
Et ce déclencheur sera la
référence d'une chaîne au fondu Démarrer.
Et aujourd'hui, maintenant, copiez ceci ici,
collez-le ici, fermez-le, enregistrez-le.
Alors, que faisons-nous ?
Parce que nous avons créé l'animation
sur l'image réelle pour qu'elle s'estompe.
Vous pouvez voir que l'animateur est ici
sur cet objet de jeu.
L'un des composants de l'image à estomper.
Ce que nous faisons, c'est que nous accédons à l'animateur sur
l'image, puis nous définissons le déclencheur qui est lancé.
Ok, super.
Maintenant, la prochaine étape consiste à
l'appeler Level Manager.
Et il y a deux façons de le faire.
Nous pouvons soit aller de l'avant et trouver
l'objet du jeu, soit trouver le gestionnaire d'interface utilisateur.
Ou allons-y et créons une instance de cela.
Je vais créer un gestionnaire d'interface utilisateur statique public.
Par exemple. Gardez ça.
Et je vais commencer ici.
Et puis démarrez l'instance sera égale à cela.
Gardez ça.
Maintenant, dans le gestionnaire de niveau,
où devrions-nous mettre ça ?
Eh bien, je crois que dès que nous
atteignons ou dès que nous entrons dans le niveau de chargement.
Nous avons donc l'échelle temporelle à 0,2.
Je vais aller de l'avant et accéder au
gestionnaire d'interface utilisateur, l'instance.
Et je vais aller de l'avant et estomper l'image.
Maintenant, vous remarquerez quelque chose que parce que
nous avons dit l'échelle de temps à 0,2,
la décoloration de l'image sera
plus lente que ce que nous avons ici.
Essayons donc cela et voyons si cela fonctionne.
Si vous pensez que c'est un peu lent,
vous pouvez aller de l'avant et
ralentir la décoloration de l'image.
On y va donc.
Nous commençons, nous courons.
Et quand nous entrons sur ce portail ici, nous y allons.
Nous ralentissons et nous avons oublié d'ajouter un hé,
nous avons oublié d'ajouter la référence.
Vous pouvez voir ici l'erreur.
Si je double-clique dessus,
vous verrez que l'image du gestionnaire d'interface utilisateur s'estompe,
il y a quelque chose qui ne va pas. Qu'est-ce qui ne va pas ?
Eh bien, il n'y a pas de cas.
Ok, donc si je vais sur le canevas de l'interface utilisateur,
je remarquerais que je n'ai même pas ajouté le manager,
donc je ne suis pas sûr de ce qu'on appelle.
Faites-le glisser dans le gestionnaire d'interface utilisateur.
Assurez-vous que nous avons dit
l'image décolorée et appliquons les modifications.
Remarquez maintenant que le canevas
ce niveau n'avait pas de gestionnaire d'interface utilisateur, n'est-ce pas ?
Et c'est celui que nous avons utilisé dans le premier niveau.
Si je passe maintenant au premier niveau,
je clique sur le canevas de l'interface utilisateur.
Il dispose d'un gestionnaire d'interface utilisateur et l'image est déjà configurée.
Vous pouvez ainsi voir à nouveau la puissance de l'utilisation des applications de deuil.
Est-ce que c'est cool ?
Donc de retour au niveau pour lancer le jeu,
on s'estompe. Plus d'erreurs.
Nous montons, nous passons par le portail,
et nous y allons, nous ralentissons.
Nous avons ce sucre ici.
Il y a donc eu un léger problème ici.
Comme vous remarquez que nous n'avons même pas eu
le temps de s'estomper.
Je vais donc accéder à nouveau au fondu et à
l'image qui s'estompe.
Et où est-ce que c'est ?
Eh bien, cela dépendra de la durée ou
de l'échelle de temps que vous avez ici.
Je vais donc faire 0,5. Gardez ça.
Et au lieu de 1,5 seconde,
je vais faire le tour,
passons à 0,
peut-être 1 seconde ou 2,5.
Disons que c'est environ 40 ans du jeu.
Testez-le, voyez si nous avons le temps de s'estomper.
Alors, je monte, je passe à travers.
On y va, on s'estompe
complètement, puis on a cessé de s'estomper.
Et très normalement.
Donc, avec cela,
j'espère que vous apprécierez.
Assurez-vous de valider nos modifications.
Stage tous valident les modifications.
créé une image décolorée en entrant et en sortant
Vous avez créé une image décolorée en entrant et en sortant à l'aide d'innombrables.
Commettez les modifications.
J'espère que ça vous plaira et je vous verrai dans la prochaine vidéo.