1 00:00:02,290 --> 00:00:09,430 Quindi ora che la logica generale del gioco funziona, concentriamoci di più sul finire quello stile e anche 2 00:00:09,700 --> 00:00:16,180 sull'aggiunta dei nostri caratteri personalizzati e una piccola immagine sul gioco sullo schermo perché lavorare 3 00:00:16,180 --> 00:00:23,530 con le immagini e lavorare con i caratteri personalizzati è una cosa tipica dei moderni sviluppo di app, ovviamente, 4 00:00:23,530 --> 00:00:30,520 raramente si desidera attenersi ai caratteri di sistema predefiniti e raramente si dispone di un'app senza immagini. 5 00:00:30,520 --> 00:00:37,390 Quindi, iniziamo con caratteri personalizzati e in una mostra React Native, l'aggiunta di caratteri è super banale. 6 00:00:38,200 --> 00:00:40,820 Nella cartella del progetto, nella 7 00:00:40,870 --> 00:00:47,000 cartella delle risorse, creiamo una cartella di caratteri. Puoi archiviarlo ovunque però, ma mi piace 8 00:00:47,050 --> 00:00:52,560 tenerlo nella cartella delle risorse per mantenere le mie risorse come caratteri e immagini organizzate. 9 00:00:53,080 --> 00:00:58,270 Quindi qui nella cartella dei caratteri, non sorprende gestire i miei caratteri e per questo, 10 00:00:58,270 --> 00:01:03,460 in allegato trovi un file zip con due caratteri che puoi semplicemente estrarre e 11 00:01:03,560 --> 00:01:06,730 quindi trascinare e rilasciare qui, questo è OpenSans-Bold e 12 00:01:06,730 --> 00:01:12,790 OpenSans-Regular, quindi questi due caratteri sono allegati a questo video in un file zip, estratti e trascinarli nella 13 00:01:12,790 --> 00:01:14,100 cartella dei caratteri. 14 00:01:14,110 --> 00:01:22,390 Ora con ciò, questi caratteri sono generalmente disponibili ma per usarli, è ancora necessario configurarne di più. 15 00:01:22,460 --> 00:01:29,780 Devi andare alla tua app. js file e fondamentalmente istruire React Native ed expo a caricare 16 00:01:29,810 --> 00:01:37,920 questi font, così da usarli. Per quello nell'app. js file e sto usando l'app. js file perché questo è 17 00:01:38,010 --> 00:01:43,560 il primo file che viene caricato o che viene eseguito, per così dire quando si 18 00:01:43,590 --> 00:01:51,060 avvia l'app e si desidera caricare i caratteri all'avvio dell'app, è necessario aggiungere un'importazione e l'importazione è che si importa 19 00:01:51,060 --> 00:01:58,630 tutto come carattere, anche se il nome qui dipende da te, ma in genere si utilizza qui il carattere, da expo-font. 20 00:01:59,140 --> 00:02:07,380 Quindi expo-font è un pacchetto che ti offre utilità per i font, quindi utility che ti consentono di caricare i font e 21 00:02:07,800 --> 00:02:13,140 importare tutto da quel pacchetto e raggrupparlo insieme in questo oggetto font, ecco cosa 22 00:02:13,140 --> 00:02:15,800 stiamo facendo qui. Ora per caricare 23 00:02:15,950 --> 00:02:21,920 i caratteri, aggiungerò una nuova funzione al di fuori del componente funzionale perché non è 24 00:02:21,920 --> 00:02:26,580 necessario ricreare questa funzione per ogni ciclo di rendering del componente. 25 00:02:26,610 --> 00:02:27,860 Ora lo chiamerò 26 00:02:27,870 --> 00:02:29,060 fetch font, 27 00:02:29,330 --> 00:02:31,190 il nome dipende da te 28 00:02:34,010 --> 00:02:38,640 e in questa funzione chiamerò font. loadAsync. 29 00:02:38,710 --> 00:02:43,810 Ora questa è una funzione che o un metodo sul pacchetto di caratteri che stiamo importando 30 00:02:43,810 --> 00:02:52,050 qui che ti consente di caricare caratteri e ciò che passi per caricare asincrono è un oggetto in cui dici a Expo e quindi Reagisci nativo 31 00:02:52,120 --> 00:02:57,010 su tutti i caratteri che vuoi caricare. Puoi farlo usando una chiave in cui scegli 32 00:02:57,310 --> 00:03:02,710 un nome a tua scelta, come open-sans e in seguito sarai in grado di usare questi caratteri con questi 33 00:03:02,710 --> 00:03:06,400 nomi, quindi qui open sans perché il mio carattere si chiama open sans. 34 00:03:06,400 --> 00:03:10,510 Quindi qui è open sans e quindi aggiungi la richiesta, questa 35 00:03:10,840 --> 00:03:17,180 è una funzione linguistica che Javascript offre dove indichi il percorso in cui è memorizzato questo font. 36 00:03:17,200 --> 00:03:18,310 Questo è un 37 00:03:18,340 --> 00:03:20,820 percorso relativo, quindi qui indico la cartella delle 38 00:03:20,850 --> 00:03:28,760 risorse, la cartella dei caratteri e poi è OpenSans-Bold, non grassetto ma normale. ttf file e ora aggiungerò un secondo 39 00:03:28,760 --> 00:03:36,210 elemento qui a questo oggetto che passo per caricare asincrono e che potrebbe essere open-sans-bold. 40 00:03:36,210 --> 00:03:40,660 Ora questi nomi sono totalmente a te e lì voglio caricare la versione in grassetto. 41 00:03:41,290 --> 00:03:48,160 Quindi, alla fine, stiamo dicendo a React Native dove vivono i nostri caratteri, dove vivono questi file di caratteri e a quali nomi vogliamo 42 00:03:48,160 --> 00:03:56,650 mapparli e in seguito possiamo usare questi nomi per assegnare questi caratteri al testo. Ora il caricamento asincrono in realtà restituisce una promessa, il che significa che 43 00:03:56,770 --> 00:04:03,550 ciò richiederà un po 'più di tempo, non molto lungo ma non li caricherà istantaneamente e restituirò questa promessa qui 44 00:04:03,550 --> 00:04:09,360 all'interno dei caratteri di recupero in modo che ogni volta che chiamiamo caratteri di recupero, possiamo aspettare 45 00:04:09,360 --> 00:04:15,600 per questa promessa da risolvere prima di continuare. Ora, però, dove 46 00:04:15,600 --> 00:04:19,610 vogliamo recuperare i nostri caratteri? 47 00:04:19,670 --> 00:04:26,720 Bene, potremmo caricare manualmente i nostri caratteri qui, ad esempio potremmo chiamare i caratteri di recupero come questo e andare avanti e recuperare i nostri 48 00:04:26,720 --> 00:04:28,180 caratteri, ma il problema 49 00:04:28,190 --> 00:04:34,220 è che continueremmo a renderlo e alla fine renderemmo il nostro contenuto e se dovunque nel contenuto, usiamo il testo che 50 00:04:34,220 --> 00:04:38,190 tenta di usare un carattere del genere, se il carattere non è stato ancora 51 00:04:38,300 --> 00:04:43,850 caricato e, come ho già detto, ci vorranno solo un paio di millisecondi ma comunque per il primo ciclo di 52 00:04:43,850 --> 00:04:50,660 rendering, il carattere potrebbe non essere stato caricato, quindi avremmo un errore. Quindi non è consigliabile caricare i 53 00:04:50,660 --> 00:04:55,400 nostri caratteri in questo modo, molto probabilmente non funzionerà. 54 00:04:55,430 --> 00:05:03,310 Invece c'è un componente speciale che puoi usare, ti aiuta a caricare i tuoi caratteri. Si importa questo componente 55 00:05:03,310 --> 00:05:10,450 da Expo e il nome di quel componente è AppLoading. 56 00:05:10,460 --> 00:05:17,480 Ora che è un componente che prolungherà sostanzialmente la schermata di caricamento predefinita, gli utenti della schermata iniziale 57 00:05:17,570 --> 00:05:24,860 vedono comunque all'avvio dell'app, prolungherà questa schermata per rimanere attiva fino a quando non viene eseguita una determinata attività, 58 00:05:24,860 --> 00:05:26,150 ad esempio 59 00:05:26,150 --> 00:05:29,610 fino a quando non viene recuperato il carattere fatto. 60 00:05:29,960 --> 00:05:35,180 Quindi AppLoading è, nel componente app, dobbiamo solo assicurarci che 61 00:05:35,190 --> 00:05:41,520 ora rendiamo questo componente invece del nostro contenuto reale fintanto che non abbiamo ancora 62 00:05:41,520 --> 00:05:43,650 caricato i nostri caratteri 63 00:05:43,740 --> 00:05:49,000 o finché non abbiamo finito di caricare qualunque cosa volevamo caricare. 64 00:05:49,120 --> 00:05:55,390 Ora il bello è che possiamo usare lo stato per questo e iniziare con un 65 00:05:55,390 --> 00:06:04,240 valore iniziale di false perché lo stato che voglio gestire qui è caricato dati o come vuoi chiamarlo e impostare i dati caricati. 66 00:06:04,350 --> 00:06:11,880 Ora qui, voglio verificare se i dati caricati non sono veri, quindi il punto esclamativo, quindi so che i dati non sono stati 67 00:06:11,880 --> 00:06:16,760 ancora caricati e questo è il caso inizialmente e in questo caso, non continuerò 68 00:06:16,920 --> 00:06:17,580 nemmeno 69 00:06:17,640 --> 00:06:25,170 con la mia altra logica , invece per questo componente funzionale, restituirò immediatamente il componente AppLoading come contenuto dell'app essenzialmente perché non 70 00:06:25,170 --> 00:06:32,340 voglio visualizzare altri contenuti se stiamo ancora caricando i nostri dati. 71 00:06:32,340 --> 00:06:40,740 Ora AppLoading è un componente proveniente da Expo che prende un inizio asincrono prop in cui puntiamo all'operazione che vogliamo iniziare quando viene renderizzata 72 00:06:40,740 --> 00:06:46,200 per la prima volta e questa è ovviamente la nostra funzione di recupero dei caratteri. 73 00:06:46,200 --> 00:06:49,480 Quindi qui, sto puntando a recuperare i caratteri, a questa funzione. 74 00:06:49,500 --> 00:06:51,290 Ora importante, a) questa 75 00:06:51,630 --> 00:06:57,420 deve essere una funzione che passi qui eb) deve essere una funzione che restituisce 76 00:06:57,700 --> 00:07:01,980 una promessa perché expo ascolterà automaticamente quella promessa per te 77 00:07:01,980 --> 00:07:09,240 e quando la promessa si risolverà, saprà che il caricamento è fatto e quindi chiamerà qualunque cosa passi 78 00:07:09,240 --> 00:07:10,770 qui su onFinish. 79 00:07:10,770 --> 00:07:17,530 Quindi qui, è necessario passare una funzione che quindi imposta effettivamente i dati caricati su true. 80 00:07:17,610 --> 00:07:23,160 Quindi questa funzione qui verrà eseguita per te quando questa operazione verrà eseguita e affinché Expo 81 00:07:23,160 --> 00:07:24,120 possa scoprire 82 00:07:24,120 --> 00:07:27,360 quando ciò viene fatto, questo dovrebbe restituire una promessa. 83 00:07:27,380 --> 00:07:33,760 Quindi ora questi due oggetti di scena lavoreranno insieme e stiamo aggiornando i dati caricati, questo stato è vero e 84 00:07:33,760 --> 00:07:39,410 quindi per non rendere questo contenuto ma per procedere con l'esecuzione di questo codice e infine rendere il 85 00:07:39,410 --> 00:07:40,760 contenuto laggiù quando 86 00:07:41,060 --> 00:07:47,810 il recupero dei nostri caratteri è fatto e tu potrebbe eseguire qualsiasi operazione asincrona qui, ma in genere si utilizza AppLoading per 87 00:07:47,810 --> 00:07:50,690 caricare alcune risorse, come i caratteri o qualcosa del 88 00:07:50,750 --> 00:07:56,030 genere, quindi le risorse che dovrebbero essere presenti all'avvio dell'app di cui hai bisogno immediatamente e 89 00:07:56,030 --> 00:07:57,770 in genere che sono i caratteri. 90 00:07:57,870 --> 00:08:05,710 Ora puoi anche aggiungere un gestore onError qui a proposito e qui, accederò semplicemente alla console l'oggetto errore che 91 00:08:05,710 --> 00:08:07,050 otteniamo anche 92 00:08:07,300 --> 00:08:14,470 qui nei casi in cui il caricamento non riesce. Naturalmente, potresti non voler solo registrare questo, ma invece, fare qualcos'altro, 93 00:08:14,470 --> 00:08:16,570 mostrare alcuni contenuti alternativi nella tua 94 00:08:16,570 --> 00:08:20,230 app, qualcosa del genere. Qui accederò perché non 95 00:08:20,230 --> 00:08:25,710 dovrebbe fallire, i caratteri sono disponibili localmente qui, quindi dovrebbero essere caricabili senza problemi. 96 00:08:25,760 --> 00:08:31,330 Ora se lo salviamo, la nostra app si riavvia ovviamente e non vediamo alcuna differenza qui, anche la 97 00:08:31,400 --> 00:08:36,380 nostra schermata di caricamento non richiede davvero più tempo come prima perché quel caricamento è super 98 00:08:36,380 --> 00:08:37,820 veloce, non si verifica 99 00:08:37,820 --> 00:08:39,830 immediatamente, ecco perché ci serviva questo approccio. 100 00:08:39,830 --> 00:08:41,240 Ma ora abbiamo 101 00:08:41,240 --> 00:08:43,440 caricato i caratteri, come possiamo ora usarli? 102 00:08:43,460 --> 00:08:48,980 Bene diciamo che vogliamo cambiare il nostro inizio di un nuovo titolo di gioco qui per usare il nostro carattere. Ora, per questo, dobbiamo andare alla schermata 103 00:08:48,980 --> 00:08:57,390 di inizio del gioco che è dove vive questo titolo alla fine, qui, inizia un nuovo gioco, ha lo stile del 104 00:08:57,390 --> 00:09:03,540 titolo e quindi giù nel foglio di stile qui sul titolo, ora possiamo impostare famiglia di 105 00:09:03,630 --> 00:09:08,050 caratteri per cambiare la famiglia di caratteri e impostarla su 106 00:09:08,050 --> 00:09:09,270 open-sans-bold per 107 00:09:09,270 --> 00:09:15,180 esempio e, naturalmente, l'identificatore che usi qui deve essere un identificatore che hai caricato qui. 108 00:09:15,210 --> 00:09:17,800 Quindi qui, ho open-sans-bold e open sans, 109 00:09:17,850 --> 00:09:25,180 posso usare questi due identificatori nel mio codice ovunque nell'app quando voglio assegnare un carattere personalizzato ed è proprio 110 00:09:25,180 --> 00:09:27,240 quello che sto facendo qui. 111 00:09:27,240 --> 00:09:32,940 Ora vedi, che ha un carattere diverso che è grassetto e comunque, se stai usando caratteri personalizzati e 112 00:09:32,940 --> 00:09:36,180 vuoi un carattere grassetto, devi caricarlo con la famiglia di 113 00:09:36,180 --> 00:09:42,180 caratteri, non puoi impostare il peso del carattere. React Native supporta questo, ma per i caratteri personalizzati, attualmente Expo 114 00:09:42,180 --> 00:09:42,840 non supporta 115 00:09:42,840 --> 00:09:47,790 questo, invece devi semplicemente usare una famiglia di caratteri separata che non è davvero un problema come puoi vedere.