Fark edilmeyen bir şekilde tekrar eden geniş bir alan arka planı nasıl oluşturabilirim


14

Nasıl bir rts oyunu için tekrarlayan büyük bir uzay arka plan oluşturabilirim. Karmaşık bulutsular ve toz alanlarına sahip olmak istiyorum, ancak birimlerin keşfedilecek çok fazla alanı olduğundan, 120000px x 1200000px jpeg'e sahip olamıyorum, bu yüzden görüntünün tekrarlanmasını istiyorum, ancak segmentler arasında değişiklik çizgileri yok.

Bunu web GL canvas için Microsoft tarafından Babylon çerçevesiyle kullanıyorum


8
Herhangi bir görüntü yerine prosedürel bir gölgelendirici kullanmayı düşündünüz mü? Basit bir web araması bunu ortaya çıkarıyor
LeFauve

@LeFauve Aslında bu fikri çok seviyorum. Oyun geri döndüğünüzde geçmişte üretilen şeyleri hatırlıyor mu? Bunu tarayıcı belleğinde nasıl yönetebilirim?
SuperUberDuper

@SuperUberDuper: Deterministik ve yerel bir şekilde üretildiği sürece hiçbir şeyi "hatırlamasına" gerek yoktur. Gerektiğinde verileri yeniden oluşturun.
R .. GitHub DURDURMAK BUZ

@LeFauve: Bu gerçekten bir cevap olmalı. Verilen cevaplardan çok daha iyi.
R .. GitHub DURDURMAK BUZ

@R .. Kabul ediyorum, ayrıca webGL'de bunun için bazı kodlara sahip olmak güzel olurdu;)
SuperUberDuper

Yanıtlar:


19
  1. Paralaks kaydırmayı kullanın. Ana bakış açısının hızının farklı bölümleri ile kaydırma yapan birden fazla arka plan katmanına sahip olun. Katman ne kadar düşükse, o kadar yavaş kayar. Bu sadece bir derinlik yanılsaması sağlamak için harika bir yol değil, aynı zamanda arka planların daha az tekrarlayan görünmesini sağlar, çünkü katmanların senkronize olmaması nedeniyle farklı katmanlardaki nesneler farklı kompozisyonlarda görünecektir.

  2. prosedürlerinizi prosedürel olarak oluşturun. Tek bir büyük arka plan grafiği yerine, birden fazla farklı küçük öğeye sahip olun ve hepsini oyun dünyasına rastgele birden çok kez yerleştirin.

Ve bu arada: Bundan kaçınabileceğiniz zaman JPEG kullanmayın. Her değiştirdiğinizde ve kaydettiğinizde daha fazla kalite kaybeden kayıplı bir formattır, fotoğrafçılık için büyük ölçüde optimize edilmiştir ve şeffaflığı desteklemez. PNG gibi alfa kanalı ile kayıpsız bir format kullanın. Tek iyi neden, kaynak görüntünüzün yalnızca JPEG'de mevcut olması (NASA, herkese açık alanda çok sayıda güzel astronomi resmi yayınladı) ve bunlarda hiçbir değişiklik yapmak istememeniz olabilir.


7

Bir 2D oyun için sonsuz bir arka plan oluşturmanın bir yolu şudur:

  1. Bir grafik düzenleyici yazılımı (Mac için iDraw gibi) kullanarak arka planınızın bir bölümünü temsil eden bir A görüntüsü oluşturun . Bu görüntünün boyutu sınırlı olmalıdır.
  2. A'yı kopyalayın ve Y ekseninde aynalayın, bu B
  3. Şimdi (yatay) togheter A ve B'yi yapıştırın, bu AB .
  4. Son olarak oyundaki AB imajını içe aktarın ve kod aracılığıyla yatay olarak istediğiniz kadar tekrarlayın.

Bu yardımcı olur umarım.


2
Sınırlı boyut, ancak çok sınırlı değil . Karo ne kadar küçükse, tekrarlama genellikle o kadar açık olur.
cHao

1
Ya da yansıtma yerine Photoshop'ta Ofset filtresini ve kenarlıkların üzerine klon damgası kullanın ya da yalnızca GIMP'nin "Dikişsiz Yap" filtresini (Filtre → Harita → Dikişsiz Yap) kullanın.
wchargin

5

Katmanlar iyi çalışır.

İşte bazı matematik:

Diyelim ki kötü yapılmış bir demiryolu hattınız var. __ __ aralarındaki boşluğu fark . Tekerlek üzerlerine yuvarlandığında küçük bir çentik (küçük çentik) yapar.

İz uzunluğu lve tekerleğin yarıçapı rvarsa 2pi r, tekerleğin çevresi,ration=l/(2pi r) oranı, uzun sürmek olarak daha sonra çark içinde her çeyrek bir çentik alacak 10,25 söylemek ise.

Kaplama alanlarını açıklamanın en kolay yolu budur.

İki resminiz olduğunu varsayalım, biri bu çeyrek oranına sahipse 4 fazlı bir desen elde edersiniz, 4 döşemeden sonra tekrarlanır. M ve n fazlı 1 ana arka planınız ve 2 bindirmeniz olduğunu varsayalım. Ardından m * n döşemelerinden sonra desen tekrarlanır.

Sayıların eş-asal olması durumunda desenin en iyi şekilde görünmesi önemli olmasa da, en büyük ortak bölen 1'dir. Örneğin, evre 6 ve evre 4 gibi bir şeyimiz olduğunu varsayalım, her iki evre de " " Bir anlamda.

Bu tekniği (özellikle parçacıklar ve malzemelerle) çok az çaba sarf ederek çok sayıda "benzersiz" malzeme oluşturmak için kullanabilirsiniz.

Tren tekerleğine geri dön, oran irrasyonel ise, çentikler tekerleği kaplayacaktır! Ama bu gerçekten önemli değil.


5

İşte eksik görünen başka bir fikir:

Gökyüzü kutuları gibi uzun mesafeli arka planlar durumunda, Paralaks katmanları gerçekten iyi hissetmez. Örneğin yıldızları düşünün, yeryüzünde yürürken veya gece boyunca daha da iyisi, tüm yıldızlar birlikte hareket ederler, ancak birbirlerinden yüzlerce ya da düşüncelerin ışık yılı uzakta olduklarını biliyoruz. Mesele şu ki, mesafelerini fark etmemiz için çok uzaktalar. Tüm bunlar, sınırlı hesaplama gücümüzle (en fazla 8k * 8k işleyebilen) çok büyük bir doku (örneğin 120k * 120k) istediğimizi söyledi. Birden çok paralaks katmanı kullanmak gibi, her biri farklı türde detaylara sahip farklı dokular oluşturmalısınız. Örneğin biri gökadaları temsil eder, diğeri bir grup yıldız vb. Ama bu sefer onları farklı hızlarda hareket ettirmek yerine boyutlarında farklı olmalılar. İşte bir örnek: 3 doku kullanmayı düşünün, biri 2048 * 2048, diğeri 729 * 729 ve üçüncüsü 625 * 625. Bu sayılar birbiriyle çakıştığından, bu 3 dokuyu 3 kat halinde birleştirirken, aynı şeyi çizildiğini görmek için sonsuzluk hissi veren lcm (2048,729,625) = 764M pikselleri başlangıç ​​noktasından hareket ettirmelisiniz. Aslında başka katmanlar ekleyebilir veya her bir dokunun boyutunu değiştirebilirsiniz ve her zaman en büyük sonucu elde edersiniz.doku boyutlarının en az ortak katı .


2
Bu ve @ AlecTeal cevabı denilen bir teknik tarif Ağustos böceği Prensibi . Rastgele olmayan, çok büyük olmayan ve çok az kaynakla arka plan oluşturmanın kolay bir yoludur.
Yalan Ryan

4

Bu, prosedürel bir piksel gölgelendirici için bir iş gibi görünüyor.

Bir görüntüyü kullanmanın avantajları:

  • Büyük bitmapler sağlamanız gerekmez
  • Prosedüreldir, bu yüzden sabit bir görüntüyü tekrarlamak zorunda değildir (sonsuz olarak değişebilir)
  • Paralaks efekti istiyorsanız, görüntüleri kullanarak pratik olmayan binlerce düzlemi simüle edebilirsiniz.
  • Dinamik aydınlatma gibi çok ileri efektler yapabilirsiniz
  • İşlemlerin çoğu GPU'nuz tarafından yapılır ve CPU'yu oyununuzun diğer bölümleri için ücretsiz bırakır

Basit bir web araması, bu gölgelendiriciyi http://casual-effects.blogspot.com.au/2013/08/starfield-shader.html , aradığınıza benziyor.

WebGL'de uzman değilim, ancak bu sayfaya göre , normal GLSL dilini kullanıyor gibi görünüyor (bu, grafik kartları tarafından gölgelendiricileri programlamak için kullanılan C-Like dilidir). Bu, çalışmasını sağlamak için muhtemelen çok az veya hiç değişiklik yapmayacağınız anlamına gelir.

Bununla birlikte, nasıl çalıştığını anlamak için daha temel bir gölgelendirici ile başlamayı deneyebilirsiniz.

Bu blog sayfası WebGL'de gölgelendirici uygulamak için tüm adımları listeler. Bu, başlamak için iyi bir yer gibi görünüyor.

Harika gölgelendirici örnekleri bulmak için iyi bir yer de https://www.shadertoy.com/


Harika bir teşekkürler !!! Şimdi bir cevap seçmekte zorlanıyorum!
SuperUberDuper

2
Peki, gölgelendiricileri denemek için bir şansınız varsa, bu hoş görünümlü oyunlar yapmak istiyorsanız kesinlikle uzun vadede faydalı olacak bir şeydir. İlk adım biraz yüksek (benim ilk gölgelendirici istediğim şekilde görünmesi için 2 hafta sürdü) ama uzun vadede buna değer.
LeFauve

2

Büyük jpeg'inizi küçük bir segmentte kesebilir ve (görünür kısım) yerleştirebilirsiniz, her zaman bir bellekte saklamanız bile gerekmez.

Ve eski oyunlar gibi bazı 'fayanslar' tekrar edebilir. Bu NES konsolu için ortak bir çözümdü, hatta donanım tarafından destekleniyordu.


1
Kaybolan sıkıştırma nedeniyle bir JPEG'yi görsel hatalar olmadan dikilecek daha küçük JPEG'lere kesmek son derece zordur. Kutucukları seçerseniz PNG gibi kayıpsız bir sıkıştırma dosyası biçimi kullanmanız gerekir.
LeFauve

1
PNG'nin daha iyi olabileceğini kabul ediyorum, diğer taraftan, JPEG dokuları 3d grafiklerde yaygındır ve daha önemli JPEG kullanımı en.wikipedia.org/wiki/Macroblock doğru kesim kodlaması için en düşük kodlama yapılmazsa fark edilemez oranı.
Alexsey Shestacov
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.