Chủ Nhật, 5 tháng 3, 2017

Phần 3 - Mouse event & Particles system

Lời nói đầu "Mình chỉ là sinh viên năm 2 chân ướt chân ráo, nếu có cao nhân lướt ngang qua xin tận tình chỉ bảo!".

Vào vấn đề: 😀😊😊

Mouse event:

Đầu tiên hãy nói về Mouse, Mouse cho ta biết các thông tin về vị trí con trỏ chuột trên màn hình, trạng thái click chuột, lick trái hay click phải, từ đó chúng ta có thể lấy các thông tin này để xử lí input. Vì sự kiện click chuột và vị trí chuột luôn thay đổi theo thời gian thực nên những thao tác lấy thông tin của Mouse nên được thực hiện trong hàm update(float deltaTime).

Việc xử lấy thông tin Mouse đơn giản như hình sau:



Kết quả khi ta click chuột trái và chuột phải trên màn hình đồ họa sẽ hiển thị dòng thông báo tương ứng và vị trí click chuột trong tọa độ toàn màn hình



Lưu ý là không nên dời cửa sổ đồ họa lệch khỏi vị trí góc trên bên trái màn hình, vì tọa độ của chuột chỉ đúng với tọa độ toàn màn hình, ko đúng với tọa độ cửa sổ đồ họa, muốn đúng với cửa sổ đồ họa thì góc trên bên trái của cửa sổ đồ họa phải trùng với góc trên bên trái của màn hình, lỗi này là do có 1 số hàm trong thư viện bgi mình ko dùng đc, mình sẽ sửa lại sau.

Phần tiếp theo: bây giờ quan tâm tới việc làm sao để di chuyển các thực thể trong game (ở đây thực thể là hình tròn). Làm cho thực thể di chuyển thì dễ, nhưng làm cho thực thể di chuyển đúng hướng và đúng với thời gian mong muốn thì mới là vấn đề, nếu bạn chưa từng làm game thì vấn đề này hơi bị nhằn đấy.

Giải quyết: trong lvh có 2 hành động được thiết lập sẵn là MoveTo và MoveBy.

MoveTo sẽ di chuyển đến đúng vị trí tọa độ được chỉ định trong 1 khoảng thời gian (tính = giây) chỉ ra, vd: vị trí của thực thể đang ở tọa độ (100, 200), khi thực hiện hành động MoveTo::create(2, Vector2f(50, 40)) trong vòng 2 giây thực thể sẽ di chuyển theo đường thẳng đến vị trí (50, 40) .

 MoveBy sẽ di chuyển đến 1 vị trí tương đối với vị trí hiện tại của thực thể, vd: vị trí của thực thể đang ở tọa độ (100, 200), khi thực hiện hành động MoveBy::create(2, Vector2f(50, 40)) trong vòng 2 giây thực thể sẽ di chuyển theo đường thẳng đến vị trí (150, 240).

Syntax:



Đây là đoạn video mình kết hợp những chức năng vừa qua:



Bây giờ đã đến lúc làm đẹp cho game, mình thì thích đẹp 1 cách khoa học chứ không chỉ đẹp nhờ trang trí. Lvh cung cấp 1 hệ thống hạt, khói bụi, lòe loẹt gọi chung là Particle system, nhưng do thư viện đồ họa BGI ko tận dụng card đồ họa, cpu phải làm việc rất nhiều nên tốc độ xử lí chậm hơn, có phần không như ý muốn, (có cái gì thì dùng cái đó thôi )

Syntax:



Kết quả trên màn hình:



ParticleNode cần phải đính vào 1 thực thể, khi không cần nữa có thể gỡ ra khỏi thực thể:
Syntax:



Một số hàm cho phép sửa đổi particle theo ý muốn như:

Thiết lập màu cho particle, có thể 1 hoặc 2 màu
void setColor(int color);
void setColor(int color1, int color2);

Thiết lập tốc độ hoạt động của particle
//speed as pixel/second
void setSpeed(float speed);

Thiết lập thời gian tồn tại cho các hạt
//left time as second
void setLifeTime(float duration);

Thiết lập góc cho particle
//angle as degree
void setAngle(float angle);

Thiết lập độ rộng cho particle
void setWidth(float width);

Video demo:




Phần này tạm dừng tại đây, vì mình bận học nên không có thời gian mở rộng thêm nhiều chức năng, có lẽ 1 thời gian sau mình sẽ tiếp tục...mình còn nhiều chức năng dự định sẽ làm như vật lý, đọc ảnh , rotate, scale .... nhưng bây giờ không có thời gian 😊😊😊. Ai đọc qua thấy có hứng thú thì có thể phát triển thêm chức năng. Cảm ơn bạn đã đọc, chúc bạn học tốt!

Phần 2: 1 số thao tác cơ bản trong lvh

Lời nói đầu "Mình chỉ là sinh viên năm 2 chân ướt chân ráo, nếu có cao nhân lướt ngang qua xin tận tình chỉ bảo!".

Vào vấn đề: 😉😉😉

Đầu tiên tạo 1 class MyGame của chúng ta:

tạo 1 file MyGame.h và code như hình sau



Ở đây class MyGame bắt buột phải kế thừa từ class Game (class Game có sẵn trong lvh.h)

lvh là tên namespace chung, có thể using namespace lvh để đỡ viết nhiều nhưng khuyến khích đừng nên (tránh trùng lặp hàm với thư viện khác)

Hai hàm init() và update() là 2 hàm override từ class Game, có thể không cần override nhưng nếu vậy những gì trong code sẽ không được hiển thị lên màn hình

Tiếp theo tạo file MyGame.cpp như hình sau:


Trong hàm init() bắt buộc phải gọi lại hàm init() của class MyGame, sau đó muốn thêm gì thì tùy. Hàm này để khởi tạo những gì cần có trong game

Hàm update là hàm cập nhật những sự kiện trong game theo thời gian thực deltaTime (float dt) biến dt trả lại giá trị thời gian sau mỗi vòng lặp game, đơn vị dt là giây.

Tạo file Main.cpp để run game:



Bây giờ thử tạo 1 hình tròn. Trong file MyGame.h thêm biến mCircle như hình sau:

Trong file MyGame.cpp code như sau:



Rồi chạy thử chương trình nó sẽ cho kết quả như sau:

Lúc này hình tròn màu trắng nằm ở vị trí mặc định là x = 0; y = 0

Mình lười viết nhiều quá, xem hình code theo cho nhanh nha ^_^ , tên hàm mình đặt đã nói lên ý nghĩa của nó rồi


Kết quả khi run:

Khi click chuột vào hình tròn sẽ xuất thông báo ra console


Kết quả:

Còn 1 số hàm khác mình sẽ tìm hiểu ở phần 3 nhé! Cảm ơn bạn đã đọc, chúc bạn học tốt!


Thứ Bảy, 4 tháng 3, 2017

Phần 1: Giới thiệu về mini framework lvh - Hướng dẫn cài đặt

Lời nói đầu "Mình chỉ là sinh viên năm 2 chân ướt chân ráo, nếu có cao nhân lướt ngang qua xin tận tình chỉ bảo!".

Vào vấn đề:

Lvh là viết tắt của tên mình (Lê Việt Hào), đây là 1 khung sườn được mình thiết kế sẵn để làm game tiện lợi hơn, sử dụng bộ thư viện đồ họa BGI cũ rích và xấu xí ^_^. Thật ra cái này cũng không phải là 1 framework to tát gì, mục đích mình thiết kế ra là để luyện tập code vững vàng hơn và thật sự là mình đã thấy tiến bộ hơn, mở rộng kiến thức hơn khi thử tạo ra 1 framework tào lao như thế này...thoát ngu bền vững 😊😊😊

Vậy lvh có những chức năng gì?

  • Giúp đơn giản hóa những những đoạn code lằng nhằng
  • Hỗ trợ các hiệu ứng đẹp cho game
  • Đã được lập trình sẵn, bạn chỉ việc gọi, nó bỗng dưng làm theo
  • Bạn yên tâm tập trung vào code cho nội dung game
Những chức năng trên chỉ là mình chém chuối ra thôi, nhưng đó là mục tiêu mình hướng tới.


Rồi! bây giờ tới phần cài đặt lvh, link download lvh Ở Đây  !!! mình lười nói nhiều, các bạn xem video này nhá!




Phần 1 tới đây là hết rồi, cảm ơn bạn đã đọc! Phần 2 sẽ đi vào chi tiết các thao tác với lvh.

Bài viết khác: