ก่อนจะมาทำอะไรๆ มาดูเมธอด 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. เท่านี้ก็จะขึ้นชื่อสีมาให้เลือกมากมาย

รถแล่นและเลี้ยวได้แล้วว

ชักจะยาวไปแล้ว การขยับขอต่ออันหน้าละกันครับ..

เริ่มมาทำให้มันขยับซ้ายขวาดีกว่า

ก่อนอื่น จากเดิมเลย มันอยู่รถซะมุมซ้ายบนนั้นเลย ย้ายให้มันเริ่มตำแหน่งดีขึ้นนิด ทีนี้จะใส่ Initialize() หรือ LoadContent() ดีล่ะ ถ้าอ่านๆดูจากไฟล์ที่มัน gen มาให้ก็จะพบนั่นล่ะ เหอๆ คือถ้าไม่ใช่เรื่องกราฟฟิกให้ใส่ไว้ที่ Initialize() ดังนั้นจะกำหนดตำแหน่งเริ่ม ก็เอาไว้ที่ LoadContent()

จะได้เมธอดนี้หน้าตาใหม่เป็น

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);
}

windowBounds.Width ก็จะเท่ากับค่าความกว้างของวินโด้เกม ส่วน carTexture.Width ก็ความกว้างtextureรถ สรุปว่า Rectangle และ Texture2D นั้นมี .Width .Height ให้เรียกใช้ อืม…สะดวกดีๆ (ถ้าขี้เกียจจะเรียกเมธอดนู่นนี่ เราก็กำหนดค่าไปเลยก็ได้ เช่น  carPosition.X = 10 แต่มันก็จะทำให้เมื่อโปรแกรมมันใหญ่ขึ้นพอจะแก้อะไรก็รุงรังไปหมด) หมายเหตุ ถ้าถึงจุดนี้คุณยังก๊อปโค้ดอยู่ทั้งหมดก็จะไม่รุ้ว่า Visual มันฉลาดพอตัว เมื่อพิมพ์ carPosition. มันก็จะแสดงเมธอดและตัวแปรต่างๆออกมาให้ ละสำหรับคนไม่รุ้จริงๆ เวลามันโชว์อันนั้นแล้วจะกด space bar หรือ = หรือ enter มันก็จะ auto complete ให้เลย

F5 อีกที รถย้ายตำแหน่งละ จะเห็นว่ามันย้่ายลงมาข้างล่าง จากเดิมที่อยู่มุมซ้ายบน ซึ่งไอซ้ายบนนั้นอ่ะ คือ x = 0 และ y = 0 ครั้งแรกไม่ได้ใส่ค่าไรไปมันเลยเริ่มตรงนั้นล่ะ อยากให้ลองตั้ง carPosition.X และ carPosition.Y เป็นตัวเลขไปเลยก็ดีครับ จะได้เข้าใจว่าถ้า X = 100 อยู่ไหน และ X = -100 อยู่ไหน(-100 มันก็มองไม่เห็นอ่ะครับ เพราะมันจะอยู่ทางซ้ายนู้นน หลุดขอบจอไป)

ต่อเลย จะให้มันขยับซ้าย ขวา ก็ต้องไปอัพเดท carPosition แน่นอนว่าต้องทำใน เมธอดUpdate() ก่อนอื่นก็ลองก่อนเลย เพิ่มไปตรง // TODO: Add your update logic here นั่นล่ะ

carPosition.Y–;

ลองแค่นั้นล่ะ อยากเห็นมันเลื่อนก่อน 55+พอ เข้าใจไอเดียละใช่มั้ยครับ..

ลบไอที่ลองตะกี้ทิ้งไป มาทำไอสิ่งที่ตั้งใจจะทำดีกว่า

KeyboardState keyboard = Keyboard.GetState();
if (keyboard.IsKeyDown(Keys.Left))
carPosition.X -= 5;

if (keyboard.IsKeyDown(Keys.Right))
carPosition.X += 5;

นั่น!! รับข้อมูลคีย์บอร์ดได้แล้วว ง่ายอีกละ อ่านอังกฤษออกก็พอเข้าใจว่ามันทำไรเลย

สุดท้ายขอปรับแต่งไรหน่อย ให้มันเป็นเกมมากขึ้นๆ ผลสุดท้ายได้มาอย่างนี้

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

            KeyboardState keyboard = Keyboard.GetState();
            if (keyboard.IsKeyDown(Keys.Left) && carPosition.X > 0)
                carPosition.X -= 3;
            if (keyboard.IsKeyDown(Keys.Right)
                && carPosition.X < windowBounds.Width - carTexture.Width)
                carPosition.X += 3;
            if (keyboard.IsKeyDown(Keys.Up) && carPosition.Y > 0)
                carPosition.Y -= 5;
            if (keyboard.IsKeyDown(Keys.Down)
                && carPosition.Y < windowBounds.Height - carTexture.Height)
                carPosition.Y ++;

            if(carPosition.Y < windowBounds.Height - carTexture.Height)
                carPosition.Y += 2;

            base.Update(gameTime);
        }

ก็จะได้เป็นรถที่เร่งไปข้างหน้าได้ เบรกได้ ซ้าย ขวาได้ ใส่เสียงอีกหน่อยนะได้ feel เลย

จบอีกเรื่อง ค่อยๆเป็น ค่อยๆไปครับ..

Object-Oriented Programming for XNA

XNA in a Day… Almost

XNA – Simple Sample Game

MSDN Your First Game: Microsoft XNA Game Studio in 2D

ละจะมาขอเล่าต่อให้ฟังละกัน
เย้ๆ goๆ
- เปิด visual c# express
- กดเมนู File > New Project
- เลือก XNA studio เมนูทางซ้าย ละWindows Game 3.0 เมนูทางขวา
- ตั้งชื่อ Project อยากชื่ออะไรตั้งเลยครับ
- ละก็กด OK

เอาล่ะ อยากเห็นภาพซักภาพก่อนละ ภาพไรก็ได้เอาเบสิคๆ 2dก่อนละกัน.. ว่าแล้วก็พิมพ์กูเกิ้ลไปว่า car sprite ละได้รูปรถมาคันนึง (sprite คือภาพที่สำหรับทำเกม 2d ถ้าอยากทำเกม 2d ก็ต้องใช้พวกนี้ละครับ หาได้จาก google หรือ กระทู้gamedev.netนี้) ส่วนผม google ได้รูปนี้มา (เวบตัวอย่างมันยานบิน ผมเอารถละกัน ฮ่าๆ)

car1.png

add ใส่โปรเจคก่อนเลย มองทางขวาของโปรแกรม ที่ Solution explorer(ถ้าไม่มีไปหาจากเมนู view) ตรง content คลิกขวา add exiting item เลือกรูปที่จะใช้ในที่นี้คือรูปรถแดงนั่นเอง จากนั้นจะเห็นมันเพิ่มมาใน content ลองคลิกขวาดู propertie จะเห็นชื่อของมัน(asset name) คือเราสามารถเรียกใช้ด้วยชื่อนี้ได้เลย

อยากจะบอกว่าขั้นตอนต่อไปง่ายมากก

เพิ่ม

Texture2D carTexture;
Vector2 carPosition;

ไปหลัง GraphicsDeviceManager graphics; SpriteBatch spriteBatch;

ละก็มาดู เมธอดInitialize()ซึ่งตามชื่อก็คือเริ่มเกมมาจะทำงานตรงนี้หนึ่งครั้งเท่านั้น

protected override void Initialize()
{
Window.Title = “First XNA”;

graphics.PreferredBackBufferWidth = 300;
graphics.PreferredBackBufferHeight = 500;

graphics.ApplyChanges();

base.Initialize();
}

เลข 300 500 ก็ขนาดหน้าจอนั่นล่ะ แล้วที่ต้องเพิ่มต่อไปก็..

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

ข้างบนก็คือการ load ไฟล์ต่างๆมั้ง (เช่นเดียวกับ initial จะถูกเรียกครั้งแรกครั้งเดียวตอนโหลดเกม)จะเห็นว่ามี car1 ที่ใส่ไปตอนแรก

สุดท้ายแล้ว

protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.CornflowerBlue);
spriteBatch.Begin();
spriteBatch.Draw(carTexture, carPosition, Color.White);
spriteBatch.End();
base.Draw(gameTime);

}

กด F5 รันนน ได้ละ ง่ายจังแหะ..

ละจะโหลดไรบ้างละ ตามนี้เลย

1. XNA Game Studio 3.0

2. Visual C# 2008 Express Edition (เค้าว่ากันว่า xna3.0 ต้องเวอร์ 2008 อืมว่าไง ก็ว่าตามนั้น) ซึ่งในเวบใีห้เลือกสองแบบ web install กับ offline install แม้แบบ web install จะเลือกโหลดได้ แต่พอโหลดไปแล้วจะติดตั้งมันต้องโหลดต่ออีก และไอตรงนี้เนี่ยใช้โปรแกรมช่วยโหลดอย่าง falshget ก็ไม่ได้ อาจจะทำให้ช้า(สำหรับบางคน) ส่วนแบบ offline install เป็น image ไฟล์ 700 กว่า โหลดครั้งเดียวรู้เรื่อง ลงกี่เครื่องก็ได้เลย ก็เลือกเอาละกันครับผม

3. DirectX SDK

4. DirectX End-User Runtime updates (คลิกเข้าไปละมันเป็น web updateอีกละ ผมไม่ลงได้ป่ะเนี่ย ปกติเล่นเกมอยู่เรื่อยๆ มันก็ลงใหม่ตลอดๆ แต่ที่เอามาเขียนตอนแรกเพราะเวบ creater clubของxna มันมีอ่ะ)

//sdk = software development kit แปลว่าสำหรับผู้พัฒนา และ end-user = ผู้ใช้ธรรมดา(ผู้เล่นเกม)นั่นเองครับ

ตามนั้นล่ะ ตอนนี้ผู้เขียนก็โหลดอยู่ครับ ฮึ่บๆ

หมายเหตุลิ้งนี้ เขียนเมื่อ 18 มีนา 2552 ถ้าเข้ามาหลังจากนี้โปรดตรวจสอบเวอร์ชั่นใหม่ๆด้วยครับ

ว่าจะจบตรงนั้น แต่ไม่เอาดีกว่า ยังขยันอยู่ครั้งแรกวันนี้ 555+

ไหนๆก็ไหนละ เห็นพวกเว็บสอนเขียนเกมชอบสอนพวกนี้ อยากเขียนมั่งเอาซักหน่อยละกัน

ไอxnaที่ผมว่าเนี่ยมันเป็นframework ละผมจะเอา C# เขียนบน visual ซึ่งถ้าคุณเป็นเด็กน้อยๆละอุตส่าห์หลงมาที่นี่ได้(ดีใจอ่ะ ตอนเด็กๆผมก็หลงๆไปตามเวบเขียนเกมเหมือนกันอ่านไม่รุ้เรื่องเลย อิอิ) แล้วยังไม่มีพื้นฐานโปรแกรมอะไรเลย ไม่เคยเขียนโปรแกรม แต่มีไอเดีย อยากจะบอกความจริงอันโหดร้ายครับว่าไม่มีใครสนไอเดียนั้นหรอกครับT-T ถ้าอยากได้ต้องทำเองล่ะ แล้วจะทำเองยังไงล่ะ เริ่มแรกก็หัดเขียนโปรแกรมก่อนเลย ไปร้านหนังสือแถวบ้าน ซื้อเริ่มต้นกะภาษา๋Java หรือ C มาก็ได้ละก็อ่าน ละทำ แรกมันดูจะห่างไกลจากทำเกมเหลือเกิน ก็ต้องยอมศึกษาไปละครับ หรือไม่งั้นลอง rpg maker ดูที่นี่ หรือ นี่ ไรงี้ไปก่อนก็ได้นะ ตัวผมไม่เคยลองจริงจัง แต่ก็คิดว่าน่าจะง่ายกว่าและเร็วกว่าล่ะ

สุดท้าย ผู้เขียนบลอกนี้ไม่เคยจับ C# มาก่อนเลยครับ เคยแต่ Java ละก็ C++นิดๆ  ใครไม่เป็นก็มามั่วพร้อมผมได้เลย555 ก็อยากมีที่ระบายด้วยล่ะที่เขียนบลอกนี้ -*- ใครเป็นอยู่ละอ่านบลอกนี้อาจหงุดหงิดนิด ของอภัยครับ..

ต่อไปก็มาดูกันละกันว่าผมจะไปได้ซักกี่น้ำ555+ ซะงั้นล่ะ

———————————-

edit ณ วันถัดมา : โหลดเสร็จแล้ว มาลงเลยดีกว่า ไม่ต้องเปลือง Post ใหม่

ผมโหลดตัว offline install มา พอได้ละก็ mount (ใครไม่เป็น google ดูครับ) ละเลือก c# กด nextๆ รอๆ จบไปอัน

ลง directX sdk  กด nextๆ เสร็จไปอีกหนึ่ง

end – user runtime ไม่ลงล่ะweb install ช้าไม่ชอบ

ข้ามไป xna เลย กด nextๆ acceptๆ มีถามไร firewall ด้วยว่าจะให้ต่อ xbox360 ได้มั้ย(มีที่ไหนเล่า- -) ยังไม่รุ้เรื่อง ก็ยอมๆติ๊กๆไป ละก็รอๆ นานจริงๆ-*- ……..     ในที่สุดก็เสร็จ

จบละ ลองกดเปิด visual ดูเห็นโปรแกรมสีเขียว เอาล่ะ ไปขั้นต่อไปกัน