Como posso criar um grande plano de fundo do espaço que se repete de maneira imperceptível


14

Como posso criar um grande fundo de espaço que se repete para um jogo de rts. Também quero ter nebulosas complexas e campos de poeira, mas como as unidades terão muito espaço para explorar, não posso ter um jpeg de 120000px por 1200000px, portanto, desejo repetir a imagem, mas não alterar linhas entre segmentos.

Estou usando isso com o quadro Babylon da Microsoft para a tela GL da web


8
Você considerou apenas usar um sombreador de procedimento em vez de qualquer imagem? Uma simples pesquisa na web traz até um presente, que olha o tipo de muito impressionante: casual-effects.blogspot.com.au/2013/08/starfield-shader.html
LeFauve

@LeFauve Na verdade, eu gosto muito dessa idéia. O jogo se lembra do passado gerado quando você viaja de volta? Como posso gerenciar isso na memória do navegador?
SuperUberDuper

@SuperUberDuper: Não é necessário "lembrar" nada, desde que seja gerado de maneira determinística e local. Apenas gere novamente os dados sempre que necessário.
R .. GitHub Pare de ajudar o gelo

@LeFauve: Isso realmente deve ser uma resposta. É muito melhor do que as respostas dadas.
R .. GitHub Pare de ajudar o gelo

@R .. Concordo, também seria bom ter algum código para ele em WebGL;)
SuperUberDuper

Respostas:


19
  1. Use rolagem de paralaxe. Tem várias camadas de fundo que rolam com diferentes frações da velocidade do ponto de vista principal. Quanto mais baixa a camada, mais lenta ela rola. Essa não é apenas uma ótima maneira de fornecer uma ilusão de profundidade, mas também faz com que os planos de fundo pareçam menos repetitivos porque os objetos nas diferentes camadas aparecerão em diferentes composições, pois as camadas não estão sincronizadas.

  2. crie seus fundos de forma processual. Em vez de um imenso gráfico de fundo, tenha vários elementos menores diferentes e coloque todos eles várias vezes aleatoriamente em todo o mundo do jogo.

A propósito: não use JPEG quando puder evitá-lo. É um formato com perdas que perde mais qualidade sempre que você o modifica e salva, é altamente otimizado para fotografia e não suporta transparência. Use um formato sem perdas com canal alfa como PNG. A única boa razão seria quando sua imagem de origem estiver disponível apenas em JPEG (a NASA publicou muitas fotos agradáveis ​​de astronomia, todas de domínio público) e você deseja fazer nenhuma modificação nelas.


7

Uma maneira de criar um fundo infinito para um jogo 2D é o seguinte:

  1. Usando um software de editor de gráficos (como o iDraw para Mac), crie uma imagem A que represente uma parte do seu plano de fundo. Esta imagem deve ter um tamanho limitado.
  2. Duplique A e espelhe-o no eixo Y, este é B
  3. Agora cole (horizontalmente) os pontos A e B, este é AB .
  4. Por fim, importe a imagem AB no seu jogo e repita-a horizontalmente através do código quantas vezes quiser.

Espero que isto ajude.


2
Tamanho limitado, mas não muito limitado. Quanto menor o ladrilho, mais óbvia será a repetição.
cHao 3/01/15

1
Ou, em vez de espelhar, use o filtro Offset no Photoshop e clone o carimbo sobre as bordas ou use o filtro "Make Seamless" do GIMP (Filtro → Mapa → Make Seamless).
wchargin

5

Camadas funcionam bem.

Aqui estão algumas matemáticas:

Suponha que você tenha uma via férrea mal feita de forma que coisas do tipo __ __ notem a diferença entre eles. Quando a roda rola sobre eles, faz um pequeno entalhe (entalhe minúsculo).

Se o comprimento da pista for le a roda tiver raio r, 2pi rserá a circunferência da roda,ration=l/(2pi r) se a proporção for 10,25, a roda terá um entalhe a cada trimestre, à medida que percorre um longo tempo.

É a maneira mais fácil de explicar os espaços de cobertura.

Então, suponha que você tenha duas imagens; se uma tiver essa proporção de um quarto, você obterá um padrão de 4 fases; ele será repetido após 4 blocos. Suponha que você tenha 1 fundo principal e 2 sobreposições, com m e n fases. Então o padrão será repetido após m * n blocos.

Embora isso não importe muito, o padrão ficará melhor se os números forem co-primos, o maior divisor comum é 1. Por exemplo, suponha que tenhamos algo da fase 6 e algo da fase 4, todas as outras fases "se alinharão " num sentido.

Você pode usar esta técnica (especialmente com partículas e outras coisas) para criar várias coisas "únicas" com muito pouco esforço.

De volta à roda do trem, se a proporção for irracional, os entalhes cobrirão a roda! Mas isso realmente não importa.


5

Aqui está outra idéia que parece estar faltando:

No caso de fundos de longa distância, como caixas de céu, as camadas Parallax não são realmente boas. Pense nas estrelas, por exemplo, ao caminhar na Terra ou, melhor ainda, durante a noite, todas as estrelas se movem juntas, embora saibamos que elas estão centenas ou pensamentos a anos-luz de distância uma da outra. O problema é que eles estão muito longe para que possamos perceber suas distâncias. Tudo isso disse que ainda queremos uma textura muito grande (digamos 120k * 120k), que seja desenhada com nosso poder computacional limitado (que pode lidar com 8k * 8k no máximo). Como usar várias camadas de paralaxe, você deve criar diferentes texturas, cada uma com diferentes tipos de detalhes. Por exemplo, uma representa galáxias, outra é um monte de estrelas, etc. Mas desta vez, em vez de movê-las com velocidades diferentes, elas devem diferir em seus tamanhos. Aqui está um exemplo: considere usar 3 texturas, um é 2048 * 2048, outro é 729 * 729 e o terceiro é 625 * 625. Como esses números são coprime entre si, ao combinar essas 3 texturas em 3 camadas, deve-se mover lcm (2048.729.625) = 764M pixels da origem para ver a mesma coisa sendo desenhada, o que parece meio infinito. Na verdade, você pode adicionar outras camadas ou alterar o tamanho de cada textura e sempre terá um resultado tão grande quantomúltiplo menos comum de tamanhos de textura.


2
Esta e a resposta de @ AlecTeal descrevem uma técnica chamada Princípio da Cigarra . É uma maneira fácil de criar um fundo não aleatório, muito grande e sem repetição, com poucos recursos.
Lie Ryan

4

Parece ser um trabalho para um sombreador de pixels processual.

As vantagens sobre o uso de uma imagem são:

  • Você não precisa fornecer bitmaps enormes
  • É processual, portanto, não é necessário repetir uma imagem fixa (pode variar infinitamente)
  • Se você deseja um efeito paralaxe, pode simular milhares de aviões, o que seria impraticável usando imagens
  • Você pode fazer efeitos muito avançados, como iluminação dinâmica
  • A maior parte do processamento é feita pela sua GPU, deixando a CPU livre para outras partes do seu jogo

Uma simples pesquisa na web mostra esse shader http://casual-effects.blogspot.com.au/2013/08/starfield-shader.html, que se parece com o que você está procurando.

Não sou especialista em WebGL, mas de acordo com esta página , parece que ele usa a linguagem GLSL comum (essa é a linguagem C-Like usada pelas placas gráficas para programar shaders). Isso significa que você provavelmente terá pouca ou nenhuma alteração para fazê-lo funcionar.

No entanto, você pode tentar começar com um sombreador mais básico para entender como ele funciona.

Esta página do blog lista todas as etapas para implementar um shader no WebGL. Parece um bom lugar para começar.

Outro bom lugar para encontrar exemplos maravilhosos de shader é https://www.shadertoy.com/


Grande obrigado !!! Agora tenho dificuldade em escolher uma resposta!
SuperUberDuper

2
Bem, se você tem a chance de tentar shaders, isso é definitivamente algo que será útil a longo prazo, se você quiser fazer jogos com boa aparência. O primeiro passo é um pouco alto (levei duas semanas para que meu primeiro shader estivesse do jeito que eu queria), mas valeu a pena a longo prazo.
LeFauve

2

Você pode cortar seu grande jpeg em pequenos segmentos e colocá-los (parte visível), nem é necessário armazená-lo na memória o tempo todo.

E, como nos jogos antigos, alguns 'tiles' podem se repetir. Isso foi uma solução comum para o console NES, que até foi suportado por hardware.


1
É extremamente difícil, se não impossível, cortar um JPEG em JPEG menores, que serão unidos sem falhas visuais devido à compactação com perdas. Se você optar por blocos, precisará usar um formato de arquivo de compactação sem perdas, como PNG.
LeFauve

1
Concordo que PNG pode ser melhor, no outro lado, texturas JPEG são comuns em gráficos 3D, e mais importantes uso JPEG 16x16 blocos para a codificação en.wikipedia.org/wiki/Macroblock corte certo pode não ser notado se não codificação em menor taxa.
Alexsey Shestacov
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.