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

Panduan Pemula untuk Augmented Reality Bagian 2

by
Difficulty:BeginnerLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Kaustina Nurul Ilmi (you can also view the original English article)

Selamat Datang di Bagian 2 dari Panduan Pemula saya untuk Augmented Reality, semoga anda telah menyelesaikan  bagian pertama  dari tutorial ini, atau setidaknya download dan baca file sumbernya (jika tidak, anda mungkin akan sedikit bingung dengan apa yang bakal pelajari).


Rekap cepat

Terakhir kali kita melihat pengaturan lingkungan AR sederhana, membuat kubus, menerapkan materi ke kubus dan efek "lubang di dinding".

Hari ini kita akan membangun pengetahuan tersebut dan menciptakan hasil akhir seperti yang ditunjukkan dalam demo. Untuk menciptakan efek akhir, kita perlu mengetahui bagaimana mengubah sphere, menghidupkan objek, memainkan efek suara dan akhirnya membuat objek 3d.  Mengubah objek 3D di telapak tangan anda adalah alasan utama mengapa Augmented Reality menjadi sangat hit tahun ini, terutama saat anda membuat beberapa bentuk yang lebih menarik atau menghidupkannya.  Jika anda berada di Inggris anda mungkin telah melihat  The Gadget Show  Baru-baru ini di mana mereka menampilkan Augmented reality dan memiliki versi animasi Suzi Perry yang bisa anda pegang di tangan anda. Sangat bagus.

Jadi mari kita mulai. Saya akan memulai dengan perubahan dunia dan bintang-bintang, lalu bergerak untuk menghidupkan bentuk dan akhirnya menciptakan sapi. Bukalah file anda dari waktu lalu dan mari kita ciptakan.


Langkah 1:   Download Dunia

source: Nasa

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

Download versi 2048x1024px dari gambar di atas  dari the NASA Visible Earth page  dan kunjungi map.jpg. Tempatkan ke folder berikut: deploy > assets.  Ini adalah folder yang sama tempat anda menyimpan gambar di bagian dalam kubus di bagian akhir tutorial. Gambar indah dunia ini berasal dari NASA. Mereka mengambil foto bagus, bukan?


Langkah 2:   Membuat Sphere

Dalam kode anda, arahkan ke tempat kita menyiapkan efek "lubang di dinding" untuk Penanda 0 terakhir kali. Tepat setelah kode "hole in the wall", tambahkan kode berikut ini. 


Langkah 3:   Memetakan Dunia

Sekarang setelah kita menyiapkan sphere, dibutuhkan tekstur. Hal ini dilakukan dengan cara yang sama seperti memetakan tekstur ke sebuah kubus. Perhatikan bagaimana di set up untuk sphere, ia mencari sesuatu yang disebut "bumi" ini adalah variabel tekstur kita.

Arahkan kode ke tempat kita menyiapkan materi sebelumnya. Tambahkan kode itu ke baris berikut:

Sama seperti yang lain.


Langkah 4:   Ujikan!

Saat anda mengujinya, anda harus melihat sesuatu seperti gambar berikut (tapi tentu saja tanpa setan ganteng yang memegang penanda untuk anda):

source: A very white room

Sama seperti waktu sebelumnya, anda harus download the marker image dan mencetaknya dengan banyak ruang putih di sekeliling tepinya.


Langkah 5:   Bintang di Mata Anda

Sekarang apa jadinya gambar ruang tanpa beberapa bintang? Mari kita tambahkan beberapa bintang?  Ini mungkin bagian yang paling membosankan bagi saya untuk menuliskannya karena semua bintang perlu diposisikan secara individual. Tapi anda curang mendapatkan keuntungan dari copy dan paste.

Tambahkan kode berikut setelah kode perenderan bumi:

Fiuh, itu cukup banyak.Tentu saja, anda bisa menambahkan lebih banyak lagi jika menginginkan lebih banyak bintang. Atau gunakan satu lingkaran array guna menambahkan jumlah yang bebas.


Langkah 6:   Warnai bintang

Sekarang kita perlu menambahkan materi untuk bintang. Tambahkan kode berikut dengan kode materi lainnya:


Langkah 7:   Waktu Pengujian

Uji film flash dan mudah-mudahan anda akan melihat sesuatu seperti ini: 

source: A very white room

Langkah 8:   Terjebak dalam Kotak

bukankah akan lebih keren jika, katakanlah, kita bisa memiliki adegan luar angkasa yang baru kita buat, terjebak dalam kotak kecil yang tersimpan di dalam marker dan kemudian meledak? Anda beruntung, dan mungkin akan melihat hasilnya seperti yang akan kita lakukan.

cukup mudah untuk menghidupkan benda-benda di AR. Apalagi jika anda hanya ingin memindahkan mereka dari satu titik ke titik lain seperti yang kita inginkan.  Untuk melakukannya, kita perlu mendownload beberapa kelas tambahan untuk Flash.  GreenSock  melakukan serangkaian perpustakaan animasi yang sangat bagus yang membantu kita dengan mudah memindahkan objek dari satu titik ke titik lainnya.

Menuju ke greensock.com  dan download the AS3 TweenMax library


Langkah 9:   Mengimpor Perpustakaan baru

Setelah mendownload perpustakaan TweenMax, anda perlu mengekstrak file .zip dan menempatkan folder greensock ke dalam src> com proyek kita. Disinilah perpustakaan squidder juga disimpan. Ekstrak disini dan semua akan menjadi hebat.

Sekarang kembali ke Flash. Tambahkan baris berikut di bagian atas kode anda dengan baris impor lainnya:

Sekarang anda memiliki akses ke perpustakaan GreenSock..


Langkah 10:   Menghidupkan Bumi

Temukan kode tempat anda membuat variabel bumi. Ganti dengan kode berikut: 

Apa yang telah saya lakukan di sini ialah mengubah titik awal dan ukuran bumi sehingga ia menjadi sangat kecil dan di dalam kotak. TweenMax merupakan kelas animasi yang hebat.  Di sini kita mengatur variabel mana yang bernyawa (Bumi), berapa lama waktu yang dibutuhkan dalam detik (4), seberapa besar seharusnya skala variabel, titik z dan akhirnya berapa lama harus menunggu sebelum menghidupkannya.  Ini diatur ke 4 sehingga kita bisa menghidupkan hal-hal lain terlebih dahulu.


Langkah 11:   Menghidupkan Bintang

Ganti semua kode setup bintang anda dengan yang berikut ini:

Kode ini akan menghidupkan bintang anda dari titik awal yang tersembunyi ke posisi akhir mereka. Sekali lagi, saya telah mengubah posisi bintang-bintang sehingga mereka mulai masuk ke dalam kotak.


Langkah 12:   Ujikan!

Mari uji film Flash lagi. Anda harus memiliki transisi animasi yang bagus dari nol ke bumi dan bintang-bintang yang meledak di luar kotak yang kita tempatkan.  . 

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

Langkah 13:   Semuanya tertutup!

Untuk kotak tutup yang akan terbuka dan membiarkan Bumi dan bintang meledak, kita akan menggunakan empat gambar.  Saya menggunakan panel kayu untuk mencari kotak saya tapi bebas untuk membuat punya anda sendiri. Berikut adalah gambar yang saya buat, download dan simpan ke dalam deploy > assets.

source: I made this.

Simpan sebagai top.png

source: I made this.

Simpan sebagai bottom.png

source: I made this.

Simpan sebagai left.png

source: I made this.

Simpang sebagai right.png


Langkah 14:   Buat Kotak Tutup

Di bawah tempat kita mengatur bintang, tambahkan kode berikut ini:

Hal ini mengatur semua bagian yang membentuk kotak tutup, memposisikannya dengan benar dan menghidupkan mereka. Hal bagus

Setiap "kubus" diatur untuk memiliki kedalaman nol (argumen ketiga dalam konstruktor), jadi mereka tampak seperti pesawat datar.


Langkah 15:   Bahan Lid

Di bagian materi, tambahkan kode berikut ini:

Sekarang tutupnya akan terlihat bagiannya. Saya yakin anda menyadari bahwa gambar kiri dan kanan diputar dan kemudian saya memutar mereka kembali lagi dalam kode pada Langkah 14.  Anda mungkin bertanya-tanya mengapa saya melakukan itu bukan hanya meninggalkan gambar seperti apa adanya. Nah, ada alasan untuk itu. Mereka tidak akan berfungsi dengan benar kecuali jika anda memutar mereka.  Ini adalah bug yang aneh, namun gambarnya muncul kembali saat dirender dan saat anda menerapkan animasi pada mereka, mereka bertindak salah. Memutar mereka terlebih dahulu dan kemudian kembali ke kode akan membuat mereka bekerja sebagaimana mestinya. Ini cukup aneh, tapi begitulah.


Langkah 16:   Pengujian!

Sekarang semua bagian sudah siap untuk pengujian lainya, semuanya sudah ada. Saya yakin anda sedang membuat berbagai macam suara oohing saat ini. Menakjubkan.

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

Langkah 17:   Ia Membutuhkan Beberapa Drama

Jika anda seperti saya, anda melihat pemikiran ini, wow itu bagus, tapi itu benar-benar membutuhkan drama lagi. Baiklah kita akan melakukan hal itu. Mari tambahkan beberapa musik dramatis saat kotak terbuka.

Pergi ke   Hollywood Edge sound effects library   dan download   BrightPad.wav. (tidak termasuk dalam download Sumber.) Saya telah mengubah ini menjadi MP3 yang disebut "dramatic.mp3" namun anda dapat mengikuti petunjuk ini sekaligus menyimpannya sebagai WAV.

Simpan ke folder deploy > assets.


Langkah 18:   Menambahkan di Suara

Buka file .fla dan buka File> Import> Import to Library. Impor dramatis.mp3.

Bukalah perpustakaan anda dan anda akan melihat file yang baru anda impor berada di sana.

Klik kanan padanya dan klik Properties. Centang kotak "Export for ActionScript". Kotak kelas sekarang harus aktif; ketik di dalamnya "dramatis" tanpa tanda petik.  

source: Flash cs4. A property menu

Langkah 19:   Lebih banyak pengodean

Kembali ke file .as. Di bagian atas file, cari kode impor. Tambahkan kode impor berikut ini:

Sedikit lebih jauh ke bawah, ada beberapa vars pribadi. Anda mungkin mengingatnya dari waktu terakhir ketika kita membuat kubus hijau. Tambahkan kode berikut ke vars pribadi:

Sekarang yang telah kita lakukan di sini adalah menyiapkan file suara "dramatis" dan saluran suara. Saluran suara memungkinkan untuk memulai dan menghentikan suara melalui kode.


Langkah 20:   Memutar Suara

Karena kita hanya ingin suara diputar sekali (ketika kotak terbuka dan tidak setiap saat kita menunjukkan penanda), anda perlu meletakkan kode berikut dengan semua bentuk kode setup. Saya menempatkan milik saya tepat setelah saya mengatur kotak tutupnya. 

Ini memutar suara sekali saat tutupnya terbuka.


Langkah 21:   Pengujian!

Suara sekarang harus dimainkan dan semoga ini akan terasa sangat dramatis.

Anda seharusnya merasa sangat senang dengan diri anda saat ini, anda telah menciptakan sesuatu yang dapat mengesankan teman anda.


Langkah 22:   Sapi!

Sekarang kita sampai pada bagian di mana kita membuat seekor sapi betina yang bisa anda pegang di tangan anda. Pertama-tama, anda perlu mendownload dua file berikut, simpan di tempat yang biasa:

source: Not a real cow skin

Tekstur , yang harus anda simpan sebagai   Cow.png   dan    cow model file yang anda perlu simpan sebagai cow.dae.


Langkah 23:   Menyiapkan Sapi

Di bagian atas file anda, anda perlu menambahkan sebuah impor. Tambahkan baris berikut:

Temukan vars pribadi sedikit lebih jauh ke bawah dan tambahkan yang berikut ini::


Langkah 24:   Persiapan berikutnya

Kita akan memasukkan sapi ke marker kedua. Hal ini dilakukan guna menunjukkan kepada anda bahwa metode pemuatan objek yang berbeda ke marker yang berbeda ini cukup kuat dan tidak hanya dapat menangani bentuk tapi juga objek kompleks 3d.

Ingat di bagian tutorial sebelumnya, kita memiliki empat marker di selembar kertas tunggal, dan menciptakan berbagai kubus berwarna untuk setiap marker? Kita akan menggunakan kembali kode tersebut untuk membiarkan kita menggunakan penanda terpisah untuk sapi dan Bumi. 

Arahkan melalui file anda sampai anda menemukannya   else if (id ==1){ - cek untuk marker kedua

Ganti semuanya dalam dua kurung kurawal dengan kode berikut:


Langkah 25:   Pengujian!

Ya, sudah lebih banyak pengujian, tidak secepat itu.  Download dan cetak marker kedua . Jika semuanya berjalan dengan baik, anda harus menjadi pemilik yang bangga akan seekor sapi kecil baru, Selamat!

source: This room is oh so white

Langkah 26:   Apakah itu Sapi di Moo-t?

Senang rasanya memiliki sapi yang bagus, tapi tidakkah lebih baik jika sapi itu moo?

Pergi ke ini   direktori file   dari CD yang disebut, The Best Of   Tucows , Volume 2 - dan download   MOO.WAV. (Ini tidak termasuk dalam download Sumber.)

Simpan di tempat yang biasa moo.wav

Pergilah ke file .fla anda dan impor file ke perpustakaan anda. Sama seperti yang anda lakukan dengan file suara terakhir yang anda impor, buka propertinya, centang Export for ActionScript dan ubah kelasnya menjadi mooSnd.


Langkah 27:   Moo-sic ke Telinga saya

Arahkan ke vars pribadi dan tambahkan baris kode berikut ini:

Sekarang, untuk penanda ini, saya ingin suara dimainkan setiap kali sapi itu muncul tapi hanya bermain sekali. Untuk melakukannya, anda perlu menambahkan kode untuk memutar suara di tempat yang sedikit berbeda dari yang kita lakukan terakhir kali.

Temukan baris ini dalam kode anda:

Kita ingin menambahkan kode kita tepat setelah ini. Dengan mengambil kode pengaturan berikut ini, ia akan bermain setiap kali ID itu ditemukan daripada saat bentuknya dibuat, yang hanya akan terjadi satu kali.

Tambahkan kode ini:


Kesimpulan

Uji file untuk terakhir kalinya dan si sapi harus moo. Anda bahkan bisa menggunakan kedua marker pada saat yang sama dan menjadi desir super. 

source: One handed, oooh yeah.

Saya harap anda menikmati tutorial dua bagian ini di Augmented Reality dan berharapanda bisa pergi sekarang dan menciptakan beberapa hal yang sangat keren.

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.