SoftwareRVG
Por
Mazmorra de Cartón es una web basada en la experiencia de rastreo por mazmorras diseñada para su uso con Google Cardboard y escrita utilizando la estructura de realidad virtual de mozilla, A-Frame.
En este estudio, Voy a hablar de los principales desafíos a los que me enfrenté durante el desarrollo de Mazmorra de Cartón, mis experiencias con A-Frame, y algunas de las lecciones que aprendí mientras me aproximaba a la realidad virtual por primera vez.
Primeros pasos con A-Frame
Me encontré con A-Frame buscando un modo fácil de comenzar con el desarrollo de la realidad virtual. A-Frame me atrajo porque encaja naturalmente con los conceptos de desarrollo web a los que estoy acostumbrado. La capacidad de situar entidades dentro de una escena a traves de markup puro es extremadamente potente y ofrece una barrera muy baja de acceso. También ayuda que la Documentación de A-Frame sea clara y concisa – algo que es tan importante para mi porque un desarrollador opta a utilizar código de terceros/librerias.
Honestamente,me sorpendrió lo robusto que es A-Frame . La mayoría de los obstáculos a los que me tuve que enfrentar estaban relacionados con el reto específico del manejo de la realidad virtual.
Construcción de una Mazmorra
Mazmorra de Cartón comenzó como una manera rápida de probar alguna de las características de A-Frame. En lugar de crear por adelantado una mazmorra completa, mi concepto fué tener un número fijo de habitaciones definiendo el area reproducible alrededor del jugador. Esas habitaciones pueden ser reproducidas basandose en datos del archivo JSON . Esto puede reducir el número de entidades dentro de DOM y proporciona una mazmorra extremadamente grande como yo deseaba, con muy poco o ningún impacto en el rendimiento.
Una habitación es sencilla y siempre está compuesta como máximo por cuatro paredes, un suelo, y un techo. Los datos JSON definen cuales de ellos deben ser reproducidos para cada habitación. También opté por un sencillo sistema de parrilla para definir la posición virtual de la habitación – con (0,0,0) siendo el punto de salida de los jugadores.
Inicialmente inyectaba nuevas entidades A-Frame cada vez que el jugador se ponía en movimiento. Sin embargo, hablando con el equipo A-Frame , señalé el componente “visibilidad” . Lo ubiqué inicializando la reproducción de cada espacio por adelantado alternando después el componente “visibilidad” para cada habitación cuando entra el jugador.
// LLamada una vez durante la inicialización de la escena.
Container.prototype.init = function () {
var entity = document.createElement('a-entity');
entity.className = 'top';
entity.setAttribute('mixin','wall top');
entity.setAttribute('visible', 'false');
entity.setAttribute('position', {
x: this.position_multipliers.x,
y: (4 + this.position_multipliers.y),
z: this.position_multipliers.z
});
document.getElementById(this.target).appendChild(entity);
// …
};
// LLamada cuando el jugador inicia el movimiento.
Container.prototype.render = function () {
// establece el componente `visibilidad` en las entidades de este contenedor.
var container = document.getElementById(this.target);
if (this.room) {
setAttributeForClass(container, 'top', 'visible', (this.room.data.top ? this.room.data.top : 'false'));
setAttributeForClass(container, 'bottom', 'visible', (this.room.data.bottom ? this.room.data.bottom : 'false'));
setAttributeForClass(container, 'left', 'visible', (this.room.data.left ? this.room.data.left : 'false'));
setAttributeForClass(container, 'right', 'visible', (this.room.data.right ? this.room.data.right : 'false'));
setAttributeForClass(container, 'back', 'visible', (this.room.data.back ? this.room.data.back : 'false'));
setAttributeForClass(container, 'front', 'visible', (this.room.data.front ? this.room.data.front : 'false'));
}
// …
};
function setAttributeForClass (parent, class_name, attribute, value) {
var elements = parent.getElementsByClassName(class_name);
for (var i = 0; i < elements.length; i++) {
elements[i].setAttribute(attribute, value);
}
}Para comenzar, estuve reproduciendo un área de 3×3 alrededor del jugador pero la aumenté a 3×3×3 para permitir el recorrido oblicuo (transversal-vertical). también lo extendí a 2 cuadrículas en las direcciones norte, sur, este, y oeste para ayudar con la ilusión de la distancia.
https://hacks.mozilla.org/2016/03/building-cardboard-dungeon-with-a-frame/