Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Game Development
  2. Game Development
Gamedevelopment

Membuat Kartu Bermain dinamis Menggunakan Kode untuk Game Jams

by
Difficulty:BeginnerLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by graywest (you can also view the original English article)

Final product image
What You'll Be Creating

Tutorial ini berbeda dari tutorial saya sebelumnya seperti yang satu ini berorientasi terhadap kemacetan permainan dan permainan prototyping, khususnya permainan kartu. Kita akan membuat deck kartu bermain 2D dalam Kesatuan tanpa menggunakan seni-murni dengan kode.

1. Komponen dari Deck Playing Card

Sebuah dek kartu bermain memiliki total 52 kartu dengan 13 kartu masing-masing dari 4 simbol yang berbeda. Dalam rangka untuk membuat satu menggunakan kode, kita perlu membuat 4 simbol-simbol ini, dasar persegi panjang bulat untuk kartu, dan desain di belakang kartu.

Desain pada bagian belakang kartu dapat berupa pola abstrak, dan ada banyak cara untuk membuat satu. Kami akan menciptakan pola tileable sederhana yang kemudian akan ubin untuk membuat desain. Kami tidak akan memiliki desain khusus untuk kartu A, K, Q, dan J.

2. Solusi Alternatif

Sebelum kita mulai, saya harus menyebutkan bahwa ada solusi yang lebih mudah di luar sana yang dapat kita gunakan untuk membuat setumpuk kartu. Beberapa dari mereka tercantum di bawah ini.

  1. Yang jelas adalah dengan menggunakan-diberikan pra seni untuk semua desain.
  2. Yang kurang jelas adalah dengan menggunakan font yang berisi semua simbol yang diperlukan . Kami juga dapatmengubah font mengatakan dalam font bitmap untuk mengurangi panggilan imbang dan meningkatkan kinerja.

Solusi berbasis-font adalah tercepat dan paling mudah jika Anda ingin melakukan prototipe cepat.

3. Membuat Tekstur Selama Runtime

Langkah pertama adalah untuk belajar cara membuat Texture2D menggunakan kode yang kemudian dapat digunakan untuk membuat Sprite di Unity. Kode berikut menunjukkan penciptaan 256x256 tekstur kosong.

Idenya adalah untuk menarik semua desain ke tekstur sebelum kita menggunakan Apply metode. Kita dapat menarik desain ke tekstur pixel dengan pixel menggunakan SetPixel metode, seperti yang ditunjukkan di bawah ini.

Sebagai contoh, jika kita ingin mengisi seluruh tekstur dengan warna, kita bisa menggunakan metode seperti ini.

Setelah kami membuat Texture2D, kami dapat menggunakannya untuk membuat Sprite untuk ditampilkan di layar.

Bagian rumit dalam semua ini adalah penciptaan desain yang diperlukan pada tekstur.

4. Menciptakan Bentuk Hati

Ketika datang ke penciptaan bentuk hati, ada banyak pendekatan yang berbeda yang bisa kita gunakan, di antaranya adalah beberapa persamaan yang rumit serta pencampuran bentuk sederhana. Kami akan menggunakan metode pencampuran bentuk seperti yang ditunjukkan di bawah ini, khususnya yang memiliki segitiga.

heart shape combining primitive shapes

Seperti yang telah Anda amati, kita dapat menggunakan dua lingkaran dan persegi atau segitiga untuk menciptakan bentuk dasar jantung. Ini berarti akan kehilangan kurva ekstra indah tetapi akan cocok dengan tujuan kita dengan sempurna.

Lukisan Lingkaran

Mari kita memoles beberapa persamaan untuk menggambar lingkaran. Untuk lingkaran dengan pusat di asal dan radius r, persamaan untuk titik (x, y) pada lingkaran adalah x2+ y2= r2. Sekarang jika pusat lingkaran berada di (h, k) maka persamaannya menjadi (x-h)+ (y-k)2 = r2. Jadi jika kita memiliki kotak persegi persegi panjang persegi panjang maka kita dapat melewati semua titik dalam persegi panjang itu dan menentukan titik mana yang jatuh di dalam lingkaran dan mana yang tidak. Kita dapat dengan mudah membuat metode PaintCircle berdasarkan pemahaman ini, seperti yang ditunjukkan di bawah ini.

Setelah kita memiliki metode PaintCircle, kita dapat melanjutkan untuk membuat bentuk hati kita seperti yang ditunjukkan di bawah ini.

Resolusi variabel adalah lebar dan tinggi tekstur.

5. Menciptakan Bentuk Berlian

Kami akan membahas dua cara untuk menggambar bentuk berlian.

Lukisan Berlian Sederhana

Yang paling mudah adalah memperpanjang kode yang digunakan untuk segitiga dan menambahkan segitiga terbalik di bagian atas untuk membuat bentuk yang diperlukan, seperti yang ditunjukkan di bawah ini.

Lukisan Berlian Curvy

Yang kedua adalah menggunakan persamaan lain untuk menciptakan versi bentuk berlian yang lebih baik dan melengkung. Kami akan menggunakan yang satu ini untuk membuat desain ubin untuk sisi belakang kartu kami. Persamaan untuk sebuah lingkaran berasal dari persamaan asli elips, yaitu (x / a)2 + (y / b) 2 = r2.

Persamaan ini sama dengan lingkaran ketika variabel a dan b keduanya 1. Persamaan elips kemudian dapat diperpanjang menjadi persamaan superellipse untuk bentuk yang sama hanya dengan mengubah daya, (x / a) n + (y / b)n = rn. Jadi ketika n adalah 2 kita memiliki elips, dan untuk nilai lain n kita akan memiliki bentuk yang berbeda, salah satunya adalah berlian kita. Kita dapat menggunakan pendekatan yang digunakan untuk sampai pada metode PaintCircle untuk sampai pada metode PaintDiamond baru kita.

Lukisan Bulat Bulat

Persamaan yang sama dapat digunakan untuk membuat bentuk basis kartu persegi panjang bulat kami dengan memvariasikan nilai n.

Melukis Desain Ubin

Dengan menggunakan metode PaintDiamond ini, kita dapat menggambar lima berlian untuk membuat tekstur ubin untuk desain di bagian belakang kartu kita.

tiling design and tiled back side of the card

Kode untuk menggambar desain ubin adalah seperti di bawah ini.

6. Menciptakan Bentuk Spades

Bentuk sekop hanya flip vertikal bentuk hati kita bersama dengan bentuk dasar. Bentuk dasar ini akan sama untuk bentuk klub juga. Gambar di bawah ini menggambarkan bagaimana kita dapat menggunakan dua lingkaran untuk membuat bentuk dasar ini.

primitive shapes used to define spades shape

Metode PaintSpades akan seperti yang ditunjukkan di bawah ini.

7. Membuat Bentuk Klub

Pada titik ini, saya yakin Anda bisa mengetahui betapa mudahnya membentuk bentuk klub. Yang kita butuhkan hanyalah dua lingkaran dan bentuk dasar yang kita buat untuk bentuk sekop.

primitive shapes used to define clubs shape

Metode PaintClubs akan seperti yang ditunjukkan di bawah ini.

8. Mengepak Tekstur

Jika Anda menjelajahi file sumber Persatuan untuk proyek ini, Anda akan menemukan kelas TextureManager yang melakukan semua pengangkatan berat. Setelah kami membuat semua tekstur yang diperlukan, kelas TextureManager menggunakan metode PackTextures untuk menggabungkannya ke dalam satu tekstur, sehingga mengurangi jumlah panggilan undian yang diperlukan ketika kami menggunakan bentuk-bentuk ini.

Menggunakan array packedAssets, kita dapat mengambil kotak bounding tekstur individual dari tekstur master bernama packedTexture.

Kesimpulan

Dengan semua komponen yang diperlukan dibuat, kita dapat melanjutkan untuk membuat dek kartu kami karena itu hanya masalah meletakkan dengan benar bentuk. Kita bisa menggunakan UI Unity ke kartu komposit atau kita dapat membuat kartu sebagai tekstur individual. Anda dapat menjelajahi kode contoh untuk memahami bagaimana saya telah menggunakan metode pertama untuk membuat tata letak kartu.

Kita dapat mengikuti metode yang sama untuk menciptakan jenis seni dinamis apa pun saat runtime di Unity. Menciptakan seni saat runtime adalah operasi yang haus kinerja, tetapi hanya perlu dilakukan sekali jika kita menyimpan dan menggunakan kembali tekstur tersebut secara efisien. Dengan mengemas aset yang dibuat secara dinamis menjadi satu tekstur, kami juga mendapatkan keuntungan menggunakan atlas tekstur.

Sekarang kita memiliki dek kartu permainan kami, beri tahu saya permainan apa yang akan Anda buat dengan itu.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.