[Tut]Nhân vật di chuyển với List và Rectangle

by nhokviet Fri Nov 26, 2010 11:28 am

Bài này mìh viết bên XNAVN.com copy qua đây để mọi người tham khảo.

Bạn HuyenSat cũng đã có bài hướng dẫn cách tạo 1 nhân vật di chuyển rồi. Nhưng bài này mình sẽ làm theo cách là dùng Frame cắt ra làm nhiều hình, và truy xuất nó dễ dàng.

Đầu tiên mình xin giới thiệu về Rectangle. Các bạn hiểu như thế này nhé, Rectangle là 1 hình chữ nhật được định nghĩa gồm 4 giá trị Tọa độ X, Tọa độ X, Chiều Dài, Và chiều rộng.

Ví dụ:

Code:: Rectangle A = new Rectangle(50,10,100,30)

Phân tích vd trên ta có: A là hình chữ nhật có tọa độ X = 50,Y = 10; Chiều rộng là 100 và chiều dài là 30.

Tiếp theo mình giới thiếu về List. List nó cũng giống như 1 mảng là tập hợp nhiều giá trị lại. nhưng độ dài của List không có định mình có thể thêm & xóa dễ dàng.

Ví dụ:

Code:: List<Rectangle> A = new List<Rectangle>();

Khởi tạo biến A dạng List gồm nhiều phần tử Rectangle. Sau đây là 1 số thao tác với List.

Code:: A.Add(new Rectangle(50,10,100,30)); //Thêm phần tử vào List A.Count //Đếm số phần tử trường hợp này là A.Count == 1 do mình mới Add 1 phần tử A[i] //Duyệt các phần tử của List.Ở đây ta có A[0] == new Rectangle(50,10,100,30) A.Remove(new Rectangle(50,10,100,30)) //Xóa phần tử có giá trị bằng với new Rectangle(50,10,100,30)

Xong phần giới thiệu giờ thực hành nhé.
Hình ảnh:
[Tut]Nhân vật di chuyển với List và Rectangle Tank0

Công việc: cắt hình trên thành nhiều phần, và tạo hình ảnh xe tăng chuyển động.
Bước 1: tạo List;

Code:: List<Rectangle> Frame = new List<Rectangle>();

Bước 2: Xác định các Rectangle và Add vào List;
[Tut]Nhân vật di chuyển với List và Rectangle Khung

Bạn để ý tấm ảnh nha, thấy mỗi hình xe tăng để ở 1 khung riêng ko. Việc của mìh là xác định tọa độ, kích thước của khung và đưa vào list. Như hình trên thì ô màu xanh có tọa độ là 0, 0 và kích thước là 72 và 74. Ô màu đỏ có tọa độ là 72,0 kích thước cũng là 72 và 74.

Code:: Frame.Add(new Rectangle(0,0,72,74) //Frame[0] Frame.Add(new Rectangle(72,0,72,74) //Frame[1]

Các bạn xác định tọa độ các ô còn lại nha.

Kết quả như sau:

Code:: Frame.Add(new Rectangle(0, 0, 72, 74)); //Frame[0] Frame.Add(new Rectangle(72, 0, 72, 74)); //Frame[1] Frame.Add(new Rectangle(142, 0, 72, 74));//Frame[2] Frame.Add(new Rectangle(216, 0, 72, 74));//Frame[3] Frame.Add(new Rectangle(288, 0, 72, 74));//Frame[4] Frame.Add(new Rectangle(0, 84, 72, 74)); //Frame[5] Frame.Add(new Rectangle(72, 84, 72, 74));//Frame[6] Frame.Add(new Rectangle(142, 84, 72, 74));//Frame[7] Frame.Add(new Rectangle(216, 84, 72, 74));//Frame[8] Frame.Add(new Rectangle(288, 84, 72, 74));//Frame[9] Frame.Add(new Rectangle(0, 182, 72, 68)); //Frame[10] Frame.Add(new Rectangle(72, 182, 72, 68));//Frame[11] Frame.Add(new Rectangle(142, 182, 72, 68));//Frame[12] Frame.Add(new Rectangle(216, 182, 72, 68));//Frame[13] Frame.Add(new Rectangle(288, 182, 72, 68));//Frame[14] Frame.Add(new Rectangle(0, 268, 72, 68)); //Frame[15] Frame.Add(new Rectangle(72, 268, 72, 68));//Frame[16] Frame.Add(new Rectangle(142, 268, 72, 68));//Frame[17] Frame.Add(new Rectangle(216, 268, 72, 68));//Frame[18] Frame.Add(new Rectangle(288, 268, 72, 68));//Frame[19]

........ Còn tiếp

Tiếp theo nào ( Neutral

giờ chúng ta tạo 1 class là XeTank nha :mad:.

Khai báo biến cần thiết

Code:: public Vector2 ToaDo { get; set; } public Texture2D HinhAnh { get; set; } public List<Rectangle> Frame { get; set; } public int HuongDiChuyen { get; set; } //Mình quy ước 0 là đi xuống, 5 là đi lên, 10 là qua phải và 15 là qua trái public int ID { get; set; } //Thằng này sẽ quyết định lấy khung hình nào trong Frame

Vì sao mình quy ước hướng di chuyển như thế ?
Các bạn xem hình này nha

[Tut]Nhân vật di chuyển với List và Rectangle Khung

Các số mình đánh dấu đó là 0 ,5 ,10, 15 là các hình đầu tiên của các hướng di chuyển, nên mình quy ước là thế.

Hàm khởi tạo của lớp XeTank

Code:: public XeTank(Texture2D HinhAnhVao, Vector2 ToaDoVao) { HinhAnh = HinhAnhVao; ToaDo = ToaDoVao; Frame = new List<Rectangle>(); HuongDiChuyen = 0; ID = 0; CatHinh(); //Hàm này sẽ khai báo ở dưới }

Tiếp theo là hàm căt hình chia nhỏ HinhAnh ra để quản lý ấy mà. Dùng List mình đã nói ở trên.
public void CatHinh()

Code:: { Frame.Add(new Rectangle(0, 0, 72, 74)); //Frame[0] Frame.Add(new Rectangle(72, 0, 72, 74)); //Frame[1] Frame.Add(new Rectangle(142, 0, 72, 74));//Frame[2] Frame.Add(new Rectangle(216, 0, 72, 74));//Frame[3] Frame.Add(new Rectangle(288, 0, 72, 74));//Frame[4] Frame.Add(new Rectangle(0, 84, 72, 74)); //Frame[5] Frame.Add(new Rectangle(72, 84, 72, 74));//Frame[6] Frame.Add(new Rectangle(142, 84, 72, 74));//Frame[7] Frame.Add(new Rectangle(216, 84, 72, 74));//Frame[8] Frame.Add(new Rectangle(288, 84, 72, 74));//Frame[9] Frame.Add(new Rectangle(0, 182, 72, 68)); //Frame[10] Frame.Add(new Rectangle(72, 182, 72, 68));//Frame[11] Frame.Add(new Rectangle(142, 182, 72, 68));//Frame[12] Frame.Add(new Rectangle(216, 182, 72, 68));//Frame[13] Frame.Add(new Rectangle(288, 182, 72, 68));//Frame[14] Frame.Add(new Rectangle(0, 268, 72, 68)); //Frame[15] Frame.Add(new Rectangle(72, 268, 72, 68));//Frame[16] Frame.Add(new Rectangle(142, 268, 72, 68));//Frame[17] Frame.Add(new Rectangle(216, 268, 72, 68));//Frame[18] Frame.Add(new Rectangle(288, 268, 72, 68));//Frame[19] }

Còn đây là hàm giúp xe tăng di chuyển và thay đổi hình ảnh.

Code:: public void DiChuyen(int HuongMoi) { if (HuongMoi != HuongDiChuyen) //Xe tăng đổi hướng { HuongDiChuyen = HuongMoi; ID = HuongMoi; } else { ID++; if (ID == HuongDiChuyen + 5) //Nếu vựt qua khung hình di chuyển quay về hình đầu ID = HuongDiChuyen; } switch (HuongMoi) { case 0: ToaDo += new Vector2(0, +1); break; case 5: ToaDo += new Vector2(0, -1); break; case 10: ToaDo += new Vector2(1, 0); break; case 15: ToaDo+= new Vector2(+1,0); break; } }

cuối cùng là hàm xuất ra màn hình Smile

Code:: public void Draw(SpriteBatch spriteBatch) { spriteBatch.Draw(HinhAnh, ToaDo, Frame[ID], Color.White); //Bạn nhớ ở đây cho Frame[ID] vào nha }

Các bạn hãy để ý Frame[ID] Khi ID thay đổi (từ 0 đến 19) thì nó sẽ lấy các ảnh tương ứng bên HInhAnh ra và đưa ra màn hình.

Thế là Xong lớp XeTank ta qua lớp Game1.

Phần khai báo ta thêm khai báo XeTank Tank

Code:: XeTank Tank;

Ở trong LoadContent() ta khởi tao biến Tank và truyền dữ liệu vào.

Code:: Tank = new XeTank(Content.Load<Texture2D>("tank0"), new Vector2(200, 200));

Để điều khiện được Tank ta phải có hàm DieuKhien. Mình tào hàm điều khiển với biến đi và là Tank1.

Code:: void DieuKhien(XeTank Tank1) { KeyboardState keyboardState = Keyboard.GetState(); if (keyboardState.IsKeyDown(Keys.Down)) { Tank1.DiChuyen(0); } if (keyboardState.IsKeyDown(Keys.Up)) { Tank1.DiChuyen(5); } if (keyboardState.IsKeyDown(Keys.Right)) { Tank1.DiChuyen(10); } if (keyboardState.IsKeyDown(Keys.Left)) { Tank1.DiChuyen(15); } }

Qua tới Update chỉ cần gọi Hàm DieuKhien ra.

Code:: DieuKhien(Tank);

Xong cuối cùng là vẽ ra màn hình

Code:: spriteBatch.Begin(SpriteBlendMode.AlphaBlend); //Chạy ở chế độ bỏ những phần trong suốt của ảnh. Tank.Draw(spriteBatch); spriteBatch.End();//Các bạn phải nhớ cái hàng này nha, ko nó báo lỗi ráng chịu :D

Ok bạn hãy tận hưởng kết quả đi nào.