Vn-Screen Forum
Bạn có muốn phản ứng với tin nhắn này? Vui lòng đăng ký diễn đàn trong một vài cú nhấp chuột hoặc đăng nhập để tiếp tục.



 
Trang ChínhTrang Chính  GalleryGallery  Latest imagesLatest images  Tìm kiếmTìm kiếm  Đăng kýĐăng ký  Đăng NhậpĐăng Nhập  
  • Top posters
 N.H.M (706)
 nhuantrung0210 (323)
 TjaGoChangLj (227)
 GVRFnu-Bjn (190)
 lisaidong (122)
 phongngan1997 (94)
 puppy:x* (85)
 anhcudo01 (69)
 taoghetmay (68)
 anhlathe47 (45)
Similar topics
Bài Viết MớiTin NóngThống kê

Share | 
 

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

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down 
Tác giảThông điệp
nhokviet
Gà Con
Gà Con
nhokviet

Thanked : 0


[Tut XNAVN]Nhân vật di chuyển với List và Rectangle _
Bài gửiTiêu đề: [Tut XNAVN]Nhân vật di chuyển với List và Rectangle   [Tut XNAVN]Nhân vật di chuyển với List và Rectangle Empty26/11/2010, 1:01 pm

Nguồn: XNAVN.com
Download code: [You must be registered and logged in to see this link.]
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:
[You must be registered and logged in to see this image.]

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;
[You must be registered and logged in to see this image.]

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 (:| 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

[You must be registered and logged in to see this image.]
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 :)
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.
Chữ Ký Cá Nhân
Về Đầu Trang Go down
 

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

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang 
Trang 1 trong tổng số 1 trang

Permissions in this forum:Bạn không có quyền trả lời bài viết
Vn-Screen Forum :: Công Nghệ Thông Tin :: Phát Triển Games :: Thảo Luận XNA-
VN-SCREEN.DARKBB.COM
Design by N.H.M - Developed by Vn-Screen Member
Free forum | ©phpBB | Free forum support | Báo cáo lạm dụng | Thảo luận mới nhất