Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. 3D
Code

Panduan Permulaan kepada Realiti Semula Diperkaya 2

by
Difficulty:BeginnerLength:LongLanguages:

Malay (Melayu) translation by Said bin Al Musayyib (you can also view the original English article)

Selamat datang ke Bahagian 2 Panduan Permulaan saya untuk Reality Augmented, harap anda menyelesaikan bahagian pertama tutorial ini, atau sekurang-kurangnya memuat turun dan membaca fail sumber (jika tidak, anda mungkin sedikit keliru tentang apa yang perlu dipelajari).


Recap cepat

Kali terakhir kita melihat tetapan persekitaran AR yang mudah, mewujudkan kiub, memohon bahan ke kubus dan "kesan lubang di dinding".

Hari ini kita akan membina pengetahuan itu dan mencipta hasil akhir seperti ditunjukkan dalam demo. Untuk membuat kesan akhir, kita perlu tahu cara mengubah sfera, objek bernyawa, memainkan kesan bunyi dan akhirnya membuat objek 3d. Menukar objek 3D di telapak tangan anda adalah sebab utama mengapa Augmented Reality benar-benar terkena tahun ini, terutamanya apabila anda membuat beberapa bentuk yang lebih menarik atau menghidupkannya. Sekiranya anda berada di UK, anda mungkin telah melihat The Show Gadget Baru-baru ini di mana mereka memaparkan realiti bertambah baik dan mempunyai versi animasi Suzi Perry yang boleh anda simpan di tangan anda. Sangat baik.

Jadi mari kita mulakan. Saya akan bermula dengan perubahan dunia dan bintang-bintang, kemudian bergerak untuk menghidupkan semula bentuk dan akhirnya mencipta lembu. Buka fail anda dari masa lalu dan ciptakannya.


Langkah 1: Muat turun Dunia

source: Nasa

Sumber: NASA Earth Visible. Kredit: Reto Stöckli, Robert Simmon.

Muat turun versi 2048x1024px dari imej di atas dari halaman NASA Visible Earth dan lawati map.jpg. Letakkannya ke dalam folder berikut: menyebarkan> aset. Ini adalah folder yang sama di mana anda menyimpan imej di bahagian dalam kiub pada akhir tutorial. Gambar indah dunia ini berasal dari NASA. Mereka mengambil gambar yang bagus, bukan?


Langkah 2: Buat Sfera

Dalam kod anda, arahkan ke tempat kami menyediakan "kesan lubang pada dinding" untuk kali terakhir. Selepas kod "lubang di dinding", tambahkan kod berikut.


Langkah 3: Pemetaan Dunia

Sekarang kita telah menetapkan sfera, kita memerlukan tekstur. Ini dilakukan dengan cara yang sama seperti pemetaan tekstur ke kubus. Perhatikan bagaimana ia ditubuhkan untuk sfera, ia mencari sesuatu yang dipanggil "bumi" Ini adalah pemboleh ubah tekstur kami.

Arahkan kod ke tempat kami menyediakan bahan sebelumnya. Tambahkan kod ke baris berikut:

Sama seperti yang lain.


Langkah 4: Hadir!

Apabila anda menguji, anda harus melihat sesuatu seperti gambar berikut (tetapi sudah tentu tanpa syaitan tampan yang memegang penanda untuk anda):

source: A very white room

Seperti masa sebelum ini, anda perlu memuat turun imej penanda dan mencetaknya dengan banyak ruang putih di sekitar tepi.


Langkah 5: Bintang di Mata Anda

Sekarang apa yang berlaku kepada lukisan ruang tanpa beberapa bintang? Mari tambah beberapa bintang? Ini mungkin bahagian yang paling membosankan bagi saya untuk menuliskannya kerana semua bintang perlu diposisikan secara individu. Tetapi anda menipu untuk mendapat manfaat daripada salinan dan paste.

Tambah kod berikut selepas kod persembahan bumi:

Phew, itu cukup banyak. Sudah tentu, anda boleh menambah lebih banyak jika anda mahukan lebih banyak bintang. Atau gunakan array gelung untuk menambah jumlah percuma.


Langkah 6: Warna bintang

Kini kita perlu menambah bahan kepada bintang. Tambah kod berikut dengan kod bahan lain:


Langkah 7: Masa Ujian

Uji filem kilat dan semoga anda akan melihat sesuatu seperti ini:

source: A very white room

Langkah 8: Terperangkap dalam Peti

tidakkah ia menjadi sejuk jika, katakan, kita boleh mempunyai ruang baru yang baru kita buat, terjebak dalam kotak kecil yang disimpan di dalam penanda dan kemudian meletup? Anda bernasib baik, dan mungkin akan melihat keputusan seperti yang akan kami lakukan.

cukup mudah untuk menjadikan objek di AR. Terutama jika anda hanya mahu memindahkannya dari satu titik ke yang lain seperti yang kita mahu. Untuk berbuat demikian, kita perlu memuat turun beberapa kelas tambahan untuk Flash. GreenSock melakukan satu siri perpustakaan animasi yang sangat baik yang membantu kita dengan mudah menggerakkan objek dari satu titik ke titik lain.

Pergi ke greensock.com dan muat turun perpustakaan AS3 TweenMax


Langkah 9: Import Perpustakaan baru

Selepas memuat turun perpustakaan TweenMax, anda perlu mengekstrak fail .zip dan letakkan folder greensock ke dalam projek src> com kami. Di sinilah perpustakaan squidder juga disimpan. Ekstrak di sini dan semua akan menjadi hebat.

Kini kembali ke Flash. Tambahkan baris berikut di bahagian atas kod anda dengan baris import lain:

Kini anda mempunyai akses ke perpustakaan GreenSock ..


Langkah 10: Menghidupkan Bumi

Cari kod di mana anda membuat pembolehubah bumi. Gantikan dengan kod berikut:

Apa yang saya lakukan di sini ialah menukar titik permulaan dan saiz bumi supaya ia menjadi sangat kecil dan di dalam kotak. TweenMax adalah kelas animasi yang hebat. Di sini kita tetapkan pemboleh ubah mana yang dinyanyikan (Bumi), berapa lama dalam beberapa saat (4), berapa besar harus skala variabel, titik z dan akhirnya berapa lama menunggu sebelum menghidupkannya. Ini ditetapkan kepada 4 supaya kita boleh menghidupkan perkara-perkara lain terlebih dahulu.


Langkah 11: Mengubah Bintang

Ganti semua kod persediaan bintang anda dengan yang berikut:

Kod ini akan menjadikan bintang anda dari titik permulaan yang tersembunyi ke kedudukan akhir mereka. Sekali lagi, saya telah mengubah kedudukan bintang supaya mereka mula masuk ke dalam kotak.


Langkah 12: Hadir!

Mari kita uji filem Flash sekali lagi. Anda mesti mempunyai peralihan animasi yang bagus dari sifar ke bumi dan bintang yang meletup di luar kotak tempat kami. .

source: A suspiciously white room
source: A suspiciously white room
source: A suspiciously white room

Langkah 13: Semua ditutup!

Untuk kotak topi yang akan membuka dan membiarkan Bumi dan bintang meletup, kami akan menggunakan empat imej. Saya menggunakan panel kayu untuk mencari kotak saya tetapi bebas untuk membuat sendiri. Berikut adalah imej yang saya buat, muat turun dan simpan untuk menggunakan> aset.

source: I made this.

Simpan sebagai top.png

source: I made this.

Simpan sebagai bawah.png

source: I made this.

Simpan sebagai kiri.png

source: I made this.

Simpang sebagai right.png


Langkah 14: Buat Kotak Tutup

Di bawah tempat kami menetapkan bintang, tambahkan kod berikut:

Ia mengawal semua bahagian yang membentuk kotak topi, meletakkannya dengan betul dan menghidupkannya. Perkara yang baik

Setiap "kiub" ditetapkan untuk mempunyai kedalaman sifar (hujah ketiga dalam pembina), jadi ia kelihatan seperti pesawat rata.


Langkah 15: Bahan Tudung

Dalam bahagian bahan, tambahkan kod berikut:

Sekarang tudung akan melihat bahagiannya. Saya pasti anda menyedari bahawa imej kiri dan kanan diputar dan kemudian saya melancarkannya semula dalam kod di Langkah 14. Anda mungkin tertanya-tanya mengapa saya melakukannya bukan hanya meninggalkan imej seperti itu. Nah, ada alasan untuk itu. Mereka tidak berfungsi dengan baik melainkan anda memutarkannya. Ini adalah bug aneh, tetapi imej muncul semula apabila diberikan dan apabila anda menggunakan animasi kepada mereka, mereka bertindak salah. Memainkannya terlebih dahulu dan kemudian kembali kepada kod itu akan menjadikannya berfungsi dengan baik. Ini agak pelik, tetapi di sana anda memilikinya.


Langkah 16: Ujian!

Sekarang semua bahagian siap untuk ujian lain, semuanya ada di sana. Saya pasti anda membuat semua jenis bunyi oohing sekarang. Luar biasa.

source: The whitest of white rooms
source: The whitest of white rooms
source: The whitest of white rooms

Langkah 17: Dia Memerlukan Beberapa Drama

Sekiranya anda seperti saya, anda dapat melihat pemikiran ini, ia memang bagus, tetapi ia memerlukan drama lagi. Baiklah kita akan melakukannya. Mari tambahkan muzik dramatik apabila kotak dibuka.

Pergi ke perpustakaan kesan bunyi Edge Edge dan muat turun BrightPad.wav. (tidak termasuk dalam muat turun Sumber.) Saya telah memeluk ini menjadi MP3 yang dipanggil "dramatic.mp3" tetapi anda boleh mengikuti arahan ini serta menyimpannya sebagai WAV.

Simpan untuk menggunakan> folder aset.


Langkah 18: Menambah Bunyi

Buka fail .fla dan pergi ke Fail> Import> Import ke Perpustakaan. Import dramatis.mp3.

Buka perpustakaan anda dan anda akan melihat fail yang anda baru import di sana.

Klik kanan padanya dan klik Properties. Semak kotak "Eksport untuk ActionScript". Kotak kelas kini perlu aktif; taip di dalamnya "secara dramatik" tanpa tanda petikan.

source: Flash cs4. A property menu

Langkah 19: Pengekodan lebih lanjut

Kembali ke fail .as. Di bahagian atas fail, cari kod import. Tambah kod import berikut:

Sedikit lagi ke bawah, terdapat beberapa orang yang bersendirian. Anda mungkin ingat dari kali terakhir apabila kami membuat kiub hijau. Tambah kod berikut ke pelayan peribadi:

Sekarang apa yang telah kita lakukan di sini ialah menyediakan fail bunyi dan saluran suara "dramatik". Saluran suara membolehkan untuk memulakan dan menghentikan bunyi melalui kod.


Langkah 20: Memainkan Suara

Oleh kerana kita hanya mahu suara diputar sekali (apabila kotak terbuka dan tidak setiap kali kita menunjukkan penanda), anda perlu memasukkan kod berikut dengan semua bentuk kod persediaan. Saya meletakkan harta saya betul selepas saya menetapkan kotak penutup.

Ia memainkan bunyi apabila tudung terbuka.


Langkah 21: Ujian!

Bunyi kini mesti dimainkan dan diharapkan ia akan menjadi sangat dramatik.

Anda harus berasa sangat gembira dengan diri anda sekarang, anda telah mencipta sesuatu yang dapat menarik minat rakan anda.


Langkah 22: Sapi!

Sekarang kita datang ke bahagian di mana kita membuat seekor lembu yang boleh anda pegang di tangan anda. Pertama sekali, anda perlu memuat turun dua fail berikut, simpannya di tempat biasa:

source: Not a real cow skin

Tekstur , yang harus anda simpan sebagai Cow.png dan lembu file model yang anda perlukan untuk disimpan sebagai cow.dae.


Langkah 23: Menyediakan Lembu

Di bahagian atas fail anda, anda perlu menambah import. Tambah baris berikut:

Temui vars peribadi anda sedikit ke bawah dan tambah berikut:


Langkah 24: Seterusnya seterusnya

Kami akan meletakkan lembu itu ke penanda kedua. Ini dilakukan untuk menunjukkan kepada anda bahawa kaedah memunggah objek berbeza kepada penanda yang berbeza cukup kuat dan boleh mengendalikan bukan sahaja bentuk tetapi juga objek kompleks 3d.

Ingat dalam bahagian tutorial sebelumnya, kami mempunyai empat penanda pada satu helai kertas, dan mencipta pelbagai kiub warna untuk setiap penanda? Kami akan menggunakan semula kod tersebut untuk membolehkan kami menggunakan penanda berasingan untuk lembu dan Bumi.

Navigasi fail anda sehingga anda dapat melihatnya else if (id ==1){ - semak penanda kedua

Gantikan semuanya dalam dua kurungan lengkung dengan kod berikut:


Langkah 25: Ujian!

Ya, lebih banyak ujian, tidak begitu pantas. Muat turun dan cetak penanda kedua. Sekiranya semuanya berjalan lancar, anda mesti menjadi pemilik lembu yang baru, Tahniah!

source: This room is oh so white

Langkah 26: Adakah Sapi di Moo-t?

Ia bagus untuk mempunyai lembu yang bagus, tetapi tidakkah lebih baik jika lembu itu adalah moo?

Pergi ke direktori fail ini dari CD yang dipanggil, The Best Of Tucows , Volume 2 - dan muat turun MOO.WAV. (Ini tidak termasuk dalam muat turun Sumber.)

Simpan di tempat biasa moo.wav

Pergi ke fail .fla anda dan import fail ke dalam pustaka anda. Sama seperti yang anda lakukan dengan fail bunyi terakhir yang anda import, buka sifatnya, semak Eksport untuk ActionScript dan tukar kelasnya kepada mooSnd.


Langkah 27: Moo-sic ke Telinga saya

Navigasi ke var peribadi dan tambahkan baris kod berikut:

Sekarang, untuk penanda ini, saya mahu bunyi dimainkan apabila lembu itu muncul tetapi hanya bermain sekali. Untuk berbuat demikian, anda perlu menambah kod untuk memainkan bunyi di tempat yang sedikit berbeza daripada yang kita lakukan kali terakhir.

Cari baris ini dalam kod anda:

Kami mahu menambah kod kami selepas ini. Dengan mengambil kod tetapan berikut, dia akan bermain setiap kali ID ditemui dan bukannya apabila bentuk dibuat, yang hanya akan berlaku sekali.

Tambah kod ini:


Kesimpulannya

Uji fail untuk kali terakhir dan lembu mesti moo. Anda juga boleh menggunakan kedua-dua penanda pada masa yang sama dan menjadi super swish.

source: One handed, oooh yeah.

Saya berharap anda menikmati tutorial dua bahagian ini mengenai Realiti Semula dan berharap anda dapat pergi sekarang dan membuat beberapa perkara yang sangat menarik.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.