Apakah ada cara saya bisa membuat sudut bulat pada persegi panjang yang diberikan dalam XNA melalui primitif (garis-strip)? Saya ingin membuat UI saya sedikit lebih mewah daripada yang sudah ada, dan saya ingin kode menjadi fleksibel, tanpa terlalu banyak tekstur yang terlibat.
10
Jawaban:
Anda dapat membuat primitif Anda, dan membuat shader yang dapat membuat sudut-sudut membulat ini.
Berikut ini adalah shader piksel sederhana dalam pseudocode yang dapat menggambar kotak bulat:
Hasil dari shader piksel ini:
Jika Anda menggunakan shader, Anda dapat membuat UI yang benar-benar mewah, bahkan yang animasi.
Bagi saya hebat untuk prototipe pixel shaders sederhana adalah program EvalDraw
sumber
Cara lain untuk melakukan ini adalah dengan menggunakan 'peregangan tombol' (juga disebut 'peregangan kotak' atau 'sembilan-tambalan'). Pada dasarnya Anda membuat gambar yang terdiri dari 9 bagian:
Untuk menggambar tombol itu dalam ukuran berapa pun, Anda menggambar setiap bagian (dari atas ke bawah, kiri ke kanan):
width - ((1) + (2)).Width
) di bagian atas persegi panjang tujuan, dengan offset kiri dengan lebar (1).height - ((1) + (2)).Height
) di sebelah kiri persegi panjang tujuan, dengan bagian atas diimbangi oleh ketinggian (1).Jika Anda melihat tombol Anda akan melihat bahwa tidak masalah jika (2), (5) dan (7) diskalakan secara horizontal (karena pada dasarnya itu adalah garis lurus); dengan cara yang sama (4), (5) dan (6) dapat diskalakan secara vertikal tanpa mempengaruhi kualitas gambar.
sumber
Berikut adalah kode untuk pendekatan "sembilan-patch":
Itu dipanggil sebagai:
sumber
Texture2D _texture = new Texture2D(GraphicsDevice, 1, 1); _texture.SetData(new Color[] { Color.Blue }); SpriteBatch sb = new SpriteBatch(GraphicsDevice); sb.Begin(); //sb.Draw(_texture, new Rectangle(100, 100, 100, 100), Color.White); sb.DrawRoundedRect(_texture, new Rectangle(100, 100, 100, 100), Color.Pink, 16); sb.End();