1 00:00:02,290 --> 00:00:09,430 Jadi sekarang setelah logika permainan umum bekerja, mari kita lebih fokus pada menyelesaikan gaya itu dan juga 2 00:00:09,700 --> 00:00:16,180 menambahkan font khusus kita sendiri dan gambar kecil yang menyenangkan pada permainan di layar 3 00:00:16,180 --> 00:00:23,530 karena bekerja dengan gambar dan bekerja dengan font khusus adalah hal yang khas di modern pengembangan aplikasi tentu 4 00:00:23,530 --> 00:00:30,520 saja, Anda jarang ingin tetap menggunakan font sistem default dan jarang Anda memiliki aplikasi tanpa gambar. 5 00:00:30,520 --> 00:00:37,390 Jadi karena itu mari kita mulai dengan font khusus dan dalam pameran React Native, menambahkan font sangat sepele. 6 00:00:38,200 --> 00:00:40,820 Di folder proyek Anda, di 7 00:00:40,870 --> 00:00:47,000 folder aset, mari kita buat folder font. Anda dapat menyimpannya di mana saja tetapi 8 00:00:47,050 --> 00:00:52,560 saya suka menyimpannya di folder aset untuk menjaga aset saya seperti font dan gambar terorganisir. 9 00:00:53,080 --> 00:00:58,270 Jadi di sini di folder font, saya tidak heran ingin mengelola font saya dan 10 00:00:58,270 --> 00:01:03,460 untuk itu, terlampir Anda menemukan file zip dengan dua font yang bisa Anda ekstrak 11 00:01:03,560 --> 00:01:06,730 lalu drag dan drop ke sini, itu OpenSans-Bold 12 00:01:06,730 --> 00:01:12,790 dan OpenSans-Regular, jadi dua font ini dilampirkan ke video ini dalam file zip, diekstraksi dan seret ke 13 00:01:12,790 --> 00:01:14,100 dalam folder font. 14 00:01:14,110 --> 00:01:22,390 Sekarang dengan itu, font-font ini umumnya tersedia tetapi untuk menggunakannya, Anda masih perlu mengkonfigurasi lebih banyak. 15 00:01:22,460 --> 00:01:29,780 Anda harus pergi ke aplikasi Anda. File js dan pada dasarnya menginstruksikan React Native dan expo untuk 16 00:01:29,810 --> 00:01:37,920 memuat font-font ini, jadi gunakan saja. Untuk itu di dalam aplikasi. File js dan saya menggunakan aplikasi. File js karena itu 17 00:01:38,010 --> 00:01:43,560 adalah file pertama yang dimuat atau yang dieksekusi untuk mengatakan kapan aplikasi dimulai dan 18 00:01:43,590 --> 00:01:51,060 Anda ingin memuat font Anda ketika aplikasi dimulai, di sana, Anda perlu menambahkan impor dan impor itu adalah Anda 19 00:01:51,060 --> 00:01:58,630 mengimpor semuanya sebagai font, meskipun nama di sini terserah Anda, tetapi biasanya, Anda menggunakan font di sini, dari expo-font. 20 00:01:59,140 --> 00:02:07,380 Jadi expo-font adalah paket yang memberi Anda utilitas font, sehingga utilitas yang memungkinkan Anda memuat font dan Anda mengimpor semuanya 21 00:02:07,800 --> 00:02:13,140 dari paket itu dan menggabungkannya bersama-sama dalam objek font ini, itulah yang kami 22 00:02:13,140 --> 00:02:15,800 lakukan di sini. Sekarang untuk 23 00:02:15,950 --> 00:02:21,920 memuat font, saya akan menambahkan fungsi baru di luar komponen fungsional karena fungsi 24 00:02:21,920 --> 00:02:26,580 ini tidak perlu diciptakan kembali untuk setiap siklus rerender komponen. 25 00:02:26,610 --> 00:02:27,860 Sekarang saya akan beri 26 00:02:27,870 --> 00:02:29,060 nama mengambil font, 27 00:02:29,330 --> 00:02:31,190 nama terserah Anda dan dalam fungsi 28 00:02:34,010 --> 00:02:38,640 ini di sini, saya akan memanggil font. loadAsync. 29 00:02:38,710 --> 00:02:43,810 Sekarang ini adalah fungsi yang atau metode pada paket font yang kami impor di sini 30 00:02:43,810 --> 00:02:52,050 yang memungkinkan Anda untuk memuat font dan apa yang Anda lewati untuk memuat async adalah objek di mana Anda memberi tahu Expo dan karenanya Bereaksi Asli 31 00:02:52,120 --> 00:02:57,010 tentang semua font yang ingin Anda beban. Anda melakukan ini dengan menggunakan kunci di 32 00:02:57,310 --> 00:03:02,710 mana Anda memilih nama pilihan Anda, seperti open-sans dan nantinya Anda akan dapat menggunakan font ini dengan nama-nama 33 00:03:02,710 --> 00:03:06,400 ini, jadi di sini buka sans karena font saya disebut open sans. 34 00:03:06,400 --> 00:03:10,510 Jadi di sini itu open sans dan kemudian Anda tambahkan 35 00:03:10,840 --> 00:03:17,180 harus, itu fitur bahasa yang ditawarkan Javascript di mana Anda menunjuk jalur tempat font ini disimpan. 36 00:03:17,200 --> 00:03:18,310 Itu jalur relatif, 37 00:03:18,340 --> 00:03:20,820 jadi di sini saya arahkan ke folder 38 00:03:20,850 --> 00:03:28,760 aset, folder font dan kemudian itu adalah OpenSans-Bold, bukan huruf tebal tapi teratur. File ttf dan sekarang saya akan menambahkan item 39 00:03:28,760 --> 00:03:36,210 kedua di sini untuk objek ini saya lewati untuk memuat async dan itu bisa berupa open-sans-bold. 40 00:03:36,210 --> 00:03:40,660 Sekarang nama-nama ini sepenuhnya terserah Anda dan di sana saya ingin memuat versi cetak tebal. 41 00:03:41,290 --> 00:03:48,160 Jadi dengan itu, kita memberi tahu React Native pada akhirnya di mana font kita tinggal, di mana file font ini tinggal dan ke nama mana kita 42 00:03:48,160 --> 00:03:56,650 ingin memetakannya dan nantinya kita bisa menggunakan nama-nama ini untuk menetapkan font-font ini ke teks. Sekarang memuat async benar-benar mengembalikan janji, yang berarti bahwa ini akan memakan 43 00:03:56,770 --> 00:04:03,550 waktu sedikit lebih lama, tidak super lama tetapi tidak akan memuat ini secara instan dan saya akan mengembalikan janji ini 44 00:04:03,550 --> 00:04:09,360 di sini di dalam mengambil font sehingga setiap kali kita memanggil mengambil font, kita bisa menunggu 45 00:04:09,360 --> 00:04:15,600 untuk janji ini untuk diselesaikan sebelum kita melanjutkan. Sekarang di mana 46 00:04:15,600 --> 00:04:19,610 kita ingin mengambil font kita? 47 00:04:19,670 --> 00:04:26,720 Yah kita bisa memuat font kita secara manual di sini, misalnya kita dapat memanggil mengambil font seperti ini dan itu akan melanjutkan dan 48 00:04:26,720 --> 00:04:28,180 mengambil font kita tetapi 49 00:04:28,190 --> 00:04:34,220 masalahnya adalah, kita akan terus membuat dan akhirnya kita akan membuat konten kita dan jika ada di mana pun dalam 50 00:04:34,220 --> 00:04:38,190 konten, kami menggunakan teks yang mencoba menggunakan font seperti itu, jika font tersebut 51 00:04:38,300 --> 00:04:43,850 belum dimuat dan seperti yang saya katakan, itu akan memakan waktu hanya beberapa milidetik tetapi masih untuk siklus 52 00:04:43,850 --> 00:04:50,660 render pertama, font mungkin belum dimuat, lalu kami akan mendapatkan kesalahan. Jadi memuat font kita seperti 53 00:04:50,660 --> 00:04:55,400 ini tidak disarankan, kemungkinan besar tidak akan berfungsi. 54 00:04:55,430 --> 00:05:03,310 Alih-alih ada komponen khusus yang bisa Anda gunakan, ada baiknya Anda memuat font Anda. Anda mengimpor komponen ini 55 00:05:03,310 --> 00:05:10,450 dari expo dan nama komponen itu adalah AppLoading. 56 00:05:10,460 --> 00:05:17,480 Nah, itu komponen yang pada dasarnya akan memperpanjang layar pemuatan default, pengguna layar splash melihat 57 00:05:17,570 --> 00:05:24,860 kapan saja ketika aplikasi diluncurkan, itu akan memperpanjang layar ini untuk tetap aktif sampai tugas tertentu 58 00:05:24,860 --> 00:05:26,150 pilihan Anda 59 00:05:26,150 --> 00:05:29,610 selesai, seperti misalnya sampai mengambil font adalah selesai 60 00:05:29,960 --> 00:05:35,180 Jadi AppLoading, dalam komponen aplikasi, kita hanya harus memastikan sekarang 61 00:05:35,190 --> 00:05:41,520 bahwa kita membuat komponen ini alih-alih konten kita yang sebenarnya selama kita belum 62 00:05:41,520 --> 00:05:43,650 memuat font kita 63 00:05:43,740 --> 00:05:49,000 atau selama kita belum selesai memuat apa pun kami ingin memuat. 64 00:05:49,120 --> 00:05:55,390 Sekarang yang keren adalah, kita dapat menggunakan status untuk itu dan mulai dengan nilai awal false 65 00:05:55,390 --> 00:06:04,240 karena keadaan yang ingin saya kelola di sini adalah data yang dimuat atau apa pun yang Anda ingin panggil dan atur data yang dimuat. 66 00:06:04,350 --> 00:06:11,880 Sekarang di sini, saya ingin memeriksa apakah data yang dimuat tidak benar, maka tanda seru, maka saya tahu data belum dimuat dan itulah 67 00:06:11,880 --> 00:06:16,760 yang terjadi pada awalnya dan dalam hal ini, saya bahkan tidak akan melanjutkan dengan 68 00:06:16,920 --> 00:06:17,580 logika 69 00:06:17,640 --> 00:06:25,170 saya yang lain , sebagai gantinya untuk komponen fungsional ini, saya akan segera mengembalikan komponen AppLoading sebagai konten aplikasi pada dasarnya karena saya 70 00:06:25,170 --> 00:06:32,340 tidak ingin merender konten lain jika kami masih memuat data kami. 71 00:06:32,340 --> 00:06:40,740 Sekarang AppLoading adalah komponen yang berasal dari Expo yang mengambil prop async mulai di mana kita menunjuk pada operasi yang ingin kita 72 00:06:40,740 --> 00:06:46,200 mulai ketika ini pertama kali diberikan dan itu tentu saja fungsi font fetch kita. 73 00:06:46,200 --> 00:06:49,480 Jadi di sini, saya menunjuk mengambil font, pada fungsi ini. 74 00:06:49,500 --> 00:06:51,290 Sekarang penting, a) ini harus 75 00:06:51,630 --> 00:06:57,420 menjadi fungsi yang Anda lewati di sini dan b) itu harus menjadi fungsi yang mengembalikan janji 76 00:06:57,700 --> 00:07:01,980 karena expo akan secara otomatis mendengarkan janji itu untuk Anda dan 77 00:07:01,980 --> 00:07:09,240 ketika janji terselesaikan, ia akan tahu bahwa pemuatan selesai dan kemudian akan memanggil apa pun yang Anda lewati di 78 00:07:09,240 --> 00:07:10,770 sini untuk menyelesaikan. 79 00:07:10,770 --> 00:07:17,530 Jadi di sini, Anda harus melewati fungsi yang kemudian benar-benar menetapkan data yang dimuat menjadi true. 80 00:07:17,610 --> 00:07:23,160 Jadi fungsi ini di sini akan dieksekusi untuk Anda ketika operasi ini dilakukan dan untuk 81 00:07:23,160 --> 00:07:24,120 expo untuk 82 00:07:24,120 --> 00:07:27,360 mengetahui kapan ini dilakukan, ini harus mengembalikan janji. 83 00:07:27,380 --> 00:07:33,760 Jadi sekarang kedua alat peraga ini akan bekerja bersama dan kami memperbarui data yang dimuat, keadaan ini benar 84 00:07:33,760 --> 00:07:39,410 dan karena itu tidak membuat konten ini tetapi untuk melanjutkan mengeksekusi kode ini dan akhirnya membuat 85 00:07:39,410 --> 00:07:40,760 konten di sana 86 00:07:41,060 --> 00:07:47,810 ketika mengambil font kami selesai dan Anda bisa melakukan operasi async apa pun di sini tetapi biasanya, Anda menggunakan 87 00:07:47,810 --> 00:07:50,690 AppLoading untuk memuat beberapa aset, seperti font atau 88 00:07:50,750 --> 00:07:56,030 semacamnya, jadi aset yang seharusnya ada saat aplikasi dimulai yang Anda butuhkan segera dan 89 00:07:56,030 --> 00:07:57,770 biasanya yang merupakan font. 90 00:07:57,870 --> 00:08:05,710 Sekarang Anda juga dapat menambahkan penangan onError di sini dengan cara dan di sini, saya hanya akan menghibur log objek kesalahan 91 00:08:05,710 --> 00:08:07,050 yang juga kami 92 00:08:07,300 --> 00:08:14,470 dapatkan di sini dalam kasus di mana memuat yang gagal. Tentu saja, Anda mungkin tidak hanya ingin mencatat ini tetapi melakukan sesuatu 93 00:08:14,470 --> 00:08:16,570 yang lain, menunjukkan beberapa konten alternatif di 94 00:08:16,570 --> 00:08:20,230 aplikasi Anda, hal-hal seperti itu. Di sini saya hanya akan 95 00:08:20,230 --> 00:08:25,710 mencatatnya karena ini seharusnya tidak gagal, font tersedia secara lokal di sini sehingga harus dapat dimuat tanpa masalah. 96 00:08:25,760 --> 00:08:31,330 Sekarang jika kita menyimpan itu, aplikasi kita tentu saja restart dan kita tidak melihat perbedaan di sini, layar 97 00:08:31,400 --> 00:08:36,380 memuat kita juga tidak benar-benar memakan waktu lebih lama seperti sebelumnya karena pemuatan itu sangat cepat, 98 00:08:36,380 --> 00:08:37,820 itu tidak terjadi secara 99 00:08:37,820 --> 00:08:39,830 instan, itu sebabnya kami membutuhkan pendekatan ini. 100 00:08:39,830 --> 00:08:41,240 Tapi sekarang kita 101 00:08:41,240 --> 00:08:43,440 memuat font, bagaimana kita bisa menggunakannya sekarang? 102 00:08:43,460 --> 00:08:48,980 Baiklah katakanlah kita ingin mengubah awal permainan kita di sini untuk menggunakan font kita. Sekarang untuk itu, kita harus pergi ke 103 00:08:48,980 --> 00:08:57,390 layar mulai permainan yang merupakan tempat judul ini tinggal pada akhirnya, di sini, mulai permainan baru, itu memang memiliki gaya judul 104 00:08:57,390 --> 00:09:03,540 dan oleh karena itu turun di stylesheet di sini pada judul, sekarang kita dapat mengatur keluarga 105 00:09:03,630 --> 00:09:08,050 font untuk mengubah keluarga font dan mengatur ini menjadi open-sans-bold misalnya 106 00:09:08,050 --> 00:09:09,270 dan tentu 107 00:09:09,270 --> 00:09:15,180 saja pengidentifikasi yang Anda gunakan di sini harus menjadi pengidentifikasi yang Anda muat di sini. 108 00:09:15,210 --> 00:09:17,800 Jadi di sini, saya memiliki open-sans-bold dan open 109 00:09:17,850 --> 00:09:25,180 sans, saya dapat menggunakan dua pengidentifikasi ini dalam kode saya di mana saja di aplikasi ketika saya ingin menetapkan font khusus dan itulah 110 00:09:25,180 --> 00:09:27,240 yang saya lakukan di sini. 111 00:09:27,240 --> 00:09:32,940 Sekarang Anda lihat, yang memiliki font berbeda yang tebal dan omong-omong, jika Anda menggunakan font khusus 112 00:09:32,940 --> 00:09:36,180 dan Anda ingin font tebal, Anda harus memuatnya dengan 113 00:09:36,180 --> 00:09:42,180 keluarga font, Anda tidak dapat mengatur berat font. Bereaksi Asli mendukung ini tetapi untuk font khusus, expo saat 114 00:09:42,180 --> 00:09:42,840 ini tidak 115 00:09:42,840 --> 00:09:47,790 mendukung ini, Anda hanya perlu menggunakan keluarga font terpisah yang tidak benar-benar masalah seperti yang Anda lihat.