CodingTrain / CodingTrain/Wave-Function-Collapse

The issue with asymmetric tiles and an easy solution

Đang mở
#16 0 bình luận 4 reaction 0 người được giao Xem trên GitHub
Ngôn ngữ chính
JavaScript
Star
218
Fork
64
Chỉ số merge pull request
Không có pull request nào được merge trong 30 ngày

Mô tả

the issue with the tiles in hand is the asymmetry

when you have a symmetric side on the tile, they can match to themselves (meaning the key you assigned to them), like in the first row here:

![tile-collapse-issue1](https://user-images.githubusercontent.com/14350846/165175938-82d41d70-5de8-4c5d-8884-9212223d6398.png)

But as you can see in the second row, when dealing with tiles with asymmetric sides, the matches are incorrect. The logic used to match sides (having the same code) is not valid for asymmetrical sides, as it allows them to match themselves which is wrong visually.

A **quick fix for this** is to use a more complex code to identify sides and update the logic that finds that two sides match. My quick fix is to use a 3 character key for each side: '000', '111', '222', '333', ... , 'aaa', 'bbb', 'ccc', etc and for the asymmetrical sides use values as '001' and '100' for their mirrored side. When matching sides instead of comparing their code, you must compare their code vs the reversed string of their code. In this way, '000' matches '000' (which keeps symmetrical sides working just fine) but '001' will only find a match in the reversed key '100' fixing asymmetrical sides.

In the previous example 4 becomes '001' and 5 becomes '100', allowing for them to match to the correct side but not themselves.

_Annex:_
My suggested solution was to create a method that figures out 3 pixels colours for each side of the tile: left, center and right. Once you have them create an array with those 3 values. To connect a tile to another, just compare the array to the reverse order of itself. This implements the symmetrical / asymmetrical solution and will allow for interchangeable tiles on the fly.

Hướng dẫn đóng góp

Chưa lập chỉ mục được hướng dẫn đóng góp cho kho mã nguồn này

Hướng nghiên cứu

Không có tệp, bài kiểm thử hoặc entry point nào được nêu tên. Hãy xác định logic đối sánh phía của tile, theo dõi cách các mã phía được tạo và so sánh, sau đó xác minh rằng các phía đối xứng vẫn khớp với chính chúng, trong khi các phía bất đối xứng chỉ khớp với biểu diễn đảo ngược của chúng.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
javascript
Lĩnh vực
game-dev
Loại issue
Lỗi
Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
40/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.