Bagaimana cara menambahkan teks ke ARView di SwiftUI | Oleh Andronicus Martushev | Juni 2022

RealityKit bertemu SwiftUI

AR tersedia, dan pemahaman saya adalah – tidak. Saya kesulitan menemukan sumber daya tentang cara menambahkan teks ke ARView di aplikasi iOS, selain memanipulasi teks itu dengan interaksi pengguna. Jadi hari ini, kita kembali ke dasar. Kami akan membangun program penghitung sederhana, kecuali dengan cara yang mungkin belum pernah kami lakukan sebelumnya. Kami melakukannya di AR.

Jika Anda ingin langsung masuk ke pengaturan adegan AR, buka “ARViewController Setup” atau simulasikan repositori di sini:

Kompatibilitas perangkat:

• iphone 6 dan lebih tinggi
• iPad Generasi kelima ke atas
• iPod Generasi ketujuh

Program penghitung ARView

Berikut adalah hasil dari tutorial hari ini. Aplikasi penghitung sedang dibangun di SwiftUI dengan bantuan ARKit.

Kedua bilah tombol yang terlihat (kanan), dan ARView Dan mereka terbatas pada tampilannya, jadi kita juga akan belajar cara memindahkan mode objek antar tampilan dan memperbaruinya. ARView Kapan pun kita punya lebih banyak, mari kita mulai.

Luncurkan proyek kami

Kami akan mulai dengan memilihnya Aplikasi augmented reality Klik Berikutnya saat membuat proyek baru kami.

Kemudian masukkan nama untuk proyek dan pastikan untuk menyimpannya SwiftUI Terpilih. Setelah memukul Lanjut, Anda akan diminta untuk menemukan tempat untuk menyimpan proyek Anda. Setelah selesai, pilih MembuatDan Xcode menyelesaikan penyiapan.

Setelah seleksi melanjutkan Di emulator, kode awal diisi dengan preset untuk menambahkan kotak ke adegan AR kami. Kita dapat melihat kotak di emulator di atas, tetapi karena kamera tidak tersedia untuk emulator, itu tidak akan memilikinya. pengalaman AR

Pada titik ini, Anda dapat melanjutkan dan menjalankan proyek (CMD + R) di perangkat iOS Anda dan melihat kotak ini di aplikasi.

Luncurkan tampilan dan model kami

Dengan ARCounter Direktori dipilih, ketuk cmd + option + n Untuk membuat grup (folder) baru. Buat 2 grup yang disebut 1 View Dan yang lain disebut Model. Di grup Lihat, tambahkan file Swift baru cmd + n .

Pilih File Swift dan beri nama file ini Count . Ulangi proses ini dan buat dua file Swift lagi dengan nama berikut: ARViewContainer kan CounterButtonBarView . Pindahkan file ke grup Anda masing-masing. Berikut adalah gambar untuk menunjukkan bagaimana folder Anda seharusnya terlihat.

Tetapkan nomornya

Dalam diri kami Count File, kami akan membuatnya Count Kelas Kelas ini berisi variabel yang diterbitkan yang disebut num .

Diterbitkan adalah paket aset yang memperbarui semua orang ObservableObjects Mereka memilikinya sebagai fitur setiap kali mereka mengalami perubahan keadaan. Lebih lanjut tentang itu nanti.

Luncurkan CounterButtonBarView

Dalam diri kami ContentBarButtonView Kami ingin menambahkan kode di atas. Di sini, kami menyesuaikan bilah tombol interaktif kami sehingga kami dapat memperbarui nomor yang ditampilkan di halaman. ARView.

• Pada line 5 Kami mendeklarasikan variabel untuk instance Hitungan kami yang digunakan untuk melacak nomor aplikasi kami saat ini.
• Pada line 8 Sematkan tampilan berikut dalam tumpukan horizontal.
• Pada line 10 , Kami membuat tombol perkecil. Di tombol ini, kami mengatur tindakan untuk mengurangi jumlah kliknya sebanyak 1. Itu juga mencetak di konsol, yang berguna untuk tujuan debugging. Di bagian label untuk tombol ini, kami mengatur gambar menggunakan kumpulan ikon yang disediakan oleh SFSymbols.
• Pada line 17 & line 24 Tombol yang sama dibuat untuk mengatur ulang dan meningkatkan penghitung.
• dari line 31 Ke line 36 , Kami sedang merancang ContentBarButtonView. Jangan ragu untuk mengubah ini sesuai keinginan Anda.

Tambahkan tombol kami ke ContentView

Kami ingin pembaruan Anda ContentView Untuk mencocokkan kode di atas ARViewContainer Telah dihapus dari Content View (dan sedang ditransfer ke file yang sebelumnya kami buat untuk itu). File tersebut juga akan dihapus dari isi ContentView untuk saat ini.

• Pada line 6 Kami membuat contoh kami sendiri Count .
• Pada line 9Kami menyematkan lebih banyak tampilan di a ZStack . Ini karena kita akan tumpang tindih di atasnya CounterButtonBarView Pada tampilan kamera AR pada sumbu Z.
• Pada line 10 Sematkan bilah tombol menjadi satu VStack .
• Pada line 11 Kami menambahkan satu Spacer() Untuk menekan semua tampilan yang tersisa di bagian bawah halaman.
• Pada line 12 Kami menambahkan diri kami sendiri CounterBarButtonView Lihat dan kirim penghitung sampel yang kami buat untuk program line 6 . Kontrol peningkatan / penyesuaian / penurunan tombol bar menampilkan jumlah sampel ini.

Sekarang, dengan menghubungkan perangkat iOS, pilih sebagai perangkat target untuk dibuat. Setelah berlari cmd + r, Anda akan melihat program dengan layar hitam dan tombol muncul. Dengan mengetuk tombol, konsol Anda akan melacak sampel Hitungan seperti yang ditunjukkan di bawah ini.

Luncurkan ARViewController

Sekarang, untuk menyesuaikan adegan AR Anda. Kode di atas membuat dan memperbarui teks yang ditampilkan setiap kali Anda menekan salah satu tombol yang kami buat sebelumnya. Kami menyederhanakan ini dengan menggambar ulang adegan setiap kali kami menekan tombol.

• Pada line 6, Kami sedang menyiapkan referensi yang mengambil turunan dari kelas Count yang kami buat sebelumnya. Setel agar objek dilihat, karena berfungsi dengan menerbitkan atribut Diterbitkan untuk memperbarui tampilan setiap kali variabel diterbitkan. num itu telah diubah.
• Pada line 8Kami memiliki pembuat ARView.
• Pada line 12Kami memiliki fungsi yang dipanggil setiap kali memperbarui atau menggambar ulang tampilan AR ObservedObject Memiliki variabel Diterbitkan yang berubah. Kami menyebutnya kebiasaan kami updateCounter() Fungsi Dari sini, berikan ARView yang ada.
• Pada line 17Hapus semua jangkar dari tempat kejadian dan bersihkan.
• dari line 20 Ke line 24 Kami menciptakan diri kami sendiri MeshResource Menggunakan .generateText Dan berikan serangkaian parameter. Pertama, teks yang ingin kita tampilkan, yang hanya akan menjadi nilai absolutnya count.num . Kedua, kita melalui kedalaman ekstrusi kita ingin membuat teks tiga dimensi. Terakhir, kami mengatur font ke ukuran dan berat font yang diinginkan.
• dari line 26 Ke line 35 Kami memeriksa nilai baru count.num Dan tergantung pada apakah itu positif, negatif atau nol, tentukan warnanya.
• Pada lines 37Kami membuat menggunakan bayangan SimpleMaterialNyalakan warna kami dan beberapa preset khusus lainnya (mainkan ini dengan aman).
• Pada line 38Kami menciptakan diri kami sendiri Entity Menggunakan mesh dan shadow yang telah kita buat sebelumnya.
• Pada line 40Kami keluar dari posisi textEntity Dengan mengubah posisinya pada sumbu Z menjadi di depan kita.
• Dan akhirnya, di lines 41 & 42 Kami menambahkan entitas ke jangkar dan jangkar ke adegan.

Setelah selesai, teks diperbarui, tindakan yang dimulai dengan perubahan pada variabel yang diterbitkan. num Akibatnya, mengetuk tombol pengguna.

Pembaruan terakhir untuk tampilan konten

Sekarang, di dalam kita ContentView Kita bisa menambahkan diri kita sendiri ARViewContainerDan dalam contoh kita, silangkan nomornya.

Dan ini harus! Jalankan program dan berinteraksi dengan penghitung. Di bawah, saya menautkan ulang repositori. Jika Anda memiliki masalah dan Anda ingin melihat kode kerja lengkap saya, simulasikan dan kerjakan dari itu!

LTinta ke Repo: https://github.com/martushef/ar-counter

Tantangan

Saya pikir membuat tutorial adalah cara yang bagus untuk belajar, jadi di bawah ini adalah beberapa tantangan yang dapat Anda buat di aplikasi ini!

• Tambahkan bidang teks yang memperbarui teks yang ditampilkan.
• Tambahkan pemilih warna untuk mengubah warna teks.
• Tambahkan animasi ke teks setiap kali penghitung diperbarui.