4

Estoy desarrollando un pequeño juego en HTML en el que diferentes objetos vuelan por la pantalla proyectando una sombra en el suelo. Los dibujos son en SVG y los creo y animo usando d3.js.

El problema que tengo con esto es que cada pareja objeto-sombra está en un SVG. Entonces cuando dos objetos están cerca, la sombra de uno se proyecto sobre la del otro (cuando teóricamente en el juego estarían en el mismo plano) y es un efecto que quiero evitar.

Aquí se puede ver el problema. El avión rosado proyecta la sombra por encima del avión azul:

.avion {
  width:250px;
  height:250px;
  position:absolute;
}

.avion .sombra {
  fill:rgba(0,0,0,0.25);
  stroke:rgba(0,0,0,0);
  stroke-width:0;
  filter:url(#blur);
}

.avion .objeto {
  stroke:rgba(0,0,0,0);
  stroke-width:0;
}
<svg viewBox="0 0 250 250" class="avion" style="top:50px;left:60px;">
  <defs>
    <filter id="blur" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="8" />
    </filter>
  </defs>
  <path class="sombra" d="M 100,50 115,65 115,110 195,150 115,150 115,200 135,220 102,220 102,225 98,225 98,220 65,220 85,200 85,150 5,150 85,110 85,65Z" />
  <path class="objeto" fill="#00aadd" d="M 125,0 140,15 140,60 220,100 140,100 140,150 160,170 127,170 127,175 123,175 123,170 90,170 110,150 110,100 30,100 110,60 110,15Z" />
</svg>

<svg viewBox="0 0 250 250" class="avion" style="top:10px;left:180px;">
  <defs>
    <filter id="blur" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="8" />
    </filter>
  </defs>
  <path class="sombra" d="M 100,50 115,65 115,110 195,150 115,150 115,200 135,220 102,220 102,225 98,225 98,220 65,220 85,200 85,150 5,150 85,110 85,65Z" />
  <path class="objeto" fill="#aa0066" d="M 125,0 140,15 140,60 220,100 140,100 140,150 160,170 127,170 127,175 123,175 123,170 90,170 110,150 110,100 30,100 110,60 110,15Z" />
</svg>

Lo que querría es que ambos objetos queden por encima de las sombras. ¿Hay alguna manera de hacer eso? ¿Sería mejor usar otra estrategia (p.e. canvas) en lugar de elementos SVG? ¿O un único SVG con múltiples grupos?

Intenté aplicar estilos CSS directamente en los path para que las sombras se pusieran en una capa inferior (z-index:1) y los objetos en una capa superior (z-index:2). Pero no funcionó.

Pensé en separar la sombra y el objeto en dos SVG, y tener todas las sombras en una sección con un z-index inferior, y todos los objetos en otra sección con un z-index superior. Esto parece sí funcionar, pero no sé si es conveniente (o eficiente) porque entonces tendría que animar el doble de elementos.

3
  • 1
    La verdad es que eso suena a quebradero de cabeza... Se me ocurre que separes las capas por niveles de profundidad en lugar de que cada objeto tenga sus propias capas, pero lo veo bastante complejo y difícil de manejar. Mira algún framework o librería para juegos como Fhaser.io, no la he usado pero he oído que da bastante buen resultado. Si necesitas mucho 'juego' de profundidad y sombras mi recomendación es que te inclines hacia WebGL en lugar de SVG, ThreeJS es bastante sencillo de utilizar, hay muchísima docu y da un rendimiento cojonudo.
    – eledgaar
    Commented el 24 ago. 2016 a las 5:42
  • Me parece que esa va a acabar siendo la solución
    – Alvaro Montoro
    Commented el 24 ago. 2016 a las 11:06
  • @eledgaar, si pones eso como respuesta, la aceptaré como la respuesta válida
    – Alvaro Montoro
    Commented el 29 ago. 2016 a las 11:27

1 respuesta 1

-1

Veo una tarea bastante compleja conseguir eso de la manera que pretendes.

Mi recomendación es que mires algún framework o librería para juegos como Fhaser.io, no la he usado pero he oído que da bastante buen resultado. Si necesitas mucho 'juego' de profundidad y sombras mi recomendación es que te inclines hacia WebGL en lugar de SVG, ThreeJS es bastante sencillo de utilizar, hay muchísima docu y da un rendimiento estupendo, magnífico, excelente.

😉

3
  • @devconcept cojonudo no es una palabra obscena ya que en ningún caso ofende la moral sexual prevalente. En cualquier caso gracias por la edición y sobre todo por el -1 amigo.
    – eledgaar
    Commented el 29 ago. 2016 a las 12:15
  • Yo no fui el que dio el voto negativo. Sólo hice una edición a una palabra que "algunos" podrían considerar obscena. Saludos.
    – devconcept
    Commented el 29 ago. 2016 a las 12:18
  • Ya te doy yo un +1, ya que no creo que fuera una palabra obscena, ademas la respuesta te la han aceptado @eledgaar
    – user9099
    Commented el 29 ago. 2016 a las 12:42

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.