Unity Platformer Tutorial [Part 4]

 

Ini adalah tutorial lanjutan dari part ke-3

Di dalam part 4, kamu akan menambahkan koin yang dapat diambil oleh pemain.

 

Menambahkan Koin

coin.png

Uploadlah gambar diatas ke Unity.
Seperti biasa, buatlah sebuah object kosong di dalam "tiles" bernama "coins". Buat objek koin di dalamnya.
Kemudian tambahkan komponen "Circle Collider 2D" dan ubah nilai Radius menjadi 0.3, jangan lupa untuk mencantum "Is Trigger". Buatlah prefabnya seperti biasa.

Kemudian buatlah sebuah script bernama "CoinScript" seperti berikut:

Tambahkanlah script itu ke prefab coin.
Karena script itu dimasukkan ke prefab koin, ia akan menghapus koin yang disentuh objek yang tagnya adalah "Player" (penggunaan huruf besar berpengaruh).
Sebelum dicoba, kita perlu mengubah tag si player dari "Untagged" menjadi "Player".

Sekarang, player sudah bisa mengambil koin-koin yang berada di level.

Tetapi ada yang kurang, koin langsung menghilang ketika diambil si player. Marilah kita tambahkan efek dengan mengubah script "CoinScript" menjadi seperti ini:

Di script ini kita menambahkan sebuah fungsi IEnumerator, saya menggunakan fungsi ini karena garis kode yield return null; tidak dapat ditulis di dalam fungsi biasa. Garis kode itu menunggu satu frame.

Unity Platformer Tutorial [Part 3]

Dari part 2, kita akan lanjut ke part 3. 

Di dalam tutorial part 3 ini, kamu akan:
    - menggunakan platform effector,
    - menambahkan platform air,
    - membuat player menyelam di air,
    - menambahkan awan dan matahari,
    - menggunakan sorting layer,
    - dan menghias level.

Tutorial part 3 ini memerlukan waktu kurang lebih 45 menit.

Menggunakan Platform Effector

Kalau kamu menekan tombol panah atas dan panah kanan di waktu yang sama, ketinggian melompat si player tidak sama, terkadang lebih rendah:

Untuk mengatasi ini, tambahkanlah komponen Platform Effector 2D ke "ground" dan "ground grass". Ubah nilai One Way -> Use One Way dari true menjadi false.
Juga ubah komponen Box Collider 2D; cantumkan Used by Effector.
Tapi ingat, kita hanya perlu mengubah prefabnya saja. Inilah yang saya lakukan:

Selesai.

Menambahkan Platform Air

Sekarang hanya ada platform tanah/rumput, mari kita tambahkan platform air.
Download file berikut:

water top.png

water.png

Upload file-file itu ke Unity (bagian Projects, folder "Sprites"). Jangan lupa untuk mengubah Pivot dan Wrap Mode, seperti yang kita lakukan di part 1.

Kemudian "Create Empty" untuk "water" dan "water top", seperti yang kita lakukan di part 1.
Buat prefabnya (drap and drop ke bagian Projects, folder "Prefabs").
Ubahlah nilai "Color" dari komponen Sprite Renderer menjadi agak transparan, (dengan mengklik kotak putih) supaya player tetap terlihat ketika berada di air:

Kemudian tambahkan komponen Box Collider 2D dan komponen Buoyancy Effector 2D. Jangan lupa untuk mencantum "Is Trigger" dan "Used by Effector" di komponen Box Collider 2D.
Kurang lebih seperti berikut:

Buatlah sebuah kolam/danau dengan menduplikat dan mengopi platform-platform itu (di Hierarchy).
Jangan lupa untuk men-snap platform-platform itu. (Edit -> Snap Settings...)

Harusnya player akan mengapung di permukaan air, dan ia akan bisa keluar lewat samping:

Player mengapung di air

Membuat Player Menyelam di Air

Kita akan membuat player menyelam ke bawah kalau tombol panah bawah sedang ditekan, dan kalau player sedang berada di air.

Untuk melakukan ini, kita perlu mengubah script Player.cs menjadi:

Player.cs

Penjelasan Script

Kita tambahkan variabel whatIsWater (LayerMask) dan onWater (bool).
Variabel ini digunakan seperti di part 2 (untuk mencek ketika sedang menyentuh tanah), tetapi kali ini untuk mencek ketika sedang menyentuh air.
Kenapa -jumpforce / 2? Nilai ini tidak berpengaruh kalau kamu mau mengubahnya, tetapi nilai ini harus dibawah 0 supaya player bergerak ke bawah.

Setelah itu, kita perlu mengubah layer prefab "water top" dan "water" menjadi "Water":

Tips: Kalau sedang berada di sebuah GameObject (yang memiliki prefab), kamu bisa mengklik tombol "Select" untuk pindah ke prefabnya:

Selesai! Harusnya player bisa menyelam ketika tombol panah bawah sedang ditekan, seperti:

Player menyelam

Menambahkan Awan dan Matahari

Mulailah dengan menambahkan awan.
Download file ini: (awan berwarna putih)

clouds.png

Dan seperti biasa, upload gambar itu ke Unity (folder Sprites), tetapi kali ini kita hanya ubah nilai Wrap Mode, karena kita tidak akan men-snap awan-awan ini.
Juga ubah nilai "Sprite Mode" dari "Single" menjadi "Multiple". Klik tombol "Apply", kemudian klik tombol "Sprite Editor".
Sebuah Window baru akan terbuka. Di kiri-atas, klik Slice -> tombol Slice, dan klik Apply.
Seperti berikut:

Di bagian Hierarchy, Create Empty dan beri nama "decorations". Di dalam decorations, Create Empty sekali lagi dan beri nama "clouds". Kemudian buatlah 3 GameObject: clouds_0, clouds_1, dan clouds_2. Buatlah sebuah prefab untuk setiap awan:

Sekarang, di bagian "Game", awan berada di depan level dan player.

Untuk memindahkannya ke belakang, kita hanya perlu untuk mengubah nilai posisi Z menjadi sebuah angka yang lebih besar dari 0:

Kemudian ubahlah Main Camera > komponen Camera > nilai Projection dari "Orthographic" menjadi "Perspective" supaya awan terlihat agak jauh. Seharusnya ukuran awan di bagian "Game" menjadi lebih kecil, ini terjadi karena awan menjadi terlihat jauh.

Tips: Ubah posisi Z awan menjadi angka yang berbeda-beda untuk mendapatkan sebuah efek yang menarik. Posisi Z bisa diisi dengan angka yang tidak bulat.

Mungkin kamu mau awan yang agak transparan, ubahlah prefab-prefab awan itu menjadi agak transparan seperti yang kita sudah lakukan ke platform air.
Perbanyak awan-awan itu kalau kamu mau, kamu juga bisa mengubah ukurannya.

Sekarang, kita akan menambahkan matahari. Matahari ini akan dibuat dari beberapa lingkaran dengan warna dan ukuran yang berbeda.
Mulailah dengan membuat sebuah GameObject kosong di dalam decorations bernama "sun".
Ubah posisi Z menjadi sebuah angka yang lebih kecil dari awan-awan, supaya matahari berada di belakang. Posisi Z matahari saya adalah 20.
Kemudian di bagian Projects, folder Sprites, klik kanan dan pilih Create > Sprites > Circle, beri nama "circle".
Buatlah GameObject yang bernama circle 1, 2, 3, dan 4. Seperti:

Ubahlah ukuran dan warna lingkaran-lingkaran itu. Berikut adalah nilai-nilai yang saya gunakan:

circle 1:
Scale: x = 18.5, y = 18.5
Color: #FFAD2564

circle 2:
Scale: x = 26, y = 26
Color: #FFAD1E66

circle 3:
Scale: x = 12.5, y = 12.5
Color: #FFAD28FF

circle 4:
Scale: x = 33.5, y = 33.5
Color: #FFAD1E49

Menggunakan Sorting Layer

Setelah kita mengubah Camera menjadi perspektif, ketika player masuk ke air, player berada di depannya:

Ini terjadi karena kita membuat player sebelum kita membuat air.
Untuk memindahnya kedepan, kita perlu mengubah Sorting Layer untuk mengubah urutan air dan si player.
Untuk melakukan itu, buatlah dua Sorting Layer dengan mengklik Edit -> Project Settings -> Tags and Layers, kemudian di bagian Inspector tambahkan 2 sorting layer bernama "Player" dan "InFrontOf Player".

Ubah nilai Sorting Layer si player (komponen Sprite Renderer) dari "Default" menjadi "Player". Ubah juga nilai Sorting Layer prefab water dan water top menjadi "InFrontOf Player".

Harusnya player berada dibelakang air:

Menghias Level

Kita akan menghias level dengan gambar berikut:

flower.png

tree.png

Upload gambar-gambar itu seperti ketika kita mengupload blok air.
Di bagian Hierarchy, gameobject "decorations", buatlah sebuah object kosong yang bernama "flowers" dan "trees".
Kemudian buat object "flower" di dalam object "flowers" dan buatlah object "tree" di dalam object "trees". Setelah itu buatlah prefabnya.
Kalau agak bingung, lihat gambar berikut:

Hiasi level kamu dengan menaruh dan menduplikat bunga-bunga dan pohon-pohon di tempat yang berbeda beda. Kamu juga bisa menggunakan ukuran yang berbeda-beda.

Tips: Ketika sedang mengubah ukuran sebuah object, tekan tombol Shift supaya perbandingan antara tinggi dan lebarnya sama.

Hiasan-hiasan ini akan otomatis berada di belakang player. Kalau kamu mau ada bunga atau pohon yang berada di depannya, gunakan sorting layer. Ubah nilai sorting layernya menjadi "inFrontOf Player".

Bunga-bunga ini memiliki sorting layer yang berbeda

Part 3 selesai. Namun masih ada part 4.

Unity Platformer Tutorial [Part 2]

 

Ini adalah tutorial lanjutan dari part 1. Di tutorial part 2 ini, kamu akan membuat player melompat, menggerakkan camera, dan membuat sebuah prefab.

Tutorial part 2 ini memerlukan waktu minimal 30 menit.

Membuat Player Melompat

Kamu bisa mencoba untuk membuat player melompat dengan cara yang sama seperti kita menggerakkan player ke kiri dan ke kanan:
 

Script ini tidak akan digunakan

Script diatas dapat membuat player melompat, tapi script itu membolehkan player untuk terbang.
Player jadi bisa terbang, karena selama kamu menekan tombol panah atas (up arrow), ia akan men-set velocity y menjadi 7.
Harusnya, player hanya bisa melompat kalau sedang menyentuh tanah.
Jadi pseudocode dari script yang akan kita tambahkan adalah:
Kalau tombol panah atas sedang ditekan dan player sedang menyentuh tanah, maka ubah nilai velocity y menjadi 7.
Tetapi bagaimana kita mengecek kalau player sedang menyentuh tanah?
Untuk melakukan itu, kita akan membuat sebuah "sensor" yang mengikuti player, seperti berikut:

Sensor diletakkan dibawah player

Sensor ini tidak akan terlihat.

Mulailah dengan membuat sebuah GameObject kosong (Hierarchy -> Create -> Create Empty) bernama "player ground sensor".
Kemudian buatlah sebuah script untuk sensor ini bernama "FollowPlayer". Script ini akan membuat sensor itu mengikuti si player:

FollowPlayer.cs

Kemudian, ubah nilai y Offset dari komponen Follow Player (Script) dari "player ground sensor" menjadi -0.5, supaya sensor tidak mengikuti pivot/center (tengah) si player, tetapi 0.5 unit dibawahnya.

Posisi sensor = Posisi player - 0.5

Sekarang, sensor sudah ada, dan sudah mengikuti si player.
Yang kurang adalah scriptnya yang mengecek kalau player sedang menyentuh tanah atau tidak. Kita hanya perlu mengubah script Player.cs saja.

Mulailah dengan mendeklarasi variabel-variabel seperti berikut (ke script Player.cs):

groundSensor adalah sebuah variabel yang akan diisi menjadi sebuah sensor yang akan kita buat nanti.
groundSensorRadius adalah ukuran radius si sensor dengan nilai standar 0.1f.
jumpforce adalah tenaga untuk melompat dengan nilai standar 7.

whatIsGround adalah sebuah variabel yang akan diisi dengan layer "Ground" nanti.

Layer player adalah Default

Nanti, layer "ground" dan "ground grass" akan diubah menjadi sebuah layer baru yang dinamai "Ground".

onGround adalah sebuah variabel bertipe boolean, yang nanti akan kita atur supaya nilainya menjadi true ketika sensor sedang menyentuh tanah, dan false ketika sensor tidak menyentuh tanah.

Sekarang, kita akan mengubah fungsi Update () di script Player.cs menjadi seperti berikut:

Penjelasan Script

if (Input.GetKey (KeyCode.UpArrow) && onGround) {
If Statement ini menjadi true kalau tombol panah atas sedang ditekan dan player sedang menyentuh tanah.

onGround = Physics2D.OverlapCircle (groundSensor.position,  groundSensorRadius, whatIsGround);
Baris kode ini mengubah nilai onGround menjadi true kalau si sensor sedang menyentuh sebuah GameObject yang layernya adalah whatIsGround, dan false kalau sensor tidak menyentuh sebuah GameObject yang layernya adalah whatIsGround.

Sekarang, kita perlu mengubah layer "ground" dan "ground grass" menjadi Ground.
Sebelum itu, kita perlu membuat layer baru. Klik sebuah GameObject dan klik Layer -> Add Layer..., kemudian tambahkan sebuah layer bernama "Ground", seperti ini:

Membuat sebuah Layer "Ground"

Ubah layer "ground" dan "ground grass" dari "Default" menjadi "Ground" seperti ini:

Sekarang, di Unity, ubah komponen Player (Script) dari GameObject player menjadi seperti ini:

(drag-and-drop si sensor dari bagian Hierarchy ke variabel Ground Sensor)

Selesai! Mestinya si player sudah bisa melompat.

Menggerakkan Camera

Bagaimana caranya untuk menggerakkan camera supaya camera mengikuti player?
Caranya sangat mudah, tambahkan script FollowPlayer ke Main Camera.
Mestinya Camera akan mengikuti player ketika game di play, tetapi camera akan berubah menjadi langit semua, seperti ini:

Ini terjadi karena posisi z Main Camera adalah 0, yang harusnya adalah -10.
Kita harus mengubah script FollowPlayer.cs menjadi seperti ini:

FollowPlayer.cs

Kita menambahkan sebuah variabel publik zOffset dan mengubah Vector2 menjadi Vector3.

Setelah itu ubah nilai z Offset dari komponen Follow Player (Script) dari Main Camera menjadi -10. Sekarang, mestinya Camera sudah mengikuti player dengan benar.

Membuat Prefab Untuk Platform

Sebuah prefab adalah sebuah GameObject dengan properti yang telah ditentukan. Kamu bisa men-drag sebuah prefab ke bagian Hierarchy seperti kamu telah men-drag sebuah sprite ke bagian Hierarchy, tetapi mereka akan memiliki semua komponen dan nilai yang sudah jadi.

Kamu bisa membuat sebuah prefab dengan men-drag sebuah GameObject dari bagian Hierarchy ke bagian Projects.
Kamu juga bisa mengubah sebuah prefab seperti kamu mengubah sebuah GameObject, tetapi bedanya adalah semua GameObject yang mengikuti si prefab ini juga akan berubah. Ini adalah kelebihan prefab dari GameObject biasa.

Buatlah sebuah folder bernama "Prefabs" (di bagian Projects).
Kemudian, buatlah sebuah prefab untuk "ground" dan "ground grass" seperti berikut:

Seperti yang kamu lihat di atas, GameObject yang men-referensikan sebuah prefab warnanya menjadi biru. Tapi ground (1), ground (2), dll warnanya belum biru.
Yang harus kamu lakukan adalah menghapus semua GameObject yang belum men-referensikan sebuah prefab, seperti ini:

Setelah itu kamu bisa membuat level lagi dengan mengopi atau menduplikat blok-blok itu.

Selanjutnya silahkan lanjutkan ke part 3!

 

Aplikasi Belajar Masjid dan Pasar Bebas Unduh

Masjid Al Irsyad Kota Baru Parahyangan Bandung

 

Ini adalah sebagian cerita pengalaman anak anak di rumah membuat aplikasi Android mengenai Mesjid dan Pasar. Aplikasi "Mengenal Masjid di Indonesia" bercerita tentang beberapa Masjid-masjid yang ada di Indonesia, sejarah perkembangan Masjid dan permainan. Aplikasi ini adalah salah satu aplikasi yang terpilih menjadi Finalis kategori Pelajar pada ajang Lomba Membuat Aplikasi yang diselenggarakan oleh BPMPK Kemdikbud pada tahun 2018. Waktu itu si pembuat lomba masih berusia 14 tahun. 

Setahun setelahnya Aplikasi "Pasar Rakyat" dibuat dan terpilih menjadi Finalis kategori Pelajar pada ajang Lomba Membuat Aplikasi yang diselenggarakan oleh BPMPK Kemdikbud pada tahun 2019. 

Masjid dan pasar ini adalah suatu studi yang cukup lama dan 'agak ambisius' karena kami ingin mengupas tuntas semua hal yang berhubungan dengan Masjid dan Pasar di Indonesia. Banyak sekali studi literatur dan studi lapangan yang dibuat. Suatu hal yang mungkin  masih sulit untuk dilakukan oleh anak tingkat SMP. Apalagi setelah itu informasi tersebut harus dikemas dalam bentuk aplikasi Android yang dapat dijalankan di HP. Ternyata memang sampai aplikasi selesai, kami masih belum bisa menyelesaikan materi tentang Masjid dan Pasar yang sangat banyak dan luas ini. 

Tulisan di bawah ini adalah cerita seputar belajar mengenal Masjid dan Pasar oleh anak anak HomeSchooling di rumah.

Persamaan dan Perbedaan Masjid dan Pasar

Bicara tentang Masjid dan Pasar tidak akan ada habisnya.. hampir di seluruh tempat akan ada Masjid dan Pasar. Ketika sedang jalan jalan, bertamu atau pindah ke tempat baru, tempat ini adalah salah satu tempat yang sering dicari. Walaupun Masjid dan Pasar ada di mana mana, tapi wujud fisik Masjid dan Pasar di setiap tempat hampir tidak ada yang sama. 

Masjid adalah tempat ibadah umat Islam yang sebetulnya sangat banyak aturan. Contohnya ada beberapa makhluk yang dilarang untuk masuk ke dalam Masjid, Masjid juga harus dijaga kebersihan dan kesuciannya terutama dari kotoran dan najis, Masjid memiliki arah menghadap kiblat sesuai dengan arah shalat Umat Islam, dan lain lain. Namun terlepas dari banyaknya aturan yang perlu diikuti, tetap saja Masjid menjadi tempat yang relatif banyak dikunjungi. Uniknya, di setiap tempat terutama di Indonesia, bangunan Masjid memiliki ciri khas tersendiri. Secara umum, bentuk Masjid di Indonesia relatif tidak ada yang sama persis. Banyak sekali bangunan Masjid yang unik dan menjadi ciri dari suatu tempat contohnya Masjid Istiqlal yang ada di DKI Jakarta, Masjid Kudus di Jawa tengah, Masjid Salman di Jawa Barat, dan lain lain.

Berbeda lagi dengan Pasar. Pasar lebih bebas, tidak memiliki aturan sebanyak Masjid. Membuat Pasar lebih sederhana dari membangun Masjid. Cukup sediakan tanah lapang dan tempat untuk berjualan di daerah yang banyak dikunjungi orang. Maka Pasar akan tumbuh secara organik. Yang sulit justru mengendalikan pertumbuhan Pasar. Semakin banyak pedagang dan pembeli dalam suatu tempat, tentu saja dibutuhkan semakin banyak aturan. Ketika ini terjadi muncullah suatu kesadaran bahwa Pasar adalah tempat publik yang perlu dijaga bersama sama melalui aturan.  Aturan yang ada dalam Pasar dibuat untuk meningkatkan kenyamanan interaksi antara penjual dan pembeli seperti menjaga kebersihan, keamanan, dan lain lain. Sekarang Pasar diatur oleh Pemerintah Daerah sehingga pertumbuhannya terus dikendalikan walaupun masih ada pasar yang terjadi secara informal dari kaki lima dan pedagang asongan. 

Pintu Masuk Pasar Cihapit Bandung

Jualan Ayam

Payung sebagai elemen dekoratif

Belajar tentang Masjid dan Pasar

Karena Masjid dan Pasar ini adalah topik yang dapat dipelajari dari berbagai sudut pandang baik budaya, sosial, aturan dan hukum serta arsitektur, kedua topik ini saya pilih  sebagai bahan belajar di rumah. Kami  melakukan studi lapangan dengan jalan jalan ke Masjid dan Pasar, memotret dan mencoba untuk berbelanja di Pasar. Studi lain dilakukan melalui buku dan internet. Pasar adalah topik pelajaran IPS tingkat SMP sementara Masjid, saya belum menemukannya dalam buku pelajaran. Sejarah perkembangan Masjid dan Pasar kami temukan dari Internet. Sebetulnya untuk Masjid, dulu ada buku dan CD Masjid 2000 yang dibuat oleh mahasiswa (sekarang sebagian besar sudah jadi Arsitek, Tokoh masyarakat dan Pengajar)  jurusan Arsitektur yang membahas tentang sejarah, filosofi dan tehnik membangun Masjid di Indonesia. di sana kita dapat melihat foto, gambar dan konsep serta sejarah Masjid. Ada juga animasi 3D yang dapat bergerak untuk melihat interior Masjid (zaman itu animasi masih langka dan terbatas, jadi karya ini sangat luar biasa di zamannya). Sayangnya setelah sekian lama mencari CD dan bukunya, kami tidak dapat menemukannya. Hanya link kosong di sini yang masih bersisa.

Hasil belajar Masjid dan Pasar ini dituangkan ke dalam sebuah aplikasi Android oleh anak saya yang  kedua. Isinya berbentuk uraian, tinjauan sejarah dan gim. Karya pertamanya adalah Mengenal Masjid  Indonesia. Sungguh masih sangat terbatas dan masih jauh sekali dari Masjid 2000. Waktu itu anak saya masih berusia 14 tahun dan dia mengerjakannya sendirian. 

Halaman Muka Mengenal Masjid Indonesia

 

Gim Menyusun Gambar Masjid

 

Karya keduanya,  Pasar Rakyat dibuat pada tahun 2019. Karya ini dibuat ketika sang anak dalam keadaan sakit, dan kami harus bolak balik ke dokter mencari sebab penyakitnya, namun aplikasi masih dapat diselesaikannya dibantu salah seorang adiknya. 

Halaman Muka Pasar Rakyat

Cerita Jual Beli

 

Permintaan dan Barang

Distribusi Barang dari Pasar

Pengaturan barang di Pasar

 

Sejarah Pasar

 

Pasar Unik di Indonesia

Alhamdulillah kedua karyanya terpilih sebagai finalis dalam lomba Mobile Application yang diselenggarakan oleh Kemdikbud kategori pelajar pada tahun 2018 dan 2019.

Pandemi

Masjid dan Pasar adalah tempat yang sering kami kunjungi dan itu tidak terjadi setelah pandemi. Ada banyak protokol ketat yang berlaku di Masjid yang menyebabkan kami memilih untuk beribadah di rumah saja. Sementara kalau ke pasar, terus terang kami merasa lebih banyak resiko yang akan didapat dan tidak sebanding dengan hasil yang kami dapat dari pasar. Jadi kami memilh belanja "on line" saja dan mengandalkan tukang sayur yang masih setia berjualan dari rumah ke rumah. 

Terus terang saya masih rindu dengan bangunan Masjid yang indah, luas dan megah dengan permainan lampu terang dan gelap, mural, atap dan jendela yang berbeda dari bangunan rumah, serta sudut sudut dan terasnya tempat muslimah dapat bersembunyi atau berdiskusi tentang agama. 

Mihrab Masjid Al Irsyad

 

Selasar Masjid

 

Sudut Berkesan

Sedikit melegakan karena kami masih dapat mendengar suara adzan dan shalawat dari Mesjid dekat rumah, walau kadang suaranya terlalu keras, semoga tidak ada yang terganggu... (apakah perlu menggalang dana untuk mengadakan pengeras suara yang nyaman di kuping? ini hanya celoteh saja ya..). Salut untuk penjaga masjid dan pengurusnya yang masih bersusah payah menghidupkan Masjid dan harus tetap menjaga diri agar tidak terjangkit penyakit....Semoga pandemi ini segera berakhir. Syukurlah masih terus dapat beribadah, dan berbelanja tanpa pergi ke Masjid dan ke Pasar.

Masjid dan Pasar, walau sekarang jauh dari pandangan, selalu ada dalam ingatan kami....