Làm cách nào tôi có thể tạo một nền không gian rộng lặp lại, theo cách không thể nhận thấy


14

Làm thế nào tôi có thể tạo một nền không gian lớn lặp đi lặp lại cho một trò chơi rts. Tôi cũng muốn có các tinh vân và trường bụi phức tạp, nhưng vì các đơn vị sẽ có nhiều không gian để khám phá nên tôi không thể có jpeg 120000px x 1200000px, vì vậy tôi muốn có hình ảnh lặp lại, nhưng không có dòng thay đổi giữa các phân đoạn.

Tôi đang sử dụng khung này với khung Babylon của Microsoft cho web GL canvas


8
Bạn đã xem xét chỉ sử dụng một shader thủ tục thay vì bất kỳ hình ảnh? Một tìm kiếm trên web đơn giản đưa ra cái này, trông rất ấn tượng: Casual-effects.blogspot.com.au/2013/08/starfield-shader.html
LeFauve

@LeFauve Thật ra tôi rất thích ý tưởng này. Trò chơi có nhớ những thứ được tạo ra trong quá khứ khi bạn quay lại không? Làm thế nào tôi có thể quản lý này trong bộ nhớ trình duyệt?
SuperUberDuper

@SuperUberDuper: Không cần phải "nhớ" bất cứ điều gì miễn là nó được tạo theo cách xác định và cục bộ. Chỉ cần tạo lại dữ liệu bất cứ khi nào cần thiết.
R .. GitHub DỪNG GIÚP ICE

@LeFauve: Đó thực sự là một câu trả lời. Nó tốt hơn nhiều so với câu trả lời được đưa ra.
R .. GitHub DỪNG GIÚP ICE

@R .. Tôi đồng ý, cũng sẽ rất tuyệt nếu có một số mã cho nó trong webGL;)
SuperUberDuper

Câu trả lời:


19
  1. Sử dụng cuộn thị sai. Có nhiều lớp nền cuộn với các phân số khác nhau về tốc độ của quan điểm chính. Lớp càng thấp, nó di chuyển càng chậm. Đây không chỉ là một cách tuyệt vời để tạo ảo giác về chiều sâu, nó cũng làm cho các hình nền trông ít lặp đi lặp lại vì các đối tượng trên các lớp khác nhau sẽ xuất hiện trong các bố cục khác nhau do các lớp không đồng bộ.

  2. tạo nền của bạn theo thủ tục. Thay vì một đồ họa nền lớn, có nhiều yếu tố nhỏ hơn khác nhau và đặt tất cả chúng nhiều lần ngẫu nhiên trên khắp thế giới trò chơi.

Và nhân tiện: Đừng sử dụng JPEG khi bạn có thể tránh nó. Đây là một định dạng mất dữ liệu làm mất chất lượng hơn mỗi khi bạn sửa đổi và lưu nó, nó được tối ưu hóa rất nhiều cho việc chụp ảnh và không hỗ trợ tính minh bạch. Sử dụng định dạng lossless với kênh alpha như PNG. Lý do chính đáng duy nhất là khi hình ảnh nguồn của bạn chỉ có sẵn trong JPEG (NASA đã xuất bản rất nhiều hình ảnh thiên văn tuyệt đẹp, tất cả đều thuộc phạm vi công cộng) và bạn không muốn sửa đổi gì về chúng.


7

Cách xây dựng nền vô hạn cho trò chơi 2D là như sau:

  1. Sử dụng phần mềm chỉnh sửa đồ họa (như iDraw cho Mac) tạo hình ảnh A đại diện cho một phần nền của bạn. Hình ảnh này nên có kích thước hạn chế.
  2. Nhân đôi A và phản chiếu nó trên trục Y, đây là B
  3. Bây giờ dán (theo chiều ngang) togheter A và B, đây là AB .
  4. Cuối cùng, nhập hình ảnh AB trong trò chơi của bạn và lặp lại theo chiều ngang thông qua mã nhiều lần bạn muốn.

Hi vọng điêu nay co ich.


2
Kích thước hạn chế, nhưng không quá giới hạn. Gạch càng nhỏ, sự lặp lại sẽ càng rõ ràng.
cHao

1
Hoặc, thay vì phản chiếu, hãy sử dụng bộ lọc Offset trong Photoshop và sao chép tem trên các đường viền hoặc chỉ sử dụng bộ lọc "Make Dàn" của GIMP (Bộ lọc → Bản đồ → Tạo liền mạch).
wchargein

5

Các lớp hoạt động tốt.

Đây là một số phép toán:

Giả sử bạn có một tuyến đường sắt được làm kém đến mức giống như __ __nhận thấy khoảng cách giữa chúng. Khi bánh xe lăn qua chúng, nó tạo ra một notch nhỏ (notch nhỏ).

Nếu chiều dài theo dõi là lvà bánh xe có bán kính rthì 2pi rlà chu vi của bánh xe, ration=l/(2pi r)nếu tỷ lệ là 10,25 thì bánh xe sẽ có một notch trong đó mỗi quý khi nó chạy dài.

Đây là cách dễ nhất tôi có thể nghĩ ra để giải thích các không gian.

Vì vậy, giả sử bạn có hai hình ảnh, nếu một hình có tỷ lệ quý này, bạn sẽ có được mẫu 4 pha, nó sẽ lặp lại sau 4 ô. Giả sử bạn có 1 nền chính và 2 lớp phủ, với các pha m và n. Sau đó, mô hình sẽ lặp lại sau gạch m * n.

Mặc dù mô hình sẽ không quan trọng lắm nếu các số là đồng nguyên tố, đó là ước số chung lớn nhất là 1. Ví dụ: giả sử chúng ta có một cái gì đó của giai đoạn 6 và một cái gì đó của giai đoạn 4, mọi giai đoạn khác sẽ "xếp hàng "Theo một nghĩa nào đó.

Bạn có thể sử dụng kỹ thuật này (đặc biệt là với các hạt và vật liệu) để tạo ra nhiều thứ "độc nhất" với rất ít nỗ lực.

Quay trở lại bánh xe lửa, nếu tỷ lệ là không hợp lý, thì các rãnh sẽ bao phủ bánh xe! Nhưng điều này không thực sự quan trọng.


5

Đây là một ý tưởng khác mà dường như còn thiếu:

Trong trường hợp hình nền đường dài, như hộp trời, các lớp Parallax không thực sự cảm thấy tốt. Ví dụ, hãy nghĩ về các ngôi sao, khi đi trên trái đất, hoặc thậm chí tốt hơn trong suốt đêm, tất cả các ngôi sao di chuyển cùng nhau, mặc dù chúng ta biết rằng chúng cách xa nhau hàng trăm hoặc ánh sáng. Vấn đề là họ ở quá xa để chúng ta nhận thấy khoảng cách của họ. Tất cả những gì nói rằng chúng tôi vẫn muốn một kết cấu rất lớn (giả sử 120k * 120k), được vẽ bằng sức mạnh tính toán hạn chế của chúng tôi (có thể xử lý tối đa 8k * 8k). Giống như sử dụng nhiều lớp thị sai, bạn nên tạo các kết cấu khác nhau, mỗi lớp có các loại chi tiết khác nhau. Ví dụ, một đại diện cho các thiên hà, một thiên hà khác là một loạt các ngôi sao, v.v. Nhưng lần này thay vì di chuyển chúng với tốc độ khác nhau, chúng nên khác nhau về kích thước của chúng. Dưới đây là một ví dụ: Xem xét sử dụng 3 kết cấu, một là 2048 * 2048, một cái khác là 729 * 729 và cái thứ ba là 625 * 625. Vì các số này tương ứng với nhau, nên khi kết hợp 3 họa tiết này thành 3 lớp, người ta sẽ di chuyển lcm (2048.729.625) = 764M pixel từ gốc để thấy cùng một thứ được vẽ, có cảm giác giống như vô cực. Trong thực tế, bạn có thể thêm các lớp khác hoặc thay đổi kích thước của từng kết cấu và bạn sẽ luôn có kết quả lớn nhưbội số chung nhỏ nhất của kích thước kết cấu.


2
Câu trả lời này và @ AlecTeal mô tả một kỹ thuật gọi là Nguyên tắc ve sầu . Đó là một cách dễ dàng để tạo nền không lặp lại rất ngẫu nhiên, rất lớn với rất ít tài nguyên.
Lie Ryan

4

Đây có vẻ là một công việc cho một shader pixel thủ tục.

Những lợi thế của việc sử dụng một hình ảnh là:

  • Bạn không cần phải cung cấp bitmap lớn
  • Đây là thủ tục, vì vậy nó không phải lặp lại một hình ảnh cố định (nó có thể thay đổi vô hạn)
  • Nếu bạn muốn có hiệu ứng paralax, bạn có thể mô phỏng hàng ngàn mặt phẳng, điều này sẽ không thực tế khi sử dụng hình ảnh
  • Bạn có thể làm các hiệu ứng rất tiên tiến, như ánh sáng động
  • Hầu hết quá trình xử lý được thực hiện bởi GPU của bạn, để CPU miễn phí cho các phần khác trong trò chơi của bạn

Một tìm kiếm trên web đơn giản đưa trình đổ bóng này lên http://casual-effects.blogspot.com.au/2013/08/starfield-shader.html trông giống như những gì bạn đang tìm kiếm.

Tôi không phải là chuyên gia về WebGL, nhưng theo trang này , có vẻ như nó sử dụng ngôn ngữ GLSL thông thường (đây là ngôn ngữ C-Like được sử dụng bởi các card đồ họa để tạo bóng cho chương trình). Điều này có nghĩa là bạn có thể sẽ có ít hoặc không có thay đổi để làm cho nó hoạt động.

Tuy nhiên, bạn có thể thử bắt đầu với một shader cơ bản hơn để hiểu cách nó hoạt động.

Trang blog này liệt kê tất cả các bước để thực hiện trình đổ bóng trong WebGL. Đó có vẻ là một nơi tốt để bắt đầu.

Một nơi tốt khác để tìm các ví dụ shader tuyệt vời là https://www.shadertoy.com/


Cảm ơn rất nhiều !!! Bây giờ tôi có thời gian khó khăn để chọn một câu trả lời!
SuperUberDuper

2
Chà, nếu bạn có cơ hội thử dùng shader, đó chắc chắn là thứ sẽ hữu ích về lâu dài nếu bạn muốn làm những trò chơi đẹp mắt. Bước đầu tiên hơi cao (tôi mất 2 tuần để có trình tạo bóng đầu tiên của mình theo cách tôi muốn) nhưng về lâu dài nó đáng giá.
LeFauve

2

Bạn có thể cắt jpeg lớn của mình thành một đoạn nhỏ và đặt chúng (phần hiển thị), thậm chí bạn không cần lưu trữ nó trong bộ nhớ mọi lúc.

Và giống như một trò chơi cũ, một số 'gạch' có thể lặp lại. Đó là giải pháp chung cho bảng điều khiển NES, điều đó thậm chí còn được hỗ trợ bởi phần cứng.


1
Nếu không thể, rất khó, để cắt một JPEG thành các JPEG nhỏ hơn sẽ khâu mà không bị trục trặc hình ảnh do quá trình nén bị mất. Nếu bạn chọn gạch, bạn sẽ phải sử dụng định dạng tệp nén không mất dữ liệu, như PNG.
LeFauve

1
Tôi đồng ý rằng PNG có thể tốt hơn, mặt khác, kết cấu JPEG là phổ biến trong đồ họa 3d và quan trọng hơn là sử dụng các khối 16x16 để mã hóa en.wikipedia.org/wiki/Macroblock cắt phải nếu không thực hiện mã hóa ở mức thấp nhất tỷ lệ.
Alexsey Shestacov
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.