Target render pada dasarnya adalah tekstur yang dapat Anda tulis saat runtime. Dari sudut pandang mesin, mereka menyimpan informasi seperti warna dasar, normal, dan oklusi ambien.
Dari sudut pandang pengguna, target render terutama digunakan sebagai jenis kamera tambahan. Anda dapat mengatur pengambilan adegan di beberapa titik dan menyimpan gambar dalam target render. Kemudian Anda dapat menampilkan target render pada mesh, misalnya, untuk mensimulasikan kamera pengintai.
Setelah merilis versi mesin 4,13, Epic menambahkan kemampuan untuk menggambar material langsung ke target render menggunakan tumpul. Fitur ini memungkinkan Anda untuk membuat efek kompleks, seperti simulasi cairan dan deformasi salju. Kedengarannya luar biasa bukan? Tetapi sebelum beralih ke efek kompleks seperti itu, yang terbaik adalah merasa nyaman dengan sesuatu yang sederhana. Apa yang bisa lebih sederhana daripada menggambar pada target render?
Dalam tutorial ini Anda akan mempelajari hal-hal berikut:
- Buat target render secara dinamis dengan tumpul
- Tampilkan target render pada mesh
- Gambar tekstur pada target render
- Ubah ukuran dan tekstur kuas selama bermain game
Catatan: tutorial ini mengasumsikan bahwa Anda sudah terbiasa dengan dasar-dasar bekerja dengan Unreal Engine. Jika Anda baru mengenal Unreal Engine, lihat seri sepuluh bagian tutorial Unreal Engine kami untuk pemula .
Mulai bekerja
Mari kita mulai dengan mengunduh materi untuk tutorial ini (Anda bisa mendapatkannya di
sini ). Buka
zip mereka, pergi ke
CanvasPainterStarter dan buka
CanvasPainter.uproject . Jika Anda mengklik
Mainkan , Anda akan melihat yang berikut:
Kotak di tengah (kanvas) adalah apa yang akan kita gambar. Elemen UI di sebelah kiri adalah tekstur yang akan kita gambar dan ukurannya.
Pertama, mari kita lihat metode yang digunakan untuk menggambar.
Metode menggambar
Hal pertama yang kita butuhkan adalah target render, digunakan sebagai kanvas. Untuk menentukan tempat menggambar pada target render, kami akan melacak garis lurus yang keluar dari kamera ke depan. Jika garis memotong kanvas, maka kita bisa mendapatkan persimpangan di ruang UV.
Misalnya, jika kanvas memiliki pengikatan koordinat UV yang sempurna, maka persimpangan di tengah akan mengembalikan nilai
(0,5, 0,5) . Jika garis melintasi kanvas di sudut kanan bawah, maka kita akan mendapatkan nilai
(1, 1) . Kemudian Anda bisa menggunakan perhitungan sederhana untuk menghitung tempat menggambar.
Tapi mengapa mendapatkan koordinat di ruang UV? Mengapa tidak menggunakan koordinat ruang nyata dunia? Saat menggunakan ruang dunia, pertama-tama kita harus menghitung persimpangan relatif terhadap pesawat. Anda juga harus memperhitungkan rotasi dan skala pesawat.
Saat menggunakan ruang UV, semua perhitungan ini tidak diperlukan. Pada pesawat dengan pengikatan koordinat UV yang sempurna, persimpangan dengan tengah selalu kembali
(0,5, 0,5) , terlepas dari lokasi dan rotasi pesawat.
Catatan: metode yang dipertimbangkan dalam tutorial ini umumnya hanya bekerja dengan bidang atau permukaan yang mirip dengan bidang. Jenis geometri lain membutuhkan metode yang lebih kompleks, yang akan saya bahas di tutorial lain.
Pertama, kami akan membuat bahan yang akan membuat target render.
Buat bahan kanvas
Buka folder
Bahan dan buka
M_Canvas .
Dalam tutorial ini, kita akan membuat target render secara dinamis menggunakan blunts. Ini berarti bahwa kita harus mengatur tekstur sebagai parameter sehingga kita dapat meneruskannya ke render target. Untuk melakukan ini, buat
TextureSampleParameter2D dan sebut itu
RenderTarget . Kemudian hubungkan ke
BaseColor .
Untuk saat ini, jangan khawatir tentang memilih tekstur - kami akan melakukannya nanti dalam cetak biru. Klik
Terapkan , lalu tutup
M_Canvas .
Langkah selanjutnya adalah membuat target render, setelah itu kami menggunakannya sebagai bahan kanvas.
Membuat Target Render
Ada dua cara untuk membuat target render. Pertama: membuat di editor dengan mengklik
Tambah Baru \ Bahan & Tekstur \ Render Target . Metode ini memungkinkan Anda untuk dengan mudah merujuk target render yang sama ke banyak aktor. Namun, jika kita memerlukan beberapa kanvas, kita harus membuat target render secara manual untuk setiap kanvas.
Oleh karena itu, lebih baik untuk membuat target render menggunakan tumpul. Keuntungan dari pendekatan ini adalah bahwa kami membuat target render hanya bila diperlukan dan mereka tidak mengembang ukuran file proyek.
Pertama, kita perlu membuat target render dan menyimpannya sebagai variabel untuk digunakan di masa depan. Buka folder
Blueprints dan buka
BP_Canvas . Temukan
Event BeginPlay dan tambahkan node yang dipilih.
Atur
Lebar dan
Tinggi ke
1024 . Jadi kami mengubah resolusi target render menjadi
1024 × 1024 . Semakin tinggi nilainya, semakin tinggi kualitas gambar, tetapi juga semakin besar biaya memori video.
Berikutnya adalah node
2D Render Target Target . Kita dapat menggunakan simpul ini untuk mengatur warna target render. Setel
Warna Bening ke
(0,07, 0,13, 0,06) . Dalam hal ini, seluruh target render akan terisi dengan warna kehijauan.
Sekarang kita perlu menampilkan target render pada mesh kanvas.
Tampilkan Target Target
Pada titik ini, mesh kanvas menggunakan bahan default. Untuk menampilkan target render, Anda perlu membuat instance dinamis
M_Canvas dan meneruskan target render ke sana. Maka Anda perlu menerapkan contoh dinamis dari bahan ke mesh kanvas. Untuk melakukan ini, kami akan menambahkan node yang dipilih:
Pertama, mari kita beralih ke node
Buat Bahan Dinamis Instans dan mengatur nilai
Induk ke
M_Canvas . Jadi kita akan membuat instance dinamis
M_Canvas .
Selanjutnya, pergi ke node
Tetapkan Nilai Parameter Tekstur dan atur
Nama Parameter ke
RenderTarget . Jadi kami akan meneruskan target render ke parameter tekstur yang dibuat sebelumnya.
Sekarang target render akan ditampilkan pada kanvas mesh. Klik
Kompilasi dan kembali ke editor utama. Klik
Play untuk melihat bagaimana kanvas berubah warna.
Sekarang kita sudah memiliki kanvas, kita perlu membuat bahan yang bisa digunakan sebagai kuas.
Buat Bahan Kuas
Buka folder
Bahan . Buat materi
M_Brush dan buka. Pertama atur
Blend Mode ke
Translucent . Ini akan memungkinkan kami menggunakan tekstur dengan transparansi.
Seperti halnya bahan kanvas, kami mengatur tekstur untuk kuas di tumpul. Buat
TextureSampleParameter2D dan
beri nama
BrushTexture . Hubungkan sebagai berikut:
Klik
Terapkan , lalu tutup
M_Brush .
Hal selanjutnya yang harus dilakukan adalah membuat contoh dinamis dari bahan kuas sehingga Anda dapat mengubah tekstur kuas. Buka
BP_Canvas dan tambahkan node yang dipilih.
Selanjutnya, buka node
Buat Bahan Dinamis Instans dan atur
Induk ke
M_Canvas .
Kami menciptakan bahan kuas, dan sekarang kami membutuhkan fungsi untuk melukis dengan kuas pada target render.
Brush Painting pada Render Target
Buat fungsi baru dan
beri nama
DrawBrush . Pertama kita perlu parameter: tekstur yang digunakan, ukuran kuas dan tempat menggambar. Buat input berikut:
- BrushTexture: pilih tipe Texture 2D
- BrushSize: pilih tipe float
- DrawLocation: pilih jenis Vector 2D
Sebelum menggambar kuas, kita perlu mengatur teksturnya. Untuk melakukan ini, buat sirkuit yang ditunjukkan di bawah ini. Pastikan bahwa
BrushTexture dipilih sebagai
Nama Parameter .
Sekarang kita perlu melakukan rendering pada target render. Untuk melakukan ini, buat node yang dipilih:
Mulailah Draw Canvas ke Render Target akan membuat mesin tahu bahwa kami ingin mulai render ke target render tertentu.
Draw Material memungkinkan Anda untuk menggambar material di lokasi tertentu dengan ukuran dan rotasi yang dipilih.
Menghitung posisi rendering adalah proses dua langkah. Pertama, kita perlu
skala DrawLocation agar sesuai dengan resolusi target render. Untuk melakukan ini, gandakan
DrawLocation berdasarkan
Ukuran .
Secara default, mesin akan membuat bahan menggunakan sudut kiri atas sebagai titik awal. Karena itu, tekstur kuas tidak akan terpusat pada kami di mana kami ingin merender. Untuk memperbaiki ini, kita perlu membagi
BrushSize dengan
2 , dan kemudian kurangi hasilnya dari langkah sebelumnya.
Kemudian kami menghubungkan semuanya sebagai berikut:
Akhirnya, kita perlu memberi tahu mesin bahwa kita ingin berhenti render dalam target render. Tambahkan
Canvas Draw End ke Render Target node dan hubungkan sebagai berikut:
Sekarang, setiap kali
DrawBrush dieksekusi
, itu pertama-tama akan mengatur tekstur yang ditransmisikan sebagai tekstur untuk
BrushMaterial . Dia kemudian akan membuat
BrushMaterial di
RenderTarget , menggunakan posisi dan ukuran yang diteruskan.
Dan pada fungsi rendering ini siap. Klik
Kompilasi dan tutup
BP_Canvas . Langkah selanjutnya adalah melacak garis dari kamera dan menggambar di tempat kanvas di mana persimpangan terjadi.
Jejak langsung kamera
Sebelum menggambar di kanvas, kita perlu menentukan tekstur dan ukuran kuas. Buka folder
Blueprints dan buka
BP_Player . Kemudian atur variabel BrushTexture ke
T_Brush_01 , dan variabel
BrushSize ke
500 . Jadi kami menetapkan gambar kera monyet dengan ukuran
500 × 500 piksel.
Selanjutnya, Anda perlu melacak garis. Temukan
InputAxis Paint dan buat diagram berikut:
Jadi kita akan melacak garis yang diarahkan langsung dari kamera sementara pemain memegang kunci yang ditetapkan untuk
Paint (dalam kasus kami, ini adalah tombol
kiri mouse ).
Sekarang kita perlu memeriksa apakah kanvas lurus dilintasi. Tambahkan node yang dipilih:
Sekarang, ketika garis dan kanvas
berpotongan , fungsi
DrawBrush akan dieksekusi, menggunakan variabel brush dan koordinat UV diteruskan ke sana.
Agar simpul
UV Cari Collision berfungsi, kita perlu mengubah dua parameter. Pertama, pergi ke simpul
LineTraceByChannel dan
aktifkan Trace Complex .
Kedua, pergi ke
Edit \ Project Settings , dan kemudian ke
Engine \ Physics . Aktifkan
Dukungan UV Dari Hasil Hit dan mulai ulang proyek.
Setelah memulai kembali, untuk menggambar di atas kanvas, klik
Mainkan dan
klik kiri .
Anda bahkan dapat membuat beberapa kanvas dan menggambar masing-masing secara terpisah. Ini dimungkinkan karena setiap kanvas secara dinamis membuat target rendernya sendiri.
Di bagian berikutnya, kami menerapkan fungsi mengubah ukuran kuas pemain.
Ubah Ukuran Brush
Buka
BP_Player dan temukan simpul
InputAxis ChangeBrushSize . Ikatan sumbu ini dikonfigurasi untuk menggunakan
roda mouse . Untuk mengubah ukuran kuas, cukup bagi kami untuk mengubah nilai
BrushSize tergantung pada
Nilai Axis . Untuk melakukan ini, buat skema berikut:
Ini akan melakukan penambahan atau pengurangan dari
BrushSize ketika pemain menggunakan roda mouse. Perkalian pertama menentukan tingkat penambahan atau pengurangan.
Clamp (float) telah ditambahkan sebagai langkah pengamanan. Ini memastikan bahwa ukuran kuas tidak menjadi kurang dari
0 atau lebih dari
1000 .
Klik
Kompilasi dan kembali ke editor utama. Putar
roda mouse untuk mengubah ukuran sikat saat menggambar.
Di bagian terakhir, kami akan membuat fungsional yang memungkinkan pemain untuk mengubah tekstur kuas.
Ubah tekstur kuas
Pertama, kita perlu sebuah array untuk menyimpan tekstur yang bisa digunakan pemain. Buka
BP_Player dan buat variabel
array . Pilih tipe
2D Tekstur untuknya dan
beri nama
Tekstur .
Kemudian buat
tiga elemen dalam
Tekstur . Tetapkan nilai-nilai berikut:
- T_Brush_01
- T_Brush_02
- T_Brush_03
Ini akan menjadi tekstur yang bisa digambar pemain. Untuk menambahkan tekstur baru, tambahkan saja ke array ini.
Selanjutnya, kita memerlukan variabel untuk menyimpan indeks array saat ini. Buat variabel
integer dan
beri nama
CurrentTextureIndex .
Selanjutnya, kita perlu cara untuk melintasi semua tekstur dalam satu lingkaran. Untuk tutorial ini, saya mengatur pemetaan tindakan yang disebut
NextTexture dan mengikatnya ke tombol
kanan mouse . Ketika pemain menekan tombol ini, transisi ke tekstur berikutnya harus dilakukan. Untuk melakukan ini, cari simpul
InputAction NextTexture dan buat diagram berikut:
Skema ini akan meningkatkan
CurrentTextureIndex setiap kali Anda
mengklik kanan . Jika indeks mencapai akhir array, maka kembali diatur ke
0 . Akhirnya,
BrushTexture menetapkan tekstur yang sesuai.
Klik
Kompilasi dan tutup
BP_Player . Klik
Mainkan dan
klik kanan untuk beralih antar tekstur.
Ke mana harus pergi selanjutnya?
Proyek yang sudah selesai dapat diunduh
dari sini .
Target render adalah alat yang sangat kuat dan dalam tutorial ini kami hanya membahas dasar-dasarnya. Jika Anda ingin tahu apa yang mampu dilakukan target render, lihat
Rendering Multipass Berbasis Konten di UE4 . Video ini berisi contoh-contoh gambar peta aliran, gambar volumetrik, simulasi fluida, dan banyak lagi.
Lihat juga video tutorial
Blueprint Drawing to Render Target kami untuk mempelajari cara membuat peta ketinggian dengan target render.