Normal untuk sprite
Piksel tetap di browser Anda
Sprite sumber

Disarankan PNG / WebP dengan alpha. JPEG tidak memiliki transparansi. File lokal saja; maksimum 50 MB.

lantern-sprite-sample.png · 32 × 32
Sprite asli32 × 32
Interpretasi height32 × 32
Normal map32 × 32
Pratinjau pencahayaan32 × 32

Tampilan nearest-neighbor. Zoom hanya mengubah pratinjau; ekspor tetap sesuai dimensi sumber. Geser atau sentuh pratinjau untuk memindahkan cahaya. Gunakan slider dengan keyboard.

Kontrol normal
Bevel siluet

Kecerahan lukisan adalah petunjuk height artistik. Atur detail ke nol untuk normal dari siluet saja.

Kontrol normal
Pratinjau pencahayaan

Pengaturan hanya berisi parameter, bukan gambar sumber.

Gunakan karya sumber yang boleh Anda proses.

Memproses secara lokal… · Dimensi output: 32 × 32

Normal Map Generator untuk Pixel Art

Normal map generator untuk pixel art ini mengolah siluet sprite dan detail lukisan opsional menjadi normal tangent-space. Pertahankan kisi piksel, periksa cahaya bergerak, dan ekspor PNG transparan tanpa mengirim karya ke server.

Cara Memulai

Coba sampel lentera: lubang transparan pada pegangan, bingkai logam, dan highlight yang tidak simetris membantu membaca arah cahaya. Pilih atau seret PNG atau WebP sendiri. Mulai dengan Detail Sprite nol dan radius bevel kecil. Gerakkan cahaya horizontal dan vertikal, tambahkan detail seperlunya, pilih konvensi Y engine, lalu unduh normal PNG. Reset mengembalikan kontrol dan posisi cahaya awal sambil mempertahankan gambar yang dipilih.

Apa Itu Normal Map untuk Pixel Art?

Normal map sprite menyimpan arah pencahayaan untuk setiap piksel. Merah dan hijau menyatakan X dan Y tangent, sedangkan biru menyatakan Z keluar permukaan. Area datar kira-kira RGB 128, 128, 255. Sprite tetap gambar datar: normal mapping mengubah respons terhadap cahaya, bukan garis luar, bentuk collision, geometri bayangan, atau kedalaman sebenarnya. Relief yang dihasilkan adalah interpretasi artistik yang dapat diatur, bukan rekonstruksi karakter tiga dimensi.

Mengapa Piksel Sprite Perlu Dipertahankan

Aset kecil bergantung pada piksel individual. Interpolasi halus pada karakter 16×16 menambahkan warna dan kemiringan yang tidak digambar seniman. Pertahankan Piksel memakai nearest-neighbor; zoom 1× hingga 16× hanya mengubah tampilan. Pemrosesan dan ekspor memakai dimensi sumber. Sesuaikan menampilkan gambar besar di kartu, sementara zoom tertentu memungkinkan inspeksi texel melalui scroll di dalam kartu. Tidak ada denoise otomatis pada sprite.

Bevel Siluet dan Shading Lukisan

Kontribusi siluet memakai perkiraan jarak ke dalam dari batas alpha, termasuk lubang transparan dan tepi gambar. Radius bevel menentukan lebar profil dalam piksel sumber. Linear membentuk ramp, Membulat membentuk lengkungan, Lembut memberi profil bantal, dan Tajam menegaskan tepi sempit. Radius nol menghilangkan kontribusi bevel. Detail Sprite menambahkan variasi luminans secara terpisah sehingga tonjolan interior dapat ditambah tanpa mengubah kontrol tepi.

Warna Cat Bukan Kedalaman Fisik

Baju terang bisa berasal dari pigmen; sabuk gelap dapat dilukis pada torso datar. Detail Sprite menganggap perbedaan ini sebagai petunjuk height dan bisa membuat tonjolan yang tidak diinginkan. Bandingkan keluaran siluet saja dengan versi berdetail di bawah cahaya yang sama. Jika highlight menjadi relief keliru, turunkan detail atau siapkan height khusus melalui konverter umum. Kekuatan Normal memperbesar slope; Level memperkuat kontribusi Z yang menghadap keluar.

Piksel Transparan dan Alpha

RGB yang sepenuhnya transparan tidak dipakai sebagai detail luminans biasa. Detail dari piksel terlihat di dekatnya diperluas untuk sampling tepi agar piksel hitam tersembunyi tidak membentuk pinggiran palsu. Alpha parsial dipertahankan dan membentuk profil batas fraksional yang deterministik. Pratinjau pencahayaan selalu memakai alpha sumber. Pertahankan Transparansi menyimpan mask tersebut dalam unduhan; Latar Normal Datar mengganti area luar dengan vektor netral opaque. Sprite warna tetap dapat transparan secara terpisah.

Pencahayaan Dinamis dengan Normal Sprite

Pratinjau memakai warna asli dan arah normal yang dihasilkan dengan cahaya ilustratif yang dapat dipindah. Geser atau sentuh pratinjau, atau gunakan slider posisi horizontal dan vertikal melalui keyboard. Fitur sumber yang asimetris memudahkan pemeriksaan kanal terbalik. Alur ini membantu prototipe obor, lampu, atau cahaya karakter pada game 2D. Pratinjau tidak dikalibrasi secara fisik dan tidak memodelkan occlusion, roughness material, atau seluruh pipeline cahaya engine.

Arah Y OpenGL dan DirectX

Pemilih konvensi Y mengubah tanda komponen hijau. G Y+ bergaya OpenGL dan G Y− bergaya DirectX mewakili permukaan yang sama jika decoder sesuai. Pratinjau mengompensasi pilihan ini sehingga format ekspor tidak membalik pencahayaan di sini. Balik X bekerja terpisah pada merah. Nama engine hanya panduan awal: periksa renderer dan pengaturan import dengan tepi yang jelas serta cahaya vertikal sebelum menyerahkan aset.

Godot, Unity 2D, dan Engine Kustom

Di Godot, baca dokumentasi pencahayaan 2D terbaru untuk memasang normal melalui CanvasTexture dan mengaktifkan lampu. Di Unity, alur bergantung pada renderer 2D, material sprite, serta versi paket; periksa secondary texture dan pengaturan cahaya normal dalam dokumentasi saat ini. Engine web kustom harus membaca kanal vektor tanpa konversi sRGB serta menjaga orientasi UV. Mulai dengan filtering nearest untuk pixel art lalu uji skala kamera dan jalur import yang sebenarnya.

Masalah Umum dan Perbaikannya

Sprite terlalu menggembung biasanya memerlukan radius atau kontribusi siluet lebih kecil. Interior berisik lebih cocok diperbaiki dengan mengurangi detail lukisan. Pinggiran gelap setelah import bisa berasal dari alpha, padding atlas, filtering, atau premultiplication. Bila hanya cahaya vertikal keliru, periksa konvensi hijau sebelum mengedit karya. Sobel dan Scharr memberi gradien lokal berbeda; bandingkan pada ukuran tampilan akhir. Simpan PNG lossless dan hindari JPEG untuk vektor normal.

Untuk Siapa Alat Ini?

Developer indie, seniman pixel art, technical artist, serta pembuat sprite dan tileset dapat mencoba cahaya dinamis untuk karakter, properti, dan ilustrasi UI. Alur ini berguna saat tidak ada mesh resolusi tinggi untuk baking. Sprite sheet diproses sebagai satu gambar pada rilis ini, tanpa isolasi frame otomatis. Ekspor frame terpisah bila lingkungan bevel bisa menjangkau frame tetangga, lalu cocokkan normal dengan tata letak atlas warna yang sama.

Serah Terima Aset yang Dapat Diulang

Simpan JSON pengaturan bersama sprite sumber dan normal PNG lossless. File tersebut hanya menyimpan parameter, bukan piksel; memuatnya tidak mengganti karya. Sertakan konvensi Y dan dimensi pada nama file, kemudian uji dalam game di bawah beberapa lampu. Browser menerima PNG, WebP, JPEG, dan BMP sesuai batas situs: 50 MB, 8192 piksel per sisi, dan 16,8 megapiksel. Gunakan karya yang berhak Anda proses dan pertahankan sumber asli.

Pertanyaan umum

Bisakah normal dibuat hanya dari siluet?

Ya. Atur Detail Sprite ke nol, Kontribusi Siluet di atas nol, dan radius bevel bukan nol. Radius nol bersama detail nol menghasilkan normal netral.

Apakah sprite 32×32 tetap 32×32?

Ya. Zoom pratinjau tidak mengubah data ekspor. Normal PNG mempertahankan lebar dan tinggi sumber.

Mengapa highlight lukisan menjadi tonjolan?

Detail Sprite memakai kecerahan sebagai petunjuk height. Kurangi atau nolkan ketika warna menunjukkan pigmen atau cahaya lukisan, bukan relief.

Apakah lubang transparan ikut tersimpan?

Pertahankan Transparansi menyimpan alpha sumber, termasuk lubang dan transparansi parsial. Latar Normal Datar membuat output opaque dengan normal netral di luar sprite.