XNA'da yuvarlatılmış köşeler?


10

İlkel (çizgi şeritler) aracılığıyla XNA'da oluşturulan bir dikdörtgen üzerinde köşeler yuvarlatabilmemin bir yolu var mı? Kullanıcı arayüzümü zaten olduğundan daha süslü hale getirmek istiyorum ve kodun çok fazla doku olmadan esnek olmasını istiyorum.


Temel olarak: Çizgi için bir doku, çizginin yuvarlak uçları için bir doku kullanın. Bu iki dokuyu uygun şekilde kullanan spriteları döndürün ve ölçeklendirin.
Olhovsky

Yanıtlar:


8

İlkelinizi oluşturabilir ve bu yuvarlak köşeleri oluşturabilecek bir gölgelendirici yapabilirsiniz.
İşte pseudocode'da yuvarlak bir kare çizebilen basit bir piksel gölgelendirici:

xDist = abs(x-0.5)
yDist = abs(y-0.5)
xD = xDist*xDist*4
yD = yDist*yDist*4
alpha = floor((1-xD)*(1-yD)*5)

Bu piksel gölgelendiricisinin sonucu:

resim açıklamasını buraya girin

Gölgelendiriciler kullanıyorsanız, animasyonlu bile olsa gerçekten süslü bir kullanıcı arayüzü yapabilirsiniz.

Benim için basit piksel gölgelendiricilerin prototipini yapmak harika bir program EvalDraw


5

Bunu yapmanın başka bir yolu da 'düğme uzatma' kullanmaktır ('kutu uzatma' veya 'dokuz yama' da denir). Temelde 9 bölümden oluşan bir görüntü oluşturursunuz:

Düğme Kaynağı

Bu düğmeyi herhangi bir boyutta çizmek için, her parçayı (üstten alta, soldan sağa) çizersiniz:

  1. Hedef dikdörtgenin sol üst köşesinden ölçeksiz çizim yapın.
  2. width - ((1) + (2)).WidthHedef dikdörtgenin en üstünde yatay olarak (ile ), sol ofset (1) genişliğinde olacak şekilde ölçeklendirilir .
  3. Hedef dikdörtgenin sağ üst köşesinde ölçeksiz çizim yapın.
  4. Dikey olarak ölçeklendirilmiş çizim (ile height - ((1) + (2)).HeightHedef dikdörtgenin solunda, üst ofset (1) yüksekliğinde olacak şekilde ) .
  5. Her iki yönde ölçeklendirilmiş ((2) genişliği ve (4) yüksekliği), (1) genişliği ve yüksekliği ile ofset çizin.
  6. Hedef dikdörtgenin sağında dikey olarak ölçeklendirilmiş ((4) ile aynı yükseklik), (1) yüksekliğiyle ofset.
  7. Hedef dikdörtgenin sol alt kısmından ölçeksiz çizim yapın.
  8. Hedef dikdörtgenin altında yatay olarak ölçeklendirilmiş ((2) ile aynı yükseklik), (1) genişliğiyle kaydırın.
  9. Hedef dikdörtgenin sağ alt kısmından ölçeksiz çizim yapın.

Düğmeye bakarsanız, (2), (5) ve (7) 'nin yatay olarak ölçeklendirilmesinin (aslında düz bir çizgi olduğu için) önemli olmadığını göreceksiniz; aynı şekilde (4), (5) ve (6) görüntü kalitesini etkilemeden dikey olarak ölçeklendirilebilir.


Evet, bu doğrudan soruyu cevaplamıyor - ancak birisi yine de yararlı bulabilir.
Jonathan Dickinson

4
Dokuz yama denir ve aslında bir doku ile istediğiniz gibi görünmesini sağlayabileceğiniz için bir gölgelendirici kullanmaktan çok daha esnektir (ve daha ucuzdur!). Daha sonra tüm widget görüntülerinizi tek bir doku atlasına koyabilirsiniz. Çoğu GUI bunu bu şekilde yapar.
Elisée

0

İşte "dokuz yama" yaklaşımının kodu:

public static class SpriteBatchExtensions
{
    public static void DrawRoundedRect(this SpriteBatch spriteBatch, Rectangle destinationRectangle, 
        Texture2D texture, int border, Color color)
    {
        // Top left
        spriteBatch.Draw(
            texture, 
            new Rectangle(destinationRectangle.Location, new Point(border)), 
            new Rectangle(0, 0, border, border), 
            color);

        // Top
        spriteBatch.Draw(
            texture, 
            new Rectangle(destinationRectangle.Location + new Point(border, 0), 
                new Point(destinationRectangle.Width - border * 2, border)), 
            new Rectangle(border, 0, texture.Width - border * 2, border), 
            color);

        // Top right
        spriteBatch.Draw(
            texture, 
            new Rectangle(destinationRectangle.Location + new Point(destinationRectangle.Width - border, 0), new Point(border)), 
            new Rectangle(texture.Width - border, 0, border, border), 
            color);

        // Middle left
        spriteBatch.Draw(
            texture, 
            new Rectangle(destinationRectangle.Location + new Point(0, border), new Point(border, destinationRectangle.Height - border * 2)), 
            new Rectangle(0, border, border, texture.Height - border * 2), 
            color);

        // Middle
        spriteBatch.Draw(
            texture, 
            new Rectangle(destinationRectangle.Location + new Point(border), destinationRectangle.Size - new Point(border * 2)), 
            new Rectangle(border, border, texture.Width - border * 2, texture.Height - border * 2), 
            color);

        // Middle right
        spriteBatch.Draw(
            texture, 
            new Rectangle(destinationRectangle.Location + new Point(destinationRectangle.Width - border, border), 
                new Point(border, destinationRectangle.Height - border * 2)), 
            new Rectangle(texture.Width - border, border, border, texture.Height - border * 2), 
            color);

        // Bottom left
        spriteBatch.Draw(
            texture, 
            new Rectangle(destinationRectangle.Location + new Point(0, destinationRectangle.Height - border), new Point(border)), 
            new Rectangle(0, texture.Height - border, border, border), 
            color);

        // Bottom
        spriteBatch.Draw(
            texture, 
            new Rectangle(destinationRectangle.Location + new Point(border, destinationRectangle.Height - border), 
                new Point(destinationRectangle.Width - border * 2, border)), 
            new Rectangle(border, texture.Height - border, texture.Width - border * 2, border), 
            color);

        // Bottom right
        spriteBatch.Draw(
            texture, 
            new Rectangle(destinationRectangle.Location + destinationRectangle.Size - new Point(border), new Point(border)), 
            new Rectangle(texture.Width - border, texture.Height - border, border, border), 
            color);
    }
}

Şu şekilde çağrılır:

spriteBatch.DrawRoundedRect(
    dest, // The coordinates of the Rectangle to be drawn
    rectangleTexture, // Texture for the whole rounded rectangle
    16, // Distance from the edges of the texture to the "middle" patch
    Color.OrangeRed);

bu benim için işe yaramıyor ... Sadece normal bir dikdörtgen alıyorum. İşte böyle kullandımTexture2D _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();
Leonardo Seccia

Dokunuz sadece bir mavi pikseldir, bu yaklaşım yuvarlatılmış köşelerin dokunuzun bir parçası olduğunu varsayar.
sdgfsdh

üzgünüm - platformda çok yeni ... çok çabuk geri döndüğün için teşekkürler
Leonardo Seccia
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.