1 00:00:02,290 --> 00:00:09,430 Alors maintenant que la logique générale du jeu fonctionne, concentrons-nous davantage sur la finition de ce style et également sur l'ajout 2 00:00:09,700 --> 00:00:16,180 de nos propres polices personnalisées et une belle petite image sur le jeu sur l'écran parce que travailler 3 00:00:16,180 --> 00:00:23,530 avec des images et travailler avec des polices personnalisées est une chose typique dans les temps modernes. le développement d'applications bien sûr, 4 00:00:23,530 --> 00:00:30,520 vous voulez rarement vous en tenir aux polices système par défaut et vous avez rarement une application sans aucune image. 5 00:00:30,520 --> 00:00:37,390 Commençons donc avec les polices personnalisées et dans une expo React Native, l'ajout de polices est super trivial. 6 00:00:38,200 --> 00:00:40,820 Dans votre dossier de projet, dans 7 00:00:40,870 --> 00:00:47,000 le dossier des ressources, créons un dossier de polices. Vous pouvez le stocker n'importe où, mais j'aime le 8 00:00:47,050 --> 00:00:52,560 garder dans le dossier des actifs pour garder mes actifs comme les polices et les images organisées. 9 00:00:53,080 --> 00:00:58,270 Donc ici, dans le dossier des polices, je veux sans surprise gérer mes polices et pour 10 00:00:58,270 --> 00:01:03,460 cela, vous trouverez ci-joint un fichier zip avec deux polices que vous pouvez simplement extraire puis 11 00:01:03,560 --> 00:01:06,730 faire glisser et déposer ici, c'est OpenSans-Bold et OpenSans-Regular, 12 00:01:06,730 --> 00:01:12,790 donc ces deux polices sont attachées à cette vidéo dans un fichier zip, extraites et faites-les glisser dans le 13 00:01:12,790 --> 00:01:14,100 dossier des polices. 14 00:01:14,110 --> 00:01:22,390 Maintenant, avec cela, ces polices sont généralement disponibles, mais pour les utiliser, vous devez encore en configurer davantage. 15 00:01:22,460 --> 00:01:29,780 Vous devez accéder à votre application. fichier js et essentiellement demander à React Native et expo de charger 16 00:01:29,810 --> 00:01:37,920 ces polices, donc de les utiliser. Pour cela dans l'application. fichier js et j'utilise l'application. fichier js parce que c'est 17 00:01:38,010 --> 00:01:43,560 le premier fichier qui est chargé ou qui est exécuté pour ainsi dire quand l'application démarre et 18 00:01:43,590 --> 00:01:51,060 que vous voulez charger vos polices lorsque l'application démarre, là-dedans, vous devez ajouter une importation et cette importation est que vous importez 19 00:01:51,060 --> 00:01:58,630 tout en tant que police, bien que ce nom dépend de vous, mais généralement, vous utilisez la police ici, à partir de expo-font. 20 00:01:59,140 --> 00:02:07,380 Donc, expo-font est un package qui vous donne des utilitaires de police, donc des utilitaires qui vous permettent de charger des polices et d'importer 21 00:02:07,800 --> 00:02:13,140 tout de ce package et de le regrouper dans cet objet de police, c'est ce que 22 00:02:13,140 --> 00:02:15,800 nous faisons ici. Maintenant, pour charger 23 00:02:15,950 --> 00:02:21,920 des polices, j'ajouterai une nouvelle fonction en dehors du composant fonctionnel car cette fonction n'a 24 00:02:21,920 --> 00:02:26,580 pas besoin d'être recréée pour chaque cycle de rendu de composant. 25 00:02:26,610 --> 00:02:27,860 Maintenant, je vais le 26 00:02:27,870 --> 00:02:29,060 nommer chercher les 27 00:02:29,330 --> 00:02:31,190 polices, le nom dépend de vous 28 00:02:34,010 --> 00:02:38,640 et dans cette fonction ici, j'appellerai la police. loadAsync. 29 00:02:38,710 --> 00:02:43,810 Maintenant, c'est une fonction ou une méthode sur le package de polices que nous importons ici qui 30 00:02:43,810 --> 00:02:52,050 vous permet de charger des polices et ce que vous passez pour charger async est un objet où vous dites à Expo et donc React Native de 31 00:02:52,120 --> 00:02:57,010 toutes les polices que vous souhaitez charge. Vous faites cela en utilisant une clé où 32 00:02:57,310 --> 00:03:02,710 vous choisissez n'importe quel nom de votre choix, comme open-sans et vous pourrez plus tard utiliser ces polices par 33 00:03:02,710 --> 00:03:06,400 ces noms, alors ici ouvrez sans parce que ma police s'appelle open sans. 34 00:03:06,400 --> 00:03:10,510 Donc, ici, c'est open sans et ensuite vous ajoutez require, c'est 35 00:03:10,840 --> 00:03:17,180 une fonctionnalité de langage que Javascript propose où vous pointez sur le chemin où cette police est stockée. 36 00:03:17,200 --> 00:03:18,310 C'est un chemin 37 00:03:18,340 --> 00:03:20,820 relatif, donc ici je pointe vers le dossier des 38 00:03:20,850 --> 00:03:28,760 actifs, le dossier des polices et ensuite c'est l'OpenSans-Bold, pas en gras mais régulier. fichier ttf et maintenant je vais ajouter un 39 00:03:28,760 --> 00:03:36,210 deuxième élément ici à cet objet que je passe pour charger async et qui pourrait être open-sans-bold. 40 00:03:36,210 --> 00:03:40,660 Maintenant, ces noms vous appartiennent totalement et je souhaite charger la version en gras. 41 00:03:41,290 --> 00:03:48,160 Donc, avec cela, nous disons à React Native à la fin où nos polices vivent, où ces fichiers de polices vivent et à quels noms nous voulons 42 00:03:48,160 --> 00:03:56,650 les mapper et nous pouvons plus tard utiliser ces noms pour affecter ces polices au texte. Maintenant, charger async renvoie en fait une promesse, ce qui signifie que cela 43 00:03:56,770 --> 00:04:03,550 prendra un peu plus de temps, pas très long, mais il ne les chargera pas instantanément et je retournerai cette promesse ici 44 00:04:03,550 --> 00:04:09,360 à l'intérieur des polices fetch afin que chaque fois que nous appelons des polices fetch, nous pouvons attendre 45 00:04:09,360 --> 00:04:15,600 pour que cette promesse soit résolue avant de continuer. Maintenant, où 46 00:04:15,600 --> 00:04:19,610 voulons-nous récupérer nos polices? 47 00:04:19,670 --> 00:04:26,720 Eh bien, nous pourrions charger manuellement nos polices ici, nous pourrions par exemple appeler des polices de récupération comme celle-ci et cela irait de l'avant et 48 00:04:26,720 --> 00:04:28,180 récupérer nos polices, mais le 49 00:04:28,190 --> 00:04:34,220 problème est que nous continuerions à afficher et nous finirions par rendre notre contenu et si n'importe où dans le contenu, nous utilisons 50 00:04:34,220 --> 00:04:38,190 du texte qui essaie d'utiliser une telle police, si la police n'a pas encore 51 00:04:38,300 --> 00:04:43,850 été chargée et comme je l'ai dit, cela ne prendra que quelques millisecondes mais toujours pour le premier cycle de rendu, 52 00:04:43,850 --> 00:04:50,660 la police n'a peut-être pas été chargée, puis nous obtiendrions une erreur. Il n'est donc pas recommandé de charger 53 00:04:50,660 --> 00:04:55,400 nos polices de cette manière, cela ne fonctionnera probablement pas. 54 00:04:55,430 --> 00:05:03,310 Au lieu de cela, il existe un composant spécial que vous pouvez utiliser, il vous aide à charger vos polices. Vous importez ce composant 55 00:05:03,310 --> 00:05:10,450 depuis expo et le nom de ce composant est AppLoading. 56 00:05:10,460 --> 00:05:17,480 Maintenant, c'est un composant qui prolongera essentiellement l'écran de chargement par défaut, les utilisateurs de l'écran de démarrage voient de 57 00:05:17,570 --> 00:05:24,860 toute façon lorsque l'application se lance, il prolongera cet écran pour rester actif jusqu'à ce qu'une certaine tâche de votre choix soit 58 00:05:24,860 --> 00:05:26,150 effectuée, comme par 59 00:05:26,150 --> 00:05:29,610 exemple jusqu'à ce que la récupération des polices soit terminé. 60 00:05:29,960 --> 00:05:35,180 Donc AppLoading c'est, dans le composant app, nous devons juste nous assurer maintenant 61 00:05:35,190 --> 00:05:41,520 que nous rendons ce composant au lieu de notre contenu réel tant que nous n'avons pas encore 62 00:05:41,520 --> 00:05:43,650 chargé nos polices ou tant 63 00:05:43,740 --> 00:05:49,000 que nous n'avons pas fini de charger quoi que ce soit nous voulions charger. 64 00:05:49,120 --> 00:05:55,390 Maintenant, ce qui est cool, c'est que nous pouvons utiliser state pour cela et commencer avec une valeur 65 00:05:55,390 --> 00:06:04,240 initiale de false parce que l'état que je veux gérer ici est les données chargées ou tout ce que vous voulez appeler et définir les données chargées. 66 00:06:04,350 --> 00:06:11,880 Maintenant, ici, je veux vérifier si les données chargées ne sont pas vraies, d'où le point d'exclamation, alors je sais que les données n'ont pas encore 67 00:06:11,880 --> 00:06:16,760 été chargées et c'est le cas au départ et dans ce cas, je ne vais même pas 68 00:06:16,920 --> 00:06:17,580 continuer avec 69 00:06:17,640 --> 00:06:25,170 mon autre logique , à la place pour ce composant fonctionnel, je retournerai immédiatement le composant AppLoading en tant que contenu de l'application, car je ne 70 00:06:25,170 --> 00:06:25,610 veux 71 00:06:25,620 --> 00:06:32,340 pas rendre d'autre contenu si nous continuons à charger nos données. Maintenant, AppLoading est un composant provenant 72 00:06:32,340 --> 00:06:40,740 d'Expo qui prend un accessoire de démarrage asynchrone où nous pointons l'opération que nous voulons démarrer lors de son 73 00:06:40,740 --> 00:06:46,200 premier rendu et c'est bien sûr notre fonction de récupération de polices. 74 00:06:46,200 --> 00:06:49,480 Alors ici, je pointe sur les polices de récupération, sur cette fonction. 75 00:06:49,500 --> 00:06:51,290 Maintenant important, a) cela doit 76 00:06:51,630 --> 00:06:57,420 être une fonction que vous passez ici et b) ce doit être une fonction qui renvoie 77 00:06:57,700 --> 00:07:01,980 une promesse car expo écoutera automatiquement cette promesse pour vous et lorsque 78 00:07:01,980 --> 00:07:09,240 la promesse se résoudra, elle saura que le chargement est fait et il appellera alors tout ce que vous passez 79 00:07:09,240 --> 00:07:10,770 ici à onFinish. 80 00:07:10,770 --> 00:07:17,530 Donc, ici, vous devez passer une fonction qui définit ensuite les données chargées sur true. 81 00:07:17,610 --> 00:07:23,160 Donc, cette fonction ici sera exécutée pour vous lorsque cette opération sera terminée et pour expo 82 00:07:23,160 --> 00:07:24,120 de savoir 83 00:07:24,120 --> 00:07:27,360 quand cela sera fait, cela devrait retourner une promesse. 84 00:07:27,380 --> 00:07:33,760 Alors maintenant, ces deux accessoires fonctionneront ensemble et nous mettons à jour les données chargées, cet état pour être vrai et 85 00:07:33,760 --> 00:07:39,410 donc pour ne pas rendre ce contenu mais pour continuer à exécuter ce code et éventuellement à rendre 86 00:07:39,410 --> 00:07:40,760 le contenu là-bas 87 00:07:41,060 --> 00:07:47,810 lorsque la récupération de nos polices est terminée et vous pourrait effectuer n'importe quelle opération asynchrone ici, mais généralement, vous utilisez AppLoading 88 00:07:47,810 --> 00:07:50,690 pour charger certains actifs, comme des polices ou quelque 89 00:07:50,750 --> 00:07:56,030 chose comme ça, donc des actifs qui devraient être là au démarrage de l'application dont vous avez 90 00:07:56,030 --> 00:07:57,770 besoin immédiatement et généralement des polices. 91 00:07:57,870 --> 00:08:05,710 À présent, vous pouvez également ajouter un gestionnaire onError ici et ici, je vais simplement consigner l'objet d'erreur que 92 00:08:05,710 --> 00:08:07,050 nous obtenons 93 00:08:07,300 --> 00:08:14,470 également ici dans les cas où le chargement échoue. Bien sûr, vous ne voudrez peut-être pas simplement vous connecter, mais à la place, 94 00:08:14,470 --> 00:08:16,570 faites autre chose, montrez du contenu alternatif dans 95 00:08:16,570 --> 00:08:20,230 votre application, quelque chose comme ça. Ici, je vais simplement l'enregistrer car 96 00:08:20,230 --> 00:08:25,710 cela ne devrait pas échouer, les polices sont disponibles localement ici, ce qui devrait être chargeable sans problème. 97 00:08:25,760 --> 00:08:31,330 Maintenant, si nous enregistrons cela, notre application redémarre bien sûr et nous ne voyons aucune différence ici, notre écran de 98 00:08:31,400 --> 00:08:36,380 chargement ne prend pas vraiment plus de temps qu'avant car ce chargement est super rapide, il ne se 99 00:08:36,380 --> 00:08:37,820 produit tout simplement pas instantanément, 100 00:08:37,820 --> 00:08:39,830 c'est pourquoi nous avions besoin cette approche. 101 00:08:39,830 --> 00:08:41,240 Mais maintenant que nous avons 102 00:08:41,240 --> 00:08:43,440 chargé les polices, comment pouvons-nous les utiliser maintenant? 103 00:08:43,460 --> 00:08:48,980 Disons que nous voulons changer le début d'un nouveau titre de jeu ici pour utiliser notre police. Maintenant, pour cela, nous devons aller à 104 00:08:48,980 --> 00:08:57,390 l'écran de démarrage du jeu, où se trouve ce titre à la fin, ici, démarrer un nouveau jeu, il a le style de titre 105 00:08:57,390 --> 00:09:03,540 et donc dans la feuille de style ici sur le titre, nous pouvons maintenant définir famille de 106 00:09:03,630 --> 00:09:08,050 polices pour changer la famille de polices et définir ceci sur open-sans-bold 107 00:09:08,050 --> 00:09:09,270 par exemple et 108 00:09:09,270 --> 00:09:15,180 bien sûr l'identifiant que vous utilisez ici doit être un identifiant que vous avez chargé ici. 109 00:09:15,210 --> 00:09:17,800 Donc ici, j'ai open-sans-bold et open sans, je 110 00:09:17,850 --> 00:09:25,180 peux utiliser ces deux identifiants dans mon code n'importe où dans l'application lorsque je veux attribuer une police personnalisée et c'est exactement 111 00:09:25,180 --> 00:09:27,240 ce que je fais ici. 112 00:09:27,240 --> 00:09:32,940 Maintenant, vous voyez, qui a une police différente qui est en gras et au fait, si vous utilisez des polices personnalisées et que 113 00:09:32,940 --> 00:09:36,180 vous voulez une police en gras, vous devez la charger avec la famille 114 00:09:36,180 --> 00:09:42,180 de polices, vous ne pouvez pas définir le poids de la police. React Native le prend en charge, mais pour les polices personnalisées, expo pour le 115 00:09:42,180 --> 00:09:42,840 moment ne le 116 00:09:42,840 --> 00:09:47,790 prend pas en charge, vous devez simplement utiliser une famille de polices distincte, ce qui n'est pas vraiment un problème comme vous pouvez le voir.