Tutorial : Bagaimana caranya pasang Heightmap di Unreal Engine 4

Pengen doonk sekali-sekali (bahkan harus dalam beberapa kasus game) kita bisa pasang heightmap di objek mesh kita supaya game terasa lebih realistik. Lalu heightmap itu apa? Berbeda dari bump map yang hanya menampilkan visual bayangan, heightmap justru menampilkan ketinggian yang aktual dari sebuah objek mesh (elevasi). Heightmap bisa diaplikasikan ke mesh yang ingin menampilkan ketinggian gunung atau daratan misalnya. Di game, heightmap digunakan untuk menampilkan detil ‘tonjolan’ tanpa harus modeling sedemikian rumit.

Untuk lebih detilnya bisa dibaca disini : https://en.wikipedia.org/wiki/Heightmap

Langsung saja, untuk membuat heightmap, lo harus buka aplikasi 3d, bisa dari 3ds Max, Maya dan lain-lainnya. Tapi untuk tutorial ini kita pake 3ds Max aja ya.

Di 3ds Max. Simpel aja, coba bikin plane dengan ukuran terserah, misalnya 500 x 500 dengan segmen masing-masing 4.

Klik dropdown Modifier list dan pilih Tesselate.

Masukkan nilai : Itterations = 2, Tension= 0 (disini lo bisa eksperimen sendiri nilainya. Setau gue, semakin tinggi nilainya, elevasi mesh akan semakin detil).

Kemudian export ke .OBJ atau .FBX terserah.. Oh iya jangan lupa di unwrap dulu ya.

Langkah berikutnya adalah memasang tekstur ke objek tadi. Disini gue merekomendasikan lo bisa memasang tekstur ke objek tadi. Untuk pasang tekstur bisa lewat Substance Painter, Photoshop, 3d Coat dan lain-lain. Tapi untuk tutorial ini okelah kita coba googling.

Buka browser, coba cari gambar “heightmap” dan pilih sesuka lo.

Catatan : Gambar dari Google diatas sebenarnya adalah image yang sudah heightmap ready. Kalo lo pengen tau gimana caranya bikin heightmap sendiri, coba sekarang googling “Mud texture”. Disana nanti akan tampil image lumpur yang coba kita generate menjadi heightmap. Save salah satunya saja. Gue pilih yang ini.

Ada beberapa cara membuat Heightmap, kalo gue lebih seneng pake aplikasi CrazyBump namanya. Lo coba bisa download disini.

Setelah save, buka CrazyBump. Trial 30 hari gapapa lah buat latihan.

Di CrazyBump, pilih image mud yang barusan lo download. Kemudian pas ditanya ini (seperti gambar dibawah), pilih aja salah satu.

Cuss mantap, kalo berhasil berarti akan muncul bola material yang sudah dikalkulasi oleh CrazyBump, diantaranya Normal map udah masuk, heightmap masuk dan lain-lainnya masuk.

Pindah tab ke Displacement (tab nya ada dibawah aplikasi CrazyBump). Nah disitu ada setting yang udah secara default disetting sama CrazyBump. Lo bisa seting sesuai kehendak lo dan bisa liat hasilnya di bola 3d tadi, atau image disebelahnya.

Kalo udah selesai, klik save. Jangan sungkan-sungkan, Save All Texture aja sekalian.

Sip, lo bisa buka hasil save tadi, disana ada COLOR, Displacement, Normal, Occlusion dan lainnya. Simpen ini jangan dibuang.

Sekarang buka Unreal Engine. Gue rekomendasikan lo udah ngerti sebelumnya dengan Unreal Engine, karena kalo gue jelasin disini bakal kepanjangan scope tutorial nya.

Intinya, Bikin New Project, kemudian pilih yang Blueprint dan pilih First Person atau Third Person template.

Import Mesh yang udah lo bikin di 3ds Max sebelumnya. Biasanya Material bakal ngikut kedalam Unreal, tapi kalo misalnya ngga, maka lo harus bikin material di Content Browser Unreal. Caranya klik kanan, kemudian pilih Material.

Selanjutnya import semua texture hasil kita buat tadi di CrazyBump.

Buka Material dengan cara double click di Material yang barusan kita buat di Unreal.

Klik base root material disebelah kanan untuk mengaktifkan panel Details di sebelah kiri. Kemudian scroll kebawah hingga lo nemu tab ‘Tesselation’. Aktifkan 4 opsi sesuai gambar diatas.

Pasang texture kedalam base root material. Pasang COLOR ke Base Color, NRM ke Normal, SPEC ke Specular, OCC ke Ambient Ocllusion.

(Naming convention diatas adalah output dari CrazyBump. Kalau Anda masukkan texture dari software lain pasti akan ada perbedaan nama. Namun intinya, Color/Albedo/Base color selalu sama. Normal ke Normal Map selalu sama. AO ke Ambient Occlusion selalu sama. Dan sebagainya).

Sejauh ini udah oke, hanya ada satu pekerjaan lagi.

Biar cepet, ikuti alur dari gambar diatas. Displacement texture dipasang diantara VertexNormalWS dan Multiply. dan dirangkai ke World Displacement pada root material.

Tekan ‘1’ pada keyboard kemudian klik kiri mouse. Pasang ke Multiply B dan masukkan nilai Material Expression Constant ke 5 atau 10. Semakin tinggi nilai nya maka akan semakin tinggi efeknya.

Tekan ‘1’ dan klik kiri mouse lagi untuk pasang node ke Tesselation Multiplier dan pasang value 2 disana.

Jika langkah Anda benar, maka material sudah terpasang efek heightmap. Segera pasang Material tadi ke mesh, dan pasang mesh ke world level Anda.

 

Tutorial : Mengaplikasikan PBR #1

Prolog : Balik lagi nih guys setelah lama juga ngga nulis dimari. Sori, banyak kerjaan dikantor dan sampe rumah udah keburu tepar. Tapi oke, hari ini sempet-sempetin bikin tutorial gimana caranya mengaplikasikan PBR dari 3ds Max/Maya kemudian balik lagi ke mereka setelah kita ‘ramu’ kedalam beberapa aplikasi.

Apa sih PBR itu? PBR atau Physically based rendering boleh dibilang trend baru di realtime game rendering. Seperti kita tahu, pencahayaan dan bayangan adalah kunci dari seni komputer grafis untuk mendapatkan scene re-realistis mungkin. PBR mengikuti aturan main alam dalam pencahayaan semirip mungkin untuk kemudian dipantulkan ke objek. Jika dijabarkan lebih panjang tentunya sudah bukan masuk ranah artist/seniman lagi, tapi sudah kalkulasi matematika. Sebenarnya PBR bukan mainan baru di komputer grafis, cuma mungkin kita baru mengenal banyak di industri game dikarenakan dulu game-game belum siap untuk mengaplikasikan teknologi ini (coba lihat perbedaan grafis Playstation 1 dengan konsol masa kini). Banyak aplikasi yang sudah mengikutsertakan teknik PBR, seperti Unity 5, Unreal Engine 4, 3ds Max, Maya, Fox Engine, Frostbite, Marmoset dan yang terbaru Blender versi 2.79 dan lainnya. Tidak hanya diaplikasikan dalam game, PBR juga berjalan sangat baik di industri perfilman.

Apa aja yang dibutuhkan untuk menciptakan PBR? Sebenarnya pertanyaan ini rada general, tentu saja Anda butuh komputer, bukan kompor. Namun saya mengerti maksud Anda. Untuk menciptakan PBR sebenarnya secara mendasar membutuhkan 3 texture, yaitu Albedo, Roughness dan Metalness. Nah loh apa lagi itu. Generaly speaking, itu hanyalah texture yang kita pakai di aplikasi 3d untuk menciptakan PBR. Namun dimana Anda mendapatkan 3 texture itu? Aplikasi seperti 3d Coat, Quixel atau Substance Painter bisa menghasilkannya untuk Anda dan di tutorial ini kita akan pergunakan 3d Coat dan Quixel DDO.

Apa saja yang Anda butuhkan? Untuk model desain bisa unduh dari yang saya bikin disini. Untuk tutorial ini kita tidak modeling. Jika Anda punya mesh sendiri, pastikan sudah di unwrap terlebih dahulu. Tidak peduli Anda membuatnya di Maya, 3ds Max, Blender atau lainnya yang penting kita membutuhkan format .obj untuk kemudian di bake lebih cepat menggunakan XNormal nanti. Saya sudah pernah bikin tutorial bake di 3ds Max disini.

Berikut aplikasi yang akan kita pakai; 3ds Max, Maya, Blender, XNormal, Photoshop, Quixel DDO, 3D Coat, Substance Painter, Crazy Bump. Beberapa aplikasi tadi tidak semuanya dipakai alias ada yang opsional. Namun saya coba jelaskan apabila Anda membutuhkan beberapa diantara software tersebut di workflow Anda.

Sebelum mulai, Anda bisa unduh file 3d buatan saya disini sebagai bahan latihan. Saya tidak tahu itu sebenernya mesin apa, so yeah!

Jadi dimana saya bisa memulainya? Berikut workflow nya ketika saya mengaplikasikan PBR di kantor untuk kebutuhan game Second Life dan pekerjaan hobi. Pertama, tentu Anda mendesain objek yang ingin dipasang material PBR. Saya sertakan 2 objek, satu yang low-polygon dan satunya yang high-polygon untuk kemudian saya bake di next step. Harap diingat bahwa low-poly harus sudah di unwrap. Kedua, menggunakan aplikasi XNormal yang bisa diunduh gratis disini. Hasil dari XNormal berupa 2 tekstur saja yang saya pakai, yaitu Ambient Occlusion dan Normal Map. Berikutnya di langkah ketiga saya buka aplikasi Quixel DDO dimana Anda bisa unduh disini. Output dari DDO akan menghasilkan Albedo/Color, Ambient Occlusion, Metallic, Normal Map dan Roughness. Keempat saya buka aplikasi 3d Coat untuk detailing teksturing menggunakan output yang saya dapatkan dari Quixel DDO. Sebenarnya DDO hanya opsional ketika saya malas untuk bikin material albedo yang digunakan di 3d Coat meskipun di software tersebut sebetulnya Anda bisa membuatnya sendiri. Anda bisa unduh 3d Coat disini. Terakhir atau kelima, saya export dari 3d Coat ke Blender, atau Maya, atau ke Unreal Engine dan saya mendapatkan hasil yang saya mau. Beberapa aplikasi tambahan seperti Crazy Bump tetap saya butuhkan untuk modifikasi Normal Map atau Ambient Occlusion apabila output dari DDO atau 3d Coat belum sesuai selera saya. Step diatas akan saya jabarkan di artikel ini meskipun tidak meng-cover keseluruhan fitur per aplikasi secara komplit (karena scope nya terlalu besar).

Di tutorial ini nanti kita akan belajar; bagaimana mengaplikasikan material ID di 3ds Max, bagaimana mem-bake menggunakan XNormal, bagaimana membuat folder kerja yang mudah, bagaimana membuat color ID di Photoshop, kemudian bagaimana membuat tekstur di DDO. Hingga akhirnya bagaimana kita mengaplikasikan PBR di Maya dan Blender.

Setelah file berhasil Anda unduh, Anda bisa membuka nya di 3ds Max. Perlu diingat bahwa model ini adalah low-poly, artinya jumlah poligon sangat terbatas dan sesuai pada game engine saat ini. Poligon dengan jumlah yang banyak memungkinkan lebih berat sistem untuk bekerja dan tidak sesuai dengan game engine dan spesifikasi komputer. Jika Anda bergerak di dunia game development, seharusnya tahu akan isu seperti ini.

Setelah Anda buka, untuk memastikan saja, satu objek tersebut dibagi menjadi beberapa parts. Nanti parts akan di bake satu persatu.

Export parts demi parts tersebut ke dalam sebuah folder dengan nama “to XNormal”. Maksudnya adalah objek-objek tadi akan kita pakai ke aplikasi XNormal. Sebenarnya aturan penamaan ini hanyalah kebiasaan saya saja mengingat nanti akan ada banyak objek, saya harus memberi nama yang cukup relevan. Kasih nama objek per objek tadi misalnya; “lowpoly1”, “lowpoly2” dan seterusnya. Export bisa menggunakan export selected (pilih objek > File > Export > Export Selected). Export semuanya ke .obj

Berikutnya untuk mendapatkan hasil ambient occlusion yang pas, Anda membutuhkan setidaknya 2 plane atas dan bawah objek. Buatlah 2 plane di 3ds Max dan tempatkan di bagian atas dan bawah objek seperti pada gambar dibawah. Berikanlah jarak yang rada jauh diantara kedua objek. Export kedua objek plane tadi dan beri nama “plane”. Langkah export sama seperti kita export objek mesin sebelumnya.

Pertanyaan kemudian muncul: “Kenapa kita membutuhkan high-poly dan bukannya low-poly untuk mendapatkan ambient occlusion?”. Dalam beberapa kasus, misalnya kita membutuhkan retakan pada objek, retakan tersebut cukuplah ada di high-poly untuk kemudian kita ambil bayangannya. Jika retakan tadi (yang cukup banyak memiliki tris/poligon) diaplikasikan juga dalam low-poly, game yang Anda ciptakan akan semakin berat dan tidak efektif. Sebetulnya sah saja Anda mem-bake dengan kedua objek low. Namun semua balik lagi ke desain Anda. High poly bisa dibuat di ZBrush, misalnya Anda ingin membuat tekstur monster untuk kulit monster low-poly Anda. Kemudian output Zbrush tadi dikenal dengan high-poly dan di bake ke low-poly objek. Hasil low-poly yang sudah di bake tersebut akan memiliki bayangan yang serupa dengan high-poly tadi tanpa melibatkan poligon yang berlebih. Di akhir tutorial ini, saya akan memberikan objek gratis untuk Anda coba menggunakan high-poly sungguhan, sebagai bahan latihan Anda.

Sekarang, untuk mendemonstrasikan low-poly bisa di bake ke low-poly, pilih semua objek tadi di 3ds Max Anda. Pilih semuanya, bukan parts per parts seperti yang kita lakukan sebelumnya. Jika semua objek mesin tadi sudah terpilih, klik File > Export > Export Selected dan export ke .obj seperti yang sudah kita lakukan sebelumnya. Kemudian beri nama “highPolyTest”

Oke, sekarang buka aplikasi XNormal Anda. Di pojok kanan atas, klik ‘High Definition Meshes’. Klik kanan di area kosong/hitam kemudian pilih Add meshes. Oleh karena Anda memilih High Definition Meshes, Anda butuh objek untuk dipantulkan bayangannya ke objek low-poly Anda. Pilih file obj yang kita jadikan high-poly dengan nama “highPolyTest” yang kita buat sebelumnya.

Kemudian masih di area hitam yang sama, klik Add meshes sekali lagi dan import “Plane” yang sudah kita buat sebelumnya.

Sekarang masih di XNormal, pindah ke “Low Definition Meshes”. Klik kanan di area kosong kemudian pilih Add meshes, kali ini kita akan ambil low-poly mesh. Pilih file “lowpoly1” seperti yang kita buat sebelumnya.

Masih di XNormal, sekarang di sebelah kanan, klik “Baking options”. Centang “Normal Map” dan “Ambient Occlusion” di list sebelah kiri. Tentukan ukuran/size yang ingin Anda hasilkan (saya menggunakan 1024 x 1024) dan tentunya lokasi tempat dimana hasil bake tersebut saya save. Saya men-save nya kedalam folder bernama “from XNormal” agar suatu saat saya mudah mencari nya. Pastikan padding = 0.

Jika sudah, cek kembali kemudian klik tombol “Generate Maps” dibawah. Anda akan membutuhkan waktu agar semuanya selesai. Jadi, mari kita seruput kopi dan ngerokok dulu.

Jika langkah Anda benar, maka tampilan seperti gambar diatas akan muncul. Ya, itu hasilnya. Beberapa image diatas tampak sepertinya kepotong bukan? Itu karena ada parts lain bertubrukan selama proses rendering tadi. Oleh karena high-poly kita menggunakan banyak parts jadi satu, maka XNormal akan mengenali nya dan mem-bake keseluruhan parts menjadi satu kedalam low-poly. Masih bingung? Sekarang coba langkah dibawah.

Jika, Anda membuat high-poly yang terpisah pula dan bukan keseluruhan objek, maka hasil seperti dibawah akan Anda dapatkan.

Terlihat bedanya bukan? Sebenarnya terserah Anda mau menggunakan yang mana. Namun dalam beberapa kasus, mungkin Anda ingin menggeser beberapa parts. Jika Anda menggunakan yang pertama, maka hasilnya akan kacau. Ingat, itu adalah bayangan pasif, Artinya dengan Anda menggeser, bayangan tadi sudah berupa file PNG atau JPG. Namun jika Anda tidak memiliki niat untuk menggeser parts pada mesin tadi, sebenarnya sah saja menggunakan hasil bake pertama.

Permasalahan : Jika saya menggunakan hasil bake kedua dimana semua parts low dan high dipisah, itu artinya tidak ada bayangan pada objek yang bertubrukan. Beberapa aplikasi seperti 3d Coat memiliki fitur untuk generate Ambient Occlusion. Ketika di export, bayangan yang sudah ada sebelumnya (hasil dari XNormal) juga akan ikut di generate menjadi lebih hitam di 3d Coat. Permasalahannya adalah, sesuai pengalaman saya, beberapa sudut akan terlihat jauh lebih gelap dari yang lain (karena beberapa sudut ada yang di bake dan ada yang tidak). Alhasil bayangan-bayangan tadi menjadi tidak imbang. Sebenarnya, di 3d Coat Anda juga bisa melewati proses import ambient occlusion dan menciptakan sendiri AO dari 3d Coat. Jadi ini terserah Anda.

Jika sudah, klik Close karena file image tadi sudah di save.

Catatan : Jika hasil Anda terlalu gelap, mungkin plane Anda terlalu lebar atau terlalu dekat. Jauhkan dan kecilkan ukurannya kemudian export dan bake ulang di XNormal. Tentu ini akan membutuhkan waktu lama. Jadi kata siapa pekerjaan ini menyenangkan 🙂

Lakukan proses baking menggunakan XNormal untuk parts low-poly yang lain. Ingat untuk membuat nama file yang mewakili objek nya supaya Anda tidak bingung nantinya.

Nantikan kelanjutan tutorial ini di part kedua. Stay tuned dan jangan lupa share ke teman-teman Anda apabila mereka membutuhkan.

 

Unreal Engine 4 Tutorial #7 : Content Browser

Content Browser di editor Unreal sama dengan Windows Explorer jika Anda cukup familiar dengan Windows operating system. Secara default, Content Browser sudah ada di editor ketika Anda membuka editor Unreal. Jika secara tidak sengaja Anda menutup Content Browser, Anda bisa membukanya kembali di Toolbar > Content.

Content Browser adalah cara paling mudah untuk mengakses konten yang Anda miliki dalam project, bisa berupa static mesh, special effect, sound, blueprint, material dan lain sebagainya.

Yang penting untuk Anda ketahui bahwa editor Unreal Content Browser direct langsung ke folder tempat dimana Anda membuat project di windows. Jadi misalnya saya membuat project, maka konten dari asset yang saya buat dan import ke Content Browser juga bisa Anda lihat di jendela windows

Gambar diatas adalah lokasi tempat dimana saya save project saya di Documents > Unreal Projects > ProjectUnreal (nama project saya) > Content > StarterContent serupa dengan apa yang muncul di Content Browser seperti gambar dibawah.

Untuk mengakses lebih cepat di Windows explorer, Anda bisa klik kanan di ruang kosong Source Panel, kemudian pilih Show in Explorer pada layar popup yang muncul.

Untuk berinteraksi dengan objek di Content Browser kedalam viewport, Anda cukup drag and drop. Misalnya, jika Anda membuat project dengan Starter Content, bukalah Content Browser, kemudian masuk ke alamat Content > StarterContent seperti gambar dibawah.

Disebebelah kanan, Anda pilih folder Props, carilah objek yang Anda inginkan, kemudian drag and drop ke viewport.

Untuk membuka sub-editor pada asset, Anda bisa klik 2x pada objek di Content Browser. Jadi misalnya saya double click SM_Couch, maka editor akan membuka jendela baru. Sub editor ini digunakan untuk memodifikasi objek, seperti collision atau material. Namun kita belum membahas ini lebih jauh untuk saat ini, jadi Anda bisa tutup sub-editor.

Di bagian paling kiri Content Browser adalah jendela hierarki Content Browser mirip Windows explorer atau disini disebut Source Panel. Anda bisa mengakses folder dan subfolder disana. Ketika Anda mengklik salah satu folder di jendela hierarki, maka editor secara otomatis membuka isi dari folder tersebut disebelah kanan Content Browser.

Di bagian atas Content Browser, tombol berwarna hijau Add New adalah langkah pertama Anda untuk membuat content bagi project Anda. Misalnya saya ingin membuat folder baru, klik Add New kemudian pilih New Folder. Selain folder baru, Content Browser memungkinkan Anda untuk membuat Blueprint, Level, Material, Particle System dan lain sebagainya.

Untuk mencoba fitur tersebut, cobalah buat Material baru di Content Browser. Klik Add New kemudian pilih Material. Material baru akan muncul di Content Browser Anda. Harap perhatikan dimana Anda akan meletakkan material tersebut dalam folder. Anda bisa membuatnya di folder baru (Add New > New Folder) atau folder yang sudah ada. Berikan nama material kemudian tekan Enter.

Jika Anda perhatikan, material baru tersebut memiliki symbol asterisk. Ini berarti material tersebut belum Anda save di Content Browser. Klik icon Save All.

Tombol disebelahnya ada Import, dimana Anda bisa import konten dari luar, entah itu static mesh, sound dan lain sebagainya. Kita akan coba import objek di tutorial berikutnya.

 

Unreal Engine 4 Tutorial #6 : Blocking #3

Oke setelah kita selesai editing BSP menggunakan komponen face dan vertex, sekarang saatnya Anda mengenal apa itu Additive dan Subtractive.

Sebelum memulai, cobalah untuk memulai permainan. Caranya mudah, Anda hanya tinggal mengklik icon PLAY

Tidak ada yang salah dari game Anda. Disana ada floor, dan Anda bisa bergerak menggunakan tombol W, A, S, D pada keyboard. Permasalahannya adalah, tembok tidak terlihat, padahal Anda collide disana. Klik STOP untuk mengakhiri.

Pilih objek box Anda tadi. Kemudian tekan Ctrl + C dan Ctrl + V untuk copy dan paste.

Kini kita memiliki 2 objek BSP box yang identik. Scale salah satu box lebih kecil dari box sebelumnya. Kemudian ganti perspective viewport ke Left.

Pilih box yang sudah Anda scale tadi, kemudian pada tab Details, ubah Brush Type Additive ke Subtractive seberti gambar dibawah.

Save pekerjaan Anda kemudian PLAY sekali lagi. Apa yang terjadi? Kini Anda berada di dalam ruangan. Cara kerja Subtractive sama dengan Boolean jika Anda bekerja di aplikasi dengan Maya atau 3ds Max.

Jika Anda mau, Anda bisa geser beberapa face untuk membentuk tembok yang presisif. Ingat Anda pernah mempelajari ini di tutorial sebelumnya. Jangan lupa untuk ganti grid snap jika dibutuhkan.

Langkah berikutnya adalah meletakkan sebuah actor cahaya kedalam ruangan. Untuk melakukannya mudah. Pada tab Modes, pilih Lights dan Point Light. Klik dan drag Point Light kedalam ruangan seperti gambar dibawah.

Kembali klik PLAY. Perhatikan bahwa editor menginginkan Anda untuk rebuilt pencahayaan. Untuk itu klik icon BUILD dan tunggu beberapa saat hingga engine selesai mengkalkulasi pencahayaan tadi.

Jika sudah, klik PLAY kembali dan kini ruangan Anda sudah selesai dibangun. Harap diingat bahwa proses ini adalah proses dasar dan tidak mutlak demikian untuk membangun blocking di editor. Saya biasanya lebih suka merakit beberapa box hingga membentuk ruangan daripada lebih sering menggunakan fitur Subtractive.

Save pekerjaan Anda. Di tutorial berikutnya kita akan mengenal lebih dalam lagi Content Browser dan bagaimana bekerja dengan Content Browser.

Unreal Engine 4 Tutorial #6 : Blocking #2

Di tutorial sebelumnya, kita berhasil membangun sebuah objek BSP kedalam scene untuk tujuan blocking, belajar scaling dan kordinat. Di tutorial kali ini kita akan mencoba menggali lebih dalam lagi apa itu blocking dengan memanipulasi BSP Box tadi menjadi sebuah ruangan dan memotong sebagian sisi nya untuk koridor.

Pastikan Anda mengikuti tutorial sebelumnya disini karena tutorial blocking ini dibagi menjadi beberapa sesi.

Pertama, kita akan memperlebar box menyesuaikan ukuran floor yang sudah disediakan editor sebelumnya. Klik pada objek box (bisa melalui viewport atau Outliner). Kemudian masukkan nilai scale box tersebut dengan nilai x, y, z = 5

Jika langkah Anda benar, maka box akan menjadi besar dan tentunya bagian bawah akan melebihi floor. Kita akan menyembunyikan floor dengan cara memilihnya lewat viewport atau Outliner. Di Outliner, cari dan pilih Floor, kemudian klik icon mata disebelahnya. Ini tidak akan menghapus floor, namun disembunyikan dari viewport.

Pindahkan viewport Anda dari perspective ke left.

Pastikan box Anda dalam keadaan terpilih. Kemudian pada tab Modes, pindah ke Geometry Editing seperti gambar dibawah.

Geometry Editing memungkinkan Anda memanipulasi objek BSP dalam satuan face dan pixel atau point. Dengan cara itu, pengeditan geometry BSP tidak hanya sekedar scaling, translate atau rotation, namun lebih bebas lagi.

Masih dalam keadaan box terpilih, left view pada viewport dan Anda sedang berada di Geometry Editing, Anda akan melihat 4 buah titik/dot/pixel pada box. Sebenarnya total kseluruhan titik tersebut berjumlah 8 buah, karena kita melihatnya dari samping orthographic, maka akan terlihat 4 saja.

pilih dengan pilihan block selecting untuk bagian bawah. Klik kiri + tahan dan blok titik-titik bagian bawah box secara keseluruhan, sehingga kita sebenarnya memilih 4 titik tersebut.

Klik + tahan dan drag pada sumbu Z keatas (perhatikan gambar diatas), hingga titik tersebut tepat di garis hijau grid.

Balik viewport ke Perspective

Selesai dari tahap ini, kita sekarang tahu bagaimana memanipulasi BSP. Untuk kemudian, Anda bisa modifikasi box tadi sesuka Anda. Saya coba menurunkan bagian atas box agar tidak terlalu tinggi dengan cara yang kita pelajari tadi. Tujuan kita untuk membuat sebuah ruangan.

Untuk mempercepat pekerjaan, Anda tidak harus memilih dan menggeser 4 point, alih-alih bisa menggunakan face. Caranya, pastikan Anda berada di viewport perspective. Masih di mode Geometry Editing, klik salah satu sisi box dan kemudian geser kemanapun Anda inginkan

Saya mengaktifkan kembali floor pada gambar diatas supaya Anda tahu perbedaanya. Selain menggeser melalui vertex, Anda bisa menggesernya melalui face untuk mempersingkat waktu.

Save pekerjaan Anda. Di tutorial blocking selanjutnya, kita akan coba mengaplikasikan Subtractive dan membuat koridor untuk ruangan baru.

Unreal Engine 4 Tutorial #6 : Blocking #1

Di tutorial kita sebelumnya, saya sempat bahas bagaimana berinteraksi dengan objek dan navigasi di editor Unreal. Dengan tutorial yang Anda dapat sebelumnya tadi, kali ini kita akan mencoba membuat beberapa primitive object di editor Unreal untuk menciptakan sebuah level sederhana.

Biasanya, level designer pada sebuah industry game development menciptakan blocking area dalam sebuah level untuk merepresentasikan level sebuah game yang sudah komplit. Tujuannya untuk mendapatkan gambaran awal ukuran, posisi, atau bisa juga sebagai acuan awal bagi programmer untuk membangun waypoint untuk kemudian diganti dengan object/mesh yang sudah dibuat oleh 3d artist dikemudian hari. Pertanyaan nya, untuk apa capek-capek blocking di editor jika kemudian diganti dengan mesh? Well, modeling 3d khususnya untuk game berkelas AAA membutuhkan waktu. Waktu yang kosong bagi level designer itulah bisa dipergunakan untuk blocking. Blocking bisa menggunakan objek sederhana (primitive object) yang disediakan editor, misalnya box, silinder dan sebagainya.

Tutorial kita kali ini akan memperkenalkan Anda membangun geometry di editor Unreal. Pastikan Anda memiliki sebuah project yang pernah kita buat sebelumnya.

Klik File > New Level untuk membuka jendela New Level, kemudian pilih Default

Jika langkah Anda benar, maka Anda akan melihat sebuah viewport baru dengan lantai dan player start didalamnya. Disini nanti kita akan membangun sebuah level sederhana dan kedepannya, level tadi akan kita replace dengan static mesh yang sudah dibuat di aplikasi desain seperti 3ds Max atau Maya.

Catatan : Jika Anda mau, Anda bisa membuat sebuah level baru dengan pilihan Empty Level, dimana pada level baru tersebut, Anda hanya akan menemukan grid dan tidak ada apapun didalamnya.

New Level

Sebelum Anda mulai, saya memastikan untuk mengaktifkan snap grid ke nilai 10. Jika Anda ingat di tutorial kita sebelumnya, hal yang penting dilakukan adalah menggantinya lewat icon di pojok kanan atas viewport.

Berikutnya, kita akan membuat sebuah ruangan sederhana berbentuk kotak. Kita akan menggunakan BSP Brush Geometry. Untuk itu di Tab Modes, pilih Place dan pada Geometry, pilih Box.

Drag and drop Box tadi kedalam viewport. Box yang sudah Anda tempatkan di viewport mungkin belum memiliki lokasi yang Anda inginkan. Saya akan menempatkan posisi box saya dengan kordinat 0, 0, 100. Untuk itu masih dalam keadaan objek box terpilih, perhatikan tab Details disebelah kanan layar Anda. Pada Transform Location, masukkan nilai 0 untuk x, y dan 100 untuk nilai z

Jika langkah Anda benar, maka akan seperti pada gambar berikut. Yaitu box berada pada posisi 0, 0, 100 disesuaikan dengan pivot point miliknya yang berada ditengah-tengah box.

Bagi Anda yang berkecimpung di dunia 3d seharusnya sudah paham betul teknik ini. Namun disini saya akan menjelaskan sedikit mengapa kita justru memasukkan nilai 100 untuk Z? Seperti yang kita ketahui, sumbu Z mewakili atas dan bawah pada sumbu kartesian Unreal.

Sebenarnya tidak ada peraturan baku untuk masalah placement object di editor. Hanya saja saya menginginkan posisi bawah box berada tepat di grid Z editor. Jika Anda penasaran, Anda bisa ubah posisi view viewport dari perspective ke Side (samping), caranya pada tombol Perspective di pojok kiri atas viewport, klik dan pilih Left

Grid berwarna hijau pada gambar dibawah akan bersentuhan dengan bagian bawah box seperti yang saya inginkan. Jika Anda mau, Anda bisa menggeser box atas atau bawah sesuai keinginan.

Untuk navigasi di side view, Anda cukup klik kanan + tahan dan drag. Untuk select dan deselect objek masih tetap sama.

Kembalikan viewport ke perspective seperti sebelumnya.

Di post tutorial berikutnya, kita akan memanipulasi BSP Geometry tidak hanya dengan scaling, namun juga mengedit face dan vertex. Untuk saat ini, save pekerjaan Anda, masukkan nama map yang Anda inginkan dan klik Save.

Unreal Engine 4 Tutorial #5 : Berinteraksi dengan objek

Berinteraksi dengan objek adalah mutlak dan tidak ada game development yang tidak mungkin tidak berinteraksi dengan objek. Sebuah level dalam game adalah kumpulan static mesh, cahaya, volume dan blueprint/program yang semuanya bekerja dalam system menjadi satu kesatuan aksi dan interaksi menjadi sebuah game. Dan untuk mengakses itu semua, dibutuhkan interaksi user (Anda) dan editor (Unreal).

Di Unreal, Anda bisa berinteraksi dengan objek/actor dengan cukup mengklik nya. Untuk melakukan ini, siapkan terlebih dahulu project yang kita buat sebelumnya. Anda akan melihat dua buah bangku dan meja disana.

Untuk memilih bangku misalnya, klik pada objek tersebut. Sebuah outline berwarna kuning akan muncul pada objek tersebut yang menandakan objek tersebut dalam keadaan terpilih.

Untuk deselect atau keluar dari mode seleksi bangku, Anda bisa pilih objek lain, atau memilih empty space yang terdapat di viewport.

Alternatif lain adalah memilih objek melalui window Outliner. Seperti yang sudah saya jelaskan di tutorial interface sebelumnya, Outliner adalah list objek yang terdapat di scene. Jika jendela Outliner tidak muncul di layar, klik Window > World Outliner untuk mengaktifkan nya.

Klik chair pada jendela Outliner untuk mengaktifkan mode seleksi. Perhatikan bahwa bangku tersebut terpilih pada viewport. Klik icon mata untuk hidden, dan klik kembali untuk unhidden objek yang bersangkutan.

Sekarang alihkan perhatian Anda ke meja/table di viewport. Entah memilihnya dari Outliner atau viewport, Anda akan belajar bagaimana cara menggeser meja. Pilih meja/Table.

Kemudian lihat beberapa icon berderet di bagian atas viewport. Di sebelah paling kiri adalah mode transform, dimana Anda bisa memanipulasi letak, ukuran dan rotasi sebuah objek. Untuk menggerakkan objek, Anda cukup tekan W pada keyboard. Untuk memutar objek shortcut E, dan scale menggunakan shortcut tombol R pada keyboard.

Pilih objek meja, kemudian tekan W, dan pada gizmo yang muncul, pilih pada salah satu garis Cartesian dan geser (klik kiri + drag). Merah untuk sumbu X, hijau untuk sumbu Y dan Z untuk sumbu Z. Anda juga bisa menggerakkan bebas objek tadi dengan memilih sphere putih pada gizmo.

Gizmo

 

Untuk memperbesar/kecil sebuah objek, Anda cukup tekan R pada keyboard atau perhatikan icon scale object.

Proses nya adalah sama. Anda cukup klik kiri tahan + drag pada sumbu yang disediakan. Untuk scaling dengan proporsi yang sama, Anda cukup klik kiri + tahan pada gizmo putih ditengahnya.

Berikutnya adalah rotate. Klik icon rotate pada viewport atau shortcut E pada keyboard, kemudian klik + tahan dan drag pada gizmo objek yang disediakan.

Secara default, editor mengaktifkan snapping pada mode transform tersebut. Anda bisa perhatikan bahwa baik rotate, scaling maupun translate objek tidak bergerak mulus, melainkan snap.

Jarak snap sebenarnya bisa Anda perkecil atau perbesar, atau bahkan dimatikan. Untuk memperkecil snap, perhatikan icon berikut.

Image yang diberi warna oranye berarti mengaktifkan mode snapping dengan nilai yang tertera disebelahnya. Untuk eksperimen, Anda bisa men-disable nya dengan mengklik icon oranye tersebut sehingga tidak lagi berwarna oranye. Kemudian, cobalah untuk menggeser, memutar atau scalling sekali lagi. Untuk mengubah nilainya, cobalah untuk kembali enable fitur tadi dan klik nilai yang tertera. Anda bisa mengubah nilai sesuka hati. Dalam beberapa kasus, fitur snapping berguna untuk alasan presisif saat mendesain level.

Rotate (putar) dan Translate (geser) mengikuti aturan main World dan Local. World berarti sumbu kordinat mengikuti peraturan global pada editor, sementara Local mengikuti objek itu sendiri. Misalnya, Anda memutar objek pada mode Local, kemanapun objek itu berputar, gizmo akan menunjuk kordinat kartesian yang sama pada objek, misalnya depan mobil akan selalu mengarah sumbu X. Sementara pada World, objek yang diputar akan memiliki gizmo yang mengikuti scene, analogi nya sama seperti kompas. Untuk mempraktekkan ini, putarlah bangku beberapa derajat yang Anda suka. Kemudian, klik icon bergambar bola dunia berikut yang berada di posisi atas viewport.

Klik berulang kali hingga akhirnya Anda paham apa yang saya maksud. Pada mode Local, bagian depan bangku akan mengarah pada sumbu X. Sementara jika Anda pindah pada mode Global, maka gizmo akan selalu mengarah pada sumbu scene tersebut. Dalam beberapa kasus, Local dan Global berguna untuk meletakkan objek sesuai dengan keinginan sumbu putar sebuah objek.

Bangku mengikuti sumbu Local

 

Bangku mengikuti sumbu Global

 

Unreal Engine 4 Tutorial #4 : Navigasi

Navigasi di Unreal bisa sama mudahnya dengan navigasi di banyak aplikasi 3d. Jika Anda sudah terbiasa dengan aplikasi seperti Maya, 3ds Max, Blender atau sejenisnya, seharusnya tidak kesulitan dengan navigasi Unreal.

Saya mengasumsikan Anda sudah membuat sebuah project seperti yang sudah kita lakukan di tutorial sebelumnya. Pastikan Anda menyertakan Starter Content sebelum membuat sebuah project untuk tutorial kita kali ini.

Jika langkah Anda seperti diatas, Anda akan melihat dua buah bangku dan meja dan beberapa komponen di dalamnya. Untuk navigasi, Anda bisa menggunakan mouse dan keyboard.

Untuk maju dan mundur, Anda bisa klik + tahan tombol kiri mouse kemudian drag. Untuk melihat sekeliling, Anda bisa klik kanan + tahan mouse dan drag kemanapun Anda mau. Pan kamera naik, turun, kanan dan kiri bisa Anda aktifkan klik tahan kanan + kiri sekaligus dan drag mouse Anda. Biasakan metode ini untuk membiasakan navigasi di Unreal.

Selain mouse, Anda bisa navigasi menggunakan keyboard dan kombinasi mouse. Untuk berkeliling viewport, Anda bisa klik kanan tahan + keyboard W, A, S, D. Tentu saja dengan mode ini Anda juga bisa men-drag mouse untuk melihat sekitar sambal berjalan.

Unreal Engine 4 Tutorial #3 : Interface

Interface Unreal sebagian besar mirip dengan aplikasi Windows pada umumnya. Namun sebagian besar sub-editor pada Unreal di hidden otomatis guna penyederhanaan tampilan.

Secara default, Unreal menyediakan Tab dan menu bar, Toolbar, Modes, Viewports, Outliner, Content Browser dan Details. Tempat dimana Anda meletakkan objek dan menciptakan level ada di Viewports. Toolbar adalah shortcut dari tools dan operasi yang paling sering digunakan.

Yang pertama adalah window Tab. Windows Tab bisa kamu bayangkan seperti tab pada browser untuk berinternet. Lewat tab, pekerjaan lebih mudah diakses, sebab Unreal editor menyediakan banyak sekali windows yang terlalu makan waktu jika harus mengakses nya tidak melalui tab. Ingat, tab bisa ditutup, docking dan bisa dibuka kembali.

Di bagian bawah tab terdapat menu bar. Saya rasa bagian ini bersifat self explanatory, karena umum kita jumpai dalam banyak aplikasi Windows, seperti save, open, undo dan sebagainya.

Disebelah kiri, kamu akan menemukan tab Modes, dimana disana terdapat tools untuk produksi di dalam editor Unreal, entah kamu ingin sekedar meletakkan objek atau player kedalam viewport, painting, hingga membuat pohon dan landscape.

Untuk tutorial kali ini, kita akan lebih sering menggunakan Modes Place untuk blocking, meletakkan lampu (pencahayaan) atau visual effect.

Kemudian dibagian bawah layar editor terdapat Content Browser. Content Browser bisa dianalogikan seperti Windows Explorer pada OS Windows, dimana kita meletakkan objek mesh import, sound, membuat folder dan lainnya. Lewat Content Browser jugalah kita menata letak props yang dibutuhkan dalam game. Semakin besar proyek kamu, game kamu akan membutuhkan banyak asset dan manajemen yang rapi.

Kita akan membahas bagaimana menggunakan Content Browser seperti import asset, membuat folder dan sebagainya di post tutorial berikutnya.

Lanjut disebelah kanan terdapat World Outliner dan Details. World Outliner adalah panel hierarki dari actor yang ada dalam scene. Actor bisa kita pilih langsung dari Outliner, atau menciptakan parenting lewat Outliner.

Di bagian bawah Outliner terdapat window Details. Details menyajikan informasi dari segala sesuatu yang kita pilih dari editor. Lewat Details kamu juga bisa mengubah nilai dari lokasi sebuah objek, rotasi dan ukuran.

Di bagian tengah layar terdapat Viewport. Viewport adalah visualisasi dari dunia yang kamu ciptakan, kurang lebih sama seperti 3ds Max atau Maya. Viewport adalah tempat dimana kamu meletakkan semua aspek/komponen game. Disinilah kamu merakit level design kamu. Viewport tentunya menyajikan fitur untuk navigasi kamu selama bekerja di editor.

Beberapa window akan muncul sesuai dengan kasus editing nya. Kita akan bahas dalam beberapa tutorial kedepan. Untuk saat ini, penting bagi kamu untuk mengenali dulu editor yang umum secara default muncul ketika aplikasi dibuka.

Di tutorial berikutnya, kita akan belajar bagaimana bernavigasi lewat viewport.

Jika kamu secara tidak sengaja menutup satu atau beberapa window, jangan panik. Kamu bisa mengaksesnya kembali lewat menu bar Window > (pilih beberapa editor window yang kamu inginkan).

Unreal Engine 4 Tutorial #2 : Project

Sebelum kita mulai, langkah pertama adalah membuat sebuah project. Untuk memulai itu, kamu buka Unreal Engine yang sudah terinstal dalam system.

Di tab atas, kamu pilih New Project untuk memulai project baru. Project yang sudah dibuat akan dimuat di tab Projects sebelahnya. Namun untuk saat ini, kita akan memulai project baru. Dibawahnya ada 2 tab tambahan, yaitu Blueprint dan C++. Jika kamu ingin membuat game menggunakan Bahasa pemrograman C++, kamu bias pilih tab tersebut. Namun untuk tutorial kita kali ini akan menggunakan Blueprint (dan untuk kedepannya).

Pilih Blank untuk membuat project kosong (tidak built in dengan template). Namun pastikan “With Starter Content” dalam keadaan terpilih. Masukkan nama project kamu kemudian klik “Create Project”. Dengan With Starter Content dalam kedaan terpilih, Unreal menyediakan beberapa asset untuk dipergunakan. Fitur ini cocok jika kita masih baru di engine untuk tujuan pembelajaran.

Sebagai catatan, saya menggunakan Unreal edisi 4.15. Jika kamu menggunakan versi lain, mungkin beberapa aspek diatas akan terlihat berbeda.

Jika langkah kamu benar, maka tampilan editor Unreal akan tampak seperti gambar diatas. Selain memperkenalkan editor, kita akan sedikit berkesperimen dengan Unreal di  tutorial berikutnya. Untuk saat ini, langkah kamu sudah benar dan kita akan melanjutkan tutorial di posting berikutnya.