1 00:00:02,290 --> 00:00:09,430 Portanto, agora que a lógica geral do jogo funciona, vamos nos concentrar mais em finalizar esse estilo e também 2 00:00:09,700 --> 00:00:16,180 em adicionar nossas próprias fontes personalizadas e uma bela imagem na tela do jogo porque 3 00:00:16,180 --> 00:00:23,530 trabalhar com imagens e trabalhar com fontes personalizadas é uma coisa típica da modernidade. É claro que no desenvolvimento 4 00:00:23,530 --> 00:00:30,520 de aplicativos, você raramente deseja manter as fontes padrão do sistema e raramente possui um aplicativo sem imagens. 5 00:00:30,520 --> 00:00:37,390 Portanto, vamos começar com fontes personalizadas e em uma exposição do React Native, adicionar fontes é super trivial. 6 00:00:38,200 --> 00:00:40,820 Na sua pasta de projeto, na 7 00:00:40,870 --> 00:00:47,000 pasta de ativos, vamos criar uma pasta de fontes. Porém, você pode armazená-lo em qualquer lugar, mas 8 00:00:47,050 --> 00:00:52,560 eu gosto de mantê-lo na pasta de ativos para manter meus ativos, como fontes e imagens organizadas. 9 00:00:53,080 --> 00:00:58,270 Então, aqui na pasta de fontes, eu surpreendentemente quero gerenciar minhas fontes e, para isso, 10 00:00:58,270 --> 00:01:03,460 anexado, você encontra um arquivo zip com duas fontes que você pode extrair e 11 00:01:03,560 --> 00:01:06,730 arrastar e soltar aqui, que é OpenSans-Bold e OpenSans-Regular, 12 00:01:06,730 --> 00:01:12,790 então essas duas fontes são anexadas a este vídeo em um arquivo zip, extraídas e arrastadas para a 13 00:01:12,790 --> 00:01:14,100 pasta de fontes. 14 00:01:14,110 --> 00:01:22,390 Agora, com isso, essas fontes geralmente estão disponíveis, mas para usá-las, você ainda precisa configurar mais. 15 00:01:22,460 --> 00:01:29,780 Você precisa ir para o seu aplicativo. js e basicamente instrua o React Native e o expo para 16 00:01:29,810 --> 00:01:37,920 carregar essas fontes, para usá-las. Para isso no aplicativo. arquivo js e estou usando o aplicativo. arquivo js porque esse é 17 00:01:38,010 --> 00:01:43,560 o primeiro arquivo carregado ou executado, por assim dizer, quando o aplicativo é iniciado 18 00:01:43,590 --> 00:01:51,060 e você deseja carregar suas fontes quando o aplicativo é iniciado; é preciso adicionar uma importação e essa importação é 19 00:01:51,060 --> 00:01:58,630 que você importa tudo como fonte, embora esse nome seja com você, mas normalmente você usa a fonte aqui, da expo-font. 20 00:01:59,140 --> 00:02:07,380 Portanto, expo-font é um pacote que fornece utilitários de fonte, portanto, utilitários que permitem carregar fontes e importar tudo 21 00:02:07,800 --> 00:02:13,140 desse pacote e agrupá-lo nesse objeto de fonte, é o que estamos 22 00:02:13,140 --> 00:02:15,800 fazendo aqui. Agora, para 23 00:02:15,950 --> 00:02:21,920 carregar fontes, adicionarei uma nova função fora do componente funcional, porque essa função 24 00:02:21,920 --> 00:02:26,580 não precisa ser recriada para cada ciclo de repetição de componente. 25 00:02:26,610 --> 00:02:27,860 Agora vou chamá-lo de 26 00:02:27,870 --> 00:02:29,060 buscar fontes, 27 00:02:29,330 --> 00:02:31,190 o nome é com você 28 00:02:34,010 --> 00:02:38,640 e nesta função aqui, chamarei fonte. loadAsync. 29 00:02:38,710 --> 00:02:43,810 Agora, esta é uma função que ou um método no pacote de fontes que estamos importando 30 00:02:43,810 --> 00:02:52,050 aqui que permite carregar fontes e o que você passa para carregar assíncrono é um objeto em que você informa à Expo e, portanto, reage ao Native 31 00:02:52,120 --> 00:02:57,010 sobre todas as fontes que deseja carga. Você faz isso usando uma chave na 32 00:02:57,310 --> 00:03:02,710 qual escolhe qualquer nome de sua escolha, como open-sans e, posteriormente, poderá usar essas fontes por esses 33 00:03:02,710 --> 00:03:06,400 nomes; portanto, aqui abra sans porque minha fonte é chamada open sans. 34 00:03:06,400 --> 00:03:10,510 Portanto, aqui está o sans aberto e, em seguida, você adiciona o require, 35 00:03:10,840 --> 00:03:17,180 esse é um recurso de linguagem que o Javascript oferece onde você aponta o caminho em que essa fonte está armazenada. 36 00:03:17,200 --> 00:03:18,310 Esse é um 37 00:03:18,340 --> 00:03:20,820 caminho relativo, então aqui aponto para a pasta assets, 38 00:03:20,850 --> 00:03:28,760 a pasta fonts e, em seguida, é o OpenSans-Bold, não em negrito, mas regular. arquivo ttf e agora vou adicionar um 39 00:03:28,760 --> 00:03:36,210 segundo item aqui a esse objeto que passo para carregar assíncrono e que pode ser aberto-sem-negrito. 40 00:03:36,210 --> 00:03:40,660 Agora, esses nomes são totalmente de sua responsabilidade e aqui quero carregar a versão em negrito. 41 00:03:41,290 --> 00:03:48,160 Então, com isso, estamos dizendo ao React Native no final onde vivem nossas fontes, onde esses arquivos de fonte vivem e para quais 42 00:03:48,160 --> 00:03:56,650 nomes queremos mapeá-los e, posteriormente, podemos usá-los para atribuir essas fontes ao texto. Agora, o load async realmente retorna uma promessa, o que significa que isso 43 00:03:56,770 --> 00:04:03,550 levará um pouco mais de tempo, não será muito longo, mas não será carregado instantaneamente e eu retornarei essa promessa aqui 44 00:04:03,550 --> 00:04:09,360 dentro das fontes de busca, para que sempre que chamamos de fontes de busca, possamos esperar para 45 00:04:09,360 --> 00:04:15,600 que essa promessa seja resolvida antes de continuarmos. Agora, onde 46 00:04:15,600 --> 00:04:19,610 queremos buscar nossas fontes? 47 00:04:19,670 --> 00:04:26,720 Bem, podemos carregar nossas fontes manualmente aqui, por exemplo, podemos chamar fontes de busca como essa e isso iria em frente e buscá-las, 48 00:04:26,720 --> 00:04:28,180 mas o problema é 49 00:04:28,190 --> 00:04:34,220 que continuaríamos renderizando e eventualmente renderizaríamos nosso conteúdo e, se em algum lugar do conteúdo, usamos texto que tenta 50 00:04:34,220 --> 00:04:38,190 usar essa fonte, se a fonte ainda não foi carregada e, como eu 51 00:04:38,300 --> 00:04:43,850 disse, levará apenas alguns milissegundos, mas ainda para o primeiro ciclo de renderização, a fonte pode não 52 00:04:43,850 --> 00:04:50,660 ter sido carregada e, em seguida, nós receberíamos um erro. Portanto, carregar nossas fontes assim 53 00:04:50,660 --> 00:04:55,400 não é recomendado, muito provavelmente não funcionará. 54 00:04:55,430 --> 00:05:03,310 Em vez disso, há um componente especial que você pode usar, que ajuda a carregar suas fontes. Você importa esse componente 55 00:05:03,310 --> 00:05:10,450 da expo e o nome desse componente é AppLoading. 56 00:05:10,460 --> 00:05:17,480 Agora esse é um componente que basicamente prolonga a tela de carregamento padrão, os usuários da tela inicial vêem de 57 00:05:17,570 --> 00:05:24,860 qualquer maneira quando o aplicativo é iniciado, prolonga essa tela para permanecer ativa até que uma determinada tarefa de sua 58 00:05:24,860 --> 00:05:26,150 escolha seja concluída, 59 00:05:26,150 --> 00:05:29,610 como, por exemplo, até a busca de fontes. feito. 60 00:05:29,960 --> 00:05:35,180 Portanto, no AppLoading, precisamos apenas garantir que renderizamos esse componente 61 00:05:35,190 --> 00:05:41,520 em vez do conteúdo real, desde que ainda não tenhamos carregado nossas 62 00:05:41,520 --> 00:05:43,650 fontes ou enquanto 63 00:05:43,740 --> 00:05:49,000 não carregarmos o que quer que seja nós queríamos carregar. 64 00:05:49,120 --> 00:05:55,390 Agora, o mais interessante é que podemos usar o estado para isso e começar com um valor 65 00:05:55,390 --> 00:06:04,240 inicial falso, porque o estado que quero gerenciar aqui é carregado de dados ou o que você quiser chamar e definir os dados carregados. 66 00:06:04,350 --> 00:06:11,880 Agora, aqui, quero verificar se os dados carregados não são verdadeiros, daí o ponto de exclamação, então eu sei que os dados ainda 67 00:06:11,880 --> 00:06:16,760 não foram carregados e esse é o caso inicialmente e, neste caso, nem vou 68 00:06:16,920 --> 00:06:17,580 continuar 69 00:06:17,640 --> 00:06:25,170 com minha outra lógica , em vez deste componente funcional, retornarei imediatamente o componente AppLoading como o conteúdo do aplicativo, basicamente porque 70 00:06:25,170 --> 00:06:32,340 não quero renderizar outro conteúdo se ainda estiver carregando nossos dados. 71 00:06:32,340 --> 00:06:40,740 Agora, o AppLoading é um componente proveniente da Expo, que adota um objeto assíncrono inicial, onde apontamos a operação que queremos iniciar quando isso é 72 00:06:40,740 --> 00:06:46,200 renderizado pela primeira vez e, é claro, essa é a nossa função de busca de fontes. 73 00:06:46,200 --> 00:06:49,480 Então, aqui, estou apontando para buscar fontes, nessa função. 74 00:06:49,500 --> 00:06:51,290 Agora importante: a) isso deve 75 00:06:51,630 --> 00:06:57,420 ser uma função que você passa aqui eb) deve ser uma função que retorna uma 76 00:06:57,700 --> 00:07:01,980 promessa porque a expo escutará automaticamente essa promessa para você e 77 00:07:01,980 --> 00:07:09,240 quando a promessa for resolvida, saberá que o carregamento é feito e, então, chamará o que você passar aqui 78 00:07:09,240 --> 00:07:10,770 para o onFinish. 79 00:07:10,770 --> 00:07:17,530 Então, aqui, você precisa passar uma função que realmente define os dados carregados como true. 80 00:07:17,610 --> 00:07:23,160 Portanto, esta função aqui será executada para você quando essa operação for concluída e, para que 81 00:07:23,160 --> 00:07:24,120 o expo 82 00:07:24,120 --> 00:07:27,360 descubra quando isso for feito, isso deve retornar uma promessa. 83 00:07:27,380 --> 00:07:33,760 Portanto, agora esses dois props trabalharão juntos e estamos atualizando os dados carregados, esse estado para ser verdadeiro e, portanto, 84 00:07:33,760 --> 00:07:39,410 para não renderizar esse conteúdo, mas para continuar com a execução desse código e, eventualmente, renderizar o 85 00:07:39,410 --> 00:07:40,760 conteúdo quando a 86 00:07:41,060 --> 00:07:47,810 busca de nossas fontes estiver concluída e você você pode executar qualquer operação assíncrona aqui, mas normalmente, você usa o AppLoading 87 00:07:47,810 --> 00:07:50,690 para carregar alguns ativos, como fontes ou qualquer coisa 88 00:07:50,750 --> 00:07:56,030 assim; portanto, os ativos que deveriam estar lá quando o aplicativo iniciar e que você precisa 89 00:07:56,030 --> 00:07:57,770 imediatamente e geralmente são fontes. 90 00:07:57,870 --> 00:08:05,710 Agora você também pode adicionar um manipulador onError aqui, a propósito e aqui. Vou apenas consolar o objeto de erro 91 00:08:05,710 --> 00:08:07,050 que também 92 00:08:07,300 --> 00:08:14,470 obtemos aqui nos casos em que o carregamento falha. Obviamente, você pode não apenas querer registrar isso, mas fazer outra 93 00:08:14,470 --> 00:08:16,570 coisa, mostrar algum conteúdo alternativo no 94 00:08:16,570 --> 00:08:20,230 seu aplicativo, algo assim. Aqui, apenas registrarei, porque isso 95 00:08:20,230 --> 00:08:25,710 não deve falhar, as fontes estão disponíveis localmente aqui, para que possam ser carregadas sem problemas. 96 00:08:25,760 --> 00:08:31,330 Agora, se salvarmos isso, é claro que nosso aplicativo é reiniciado e não vemos diferença aqui, nossa tela 97 00:08:31,400 --> 00:08:36,380 de carregamento também não leva mais tempo do que antes, porque esse carregamento é super rápido, 98 00:08:36,380 --> 00:08:37,820 simplesmente não acontece instantaneamente, 99 00:08:37,820 --> 00:08:39,830 é por isso que precisamos essa abordagem. 100 00:08:39,830 --> 00:08:41,240 Mas agora que 101 00:08:41,240 --> 00:08:43,440 carregamos as fontes, como podemos usá-las agora? 102 00:08:43,460 --> 00:08:48,980 Bem, digamos que queremos mudar nosso começo para um novo título de jogo aqui para usar nossa fonte. Agora, para isso, precisamos ir para a 103 00:08:48,980 --> 00:08:57,390 tela inicial do jogo, onde é o título do final, aqui, iniciar um novo jogo, ele tem o estilo do 104 00:08:57,390 --> 00:09:03,540 título e, portanto, na folha de estilo aqui no título, agora podemos definir família de 105 00:09:03,630 --> 00:09:08,050 fontes para alterar a família de fontes e defina-a como 106 00:09:08,050 --> 00:09:09,270 open-sans-bold por 107 00:09:09,270 --> 00:09:15,180 exemplo e, é claro, o identificador usado aqui deve ser um identificador carregado aqui. 108 00:09:15,210 --> 00:09:17,800 Então, aqui, eu tenho open-sans-bold e open sans, 109 00:09:17,850 --> 00:09:25,180 posso usar esses dois identificadores no meu código em qualquer lugar do aplicativo quando quiser atribuir uma fonte personalizada e é exatamente 110 00:09:25,180 --> 00:09:27,240 isso que estou fazendo aqui. 111 00:09:27,240 --> 00:09:32,940 Agora você vê, que tem uma fonte diferente em negrito e, a propósito, se você estiver usando fontes personalizadas 112 00:09:32,940 --> 00:09:36,180 e quiser uma fonte em negrito, precisará carregá-lo com a família 113 00:09:36,180 --> 00:09:42,180 de fontes, não poderá definir o peso da fonte. O React Native suporta isso, mas para fontes personalizadas, a expo no 114 00:09:42,180 --> 00:09:42,840 momento não 115 00:09:42,840 --> 00:09:47,790 suporta isso; basta usar uma família de fontes separada, o que não é realmente um problema, como você pode ver.