1

2

Mục lụcPhầ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

3

Phần I

Tổng Quan

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

4

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.

5

Phần II

Nhập Môn XNA

6

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.

+ Properties có chứa 1 class ghi thông tin của dự án hiện hành, cái này bạn bây giờ để nó ở đó và không cần quan tâm.

7

+ 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 game1.cs.

+ Đầu tiên là hàm tạo của game1.cs bên trong nó đang có đồ họa và content (content là những đối tượng như ảnh, nhạc, model, bạn sẽ đem vào game sau này).

public Game1() { graphics = new GraphicsDeviceManager(this); Content.RootDirectory = "Content"; }

+ 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) { base.Update(gameTime); }

Phương thức này như tên gọi (cập nhật), bất cứ thứ gì bạn bỏ vào phương thức này cũng sẽ được cập nhật liên tục nếu bạn không ghi điều kiện kèm theo. Bạn có thể xóa đi dòng sau vì giờ mình không cần nó:

if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)

8

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.

9

Đư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:

spriteBatch.Begin(); spriteBatch.DrawString(fontSeViet, "Game dau tien cua toi ne!", Vector2.Zero, Color.White); spriteBatch.End();

Trong đó mỗi khi muốn viết/vẽ gì bằng spriteBatch ta phải mở đầu (.begin) và kết thúc nó (.end), tại sao lại phải rắc rối như vậy?- Sau này nhiều game lớn dính tới matrix bạn phải thêm đối số vào đó. Bây giờ thì chỉ vậy thôi.

10

Ở 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.Zero là tọa độ của dòng chữ mình sẽ viết ra màn hình, Color.White là 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

11

- 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ái-trên của màn hình.

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

12

- Ở đâ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.Zero thà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

13

- 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.

14

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();.

spriteBatch.Draw(hinhPhiThuyen, Vector2.Zero, Color.White);

15

- 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ốnnghiê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.

16

- 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.

17

Input

- Trước khi đi vào phần này, tôi nhắc lại về phương thức Update, bất cứ lệnh nào bạn để trong phương thức này đều sẽ cập nhật liên tục.

- Vẫn ở code 3 khi nãy, bạn hãy giữ nguyên. Nếu bạn chưa khai báo và thêm vào một vector2 làm tọa độ của phi thuyền thì hãy bắt đầu khai báo lại.

- + 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é.

18

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.

19

Đư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"); tiengNo.Play();

- Chạy và chú ý lắng nghe vì âm thanh hiệu ứng rất ngắn. Nếu không thành công hãy giải nén code 8 ra tham khảo.

chỉ sơ lược như thế thôi, tiếp sau đây chúng ta sẽ bắt tay vào làm thử một game hoàn thiện.

20

Phần IIIBắt đầu làm một game đơn giản

Phần này tôi sẽ hướng dẫn chi tiết để bạn có thể tạo ra một game đơn giản.

21

Tính toán dự án

- Vì dự định làm game đơn giản nên chúng ta sẽ không cần phải tính toán nhiều. Tuy nhiên nếu bạn dự định làm một dự án game lớn thì rất nhiều thứ phải tính toán trước đấy.

- Lần này tôi sẽ cùng các bạn làm một game rất đơn giản:- + Player có một phi thuyền không gian có khả năng di chuyển và bắn- + Một kẻ địch- + …

Xây dựng các class

- Từ đầu ebook đến giờ chúng ta chỉ code trong class game1.cs, nhưng giờ chúng ta cần làm một game hoàn thiện nên sẽ chia ra làm các class sau: Một class cho phi thuyền người chơi, một cho đạn của player, một cho enemy và một cho background.

- Hãy tạo lại một dự án mới và chúng ta sẽ bắt tay vào làm game theo từng công đoạn. Dự án mới tôi đặt tên là GameBanPhiThuyen, bạn có thể vào thư mục Du An Game 1 và giải nén GameBanPhiThuyen code1.rar để chúng ta cùng bắt đầu code.

- Bạn hãy add vào Content hết tất cả những gì có trong thư mục Nguon (âm thanh, hình).

Class Phi Thuyền, di chuyển cho Phi Thuyền

+ Bạn hãy tạo 1 class mới đặt tên PhiThuyen.cs

Bên trên là ảnh của class PhiThuyen ta mới tạo, nó hoàn toàn chưa có gì.+ Bạn hãy thêm vào phần using namespace:

using Microsoft.Xna.Framework.Input;using Microsoft.Xna.Framework.Content;using Microsoft.Xna.Framework;using Microsoft.Xna.Framework.Graphics;

22

+ Trong 4 namespace trên cái đầu ta cần cho việc di chuyển của phi thuyền, kế đó là cần cho LoadContent, Update và cuối cùng là Draw.

+ Như phần trên ta đã biết các phương thức thiết yếu cho game của bạn đã xuất hiện trong game1.cs hết rồi. Class PhiThuyen.cs ta mới tạo giờ cần phải thêm vào 3 phương thức là: LoadContent, Update và Draw.

public void LoadContent(ContentManager Content) { }

public void Update(GameTime gameTime) { }

public void Draw(SpriteBatch sp) {

}

+ Khi tạo xong 3 phương thức như trên giờ nhiệm vụ đầu tiên của bạn là sẽ làm những gì đã học để vẽ hình của phi thuyền của player ra màn hình. Tất cả những gì bên dưới đều làm trong class PhiThuyen, bạn đừng nhầm với class game1.cs.

++ Khai báo: Bạn khai báo một texture2D làm hình cho phi thuyền, một vector2 làm tọa độ cho phi thuyền.

Texture2D hinhPhiThuyen;Vector2 toaDoPhiThuyen;KeyboardState trangThaiPhim;

++ LoadContent: Thêm các dòng sau vào phương thức LoadContent

hinhPhiThuyen = Content.Load<Texture2D>("PhiThuyen"); toaDoPhiThuyen = new Vector2(390, 500); //tọa độ mặc định khi xuất hiện

++ Update: Thêm các dòng sau vào phương thức Update

trangThaiPhim = Keyboard.GetState();

if (trangThaiPhim.IsKeyDown(Keys.Up)) toaDoPhiThuyen.Y--; if (trangThaiPhim.IsKeyDown(Keys.Down)) toaDoPhiThuyen.Y++; if (trangThaiPhim.IsKeyDown(Keys.Left)) toaDoPhiThuyen.X--; if (trangThaiPhim.IsKeyDown(Keys.Right))

toaDoPhiThuyen.X++;

++ Draw: Thêm dòng sau vào phương thức Draw

sp.Draw(hinhPhiThuyen, toaDoPhiThuyen, Color.White);

- Tất nhiên bây giờ dù chạy dự án bạn sẽ vẫn chưa thấy phi thuyền của mình xuất hiện đâu. Việc tiếp theo chúng ta cần làm là gọi class này qua game1.cs.

23

- Bên trong game1.cs ta bắt đầu làm các việc sau:

++ Khai báo: class PhiThuyen đặt tên phiThuyen.

PhiThuyen phiThuyen;

+ Initialize: khởi tạo

phiThuyen = new PhiThuyen();

++ LoadContent: bỏ phương thức LoadContent của class PhiThuyen vào class LoadContent của game1.cs.

phiThuyen.LoadContent(Content);

++ Update: tương tự như trên nhưng lần này là phương thức Update

phiThuyen.Update(gameTime);

++ Draw: Phương thức Draw gọi qua đây cũng cần phải nằm trong mở đầu và kết thúc của spriteBatch.

spriteBatch.Begin(); phiThuyen.Draw(spriteBatch);

spriteBatch.End();

- Hãy thử chạy dự án của mình và xem phi thuyền của bạn đã xuất hiện trên màn hình chưa?, bấm các phím mũi tên nó đã di chuyển được chưa.

Lưu ý: đừng quên bỏ hình phithuyen.png vào phần Content nhé.

- Nếu code bạn làm gặp vấn đề gì hãy vào thư mục Du An Game 1 và giải nén GameBanPhiThuyen code2.rar ra tham khảo.

- Phi thuyền của chúng ta có vẻ di chuyển hơi chậm, giờ hãy chỉnh sửa chút trong class PhiThuyen.cs

++ Khai báo

int tocDoDiChuyen = 3; //ta cho tốc độ di chuyển mặc định là 3

++ Sửa lại phần Update di chuyển

Tương tự các bạn sửa với các hướng di chuyển khác. Nếu phát sinh vấn đề gì hãy mở GameBanPhiThuyen code3.rar ra tham khảo.

24

Thêm đạn cho phi thuyền.

- Để chiến đấu với kẻ thù ta cần phải thêm đạn cho phi thuyền. Bạn hãy tạo 1 class cho đạn, trong dự án này tôi đặt tên class là Dan.cs

- Hãy thêm vào những using namespace và 3 phương thức: LoadContent, Update, Draw tương tự đối với phi thuyền.

Đầu tiên ta phải hiểu rằng để xây dựng class đạn cần những gì.o Đạn là một thực thể trong game nên sẽ cần một cái hìnho Đạn được bắn ra từ phi thuyền của player nên cần một tọa độ xuất hiện ban đầu là tại player.o Đạn sẽ bắn theo hướng nào, ví dụ trong game chúng ta đang thực hiện là là hướng lên trên (giảm

Y) Lưu ý đừng quên bỏ vào Content hình Dan.png (hình này ở trong thư mục Nguon)

- Ta bắt đầu vào class Dan.cs và làm những công việc sau:

++ Khai báo:

Texture2D dan; //hình cho đạn public Vector2 toaDo; //tọa độ mặc định khi đạn xuất hiện

int tocDoBan = 5; //tốc độ bắn mặc định

++ LoadContent

dan = Content.Load<Texture2D>("Dan");

++ Update: do bắn lên nên ta sẽ trừ Y bằng tốc độ bắn

toaDo.Y -= tocDoBan;

++ Draw

sp.Draw(dan, toaDo, Color.White);

- Tiếp tục ta qua class PhiThuyen.cs để đưa đạn vào đó.

++ Phi thuyền không thể nào chỉ bắn một viên rồi thôi được, vì vậy chúng ta sẽ tạo ra một loạt đạn cho phi thuyền bằng cách ứng dụng list trong C#.++ Khai báo:

public List<Dan> loatDan = new List<Dan>();

+++ Ngoài ra bạn khai báo thêm một dòng sau để lát ta lấy ContentManager ra ngoài phương thức LoadContent.

ContentManager layContent;

25

++ Trong phương thức LoadContent của phi thuyền ta sẽ không load content cho đạn ngay ( vẫn có thể load nếu bạn muốn ), giờ ta chỉ cần thêm dòng sau để nhận ContentManager.

layContent = Content;

++ Giờ ta bắt đầu tạo 1 hàm bắn đạn. tạo một hàm mới trong class PhiThuyen.cs:

public void BanDan(GameTime gameTime) { Dan dan = new Dan(); //tạo ra một viên đạn dan.LoadContent(layContent); dan.toaDo = toaDoPhiThuyen + new Vector2(21, 0); loatDan.Add(dan); //bỏ viên đạn trên vào loạt đạn

}

++ Bên trên là hàm làm nhiệm vụ tạo đạn, giờ chúng ta sẽ cập nhật một phím để bắn viên đạn đó ra.

if (trangThaiPhim.IsKeyDown(Keys.Space)) BanDan(gameTime);

o Nếu nhấn phím Space thì bắn đạn

++ Giờ ta cần phải cập nhật cho từng viên đạn trong loạt đạn.

foreach (Dan vienDan in loatDan) vienDan.Update(gameTime);

++ Xuống phương thức Draw và thêm vào 2 dòng để vẽ loạt đạn.

foreach (Dan vienDan in loatDan)vienDan.Draw(sp);

- Giờ bạn hãy build và chạy dự án xem đã được như hình bên dưới chưa. Nếu gặp vấn đề gì hãy giải nén GameBanPhiThuyen code4.rar ra tham khảo.

26

- Bạn có thể thấy vừa nhấn Space đạn đã bắn ra 1 loạt dài, đó là vì phương thức Update cập nhật liên tục và vì chúng ta không làm bắn đạn theo kiểu cần 2 trạng thái phím (KeyDown – KeyUp). Giờ để khắc phục ta sẽ tạo ra một biến time để làm chậm quá trình khai hỏa (Delay đạn).

++ Trong class PhiThuyen.cs hãy khai báo thêm

int timeDelayDan;

++ Sửa lại một chút trong phần nhấn key bắn đạn ở phương thức Update:

o Nếu chơi nhiều game chắc bạn cũng biết có nhiều skill (trong các game nhập vai) khi sử dụng xong cần thời gian phục hồi cho lần sử dụng tiếp theo. Thời gian đó người ta gọi là timeDelay, tương tự với từng viên đạn được bắn ra từ phi thuyền của chúng ta, timeDelay càng ít sẽ bắn ra càng nhanh.

27

if (trangThaiPhim.IsKeyDown(Keys.Space)) { timeDelayDan += gameTime.ElapsedGameTime.Milliseconds; if (timeDelayDan > 200) { timeDelayDan = 0; BanDan(gameTime); }

}

- Hãy chạy dự án xem loạt đạn của bạn đã được Delay như hình bên dưới chưa, nếu có phát sinh vấn đề gì hãy mở GameBanPhiThuyen code5.rar ra tham khảo.

Bắn đạn trên màn hình xanh quả thực rất nhàm chán, trước khi xây dựng class Enemy ta sẽ xây dựng class Background (hình nền) trước.

28

Xây dựng hình nền

- Để ra dáng là một game không gian ta phải tạo một hình nền vũ trụ thật đẹp, nếu bạn vẫn chưa tìm được hình thích hợp thì hãy lấy hình HinhNen.png trong thư mục Nguon.

- Phần Background này ta sẽ làm cho nó Scroll (cuộn) để tạo cảm giác phi thuyền đang bay tới. - Phần cuộn tôi sẽ nhân background làm 2 và cho chạy liên tục theo vòng tròn (A nối đuôi B rồi B lại nối

đuôi A). Đơn giản chỉ là vậy các bạn không cần quan tâm nhiều lắm vì có rất nhiều thuật toán khác nhau để scroll background.

++ Tạo một class mới đặt tên HinhNen.cs using các namespace và tạo các phương thức như 2 lần trước.++ Đây là toàn bộ class hình nền với kiểu khai báo 2 lần và cho nối tiếp nhau:

class HinhNen { Texture2D hinhNen1, hinhNen2; Vector2 toaDo1, toaDo2;

public void LoadContent(ContentManager Content) { hinhNen1 = Content.Load<Texture2D>("HinhNen"); toaDo1 = Vector2.Zero; hinhNen2 = Content.Load<Texture2D>("HinhNen"); toaDo2 = new Vector2(0, -600); }

public void Update(GameTime gameTime) { toaDo1.Y ++; if (toaDo1.Y >= 600) toaDo1.Y = -600;

toaDo2.Y ++; if (toaDo2.Y >= 600) toaDo2.Y = -600; }

public void Draw(SpriteBatch sp) { sp.Draw(hinhNen1, toaDo1, Color.White); sp.Draw(hinhNen2, toaDo2, Color.White);

}}

Rất đơn giản, chỉ là nhân lên làm 2 cho nó nối tiếp nhau, nếu tọa độ nó lớn hơn hoặc bằng 600 nó sẽ nhảy lên -600 và tiếp tục trôi xuống.

Lưu ý: Nhớ qua class game1.cs để khai báo và xây dựng class hình nền. Phần Draw bạn phải lưu ý là đối tượng nào draw sau sẽ nổi lên trước, trường hợp của phi thuyền và background ta sẽ Draw phi thuyền sau để nó nổi lên trên background. Bạn hãy mở GameBanPhiThuyen code6.rar lên tham khảo.

29

Thêm vào Enemy

- Kẻ thù của phi thuyền chúng ta đã xuất hiện. Sau khi xây dựng 2 class PhiThuyen.cs và Dan.cs bạn cơ bản đã có thể tự xây dựng class Enemy rồi đấy. Vì có một số phần mới nên tôi sẽ để toàn bộ code của class KeDich.cs rồi giải thích sau.

class KeDich { Texture2D keDich; Vector2 toaDoKeDich; int tocDoKeDich; Random ranDom = new Random();

public void LoadContent(ContentManager Content) { keDich = Content.Load<Texture2D>("Enemy1"); toaDoKeDich = new Vector2(ranDom.Next(800), 0);

tocDoKeDich = ranDom.Next(2, 5); }

public void Update(GameTime gameTime) { toaDoKeDich.Y += tocDoKeDich; }

public void Draw(SpriteBatch sp) { sp.Draw(keDich, toaDoKeDich, Color.White); } }

++ Bạn có thể thấy ta vẫn có 3 phương thức như các class trước, ta có tốc độ kẻ địch để làm số tăng Y (ta cho Enemy luôn bay từ trên xuống dưới.

++ Để tạo sự ngẫu nhiên ở tọa độ theo X khi Enemy xuất hiện ta khai báo một Random, trong phương thức LoadContent bạn có thể thấy tôi cho tọa độ X khi xuất hiện của Enemy nhảy ngẫu nhiên từ 0 đến 800 và tọa độ Y thì random từ -20 đến 0. Tốc độ bay của kẻ địch từ 2 đến 5.

++ Kế đến điều bạn cần làm cũng như các class trước là đem nó qua Game1.cs để xây dựng. Ta lại dùng List để tạo ra một list enemy. Bạn hãy tự đem qua game1.cs xem có thành công không nhé, nếu không rành dùng list có thể coi lại cách chúng ta đã tạo list đạn. Hãy tham khảo GameBanPhiThuyen code7.rar.

- Trước khi qua phần mới ta cần phải sửa lại các lệnh di chuyển của phi thuyền để nó không vượt quá màn hình, sau khi sửa như bên dưới xong bạn hãy chạy thử xem phi thuyền còn vượt khỏi cửa sổ không.

if (trangThaiPhim.IsKeyDown(Keys.Up) && toaDoPhiThuyen.Y > 0) toaDoPhiThuyen.Y -= tocDoDiChuyen; if (trangThaiPhim.IsKeyDown(Keys.Down) && toaDoPhiThuyen.Y < 550) toaDoPhiThuyen.Y += tocDoDiChuyen; if (trangThaiPhim.IsKeyDown(Keys.Left) && toaDoPhiThuyen.X > 0)

30

toaDoPhiThuyen.X -= tocDoDiChuyen; if (trangThaiPhim.IsKeyDown(Keys.Right) && toaDoPhiThuyen.X < 750) toaDoPhiThuyen.X += tocDoDiChuyen;

Va chạm

- Phần này rất quan trọng và cũng không phải là dễ đối với người mới. Va chạm có nhiều loại và cách xây dựng khác nhau. Ở đây chúng ta sẽ dùng một cách đơn giản nhất là bao khối hình chữ nhật cho từng đối tượng và xử lý khi 2 hình chữ nhật đó va chạm với nhau.

- Ví dụ ở đây là phi thuyền của người chơi và enemy. Chúng ta sẽ bao quanh phi thuyền của người chơi một hình chữ nhật ảo, tương tự với enemy. Khi hai hình chữ nhật này va chạm (chồng lên nhau hay phạm nhau) nhau nó sẽ đúng điều kiện nào đó do chúng ta đặt ra như phát nổ.

- Trước khi đi tiếp phần va chạm ta phải nâng cấp class của các đối tượng: phi thuyền, đạn, kẻ địch thêm một bool xem đối tượng còn sống hay không.

public bool conSong = true;

- Sau đó bạn vào game1.cs tìm những chỗ Update và Draw của các đối tượng để đặt điều kiện nếu còn sống thì mới được Update hay Draw. Hãy làm thử sao đó vào GameBanPhiThuyen code8.rar để tham khảo.

- Giờ ta bắt đầu tạo một hình chữ nhật ảo xung quanh các đối tượng, trước tiên ta sẽ thử với phi thuyền và kẻ địch trước.

++ Vào Class PhiThuyen.cs và KeDich.cs các bạn khai báo một hình chữ nhật đặt tên là bao khung:

public Rectangle baoKhung;

++ Hình chữ nhật trong XNA có 4 đối số ( X, Y, Dài, Rộng) trong đó X,Y là tọa độ zero của hình chữ nhật, 2 cái còn lại là chiều dài và chiều rộng của hình chữ nhật bạn sẽ tạo

Minh họa một rectangle (3,2,5,3) trên màn hình:

- Khung màu tên to chính ta cửa số màn hình.- Khung màu đen nhỏ hơn là hình chữ nhật của chúng ta.- Các số màu đỏ là tọa độ trên màn hình- Số màu xanh dương là tọa độ của hình chữ nhật- Số màu xanh lá là chiều rộng và cao của hình chữ nhật.

31

++ Giờ bạn tiếp tục vào class PhiThuyen.cs ở phương thức Update thêm vào dòng sau:

baoKhung = new Rectangle((int)toaDoPhiThuyen.X, (int)toaDoPhiThuyen.Y, hinhPhiThuyen.Width,hinhPhiThuyen.Height);

Như bạn có thể thấy ta cho 2 đối số đầu của rectangle là tọa độ của phi thuyền, 2 đối số tiếp theo chính là chiều rộng và chiều cao của phi thuyền.

++ Tương tự bạn làm với class KeDich.cs

baoKhung = new Rectangle((int)toaDoKeDich.X, (int)toaDoKeDich.Y, keDich.Width, keDich.Height);

++ Tiếp theo có một việc quan trọng chúng ta cần phải làm là qua class game1.cs vào phương thức Update kiểm tra sự giao nhau giữa 2 hình chữ nhật trên.++ Tại phương thức Update của game1.cs ta thêm vào:

for (int i = 0; i < listKeDich.Count; i++) { if (listKeDich[i].baoKhung.Intersects(phiThuyen.baoKhung)) { listKeDich[i].conSong = false; } }

o Tất nhiên là không phải chí có một con quái vật va chạm với phi thuyền mà ta phải dùng for để truy đến từng đối tượng kẻ địch, sau đó ra điều kiện nếu kẻ địch nào (trong list kẻ địch) va chạm với phi thuyền thì kẻ địch đó sẽ chết (conSong = false)

Hãy build và chạy dự án, khi vào hãy cho phi thuyền của bạn lao vào kẻ địch xem kẻ địch có biến mất không nhé. Nếu có vấn đề gì hãy mở GameBanPhiThuyen code9.rar tham khảo.

++ Giờ tương tự bạn hãy bao khung cho viên đạn như cách đã làm với phi thuyền và kẻ địch sau đó ta sẽ vào phương thức Update của game1.cs tiếp tục viết lệnh điều kiện cho từng viên đạn trong list đạn va chạm với từng kẻ địch.

o Trong câu lệnh for đếm kẻ địch bạn thêm vào:

foreach(Dan viendan in phiThuyen.loatDan) if (viendan.baoKhung.Intersects(listKeDich[i].baoKhung)) { viendan.conSong = false; listKeDich[i].conSong = false; }

Mỗi viên đạn trong list đạn nếu va chạm với kẻ địch thì đạn lẫn kẻ địch đều bị chết. Hãy vào bắn địch xem đạn và địch có biến mất không nhé, nếu gặp vấn đề gì hãy giải nén GameBanPhiThuyen code10.rar ra tham khảo.

32

- Tiếp đến ta sẽ làm một số chữ để ghi lại thành tích của người chơi. Bạn đã học cách viết chữ lên màn hình ở trên rồi chỉ cần ứng dụng một chút thôi.

++ Ở game1.cs hãy thêm vào int mạng, int điểm, và 1 font để ta viết ra màn hình.

int Diem; int Mang = 3;

SpriteFont fontDiem;

++ Câu lệnh for đếm số kẻ thù ta cập nhật lại như sau:

for (int i = 0; i < listKeDich.Count; i++) { if (listKeDich[i].conSong) { if (listKeDich[i].baoKhung.Intersects(phiThuyen.baoKhung)) { listKeDich[i].conSong = false; Mang--; //tru mang khi phi thuyen va cham voi dich }

foreach (Dan viendan in phiThuyen.loatDan) if (viendan.baoKhung.Intersects(listKeDich[i].baoKhung)) { Diem += 10; //cong diem khi tieu diet dc dich viendan.conSong = false; listKeDich[i].conSong = false; }

}

++ Xuống phương thức Draw thêm vào 2 dòng vẽ string:

spriteBatch.DrawString(fontDiem, "Diem: " + Diem, Vector2.Zero, Color.White); spriteBatch.DrawString(fontDiem, "Mang: " + Mang, new Vector2(700,0),

Color.YellowGreen);

Hãy chạy game xem khi bắn hạ kẻ địch bạn có nhận được 10 điểm và khi bị kẻ địch đâm trúng bạn có bị trừ 1 mạng không nhé. Nếu có vấn đề gì hãy mở GameBanPhiThuyen code11.rar tham khảo.

Những phần cơ bản để tạo một game đều cơ bản đã hướng dẫn cho bạn, giờ trước khi kết thúc ta sẽ thêm vào một hiệu ứng âm thanh nổ và nhạc nền.

- Cách thêm âm thanh rất đơn giản như đã hướng dẫn ở các phần trước, quan trọng là khi play âm thanh hiệu ứng bạn phải bỏ đúng chỗ.

++ Hãy add vào nhạc nền và âm thanh nổ có sẵn trong thư mục Nguon vào Content trước, sau đó hãy vào game1.cs để ta bắt đầu thêm âm thanh.

SoundEffect amThanhNo; Song nhacNen;

33

++ Phương thức LoadContent

amThanhNo = Content.Load<SoundEffect>("tiengno"); nhacNen = Content.Load<Song>("Virus - Beethoven");

MediaPlayer.Play(nhacNen);

++ Bắt đầu play phần âm thanh hiệu ứng nổ, bạn chỉ cần bỏ vào đúng trong phần thực thi của 2 câu lệnh if phi thuyền va chạm địch và địch va chạm đạn phi thuyền.

///if (listKeDich[i].baoKhung.Intersects(phiThuyen.baoKhung))

{ listKeDich[i].conSong = false; Mang--; amThanhNo.Play();

}///if (viendan.baoKhung.Intersects(listKeDich[i].baoKhung))

{ Diem += 10; viendan.conSong = false; listKeDich[i].conSong = false; amThanhNo.Play(); }

///

Hãy vào game nghe xong nhạc nền đã phát lên chưa và khi bạn bắn địch có nghe gì không. Nếu gặp vấn đề hãy mở GameBanPhiThuyen code12.rar ra tham khảo.

Tiếng nổ nghe có vẻ giống tiếng súng bắn, do âm thanh ở đây chỉ mang tính chất tham khảo, nếu bạn làm game thực sự thì nên chú trọng phần âm thanh nhé.

34

Review

- Nhìn lại cả quá trình học tập của chúng ta tùy theo năng lực của bạn có thể thấy lập trình trên XNA ra sao rồi. Riêng tôi nhận xét là lập trình trên XNA khá là dễ hơn so với các ngôn ngữ, nền tảng lập trình khác.

- Về phần hướng dẫn từ đầu đến giờ tôi chỉ cùng các bạn đi sơ qua những mảng cơ bản của XNA thôi, vì ở đây ta hướng theo đúng tên của giáo trình.

- XNA vẫn theo những khuôn mẫu nhất định của C#, nên hi vọng bạn đã học qua C# trước khi tiếp cận giáo trình này. Có thể thấy các phần như class, phương thức, list, random, nạp chồng phương thức, quá tải toán tử, … của C# trong giáo trình này tôi hầu như không đề cập đến.

- Bạn có thể hỏi nhiều lý do tại sao các đối tượng thực thể (phi thuyền, đạn, kẻ địch) tôi lại không cho chúng kế thừa từ một class cơ sở. Ở đây không phải là lên XNA khó kế thừa mà tôi nhận thấy hướng tới sự cơ bản là chủ yếu nên không cần làm vậy. Nếu nhìn vào sản phẩm chúng ta vừa tạo ra thì có thể lấy vẫn chưa gọi là một game hoàn thiện, khi bắn kẻ địch chết không có hiệu ứng nổ, hoặc chẳng có thắng thua hay điểm dừng. Những phần vừa nêu đều thuộc phần thuật toán, mỗi người có một cách xây dựng riêng, ví dụ như phần hiệu ứng nổ, có rất nhiều cách để làm như thuật toán, animation, …

- Nếu bạn có dự định nâng cấp game cho nhiều loại địch hơn thì khuyên bạn nên áp dụng kế thừa của C#. Các bạn có thể tham khảo game Black Hole Adventure của Green Ray Games để tìm hướng nâng cấp hơn về tựa game của mình.

- Trong quá trình làm game của mình nếu bạn gặp vấn đề gì không giải quyết được hãy viết lên tường nhà của chúng tôi trên zing me (http://me.zing.vn/b/greenraygames) nếu có điều kiện chúng tôi sẽ giúp đỡ các bạn.

Lần tới có lẽ Green Ray Games sẽ giới thiệu với các bạn một ebook nâng cao hơn.