() translation by (you can also view the original English article)
Update 4.3 Unity adalah sebuah pintu besar yang besar terbuka lebar untuk pengembang game 2D, dengan banyak alat dan cara baru untuk mendekati pengembangan game 2D di mesin yang sudah canggih ini. Dalam tutorial ini saya akan menunjukkan cara membuat karakter di Inkscape yang bisa digunakan editor baru Unity 4.3 yang menakjubkan.
Hal yang Perlu Dipertimbangkan
Beberapa tip tentang pembuatan karakter game sebelum kita memulai:
- Bekerja dari konsep atau sketsa yang sebelumnya dipikirkan-ini akan menghemat waktu dan sakit kepala!
- Buat sebanyak mungkin potongan utuh. Pengembang akan (sering) meminta perubahan dan variasi warna. Menciptakan potongan utuh yang mudah diubah akan membuat pekerjaan Anda jauh lebih mudah dalam jangka panjang.
- Screen menguji karakter Anda dengan menempatkannya di latar belakang yang Anda gunakan saat mengerjakannya. (Atau sebaliknya, bekerja pada latar belakang yang netral-jika muncul dengan warna abu-abu, itu akan muncul pada apa pun.)
- Perhatikanlah "anggaran" sprite Anda. Lebih banyak sendi bisa lebih hidup, tapi juga bisa lebih rumit.
1. Buat Karakter
Langkah 1
Buka Inkscape dan pilih File> New. Dari daftar pilihan yang tersedia, pilih ukuran yang paling mungkin menjadi resolusi game Anda. 640 x 480 , 800 x 600 , atau 1024 x 768 adalah resolusi permainan yang umum untuk PC-untuk proyek ini saya akan memilih 800 x 600 .
Langkah 2
Buat layer baru dengan memilih Layer> Add Layer (Shift-Control-N) dan beri nama "Sketch". Set ke Bawah Sekarang Layer.
Langkah 3
Dapatkan konsep Anda bersama-sama. Dalam hal ini saya hanya menggunakan sketsa sederhana yang saya buat di Sketchbook Pro. Saya cenderung menciptakan setidaknya dua pandangan tindakan karakter sehingga saya bisa mendapatkan ide bagus tentang bagaimana saya menginginkan animasi dan potongan apa yang saya perlukan untuk memecahnya.
Anda cukup menyalin dan menempelkan konsep Anda dari program lain atau seret dan lepaskan file ke Inkscape.
Jika Anda drag dan drop file pilih embed, bukan link . Anda akan segera membuang sketsa itu karena tidak perlu untuk keseluruhan proses.
Langkah 4
Ubah ukuran gambar Anda menjadi ukuran apa pun yang nyaman digunakan pada pegangan ukuran.
Klik pada sketsa dan kunci proporsi gambar dengan mengklik Ikon Kunci.
Langkah 5
Karena palet Inkscape Preset umumnya tidak terlalu cantik untuk permainan, saya cenderung membuat sendiri sebelumnya.
Anda dapat mengedit Palet Inkscape Anda dengan masuk ke folder Inkscape Anda di bawah sub-folder Share> Palettes.
Langkah 6
Klik kanan "Inkscape.gpl" dan pilih buka dengan editor teks favorit Anda. Saya hanya menggunakan Wordpad.
Anda sekarang dapat menambahkan nilai RGB dan Hex Anda sendiri ke dalam daftar dan mereka akan muncul sesuai urutan yang Anda berikan. Jika Anda tidak terbiasa dengan kode Hex dan RGB, ada banyak bagan mudah diakses yang dapat Anda temukan di Internet atau pemetik warna hampir semua program editing gambar.
Anda bisa menemukannya di sini:
Inilah rentang yang saya gunakan untuk berbagai bagian tubuh Octopus bagi Anda yang suka mengumpulkan palet:
Tubuh utama
- 110
4 84
#6E0454 - 164
0 92
#A4005C - 188
24 120
#BC1878 - 220
68 112
#DC4470 - 235
99 109
#EB636D - 243
147 131
#F39383 - 250
201 172
#FAC9AC
Mata
- 57
33 49
#392131
Siput Shell
- 52
48 89
#343059 - 67
70 126
#43467E - 62
87 150
#3E5796 - 90
105 192
#5A69C0 - 103
150 232
#6796E8 - 126
175 238
#7EAFEE - 126 199 217
#7EC7D9
Tubuh siput
- 132
71 60
#84473C - 165
103 79
#A5674F - 206
137 78
#CE894E - 243
180 107
#F3B46B - 249
246 100
#F9CE64 - 248
229 122
#F9E57A - 251
251 158
#FBFB9E
Anda dapat menyalin dan menempelkan kode ini ke file .gpl Anda dan menyimpannya, dan mereka akan berada di sana saat Anda menjalankan Inkscape lagi.
Saya sarankan Anda menyimpan salinan berkas gg asli Anda jika ada yang tidak beres.
Langkah 7
Gambarkan tubuh utama dulu. Saya hanya menggunakan bentuk lingkaran sederhana untuk tubuh si gurita. Saya mengatur stroke ke 3.5px di editor objek(Shift-Control-F) tapi Anda bisa menjadikannya sesuai keinginan Anda.
Langkah 8
Gambarlah kaki semua sebagai potongan terpisah pada layer baru menggunakan alat Bezier Curve (Shift-F6)
Langkah 9
Alih-alih secara manual menyesuaikan stroke dan warna pada kaki, kita bisa mengklik objek yang serupa (seperti lingkaran) dan menyalinnya (Control-C)dan pergi ke Edit> Paste Style atau (Control-Shift-V) ke sesuai dengan gaya dari objek yang disalin.
Anda mungkin juga ingin menggambar kaki di posisi yang berbeda, sehingga bisa digunakan kembali untuk membuat lebih banyak animasi.
Sebagai alternatif, Anda mungkin ingin menarik seluruh tubuh dengan kaki dalam posisi yang berbeda jika Anda tidak ingin kaki bergerak bergerak mandiri.
Ingat bahwa Anda dapat bergabung bersama-sama dengan memilih kedua objek dan menggabungkannya melalui Path> Union atau Control-Shift- + atau hanya Control- + dengan numpad.
Langkah 10
Untuk mendapatkan kurva yang lebih halus, saya sering menambahkan poin ekstra dan kemudian menghapusnya setelah mendapatkan bentuk yang saya inginkan.
Saya mematikan lapisan Tubuh dengan menggunakan ikon mata di samping nama layer yang ingin saya matikan.
Masuk ke Edit Path By Nodes mode (F2) dan klik pada node yang ingin Anda hapus, lalu tekan tombol Delete .
Langkah 11
Karena saya ingin kaki di sisi kiri dan kanan hampir sama, saya akan menyalin yang kiri dan hanya mengeditnya sedikit.
Bawa kembali layer Body dengan berpindah ke layer di drop down dan klik ikon mata sekali lagi, sehingga Anda bisa memposisikan kaki dengan benar. Pilih kaki (yang akan membawa Anda kembali ke lapisan kaki secara otomatis) dan salin (Control-C) lalu tempelkan (Control-V).
Balikkan gambar dengan menggunakan tombol Flip Horizontal atau dengan menekan tombol H.
Gerakkan kaki ke posisi yang diinginkan. Saya juga menyortirnya secara horisontal sedikit untuk perspektif, menggunakan pegangan ukuran.
Langkah 12
Aku akan membuat kaki depan di beberapa bagian untuk menambahkan lebih mendalam. Buat layer baru (Shift-Control-N) untuk menambahkan kaki yang akan berada di depan bodi.
Tambahkan oval dengan Oval Tool dan copy dan paste gaya dari kaki ke oval.
Sekarang tambahkan oval kedua dan putarlah. Anda dapat memutar objek dengan mengklik objek dua kali, dan kemudian menggunakan pegangannya.
Langkah 13
Sekarang Anda hanya bisa menyalin kaki dan membalikkannya untuk mengisi kaki lainnya
Langkah 14
Mari tambahkan beberapa naungan dan sorot ke gurita sebelum beralih ke wajah. Saya melakukan ini dengan membuat oval dan kemudian menggunakan oval lain untuk "mengurangi" bagian yang tidak saya inginkan.
Sekarang copy dan paste lingkaran dan sesuaikan ke tempat yang ingin Anda potong. Buatlah warna yang berbeda sehingga lebih mudah dilihat. Saya lebih suka menjadikannya warna yang sama dengan bodi utama.
Sekarang Shift-Pilih kedua lingkaran, pastikan untuk memilih lingkaran sorot terakhir, dan pergi ke Path> Difference.
Pilih semua benda dan Kelompokkan mereka (Kontrol-G) untuk memastikannya tidak dipindahkan dari tempat Anda menginginkannya.
Catatan: Anda masih bisa menyalin dan menempelkan gaya dari objek dengan menggunakan jalur edit / edit langsung oleh node bahkan saat dikelompokkan.
Langkah 15
Gambarlah beberapa highlight pada kaki juga, dengan menggunakan Bezier Tool (Shift-F6). Pastikan Anda menggambar di lapisan dengan tentakel yang tepat dan kelompokkan mereka dengan potongannya yang terkait saat Anda selesai. Cobalah untuk menggunakan warna yang sama dari highlight sebelumnya.
Langkah 16
Saya menggambar mata dengan menggunakan Circle Tool (F5). Saya melakukan hal yang sama di sini yang saya lakukan dengan tentakel untuk memastikannya sama; copy dan paste mata kiri dan sesuaikan posisi dan perspektifnya lagi.
Langkah 17
Gambarlah mulut sederhana dengan Bezier Curve Tool, dan sesuaikan pengaturan pada menu stroke dan fill (Shift-Control-F).
Langkah 18
Saya memutuskan untuk menambahkan beberapa sorotan lagi untuk memberinya sedikit lebih mendalam. Jika Anda menemukan ketika Anda menambahkan barang baru nanti, itu muncul di atas objek sebelumnya saat Anda menggabungkannya kembali, pilih dan potong benda yang ada di belakangnya (Control-X) , klik pada objek yang ingin Anda tempelkan di atas yang ada di layer yang sama, dan pilih Edit> Paste In Place atau (Control-Alt-V) .
Langkah 19
Saya juga menambahkan
sorotan sekunder, sekali lagi menggunakan kurva Bezier Curves dan Circle,
baru kali ini saya menggunakan warna #F39383.
Meskipun ada beberapa program up-and-coming yang memungkinkan penambahan pencahayaan dinamis dengan mudah ke seni 2D (seperti Sprite Lamp), namun tetap sangat sederhana dan kebanyakan ditujukan untuk seni piksel sehingga kita harus menambahkannya untuk saat ini. !
Langkah 20
Untuk menarik perhatian, saya juga menambahkan bekicot di atas kepala gurita. Saya akan membuat tubuh lebih dulu dengan Bezier Curve Tool (Shift-F6). Saya akan membuat siput di lapisan baru, tapi saya tidak perlu membuatnya juga untuk shell selama dikelompokkan dengan benar. Anda bisa membuatnya di lapisan terpisah jika Anda mau.
Seperti sebelumnya, saya akan menghapus semua simpul yang tidak perlu dan menghaluskan tubuh dengan mode Edit Path by Node (F2). Anda juga dapat memilih beberapa node dan memindahkannya ke mode ini.
Langkah 21
Sekarang tambahkan beberapa warna yang lebih terang untuk mengeluarkan volume siput. Sekali lagi saya akan menggunakan alat Bezier Curve (Shift-F6).
Jika Anda menemukan saat Anda membuat kurva, Anda membuatnya terlalu curam dan tidak dapat menghubungkannya tanpa ini terjadi:
Anda bisa klik kanan untuk keluar dari kurva, lalu sambungkan kembali secara manual.
Langkah 22
Untuk membuat dasar cangkang, gambar lingkaran dengan Circle Tool
(F5) .Saya menggunakan #5A69C0 sebagai stroke
dan #7EC7D9F sebagai isian.
Langkah 23
Gunakan alat Bezier Curve (Shift-F6) untuk menciptakan "bibir" bawah kulit.
Langkah 24
Gunakan Spiral Tool untuk menambahkan bentuk yang tepat ke shell (F9) dan atur belokan menjadi 1.50.
Sekarang putar dan posisikan spiral sehingga terlihat seperti shell yang sebenarnya. Saya juga memasang tutup spiral ke Round Cap untuk menghindari tepi yang keras.
Langkah 25
Untuk menyoroti cangkang siput, kita akan kembali menggunakan kurva bezier.Saya hanya akan menggunakan putih untuk warna, tapi saya akan mengatur bentuk Opacity hingga 50% sehingga bisa menyatu. Anda bisa mengatur opacity di Fill and Stroke Menu (Shift-Control-F).
Langkah 26
Lanjutkan dengan sisa sorotan lainnya. Anda dapat menyalin dan menempelkan gaya sorotan pertama ke sorotan lainnya dan juga akan menyalin dan menempelkan opacity, yang membuatnya lebih mudah.
Perlu dicatat bahwa saya membuat shell dan kelompok siput kelompok terpisah. Saya akan menyimpannya secara terpisah jika saya ingin menghidupkan mereka nanti.
2. Buat Sprite Sheet
Langkah 1
Pertama mari kita hapus sketsa untuk menyingkirkannya. Klik "sketsa" dan tekan tombol Delete. Pastikan Anda membuka lapisan sebelum mencoba menghapusnya atau Anda tidak dapat melakukannya. Anda juga bisa menghapus layer sebenarnya dari Layer Menu. Pastikan lapisan yang ingin Anda hapus aktif pada saat Anda menghapusnya.
Langkah 2
Pastikan Anda menyimpan file Anda sebelum melakukan bagian berikutnya (meskipun perlu dicatat bahwa Anda harus sering menabung, untuk jaga-jaga).Untuk melakukan ini, buka File> Save As (Shift-Control-S).
Langkah 3
Sekarang Anda perlu memisahkan potongan-potongan gurita itu sehingga cukup jauh terpisah untuk mengiris alat di Unity untuk mengambil potongannya terpisah. Ada pengaturan yang bisa Anda lakukan di Persatuan untuk membantu hal ini, namun lembar sprite yang terorganisir selalu lebih baik.
Ini akan menjadi ujian bagus untuk keterampilan berkelompok Anda. Jika Anda mengelompokkan semua bagian yang benar bersama, ini seharusnya relatif mudah. Anda dapat mempelajari lebih lanjut tentang Pengelompokan di Inkscape berkat tutorial bermanfaat yang dibuat di sini di Tuts setiap bagian untuk mengaturnya sesuai keinginan Anda.
Langkah 4
Saya juga menyelaraskan ujung-ujung benda di bagian luar lembaran.Sementara komputer begitu cepat sekarang Anda mungkin tidak menyadarinya terlalu banyak, selalu lebih baik untuk menghemat ruang yang Anda bisa, dan buat lembarannya sekecil mungkin. Buka menu Align Anda (Shift-Control-A) dan pastikan Relative To diset ke Last Selected daripada halaman, karena objek akan menjadi barang yang diekspor dan bukan halamannya.
Ini berarti bahwa objek pertama dan semua objek terpilih berikutnya akan diselaraskan berdasarkan posisi objek yang terakhir ditempatkan.
Keselarasan tidak harus sempurna. Di sini Anda hanya mencoba untuk mengurangi ruang putih sebanyak mungkin, dan menyelaraskan adalah cara mudah untuk melakukan itu. Hal utama adalah memastikan bahwa suatu objek tidak akan memperluas lembaran lebih dari yang diperlukan.
Langkah 5
Kemaslah selembar sekuat mungkin. Ada program untuk melakukan ini tapi banyak yang menemukannya lebih cepat hanya dengan bola mata di Inkscape.
Namun jika Anda lebih suka menggunakan satu (atau sudah mengekspor setiap gambar secara terpisah untuk digunakan di mesin permainan lainnya), Anda dapat mendownload Texture Packer di sini:
Ini tersedia untuk Mac, Windows, dan Linux secara gratis!
Langkah 6
Simpan lembaran itu sebagai file terpisah, sekali lagi jadi Anda memiliki komposisi aslinya (Anda juga bisa menyimpan keduanya dalam file yang sama jika Anda mau).
Anda akan melihat mata tampak tidak perlu berjauhan untuk pengemasan tekstur. Ini karena saya telah memilih untuk memperlakukan mereka sebagai satu objek daripada masing-masing mata beroperasi secara independen. Anda bisa melakukan ini dan kemudian masih membelah mereka dalam kesatuan sebagai mata yang terpisah.
Langkah 7
Pilih semua objek sekaligus dengan mengklik dan menyeret seluruh area seolah-olah Anda mencoba memasukkannya ke dalam kotak (lihat gambar di bawah).
Langkah 8
Sekarang untuk mengekspor lembaran Anda! Pilih File> Export (Shift-Control-E). Anda bisa mengekspor lembaran itu seukuran yang sesuai dengan kebutuhan Anda, tapi saya menyimpannya hampir sama dengan ukurannya saat memulai dengan Inkscape.
Anda bisa mengedit nama file di dalam kotak nama sehingga bisa dikenali.Jika tidak, itu akan dinamai oleh Inkscape sebagai jalur terakhir atau grup yang dipilih (misalnya g720.png).
Anda mungkin memperhatikan opsi Batch Export Objects. Anda sebenarnya bisa hanya mengekspor semuanya sebagai filenya sendiri dengan cara ini, namun perlu diingat bentuk yang ada di Inkscape akan ukurannya diekspor, jadi Anda mungkin harus menyesuaikannya secara manual.
Catatan: Saat ini ada bug di Inkscape. Jika Anda memberi nama file saat semua objek dipilih, dan Anda mencoba melakukan ekspor batch, itu hanya akan mengekspor objek terakhir karena semuanya diberi nama yang sama.
Langkah 9
Jika Anda melihat file yang diekspor sekarang, Anda harus melihat lembarannya termasuk transparansi.
3. Bawa ke Persatuan
Untuk bagian tutorial ini, saya akan berasumsi bahwa Anda bisa membuka Persatuan dan memulai sebuah proyek. Jika Anda tidak terbiasa dengan Persatuan ada banyak dokumentasi untuk pemula di situs web Persatuan . Saya hanya akan menjelaskan proses mendapatkan lembaran sprite menjadi Persatuan dan memotongnya untuk digunakan dalam permainan.
Langkah 1
Buka proyek Anda dan pastikan editor Anda dalam mode 2D (untuk mempermudah) dengan membuka Edit> Project Settings> Editor dan memilih 2D sebagai Default Behavior Mode .
Langkah 2
Seret lembar sprite dari File Explorer Anda ke dalam folder Aset Anda.
Langkah 3
Pilih lembar sprite, dan buka Inspektur melalui Window> Inspector (Control-3) .
Langkah 4
Ubah Sprite Mode menjadi Multiple. Ini akan memungkinkan Anda untuk membuka editor sprite.
Truecolor adalah pilihan yang baik untuk Format karena yang terbaik adalah gambar bersih yang bagus, terutama saat berhadapan dengan sprite seni piksel. Setelan Anda yang lain mungkin bergantung pada proyek individual.
Langkah 5
Buka Editor Sprite.
Langkah 6
Klik Slice . Biasanya saya hanya memilih Otomatis dan membiarkannya seperti apa adanya, namun saya tidak dapat melakukannya dalam kasus ini karena akan memecah mata menjadi dua bagian, seperti:
Untuk memperbaiki ini, klik salah satu kotak pembatas dan Hapus. Sekarang peregangan kotak pembatas lainnya untuk memasukkan kedua mata dan klik Apply.
Jika Anda kehilangan kotak atau perlu membuat yang baru karena tidak mengirisnya dengan benar, klik-seret ke tempat kosong.
Anda mungkin juga melihat kotak di kanan bawah memiliki tempat untuk diberi nama masing-masing bagian. Ini sangat penting untuk organisasi, seolah-olah Anda menyeret sprite ke layar, mereka akan diberi nama apapun sesuai nama Name box. Parameter lain yang bisa Anda atur disini adalah Pivot yang menunjukkan titik jangkar utama sprite. Saat Anda memutar sprite di animator, Anda akan memutar sekitar titik ini.
Langkah 7
Sesuaikan semua pivots ke tempat yang Anda inginkan dengan mengklik dan menyeret lingkaran di tengah setiap sprite, atau dengan mengetikkannya secara manual ke kolom Pivot .
Sekarang Anda bisa melihat semua sprite Anda sebagai objek individual diProject> Asset Folder.
Langkah 8
Sekarang kita bisa menyeret potongan-potongan itu ke tempat kejadian untuk membuat Game Objects . Namun, pertama mari kita membuat Objek Game yang kosong (Control-Shift-N) dan menyebutnya "Octopus".
Klik pada Objek Game di Hirarki dan pergilah ke Inspektur untuk mengganti namanya.
Langkah 9
Sekarang Anda dapat menarik bagian tubuh lainnya ke Objek Game Octopus diHirarki dan mengaturnya sesuai keinginan Anda, tapi pastikan mereka berpusat di Objek Game yang kosong.
Langkah 10
Jadi seperti yang mungkin Anda perhatikan, tentakel gurita tidak sesuai dengan keinginan kita. Kita bisa memperbaikinya dengan Lapisan Sortir di Inspektur. Biasanya saya bisa membuat lapisan penyortiran baru untuk Octopus tapi untuk saat ini saya hanya akan membiarkannya sebagai default dan menyesuaikan jumlahnya..
Langkah 11
Sekarang mari kita simpan adegan uji coba dan proyek ( File> Save Scene ).Kesatuan bisa macet saat Anda mulai masuk ke tindakan yang lebih mendalam, jadi saya sarankan untuk sering menabung.
Kerja yang Luar Biasa, Anda Siap untuk Animasi!
Karakter ini belum memiliki animasi namun hampir tidak "siap bermain".Animator in Unity luar biasa kuat namun ada sedikit kurva belajar!
Ini bagus bagi para seniman untuk mengetahui bagaimana seni mereka akan terlihat di mesin, dan bagaimana animasi bisa membantu membuat grafis lebih sesuai untuk pengembangan game. Perlu dicatat bahwa bahkan setelah Anda sampai pada titik ini, Anda dapat dengan mudah memperbarui sheet Anda dan memasukkannya kembali ke dalam folder aset (Unity default ke folder proyek Anda di "Documents") dan permainan akan diperbarui secara otomatis. Sadarilah jika Anda mengubah ukuran sprite dengan cara apa pun, bahkan dengan menambahkan "ekstra" Anda mungkin harus mengulanginya kembali.
