วันอาทิตย์ที่ 15 พฤษภาคม พ.ศ. 2554

xna network

ตอนนี้กำลังศึกษา เกี่ยวกะ network อยู่ มีหลายทางจริงๆ *0*
เคยมีคนเขียน เปน dll ไว้ กะว่าจะเอามาลองใช้ดู ฝากไว้หน่อย

โหลดๆ

วันศุกร์ที่ 6 พฤษภาคม พ.ศ. 2554

XNA 4.0 Tutorial Chapter 5 "Sprite Animation"


ดึกแล้วอ่ะ เพิ่งทำเสร็จด้วย อัพ code ให้ก่อนละกัน พรุ่งนี้มาอธิบายให้เปนส่วนๆๆ ฮ้าวๆๆ
อธิบายคร่าวๆก็
ต้องมี ภาพ sprite ภาพนึง
สร้าง class Animated sprite มาอันนึง แล้วก็มี method draw,update,animatedsprite
เสร็จแล้วก็ เหมือนกับว่า แบ่งให้มันเปนส่วนๆๆๆๆๆๆ ไรงี้ แล้วก็นำมา draw เรื่อยๆ *0*
ค่อยๆขยับ frame พอถึงจุดที่เรากำหนดก็เปลี่ยน ไปดู code ดีกว่า เดวพรุ่งนี้มาอธิบายละเอียดละกันๆๆ

อันนี้ที ่ class animatedsprite ก่อนนะ

นี่ ตัวแปรที่ประกาศทั้งหมด

แล้วแต่ไปก็ method animated sprite


ต่อไปก็ method update


ต่อไป method draw


แล้วก็กลับมาใน class game1 ปกตินะๆๆ
นี่ตัวแปรที่ใช้


นี่โหลดภาพๆๆ


นี่ update นะๆๆ


นี่ draw ๆๆๆ




นี่ เสร็จแล้วว *0*


ความจริงมันขยับนะ ทุก 0.5 second ถ้าอยากได้เร็วก็ปรับเอานะๆๆ ไปนอนละ บาย ~

วันพฤหัสบดีที่ 5 พฤษภาคม พ.ศ. 2554

XNA 4.0 Tutorial Chapter 4 "Paint Game"



*0* โอ้วเยียย วันนี้ขยัน เกิดปิ้งไอเดียขึ้นมา ว่า แรกๆ หัดทำเกมง่ายๆดีกว่า ก็เลยคิดจะทำ paint เลียนแบบ ของ microsoft =0= 5555

เริ่มแรกเราก็ต้องมี mouse ที่เป็นรูปดินสอเสียก่อน เพื่อให้ได้บรรยากาศ *0* ข้าพเจ้าเลยตั้งใจ ขออากู๋มาอันนึง

แท่แด้นนน ;

อีกอันที่ต้องเตรียมคือ เส้นนั่นเอง
ข้าใช้เปน จุดๆ สีดำนะค้าบ แบบนี้ =0=



มาถึงการเขียนโปรแกรม xna สุดแสนจะทรหดยืดยาวยาวยืดแล้ว มันต้่องมีอะไรบ้างในโปรแกรม *0*

ขั้นแรกก็ new project ตั้งชื่อตามใจตัวเองมาก่อนนะครับ 1 อัน แล้วก็เพิ่ม content ลงไปทางด้านขวานะ เพิ่ม pencil กะ dot ลงไปปปปปป

แล้วก็มากำหนดตัวแปรกัน กำหนดตามนี้เลย *0* เดวจะค่อยๆอธิบายนะว่าตัวไหนเอาไว้ใช้ทำอะไร



ที่แปลกๆโผล่มาเลย คือ int[ , ] table = new int [1100,800];
นี่คือการสร้าง array 2 มิติขนาด 1100x800 เพื่อเก็บค่าpixel จุดในหน้าจอของเรานั่นเอง

เสร็จแล้วเราก็ลงมา ตรง method Load content เพื่อที่จะโหลดภาพมาใช้ใน โปรแกรมของเรากันนน *0*

ตามนี้เลยจ้า




ตอนนี้เราก็มาที่ method update กันก่อนน มันมีอะไรบ้าง ไปดูกัน !!


mousenow = Mouse.GetState();
เป็นการบอกว่า ให้ ตัวแปร mousenow เก็บสถานะของ mouse ของเราไว้นั่นเอง *0*
PosMouse เป็นตัวแปรเก็บตำแหน่งปัจจุบันของ mouse เราไว้ =0=

มาถึง คำสั่ง if นี้ หมายถึงว่า ถ้าปุ่มเมาส์ซ้ายของเรา มีการกดอยู่ละก็ ให้ table[ตำแหน่งเมาส์X,ตำแหน่งเมาส์Y] =1; นั่นเอง
แต่บางคนก็อาจจะงงว่า if ยาวๆก่อนกำหนดค่าคือะไร นั่นก็คือการเช็คว่้า ให้ เมาส์อยู่ในหน้าจอของเราถึงค่อยทำการกำหนดค่า table ไม่งั้นมันจะเกิน array อาจทำให้เกิดอาการ error ขึ้นได้ = =""

มาถึง method draw กันแล้วนะครับ
มีตามนี้เลย



บรรทัด spritemouse.Draw(mouse, PosMouse, Color.White); นี้ก็หมายถึงว่า ให้เราdraw รูป mouse หรือรูป ดินสอ ในตำแหน่ง PosMouse หรือก็คือ ให้ปรากฏรูป ดินสอในตำแหน่งของ mouse เรานั่นเองงง ชะเอ่งเองง =0=

แล้วก็ ใน for2 ชั้นนั้นหมายถึงว่า ให้วนดูในหน้าจอเรา ถ้าตรงไหนเป็นตำแหน่งที่เราคลิก ซึ่ง ก็คือ เป็น 1 ให้วาดภาพจุดลงบนนั้นซะ !!! เสร็จแล้ววว กด F5 รัน ก็จะได้ผลลัพท์ออกมาแบบนี้ *0*


แทแทแด้นนน

จบไปแล้วว =0= อีก chapter มีข้อสงสัยอะไร โพสถามได้นะครับ ถ้าเข้ามาเห็นก็จะตอบให้คร้าบผม *0*

XNA 4.0 Tutorial Chapter 3 "Chang of Resolution"


เมื่อกี้มีเืพื่อนถามมาว่า จะเปลี่ยนขนาดหน้าจอยังไงว้าาา เลยไปถาม อากู๋มาให้ *0*

ตามภาพเลยจ้ะ


ไปเขียน ที่ method game1() ว่า
graphics.PreferredBackBufferWidth = ขนาดความยาว ;
graphics.PreferredBackBufferHeight = ขนาดความกว้าง ;
แค่นี้ก็เสร็จแล้วจ้าาา *0*

วันพุธที่ 4 พฤษภาคม พ.ศ. 2554

XNA 4.0 Tutorial Chapter 2 "Move Sprite"








จาก chapter ที่ 1 นะครับ เราจะมาทำให้ภาพขยับได้กันนน *0*

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

เริ่มกันเลยดีกว่าา
เราต้องไปประกาศตัวแปร ที่เป็นชนิด Vector2 เพื่อที่จะแทนที่ new Vector2(100,50) อันเก่า ครับ
ในที่นี่ผมใช้ชื่อว่า position ให้เป็นตำแหน่ง 0,0 ในตอนเริ่มต้น (ซ้ายบนสุด) ตามนี้ครับ



นี่ครับ เสร็จแล้วเราก็ต้องมาเปลี่ยนตรง method Draw อันเดิมครับ เปลี่ยนจาก new Vector (100,50) เป็น position แืทนครับผม -0- ทีนี้ถ้าเราลองกด F5 ดูปุ้บบบ !! มันก็จะไปอยู่ที่ตำแหน่ง 0,0 ตามที่เราประกาศครับ -0-


ต่อไปก็ต้องเขียนให้เมื่อเรากดปุ่มแล้วสามารถทำให้ sprites เคลื่อนที่ได้กันนน -0-
เราก็ต้องไปประกาศตัวแปรกันต่อ ตัวแปรนี้ต้องเป็นชนิด KeyboardState ครับ คือเป็นสถานะ ของ keyboard ที่กดนั่นเอง ผมใช้ชื่อว่า keynow ละกันครับ ประกาศตามรูปเลย -0-



เสร็จแล้วมาตรง method update แล้วเพิ่มตามนี้เลยครับ =0=



อธิบายก็คือ เรากำหนดว่า keynow = keyboard.GetState();
เป็นการบอกว่า ตัวแปร keynow เท่ากับ keyboard ที่เรากำลังกดอยู่นั่นเอง

แล้ว if ก็คือ if(keynow.IsKeyDown(Key.Up))position.Y -=1;
หมายถึง ถ้าตัวแปร keynow เป็นการกดลง ของ ปุ่ม up หรือ ปุ่มลูกศรขึ้น ให้ตัวแปร position ตำแหน่ง y ลดลง 1
กล่าวคือ จากที่เราประกาศตัวแปร position = new Vector2 (0,0) แล้ว เมื่อเรากดปุ่มลูกศรขึ้น 1 ที ก็จะเป็น
position = Vector(0,-1 ) นั่นเอง
หมายเหตุ. position.Y -= 1 เขียนได้อีกรูปคือ position.Y = position.Y - 1; นั่นเอง
แล้วอีก 3 if ที่เหลือก็ความหมายเหมือนกันครับผมม
จากนั้นลอง กด F5 เพื่อรันเกม ดู แล้วกด ปุ่ม ขึ้นลงซ้ายขวา ก็จะขยับภาพได้แล้วครับผม *0*



xna

XNA 4.0 Tutorial Chapter 1 "Draw Sprite"







หลังจาก install เสร็จแล้ว ก็มาเอาภาพลง กันดีกว่าา *0*

เปิด Visual C# หรือ Visual Studio 2010 ขึ้นมาครับ กด Flie > New > Project ตรงแถบ Visual C# เลือก XNA Game Studio 4.0 ด้านขวา เลือก Windows Game (4.0) ครับ
แถบด้านล่าง สามารถเปลี่ยนชื่อ project และ Location ของ project ได้นะครับ




ก่อนอื่นก็เตรียมภาพไว้ 1 ภาพ แล้วนำไปไว้ใน \WindowsGame1\WindowsGame1Content ครับ
ในที่นี่ชื่อ project ของผม เป็น WindowsGame1 นะครับ และของผมเอาภาพ cross.png ไปไว้ครับ

นี่ครับ แล้วทางด้านขวา ตรงWindowsGame1Content คลิกขวา ครับ เลือก add เลือก Exiting item ครับ
แล้วไปที่ location ที่ภาพอยู่แล้วกด ok add มาเลยครับ

จากนั้นต้องสร้างตัวแปรกันก่อนครับ
สร้างตัวแปรโดย ประกาศ Texture2D bgtexture; การประกาศแบบนี้คือการสร้างตัวแปร bgtexture เป็นชนิด Texture2D ครับ

เสร็จแล้วใน method load Content เขียนยังงี้ครับ


ตรง cross น่ะครับ เปลี่ยนเป็นชื่อภาพของคุณเองเลยครับ ทีนี้เราก็จะโหลด ภาพมาได้ซะที เย้ๆๆๆ
แต่ภาพยังไม่ขึ้นครับบ เราต้องไปใน method Draw แล้วเขียนดังนี้ครับ



เห็นตรง new Vector2 (100,50) ไหมครับ
เปลี่ยน 100 เป็นตำแหน่งที่เราอยากให้แสดงใน แกน X และ 50 เป็นตำแหน่งในแกน Y ครับ

จากนั้น แถบด้านบน กด Debug > start debugging หรือ กด F5 ก็ได้ครับ ทีนี้ก็จะได้ภาพมาแล้วครับบบ


ถ้าใครกด F5 แล้วมีปัญหา เกี่ยวกับ Hidef ไรนะ ให้เลือก project ด้านบน เลือก propertie (ล่างสุด)
ด้านซ้ายเลือก xna game studio ด้านขวา เปลี่ยนจาก USE HIDEF เป็น USE Reach จ้า

xna 4.0 install

วันนี้ข้าอยู่ๆก็อยากศึกษา xna ขึ้นมา เพราะว่าข้าคิดว่ามันดีกว่า engine พวก darkgdk , darkbasic อะไรงี้อะนะ
แต่ปัญหามันคือมันใช้ภาษา C# ซึ่งข้าไม่เคยแตะเท่าไร ก็เลยจะเริ่มศึกษาวันนี้เลยละกัน

สิ่งที่ต้องลงนะ
1. MS Visual C# 2010 หาลงเลยจ้า

เสร็จแล้วก็ลงงงงง !
ถ้าใครลง xna ไม่ได้ก็ไปหา .NET Frame work ลงนะ โหลดที่นี่