รายละเอียดการวาด Sprite หมุน, เปลี่ยนสี

ตอนแรกว่าจะทำเสียงรถ บรึ้นๆ ก่อน แต่พอลองหาไฟล์เสียงไปมาก็พบว่าเสียงรถบรื้นๆนั้นทำยากกว่าที่คิด เอ่อ มาทำอย่างอื่นก่อนดีกว่า

ก่อนจะมาทำอะไรๆ มาดูเมธอด Draw ของSprite ดีกว่า ลองพิมพ์ spriteBatch.Draw( ลงไป ก็จะเห็น tooltip โผล่มาละบอกว่ามีพารามืเตอร์ต้องใส่อะไรบ้าง เมธอด Draw นั้นมี overload ถึง 7 ตัวให้เลือกใช้เลยทีเดียว (overload method คือ เมธอดที่มีชื่อเหมือนกันแต่รับพารามิเตอร์ไม่เหมือนกัน)

ดูพารมิเตอร์แต่ละคัวกันดีกว่า

Texture2D texture แน่นอนก็รูป texture ที่เอามาวาดนั่นเอง

Vector2 position ตำแหน่งวาดนั่นแล

Rectangle destinationRectangle อันนี้ผมยังงงๆขอกอปมาแปลให้ฟังละกัน เหอๆ “A rectangle specifying, in screen coordinates, where the sprite will be drawn. If this rectangle is not the same size as sourceRectangle, the sprite is scaled to fit.” แปลว่าเป็น Rectangle ที่ระบุตำแหน่งในจอ ว่าจะวาดSpriteตรงไหน ถ้าไอสี่เหลี่ยมRectangleนี้มันไม่เท่า frame ของรูปที่จะวาดมันก็จะยืดหดให้ฟิตพอดีสี่เหลี่ยมนี้ แปลซ้อนอีกทีว่า คือแทนที่จะระบุเป็นตำแหน่งวาด แต่ระบุเป็นกรอบสี่เหลี่ยมละวาดใส่กรอปนั้นไป

Rectangle? sourceRectangle ตรงนี้ล่ะ!!! ถ้าจะทำมันขยับก็ต้องมายุ่งกับตรงนี้ ตรงนี้จะเก็บค่าว่าจะตัดภาพส่วนไหนของ texture มาวาดบ้าง เดี๋ยวค่อยตัวอย่างข้างล่างอีกที

Color color การใส่สี.. อืม ถ้าไม่อยากใส่สีอะไรปนลงไปก็ใส่ไป Color.white ซึ่งวาดปกติก็เป็น white นี่ล่ะ

float rotation นี่ไงมุมหมุน แต่ที่สำคัญคือมันรับค่าเป็น radian ไม่ใช่องศา

Vector2 origin จุด origin ของรูป รูปตอนแรกๆที่วาดละมันไม่มีใส่ origin ก็จะทำให้ origin อยู่ที่ 0,0 ซึ่งนั่นก็คือมุมซ้ายบนของรูป เวลาสั่งวาดรูปที่ตำแหน่ง 100,100 ของจอ มันก็เอาจุด origin นี่ล่ะ ให้ตรงกับ 100,100 ของจอ ทีนี้พอเปลี่ยนจุดนี้แล้วสั่งวาดที่เดิม ผลลัพธ์รูปก็จะไม่อยู่ที่เดิมแล้ว นอกจากนี้จุดนี้ยังเป็นจุดศูนย์กลางการหมุนอีกด้วย

float scale ก็ลดขนาดหรือขยายรูป 1.0f คือขนาดปกติ

Vector2 scale คล้ายข้างบนแต่แยกแกน x กับ y ทำยืดให้มันสูงๆหรืออ้วนๆได้

SpriteEffects effects ถ้าจะกลับด้านก็ยุ่งกับตรงนี้ล่ะ ใส่ได้ 3 ค่า SpriteEffects.None , SpriteEffects.FlipHorizontally และ SpriteEffecft.FlipVertically แต่ละค่าก็ตามชื่อละครับ

float layerDepth สุดท้ายแล้ว ก๊อปมาอีกละกัน-*- “The sorting depth of the sprite, between 0 (front) and 1 (back).” ลำดับการวาดว่าจะอยู่บนหรือล่าง..

จบละ พารามิเตอร์ เยอะจริง แต่ก็ทำได้หลายอย่างเลย

เอ้าๆ จากเรื่องที่แล้วของผม มาทำรถหมุนดีกว่า

ตอนนี้ ตัวแปร Global ของผม(ที่อยู่ใต้ public class Game1เลย) มีดังนี้

Texture2D carTexture;
Vector2 carPosition;
Vector2 carVelocity;
Vector2 carOrigin;
float carAngle;
float carSpeed;
float carAccel;

ละก็ ตรงนี้เป็นแบบนี้ละ

protected override void LoadContent()
{
    spriteBatch = new SpriteBatch(GraphicsDevice);
    carTexture = Content.Load<Texture2D>("car1");

    Rectangle windowBounds = Window.ClientBounds;
    carPosition = new Vector2(windowBounds.Width / 2 - carTexture.Width / 2,
                   windowBounds.Height - carTexture.Height);
    carOrigin.X = carTexture.Width / 2;
    carOrigin.Y = carTexture.Height / 2;

}

protected override void Update(GameTime gameTime)
{
    Rectangle windowBounds = Window.ClientBounds;

    KeyboardState keyboard = Keyboard.GetState();
    if (keyboard.IsKeyDown(Keys.Left))
        carAngle -= MathHelper.ToRadians(5);
    if (keyboard.IsKeyDown(Keys.Right))
        carAngle += MathHelper.ToRadians(5);
    if (keyboard.IsKeyDown(Keys.Up) && carSpeed < 120)
        carAccel++;
    if (keyboard.IsKeyDown(Keys.Down) && carSpeed > 0)
        carAccel--;

    carSpeed = carAccel * 0.01f;
    carVelocity.Y = -carSpeed * (float)Math.Cos(carAngle);
    carVelocity.X = carSpeed * (float)Math.Sin(carAngle);

    carPosition.X += carVelocity.X;
    carPosition.Y += carVelocity.Y;

    carPosition.X = MathHelper.Clamp(carPosition.X, 0, windowBounds.Width);
    carPosition.Y = MathHelper.Clamp(carPosition.Y, 0, windowBounds.Height - carTexture.Height);
    if (carPosition.Y == 0)
        carPosition.Y = windowBounds.Height - carTexture.Height;
    base.Update(gameTime);
}

protected override void Draw(GameTime gameTime)
{
    GraphicsDevice.Clear(Color.CornflowerBlue);
    spriteBatch.Begin();
    spriteBatch.Draw(carTexture, carPosition, null, Color.White, carAngle,
        carOrigin, 1.0f, SpriteEffects.None, 0f);

    spriteBatch.End();
    base.Draw(gameTime);

}

และเพื่อจะเปลี่ยนสีรถได้ ผมไปเปลี่ยนรถเป็นสีขาว จะได้เอาสีอื่นปนง่าย

พอเปลี่ยนเป็นงี้ก็เปลี่ยนสีรถง่ายเลย ลองเปลี่ยน Color.White เป็นสีอื่นๆ พิมพ์ไป Color. เท่านี้ก็จะขึ้นชื่อสีมาให้เลือกมากมาย