Hướng dẫn lập trình game với XNA , XNA ebook green ray games

Hướng dẫn lập trình game với XNA

Mục lục

Phần I - Tổng quan 3

- Lời nói đầu 4

- Ngành công nghiệp game hiện nay và hướng phát triển 4

Phần II – Nhập môn XNA 5

- Các phần cơ bản 6

- Đưa một dòng chữ vào game 9

- Đưa một tấm hình vào game 14

- Input 17

- Đưa một đoạn âm thanh vào game 19

Phần III – Bắt đầu làm một game đơn giản 20

- Tính toán dự án 21

+ Tạo hình cho các đối tượng trong game 21

+ Xây dựng các class 21

 Class Phi Thuyền 21

 Class Đạn 22

 Class Background 28

 Class Enemy 29

 Va Chạm 30

Phần IV – Review 34

Phần I

Tổng Quan

Phần này sẽ tập trung khái quát về ebook này

Lời nói đầu

Ebook này do Green Ray Games phát hành hoàn toàn miễn phí Chúng tôi hi vọng các bạn có niềm đam mê

có thể tiếp cận nhanh hơn với ngành công nghiệp phát triển game Có rất nhiều ngôn ngữ và nền tảng để bạn có thể lập trình một game, đa phần ngày nay khi làm game client chạy trên PC các nhà sản xuất đều viết trên C++ với sự hỗ trợ tuyệt vời của directX, nhưng hôm nay chúng tôi sẽ giới thiệu với các bạn một nền tảng có thể nói là mới ở Việt Nam thậm chí trên thế giới nhưng thực sự thì không có gì là mới

Microsoft XNA đã có một quá trình phát triển qua nhiều năm, thời điểm hiện tại chúng tôi viết ebook này là XNA 4.0 chạy trên C# 2010

Để có thể làm được game theo hướng dẫn của ebook này yêu cầu các bạn phải có bộ Visual Studio 2008 hoặc ít nhất là phải có C# 2008 Sau đó các bạn phải cài Microsoft XNA Game Studio 3.1

Một điều cần nói thêm là tuy chỉ làm một game đơn giản và dành cho người mới, nhưng chúng tôi sẽ không hướng dẫn chi tiết về C# Nếu bạn chưa lập trình trên C# bao giờ hoặc thậm chí còn chưa biết lập trình trên các ngôn ngữ khác thì nên bắt đầu tìm đọc một cuốn ebook cơ bản về C# để có thể tiếp cận nhanh chóng ebook này

Vì sao chúng tôi không hướng dẫn trên XNA 4.0 – C# 2010 mà lại lùi một phiên bản Vì XNA 4.0 cần phải

có windows XP PS3 trở lên nên có thể khó cho một số bạn cài các bản OS cũ XNA 3.1 hoặc các phiên bản cũ hơn có thể dễ dàng cover lên 4.0 mà hiếm khi phát sinh lỗi

Tuy nói XNA là dễ nhưng thực sự ban đầu không phải dễ dàng gì Bạn hãy cố gắng kiên trì và đam mê lập trình thì sẽ thành công thôi

Ngành công nghiệp game hiện nay và hướng phát triển

Có thể nói ngành công nghiệp game hiện nay phát triển hết sức đa dạng Nếu trên PC bạn có thể thấy chia

ra làm hai trường phái là game cài đặt và game chạy trên web Tất nhiên theo ebook này thì chúng ta chắc chắn sẽ cho ra một game cài đặt nhưng tôi sẽ nói rõ hơn một chút về mảng game PC

Nếu bạn đang có dự tính làm game on web thì bạn nên biết rằng ngày nay game trên web thường được viết bằng flash, hiếm hơn chút là Java và sau này có thể là HTML5 Nếu bạn dự tính làm game cài đặt thì có 2 sự lựa chọn cho bạn là C++ - DirectX và mới hơn và giờ chúng ta đang học là C# - XNA Tất nhiên Flash, Java và nhiều ngôn ngữ/nền khác cũng có thể viết game cài đặt như bình thường

Bạn cần phải biết thêm là theo dự đoán của các chuyên gia thì kỷ nguyên của PC sắp chấm dứt, tất nhiên

dự đoán vẫn là dự đoán, qua thời gian mới có thể chứng minh được

Phần II

Nhập Môn XNA

Các thành phần cơ bản

- Sau khi cài tải bản XNA 3.1 về cài đặt, nó sẽ tự tìm đến C# và add vào So với DirectX add vào C++ thì công đoạn này rất thoải mái

Sau khi cài đặt xong vào các loại dự án của C# bạn sẽ thấy như hình trên

- XNA có thể viết game để chạy trên cả Xbox 360 và Zune nhưng giáo trình này sẽ chỉ đi hướng dẫn phần Windows game thôi

- Sau khi lựa chọn templates Windows game (3.1) bạn đặt tên rồi chỉ nơi lưu dự án sau đó OK

- Sau khi OK dự án sẽ được tạo ra

- Trong dự án mới đó bạn sẽ thấy bên khung Solution Explorer được cấp sẵn Properties, Reference,

Content, một cái hình icon cho game, một gamethumbnail và 2 class là game1.cs và program.cs

+ Reference nếu đã học qua C# chắc bạn cũng biết nó là gì Giờ bạn cũng chẳng cần quan tâm tới nó nữa ( nếu lập trình trên DirectX bạn sẽ khá vất vả với phần này).

+ Game icon là icon của game bạn, phần này bây giờ bạn không nên đầu tư vào

+ GameThumbnail thuộc về bên Xbox cũng không cần quan tâm nó

+ Class Program.cs bạn cứ giữ nguyên và cũng không quan tâm nó

+ Những cái trên đều không cần quan tâm, giờ đến cái cuối cùng và duy nhất bạn phải quan tâm thật “đặc biệt” chính là class game1.cs

- Game1.cs nếu nhìn lần đầu bạn sẽ thấy đây là một class kỳ lạ, nó được using khá nhiều

Microsoft.Xna.Framework.* và được tạo sẵn nhiều phương thức (method) trong đó Đây chính là class chính của game chúng ta sẽ tạo sau này, với từng từng thành phần của các namespace

Microsoft.Xna.Framework.* các bạn nhìn tên cũng đoán ra nó sẽ đảm nhận nhiệm vụ gì sau này, giờ bạn

cứ giữ nguyên nó không cần quan tâm lắm Sau đây tôi sẽ nói rõ từng phương thức đang có trong

+ Kế đến là phương thức làm nhiệm vụ khởi tạo

protected override void Initialize()

{

base Initialize();

}

+ Tiếp theo là phương thức làm nhiệm vụ load content cho game của bạn

protected override void LoadContent()

{

spriteBatch = new SpriteBatch (GraphicsDevice);

}

+ Tiếp là phương thức unload content, cái này tạm thời bạn chưa cần quan tâm tới

+ Tiếp đến là một phương thức khá quan trọng chi phối game của bạn sau này, phương thức Update

protected override void Update( GameTime gameTime)

this Exit();

+ Cuối cùng là một phương thức cũng quan trọng, phương thức Draw

protected override void Draw( GameTime gameTime)

{

GraphicsDevice.Clear( Color CornflowerBlue);

base Draw(gameTime);

}

Như tên gọi của mình, nó sẽ vẽ các đối tượng bạn load từ content lên game khi được yêu cầu

- Nếu bạn không rành về tiếng anh và không thích rối thì có thể xóa sạch các dòng chú thích trong game1.cs

đi để đỡ choáng

Sau khi xóa sạch chú thích có vẻ thông thoáng hơn nhiều như hình trên

- Bây giờ bạn hãy thử chạy xem sao Vì đây chỉ toàn bộ là các phần có sẵn của XNA nên sau khi chạy thành công thì bạn sẽ thấy xuất hiện một cái cửa sổ màu xanh

Tóm lại là từ đầu đến giờ XNA chỉ xây dựng sẵn cho chúng ta những phương thức thiết yếu sau này, sau đó chúng ta sẽ tự thêm vào những thành phần của riêng mình để thành một game hoàn thiện

Đưa một dòng chữ vào game

Đây là cái đơn giản nhất mà chúng ta sẽ thêm vào

- Đầu tiên bạn cần phải tạo một font chữ trong content

- Click chuột phải vào Content >> Add >> New Item

- Xuất hiện hộp thoại mới (Add new item –Content ) Bạn chọn Sprite Font, sau đó đặt tên font (vd: FontChu.spritefont), sau đó bấm Add

- Khi add xong sẽ xuất hiện một file font trong content và hiện ra một tab điều chỉnh các thông số của font chữ vừa tạo

- Trong tab mới mở ra bạn có thể thấy nhiều thẻ vd như thẻ font name

< FontName > Kootenay </ FontName > Nếu bạn thích font hay size gì thì sau này đổi, giờ tạm thời hãy giữ nguyên và đóng tab FontChu.spritefont lại

- Tất nhiên là chỉ mới bỏ 1 font chữ vào content chưa thể viết nó ra cái cửa sổ xanh được Giờ ta bắt đầu khai báo nó

Vào class game1.cs bạn khai báo một Sprite font sau đó đặt tên

VD: SpriteFont fontSeViet;

Sau đó bạn vào phương thức LoadContent chỉ đường dẫn đến font chữ bên Content như sau:

fontSeViet = Content.Load< SpriteFont >( "FontChu" );

Trong đó fontSeViet là cái bạn vừa khai báo ở trên, bạn cho content load đến tên của font chữ bạn tạo lúc trước.Cuối cùng là ở phương thức Draw bạn thêm vào:

Ở giữa mở đầu và kết thúc SpriteBatch ta thêm vào spriteBatch.DrawString cái đầu tiên chúng ta truyền vào

là tên đã khai báo ở trên (fontSeViet), string "Game dau tien cua toi ne!"chính là dòng chữ chúng ta sẽ viết ra màn hình, bạn có thể thay đổi nếu muốn, Vector2.Zerolà tọa độ của dòng chữ mình sẽ viết ra màn hình, Color Whitelà màu của dòng chữ đó (ở đây là màu trắng)

Nếu xuất lên màn hình dòng chữ bạn vừa viết thì phần này bạn đã thành công Nếu chạy bị lỗi có lẽ bạn làm

không đúng chỗ, bạn có thể giải nén code 1 ra để xem.

- Giờ chúng ta sẽ tìm hiểu kỹ về phần vector trong XNA Các bạn nếu đã học qua chương trình toán phổ thông hoặc đại học chắc đã quen với trục tọa độ Nếu như trục tọa độ bạn đã biết thì O có tọa độ như hình bên dưới

- Trục tọa độ trong XNA có phần hơi khác so với cái trên (nếu bạn đã học qua môn đồ họa máy tính có lẽ sẽ quen với trục tọa độ mới này).

.- Theo đó tọa độ zero (0,0) sẽ ở góc trên của màn hình

trái Càng qua phải X càng tăng và ngược lại

- Càng xuống dưới Y càng tăng và ngược lại

 Phần này các bạn nên ghi nhớ kỹ

vì rất cần thiết sau này

- Trở lại với phần viết chữ lên màn hình lúc nãy Giờ bạn hãy khai báo thêm một vector2 làm tọa độ của dòng chữ

Vector2 toaDoDongChu = new Vector2 (300,200);

- Ở đây sau khi khai báo tôi cho nó một tọa độ mới luôn là (300,200)

- Tiếp theo bạn xuống chỗ phương thức Draw và cập nhật phần Vector2.Zerothành toaDoDongChu

- Chạy dự án, nếu dòng chữ có tọa độ như hình bên dưới là bạn đã thành công Nếu chưa làm được hoặc bị

lỗi bạn hãy giải nén code 2 và tìm hiểu.

- Qua đó, bạn có thể chuỗi chữ đã di chuyển đến tọa độ mới là (x = 300, y = 200)

- Đây là phương thức nạp chồng thứ nhất nên tọa độ của dòng chữ sẽ là tọa độ của góc trái trên của chữ cái đầu tiên của dòng chữ đó, ở đây là chữ G

- Hiện giờ các bạn chỉ cần quan tâm đến đây là có thể làm game đơn giản rồi, không cần đi sâu vào các phương thức nạp chồng khác của spriteBatch.DrawString.

 Kết thúc phần thực hành đầu tiên Bạn hãy xem kỹ lại vài lần để nắm chắc, sau đó chúng ta sẽ cùng qua một phần rất thú vị, đưa một hình lên màn hình

Vẽ một hình lên màn hình

- Đầu tiên các bạn nên xóa phần khai báo, tọa độ chữ, phương thức DrawString của phần trước đi để tránh nhầm lẫn với phần này ( Tất nhiên bạn để lại cũng được sẽ không ảnh hưởng gì)

- Đầu tiên ta phải bỏ vào Content một cái hình, đầu tiên hãy thử load một hình chiếc phi thuyền

vào màn hình xem sao nhé Nếu bạn không có hình chiếc phi thuyền nào hãy vào thư mục

nguồn và lấy nó ra

- Cách thức bỏ vào Content như sau:

- Lần trước là ta tạo ra 1 spriteFont, còn lần này chúng ta sẽ add vào Content một hình

đã có sẵn

- Content >> Add >> Existing Item

- Chọn đường dẫn đến hình phithuyen.png sau đó OK

- Nếu bạn đã thấy phithuyen.PNG được add vào Content ( cùng chỗ với spriteFont ) hồi nãy là đã thành công

Giờ cũng là 3 bước giống với lần trước ( Khai báo – Dẫn xuất – Draw ) như lúc viết chữ nhưng câu lệnh sẽ khác

vì lần này là ta vẽ hình

- Khai báo một Texture2D đặt tên là hinhPhiThuyen:

Texture2D hinhPhiThuyen;

- Trong phương thức LoadContent, chỉ ra đường dẫn đến hình của nó trong Content:

hinhPhiThuyen = Content.Load< Texture2D >( "phiThuyen" );

- Kế đến là xuống phương thức Draw, lần này cũng như lần trước bạn phải bỏ lệnh vẽ sau vào sau

spriteBatch.Begin();và trước spriteBatch.End();

- Chỉ vậy thôi là bạn đã có thể vẽ một hình ra màn hình rồi đấy Hãy chạy dự án xem thành công chưa Nếu

chưa được hãy mở code 3 lên tham khảo.

- Bạn có thể thay đổi tọa độ vẽ của phi thuyền như cách thay đổi tọa độ của chữ ở trên Hãy thử thay đổi tọa

độ của phi thuyền thành (400,300) xem sao

 Phương thức spriteBatch.Draw này bạn thấy 3 đối số nạp vào trừ cái đầu thì 2 cái còn lại giống với cách DrawString của chữ

 Có đến 5 phương thức spriteBatch.Draw để bạn có thể nạp chồng vì đây là tài liệu căn bản chúng ta chỉ đi

tìm hiểu phương thức dễ nhất spriteBatch.Draw(texture2D, vector2 tọa độ, màu sắc) Nếu bạn muốn

nghiên cứu thêm hãy tự tìm hiểu thêm

 Vì đây là phương thức Draw đơn giản nên khi bạn cho tọa độ, phi thuyền sẽ lấy tọa độ ở góc trái trên của hình phi thuyền làm tọa độ phi thuyền

- Tọa độ (400,300) chính là điểm màu xanh lá cây trên màn hình, nhưng đó lại cũng chính là tọa độ (0,0) của phi thuyền Bạn nên tập load nhiều ảnh bằng phương thức này để quen với cách tính tọa độ trong XNA.

- Những phương thức Draw phức tạp hơn có thể chuyển tọa độ của phi thuyền vào tâm của nó, sau này bạn

có thể tiếp tục nghiên cứu thêm

 Đã hoàn thành phần vẽ một sprite ra màn hình Phần tiếp theo chúng ta sẽ đến với một điều mà mọi game cần phải có là Input

- + Tọa độ của phi thuyền là (400,300);

- + Bạn nên mở code 4 ra và chúng ta chuẩn bị bắt đầu thử nghiệm một lệnh trong hàm Update.

- Giờ chúng ta thử cho phi thuyền bay lên trên xem sao nhé Vào hàm Update bạn thêm dòng lệnh sau:

toaDoPhiThuyen.Y ;

- Hãy chạy thử xem phi thuyền của bạn có phải đang bay lên trên không Nếu không có gì xảy ra hoặc bị lỗi

bạn hãy mở code 5 ra tham khảo.

 Tại sao phi thuyền lại bay lên được? – Đó là câu lệnh của bạn yêu cầu tọa độ phi thuyền theo trục Y phải giảm 1 đơn vị Nếu bạn bỏ lệnh này trong một hàm khác ngoài Update thì nó sẽ chỉ giảm 1 đơn vị Nhưng trong hàm update nó được cập nhật liên tục lên nó liên tục giảm làm cho chúng ta thấy phi thuyền đang bay lên

 Ngoài lề: Khi lập trình game bạn phải đối mặt với một sự thật rất rõ ràng, trong trường hợp trên, nếu là

gamer, người chơi sẽ biết là phi thuyền của họ đang bay lên Còn đối với bạn là một người lập trình game, bạn biết là phi thuyền của bạn đang giảm Y.

- Giờ ta bắt đầu vào phần Input, hãy tạm thời xóa dòng lệnh giảm Y vừa rồi đi để chúng ta bước vào điều thiết yếu nhất trong mỗi game: “Sự tương tác của người chơi với game”

- XNA có sẵn namespace Input nên giờ công việc của chúng ta khá nhẹ nhàng

- Đầu tiên chúng ta sẽ thử một VD: Khi nhấn nút mũi tên lên (UP) thì phi thuyền sẽ bay lên, còn khi ngừng nhấn thì phi thuyền sẽ dừng lại

- + Khai báo một trạng thái bàn phím:

KeyboardState trangThaiBanPhim;

- + Sau đó bạn vào phương thức Update viết thêm một số dòng lệnh sau:

trangThaiBanPhim = Keyboard GetState();

if (trangThaiBanPhim.IsKeyDown( Keys Up))

toaDoPhiThuyen.Y ;

- + Hãy bấm chạy game thử sau đó nhấn mũi tên lên xem phi thuyền đã bay lên chưa

 Trong XNA bạn phải luôn khai báo trạng thái bàn phím như vậy Sau đó vào phương thức Update cập nhật Khi đặt điều kiện ví dụ như trên là IsKeyDown (có phải bàn phím đang nhấn xuống không?) thì sẽ thực thi một lệnh giảm Y

 Bạn hãy thử làm khi phím mũi tên xuống (down) nhấn xuống thì phi thuyền lùi, tương tự với nhấn sang trái, phải xem sao nhé

 Khi hoàn thành bạn hãy mở code 6 ra tham khảo và nhấn các key xem nó hoạt động thế nào.

Đưa âm thanh (Sound) vào game.

 Phần Sound chia ra 2 loại: Bài hát như ở trên, thường để làm nhạc nền (theme song) và Sound Effect – các

âm thanh hiệu ứng Âm thanh hiệu ứng ví dụ như tiếng nổ, tiếng bắn của phi thuyền

- Đầu tiên ta hãy thử phát một bản nhạc khi vào game Phần này sau khi học bạn có thể làm nhạc nền cho game của mình

- + Hãy tìm cho mình một bản nhạc ưa thích định dạng mp3, nếu không có bạn có thể giải tìm thấy trong thư mục “nguon”

- Khai báo

Song baiHat;

- Sau đó chỉ cần thêm 2 dòng này vào phương thức LoadContent

baiHat = Content.Load< Song >( "Virus - Beethoven" );

MediaPlayer Play(baiHat);

- Hãy vào game và nghe thử xem nhạc đã phát lên chưa nào Nếu chưa nghe nhạc phát lên bạn hãy tham

khảo thêm code 7.

- Không cần quan tâm quá cao, bạn chỉ cần biết như vậy là có thể phát được nhạc rồi

- Tiếp theo ta sẽ thử add một sound effect vào game

- + Hãy vào thư mục “nguon” trong thư mục ebook để tìm “tiengno.wav”và add vào Content

Khai báo:

SoundEffect tiengNo;

- Tương tự như trên vào phương thức LoadContent và bỏ thêm 2 dòng lệnh sau vào

tiengNo = Content.Load< SoundEffect >( "TiengNo" );