Vinh's Blog

Random Unity tips #1

Sat, 03 Sep 2022 14:42:18 +0000

Xin chào các bạn, tip đầu tiên là về Unity animation bị lỗi GameObject or Component is missing.

Để fix trường hợp bị Missing do bạn thay đổi cấu trúc/tên GameObject trong animation, bạn có thể nhấn F2 để đổi tên lại, thêm dấu / tương ứng với cấu trúc mới để fix lỗi này.

Đổi tên cho đúng

Đơn giản vậy thôi ;)

Xét và xử lý va chạm bằng Swept AABB

Mon, 28 Nov 2016 01:50:14 +0000

Xin chào các bạn, bài viết hôm nay mình sẽ giới thiệu cho các bạn về xử lý va chạm trong game bằng Swept AABB. Khi các bạn tự viết framework có phần xử lý va chạm thì có thể sử dụng phương pháp này.

AABB là gì?

AABB là viết tắt của Axis-Aligned Bounding Box, nó là thuật toán xét va chạm giữa các cạnh của hình chữ nhật mà ở đây các cạnh này nó song song với cùng hệ trục tọa độ. Vậy cơ bản là xét xem 2 hình chữ nhật nó có chồng lên nhau hay không.

Swept AABB?

Với Swept AABB, chúng ta sẽ xem trước ở frame kế tiếp hình chữ nhật mình có va chạm hay không. Có thì mình xử lý nó theo ý mình muốn.

Ví dụ:

Ở frame đầu tiên, hình chữ nhật chưa có va chạm, frame tiếp theo hình chữ nhật di chuyển 1 đoạn và va chạm với thanh màu xanh. Mình sẽ dự đoán trước và quyết định vị trí kế tiếp của nó, như ở đây nó sẽ đi đoạn ngắn hơn thay vì như bình thường sẽ là ở vị trí nét đứt.

Xét va chạm AABB

Để xem 2 hình chữ nhật có va chạm hay không thì mình sẽ xét từng cặp cạnh của 2 hình như sau:

Các bạn để ý sẽ thấy, khi 2 hình đè lên nhau thì mình luôn có ĐỒNG THỜI:

other.left <= object.right
other.right >= object.left
other.top >= object.bottom
other.bottom <= object.top

Như vậy nếu 1 trong 4 điều kiện trên sai thì 2 hình không có va chạm với nhau.

Ví dụ ở đây ta có left của other lớn hơn right của object, nên không có va chạm.

Tất cả ví dụ mình lấy gốc tọa độ là bottom-left

Hàm xét va chạm có thể viết đơn giản như sau:

Ở trên, mình có hàm kiểm tra hai Rect có va chạm với nhau hay không, mình lấy điều kiện ngược lại cho gọn hơn.

Xét va chạm với Swept AABB

Đầu tiên, mình tìm khoảng cách giữa các cạnh của hai hình

Trong đó,

dxEntry, dyEntry: là khoảng cách cần đi để các bắt đầu va chạm.
dxExit, dyExit: là khoảng cách cần đi kể từ lúc này để khi hết va chạm.

Nó cũng như top, left, right, bottom của AABB cơ bản phía trên. Mình xét thêm hướng của vận tốc, để nó đồng bộ với dấu lúc sau tính thời gian không ngược khi có va chạm.

Tiếp theo, từ khoảng cách và vận tốc, mình tìm thời gian để bắt đầu và kết thúc va chạm:

thời gian = quãng đường / vận tốc

Để xảy ra va chạm, cả hai trục x và y phải ĐỒNG THỜI XẢY RA VA CHẠM, vậy mình lấy thời gian bắt để đầu va chạm lớn nhất.

Còn khi hết va chạm, chỉ cần 1 trong 2 trục thoát khỏi là được, nên mình lấy thời gian kết thúc va chạm nhỏ nhất giữa 2 trục x, y.

Có được thời gian rồi thì mình bắt đầu xét va chạm:

Lớn hơn 1.0f: frame tiếp theo nó vẫn chưa thể va chạm.
Thời gian để kết thúc va chạm nhỏ hơn 0.0f: 2 hình chữ nhật đang đi ra xa nhau.
Thời gian để kết thúc va chạm phải lớn hơn thời gian để va chạm (va chạm xong rồi thì sau đó mới hết chứ đúng không).

Khi có thể va chạm mình sẽ trả về thời gian va chạm đó, còn không trả về 1.0f

Xử lý va chạm

Dựa vào thời gian trả về, mình tính quãng đường đi tiếp theo

Broad-Phasing

Tối ưu một tí, mình dùng Broad-Phasing để xét xem nó có thể va chạm trong frame tiếp theo không, không thì mình return luôn cho nhanh.

Mình tạo 1 hình chữ nhật dựa trên vị trí ban đầu và kế tiếp, sau đó lấy hình chữ nhật đó xét xem có chồng lên với hình kia không. Nếu có thì va chạm, còn không thì chắc chắn không thể nên không cần xét tiếp.

Cuối cùng là thêm vào phần đầu của hàm xét va chạm

Kiểm tra hướng va chạm

Mình dựa vô vị trí của object để suy ra hướng

Cơ bản xét va chạm chỉ cần thế thôi, từ đây thì các bạn có thể dùng cho các trường hợp cụ thể mà chỉnh sửa thêm cho phù hợp với nó.

Trường hợp 2 vật di chuyển, các bạn tính lại vận tốc của object so với other là được, xem object di chuyển còn other đứng yên.

Full code các bạn có thể xem ở đây: Swept AABB

Bài viết tham khảo: Swept AABB Collision Detection and Response

Các bạn có thắc mắc hay phát hiện sai sót gì thì comment bên dưới nhé.

Cám ơn và hẹn gặp lại.

Ghép khung vào hình với Canvas trong HTML5

Wed, 20 Jul 2016 00:00:00 +0000

Xin chào các bạn,

Trong bài này mình sẽ hướng dẫn các bạn cách ghép hình bằng Canvas trong HTML5, cụ thể ở đây mình ghép khung vào hình mà mình chọn từ máy lên. Các bạn có thể xem demo ở đây.

Ý tưởng ghép khung vào hình

Ý tưởng cơ bản là mình vẽ lần lượt hai hình lên canvas, sau đó di chuyển, phóng to thu nhỏ hay xoay hình rồi cho tải về là xong. Rất đơn giản phải không?

Vẽ khung hình

Trong file html, các bạn thêm các thẻ <canvas>, <input> và <img> như sau:

Trong đó,

Thẻ canvas để mình sử dụng vẽ hình.
Thẻ img dùng để chứa hình mà mình tải lên.

Tiếp theo, các bạn tạo file js để code một số xử lý hình ảnh.

Mình lấy các đối tượng trong HTML như image, canvas và context và tạo các biến cơ bản. Sau đó tạo đối tượng frame là khung hình muốn ghép.

Ở hàm onload của frame, mình vẽ khung hình lên context.

Ban đầu đơn giản chỉ xóa canvas rồi vẽ frame hình lên trước, các bạn có thể xem thêm hàm drawImage(), clearRect()

Load hình

Tiếp theo mình sẽ load hình lên.

Trong file HTML các bạn thêm thẻ input để up hình.

Viết sự kiện change cho input.

Khi hình được load lên, mình sử dụng FileReader để đọc dữ liệu từ input và cập nhật lại source hình từ dữ liệu đó cho đối tượng userImage.

Ở hàm onload của userImage, mình sẽ tìm cạnh nhỏ nhất để scale hình cho vừa với khung. Và lưu giá trị vào minScale để giới hạn giá trị scale. (mình thích không cho người ta scale nhỏ hơn canvas thôi).

Giờ mình có hình rồi nên ta cập nhật thêm cho hàm drawCurrentImage()

Các bạn save() context hiện tại trước khi thay đổi để vẽ userImage, rồi nhớ restore() để trả về mặc định cho context trước khi vẽ cái khác.

Để vẽ theo tâm của hình (origin là tâm của hình), mình dùng cách translate() chuyển hình đến tọa độ mong muốn. Sau đó khi vẽ bằng drawImage(), ta vẽ lùi về một nữa kích thước ngang, dọc của hình.

Và mình dùng rotate(), scale() để gán các giá trị tương ứng cho context.

Di chuyển

Ý tưởng: mỗi khi chuột di chuyển mình sẽ tính toán độ thay đổi của chuột so với lần trước rồi cập nhật lại vị trí của hình.

Các bạn thêm các biến như bên dưới và các sự kiện mousedown, mousemove, mouseup, mouseout cho canvas.

Ở sự kiện cho mousemove, ta cập nhật vị trí hiện tại của hình với độ thay đổi của chuột. Các sự kiện mouseup, mousedown và mouseout để xác định trạng thái kéo thả hình.

Mình thêm giới hạn cho tọa đổ để không kéo hình lệch xa quá, chỉ cho nó vừa khung và di chuyển hết hình thôi.

Các bạn thêm vào hàm drawCurrentImage(), mình tính phần dư của hình so với canvas, phần này sẽ là giới hạn di chuyển của tọa độ. Nếu tọa độ thấp hơn hoặc lớn hơn thì mình không cho phép vượt qua.

Thay đổi giá trị scale

Với giá trị scale, ta thêm thanh input range để kéo thay đổi giá trị vào HTML như sau

Mỗi lần thay đổi giá trị, mình cập nhật lại imageScale với giá trị của scaleBar.

Thay đổi góc xoay

Để thay đổi góc xoay, các bạn thêm vào file HTML hai nút xoay trái/phải.

Mỗi lần bấm nút xoay hình, mình cộng / trừ góc xoay cho 90 độ, và đổi width, height của hình cho nhau. Sau đó là vẽ lại hình.

Tải hình

Để tải hình, mình gán sự kiện click cho nút download, dùng hàm toDataURL() để lấy dữ liệu của canvas và tải xuống.

Tổng kết

Vậy là xong các chức năng cơ bản của việc ghép khung vào hình, các bạn có thể phát triển thêm như là xoay hình, phóng to thu nhỏ, chọn frame… Còn lại là các thứ như là css lại giao diện theo ý các bạn thôi.

Full Source code của project.

Bài viết này mình cũng đang tìm hiểu về Javascript, nên nếu có gì sai sót các bạn có thể góp ý thêm nha. Bạn nào có sử dụng lại nhớ báo mình cho mình biết nhé.

Hẹn gặp lại các bạn.

Cập nhật

3/10/2016: cập nhật scale hình ảnh
11/2/2017: cập nhật xoay hình ảnh

Sử dụng bit flags để lưu giá trị

Sun, 17 Jul 2016 07:00:00 +0000

Bit flags là gì?

Sử dụng bit flags là cách chúng ta sử dụng thứ tự các bit của biến được lưu trong bộ nhớ để quy định một loại giá trị. Từ đó mình có thể lưu được nhiều giá trị nhưng chỉ cần một biến.

Ví dụ ta có kiểu enum quy định các loại giá trị như thế này để sử dụng bit flags.

enum eDirection
{
	TOP 	= 1,		// 0001
	LEFT 	= 2,		// 0010
	BOTTOM 	= 4,		// 0100
	RIGHT 	= 8		// 1000
}

Các bạn thấy giá trị của các enum này nếu là cơ số 2 thì mỗi loại có bit 1 ở vị trí khác nhau.

Bây giờ các bạn có một biến để lưu hướng như theo ví dụ trên:

eDirection _direction;

Thêm một giá trị

Bình thường bạn gán một giá trị cho nó như thế này.

_direction = eDirection::TOP;

Vậy khi bạn muốn gán nhiều giá trị cho một biến, bạn chỉ cần sử dụng phép OR để gán thêm cho nó.

_direction |= eDirection::LEFT;

Khi đó giá trị biến _direction sẽ trở thành 0011, có thể hiểu nó được bật 2 cờ tại các giá trị tương ứng là TOP và LEFT.

	0001
OR	0010
=	0011

Kiểm tra giá trị

Bạn muốn kiếm tra giá trị có trong biến thì các bạn dùng:

if((_direction & eDirection::TOP) == eDirection::TOP)
{
	// làm gì đó...
}

Khi AND với biến hiện tại, nếu vị trí của bit ở giá trị cần kiểm tra và biến cùng là 1, nó sẽ giữ lại còn những vị trí khác sẽ trở thành 0. Kết quả là nó sẽ ra là giá trị muốn kiểm tra. Sau đó khi đem so sánh với giá trị đó, nếu bằng đương nhiên là nó có chứa trong đó. Cách này sẽ kiểm tra được giá trị toàn bit 0 hoặc toàn bit 1.

Theo ví dụ trên, biến _direction hiện tại là 0011, khi AND với 0001 nó sẽ bằng 0001 nghĩa là nó có giá trị TOP.

	0011
AND	0001
=	0001

Vậy muốn kiểm tra nhiều giá trị thì sao? Tương tự như trên:

if((_direction & (eDirection::TOP | eDirection::RIGHT)) == (eDirection::TOP | eDirection::RIGHT))
{
	// làm gì đó...
}

Xóa giá trị

Bạn muốn xóa giá trị đó ra khỏi biến hiện tại, các bạn AND cho NOT của giá trị đó:

_direction &= ~eDirection::TOP;

hoặc bạn XOR cho giá trị đó:

_direction ^= eDirection::TOP;

Theo mình, bạn nên dùng AND với NOT, để khi không có giá trị trong đó, nó sẽ không bị thay đổi biến hiện tại của mình.

– NOT của TOP là 1110, khi AND với _direction là 0011 nó sẽ còn lại 0010 là giá trị LEFT.

	0011
AND	1110
=	0010

– khi lấy 0001 XOR với 0011 nó bằng 0010 là giá trị LEFT.

	0011
XOR	0010
=	0010

Cả 2 đều đúng nếu đã có giá trị LEFT trong đó, giả sử mình kiểm tra giá trị RIGHT.

– NOT của RIGHT là 0111, khi AND với 0011 nó sẽ ra 0011 là giá trị TOP LEFT, do RIGHT không có nên nó không xóa đi.

	0011
AND	0111
=	0011

– Còn khi dùng 1000 XOR 0011 nó sẽ ra 1011 là giá trị TOP LEFT RIGHT, vậy cách này để dùng cho trường hợp nếu chưa có thì gán thêm còn có rồi thì xóa đi.

	0011
XOR	1000
=	1011

Bên trên là cách sử dụng bit flags mà mình tìm được và dùng thấy khá là có ích trong các trường hợp mình gặp phải.

Ví dụ hồi trước mình làm cho cái font chữ, nó cũng có các trạng thái như là in đậm, nghiêng, gạch dưới… hoặc trạng thái của các nhân vật trong game chẳng hạn.

Các bạn có thắc mắc hay góp ý gì về bài viết sử dụng bit flags này cứ thoải mái comment bên dưới để cùng thảo luận nhé.

Tạm biệt và hẹn gặp lại các bạn trong những bài tiếp theo.

Hello World!

Sat, 16 Jul 2016 13:08:18 +0000

Xin chào các bạn, đây là bài viết đầu tiên trên blog này nè.