|
Por qué necesito modificar el Plugin de Unity? Usar el SDK de Decentraland para poner entidades "manualmente" en el código de typescript puede ser un proceso lento y tedioso, especialmente si tienes que colocar muchos de ellos y tienes que comprobar que estén todos en el sitio correcto. Por eso necesitas herramientas que ayuden a construir una escena, como el Decentraland builder o el Unity to DCL export plugin. Aun así, hay ciertos límites sobre lo que puedes hacer con ellos. En esta guía vamos a ver cómo hacer modificaciones al Unity plugin para DCL para expandir el número de cosas que puedes exportar al código de Decentraland desde el editor de Unity. Antes de empezar con la guía deberías tener un mínimo de conocimientos del SDK de Decentraland, cómo exportar una escena desde Unity para DCL y algo de programación (usaremos typescript y C#).
 Preparar el proyecto de Typescript
No es necesario hacer un componente propio para poner un NFTShape (que ya es un componente de por sí), pero para esta guía lo haremos igualmente, además será últil para usarlo como base para tus propios componentes más complejos. Antes de empezar a escribir el código en tu archivo game.ts, ten en cuenta que el plugin de Unity sobreescribe el archivo entero y todo tu código se perderá. Por ello debemos trabajar en un archivo separado. Crea un nuevo archivo en src/imports/components/NFT.ts con el siguiente código: //Crea un componente NFTShape con la información dada export function createNFTComponent(entity: IEntity, smartContract: string, tokenId: string){ entity.addComponent( new NFTShape('ethereum://'+smartContract+'/'+tokenId,Color3.Blue()) ) } //Añade un componente NFTdata a la entidad, crea un componente NFTcon la información dada @Component('NFTdata') export class NFTdata{ entity: IEntity //entidad del NFT smartContract: string //Smart contract del NFT tokenId: string //Token ID del NFT constructor(entity: IEntity, smartContract: string, tokenId: string){ this.entity = entity this.smartContract = smartContract this.tokenId = tokenId createNFTComponent(entity, smartContract, tokenId) } } Crea otro script en src/imports/index.ts con: export { NFTdata, createNFTComponent } from "./components/NFT" Ahora tenemos nuestro código listo para cuando el plugin exporte el game.ts Haz un script de Unity que contenga la información a exportar Crea un script vacío en Unity y ábrelo con Visual Studio (o tu editor de código favorito).  En este ejemplo, solo necesitamos guardar la información del NFT, pero siéntente libre de añadir lo que necesitas para tu propio proyecto. public class nft_script : MonoBehaviour { public string smartContract; public string tokenId; }
Ahora tenemos la información guardada en nuestra entidad, el último paso que falta es traducir estos datos a nuestro proyecto en typsecript. Modificando el plugin de Unity en C# Modificar el plugin puede parecer una tarea muy complicada, pero ten en cuenta que solo necesitamos añadir nuestras pequeñas piezas de código para expandir sus funcionalidades; muy sencillo de hacer si sabes dónde hacerlo. Abre SceneTraverser.cs en la carpeta del plugin de Decentraland: Assets/Decentraland/SceneTraverser.cs Encuentra la función public static ResourceRecorder TraverseAllScene y añade el siguiente código después del comentario //====== Start Traversing ====== //====== Start Traversing ====== if (exportStr != null) { exportStr.AppendLine("import { NFTdata } from \"./imports/index\"\n\n"); } Esto importará nuestra clase NFTdata al inicio de game.ts Después encuentra la función public static void RecursivelyTraverseTransform y después de exportStr.AppendFormat(NewEntityWithName, entityName, tra.name); añade: nft_script nftObject = (tra.gameObject.GetComponent("nft_script") as nft_script); if (nftObject) { exportStr.AppendFormat(SetNFT, entityName, nftObject.smartContract, nftObject.tokenId); } Último paso, encuentra dónde están declaradas las strings de exportación y añade la string del SetNFT al final.  private const string SetNFT = "{0}.addComponent(new NFTdata({0}, \"{1}\", \"{2}\")) \n"; Este código comprobará si la entidad exportada tiene un nft_script y le añadirá el componente NFT data a la entidad dentro de nuestro archivo game.ts. Con todo esto terminado, tu escena está lista para ser exportada a un proyecto de typescript y tu game.ts resultante debería parecerse a esto: import { NFTdata } from "./imports/index" var entity1372n = new Entity("NFTentity") entity1372n.addComponent(new NFTdata(entity1372n, "0x06012c8cf97BEaD5deAe237070F9587f8E7A266d", "558536")) engine.addEntity(entity1372n) entity1372n.addComponent(new Transform({ position: new Vector3(6, 1.5, 6) })) entity1372n.getComponent(Transform).rotation.set(0, 0, 0, 1) entity1372n.getComponent(Transform).scale.set(1, 1, 1) Consejos finales Puedes acceder desde cualquier parte en el proyecto a cualquier array de entidades con tus componentes personalizados, y esto puede ser útil para controlar dónde y cómo algunos componentes o comportamientos empiezan. engine.getEntitiesWithComponent(NFTdata) No necesitas hacer nuevos componentes muy complejos si no lo necesitas, por ejemplo puedes exportar desde Unity solamente la información para añadirle a una entidad en un array y aplicarle un comportamiento personalizado. Antes de empezar a hacer tus propios compontentes, echa un vistazo al sdk de Decentraland y a la librería de utilidades de Decentraland, puede que ya tengan hecho lo que estás buscando. Referencia a la API de ECS: decentraland-ecs-utils: npm install decentraland-ecs-utils Conclusión Si has entendido los pasos de ésta guía, estás list@ para hacer tus propios componentes para Decentraland y poder utilizarlos en el Editor de Unity, y será de gran ayuda para llenar tus escenas con gameplay e interacciones. Espero que te haga el proceso de desarrollo para Decentraland un poquito más fácil.
 Documentación oficial: Librerías e imports al proyecto: Para esto necesitarás instalar en tu proyecto de Typescript la libreria eth-connect para hacer de interfaz con los contratos de Ethereum y poder llamar a sus funciones. npm install eth-connect Además, necesitarás importar las siguientes funciones al archivo: getUserAccount para obtener la dirección de Ethereum del usuario. getProvider para crear una instancia del proveedor web3 a la interfaz de Metamask. Ambos, getUserAccount y getProvider, son proporcionados por el SDK de Decentraland. import { getProvider } from '@decentraland/web3-provider' import { getUserAccount } from '@decentraland/EthereumController' import * as EthConnect from '../node_modules/eth-connect/esm' Para que estas librerías funcionen en la previsualización de DCL en modo localhost, necesitarás pegar &ENABLE_WEB3 a la URL. Ejemplo: http://192.168.0.112:8000/?SCENE_DEBUG_PANEL&position=12%2C44&ENABLE_WEB3 Antes de empezar: Para poder realizar un pago mediante MANA necesitas varias cosas... La dirección de Ethereum a pagar el MANA, esta es la dirección que recibirá el MANA de los pagos de los usuarios: Ejemplo: const PAYMENT_ADDRESS ="0x4tU......8dY" La cantidad de MANA que el usuario pagará. Ejemplo: const MANA_PAYMENT = 10 La dirección del contrato de MANA: const MANA_ADDRESS = "0x0F5D2fB29fb7d3CFeE444a200298f468908cC942" La dirección del contrato de MANA falso (opcional), solo si quieres primero probar transacciones con dinero falso (MANA): const FAKE_MANA_ADDRESS = "0x2a8fd99c19271f4f04b1b7b9c4f7cf264b626edb" MANA contract ABI: Crea un archivo vacío en tu proyecto, "/contracts/mana.ts" y pega el MANA ABI en export const abi, o pega directamente el contenido del siguiente archivo. export const abi = [{"constant":true,"inputs":[],"name":"mintingFinished","outputs":[{"name":"","type":"bool"}],"payable":false,"type":"function"},{"constant":true,"inputs":[],"name":"name","outputs":[{"name":"","type":"string"}],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"_spender","type":"address"},{"name":"_value","type":"uint256"}],"name":"approve","outputs":[{"name":"","type":"bool"}],"payable":false,"type":"function"},{"constant":true,"inputs":[],"name":"totalSupply","outputs":[{"name":"","type":"uint256"}],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"_from","type":"address"},{"name":"_to","type":"address"},{"name":"_value","type":"uint256"}],"name":"transferFrom","outputs":[{"name":"","type":"bool"}],"payable":false,"type":"function"},{"constant":true,"inputs":[],"name":"decimals","outputs":[{"name":"","type":"uint8"}],"payable":false,"type":"function"},{"constant":false,"inputs":[],"name":"unpause","outputs":[{"name":"","type":"bool"}],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"_to","type":"address"},{"name":"_amount","type":"uint256"}],"name":"mint","outputs":[{"name":"","type":"bool"}],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"_value","type":"uint256"}],"name":"burn","outputs":[],"payable":false,"type":"function"},{"constant":true,"inputs":[],"name":"paused","outputs":[{"name":"","type":"bool"}],"payable":false,"type":"function"},{"constant":true,"inputs":[{"name":"_owner","type":"address"}],"name":"balanceOf","outputs":[{"name":"balance","type":"uint256"}],"payable":false,"type":"function"},{"constant":false,"inputs":[],"name":"finishMinting","outputs":[{"name":"","type":"bool"}],"payable":false,"type":"function"},{"constant":false,"inputs":[],"name":"pause","outputs":[{"name":"","type":"bool"}],"payable":false,"type":"function"},{"constant":true,"inputs":[],"name":"owner","outputs":[{"name":"","type":"address"}],"payable":false,"type":"function"},{"constant":true,"inputs":[],"name":"symbol","outputs":[{"name":"","type":"string"}],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"_to","type":"address"},{"name":"_value","type":"uint256"}],"name":"transfer","outputs":[{"name":"","type":"bool"}],"payable":false,"type":"function"},{"constant":true,"inputs":[{"name":"_owner","type":"address"},{"name":"_spender","type":"address"}],"name":"allowance","outputs":[{"name":"remaining","type":"uint256"}],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"newOwner","type":"address"}],"name":"transferOwnership","outputs":[],"payable":false,"type":"function"},{"anonymous":false,"inputs":[{"indexed":true,"name":"to","type":"address"},{"indexed":false,"name":"amount","type":"uint256"}],"name":"Mint","type":"event"},{"anonymous":false,"inputs":[],"name":"MintFinished","type":"event"},{"anonymous":false,"inputs":[],"name":"Pause","type":"event"},{"anonymous":false,"inputs":[],"name":"Unpause","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"burner","type":"address"},{"indexed":false,"name":"value","type":"uint256"}],"name":"Burn","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"owner","type":"address"},{"indexed":true,"name":"spender","type":"address"},{"indexed":false,"name":"value","type":"uint256"}],"name":"Approval","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"from","type":"address"},{"indexed":true,"name":"to","type":"address"},{"indexed":false,"name":"value","type":"uint256"}],"name":"Transfer","type":"event"} Contrato de MANA ABI falso (opcional) export const abi = [ { constant: true, inputs: [], name: 'mintingFinished', outputs: [ { name: '', type: 'bool' } ], payable: false, type: 'function' }, { constant: true, inputs: [], name: 'name', outputs: [ { name: '', type: 'string' } ], payable: false, type: 'function' }, { constant: false, inputs: [ { name: '_spender', type: 'address' }, { name: '_value', type: 'uint256' } ], name: 'approve', outputs: [ { name: '', type: 'bool' } ], payable: false, type: 'function' }, { constant: true, inputs: [], name: 'totalSupply', outputs: [ { name: '', type: 'uint256' } ], payable: false, type: 'function' }, { constant: false, inputs: [ { name: '_from', type: 'address' }, { name: '_to', type: 'address' }, { name: '_value', type: 'uint256' } ], name: 'transferFrom', outputs: [ { name: '', type: 'bool' } ], payable: false, type: 'function' }, { constant: true, inputs: [], name: 'decimals', outputs: [ { name: '', type: 'uint8' } ], payable: false, type: 'function' }, { constant: false, inputs: [], name: 'unpause', outputs: [ { name: '', type: 'bool' } ], payable: false, type: 'function' }, { constant: false, inputs: [ { name: '_to', type: 'address' }, { name: '_amount', type: 'uint256' } ], name: 'mint', outputs: [ { name: '', type: 'bool' } ], payable: false, type: 'function' }, { constant: false, inputs: [ { name: '_value', type: 'uint256' } ], name: 'burn', outputs: [], payable: false, type: 'function' }, { constant: true, inputs: [], name: 'paused', outputs: [ { name: '', type: 'bool' } ], payable: false, type: 'function' }, { constant: true, inputs: [ { name: '_owner', type: 'address' } ], name: 'balanceOf', outputs: [ { name: 'balance', type: 'uint256' } ], payable: false, type: 'function' }, { constant: false, inputs: [], name: 'finishMinting', outputs: [ { name: '', type: 'bool' } ], payable: false, type: 'function' }, { constant: false, inputs: [], name: 'pause', outputs: [ { name: '', type: 'bool' } ], payable: false, type: 'function' }, { constant: true, inputs: [], name: 'owner', outputs: [ { name: '', type: 'address' } ], payable: false, type: 'function' }, { constant: true, inputs: [], name: 'symbol', outputs: [ { name: '', type: 'string' } ], payable: false, type: 'function' }, { constant: false, inputs: [ { name: '_to', type: 'address' }, { name: '_value', type: 'uint256' } ], name: 'transfer', outputs: [ { name: '', type: 'bool' } ], payable: false, type: 'function' }, { constant: true, inputs: [ { name: '_owner', type: 'address' }, { name: '_spender', type: 'address' } ], name: 'allowance', outputs: [ { name: 'remaining', type: 'uint256' } ], payable: false, type: 'function' }, { constant: false, inputs: [ { name: 'to', type: 'address' }, { name: 'amount', type: 'uint256' } ], name: 'setBalance', outputs: [], payable: false, type: 'function' }, { constant: false, inputs: [ { name: 'newOwner', type: 'address' } ], name: 'transferOwnership', outputs: [], payable: false, type: 'function' }, { anonymous: false, inputs: [ { indexed: true, name: 'to', type: 'address' }, { indexed: false, name: 'amount', type: 'uint256' } ], name: 'Mint', type: 'event' }, { anonymous: false, inputs: [], name: 'MintFinished', type: 'event' }, { anonymous: false, inputs: [], name: 'Pause', type: 'event' }, { anonymous: false, inputs: [], name: 'Unpause', type: 'event' }, { anonymous: false, inputs: [ { indexed: true, name: 'burner', type: 'address' }, { indexed: false, name: 'value', type: 'uint256' } ], name: 'Burn', type: 'event' }, { anonymous: false, inputs: [ { indexed: true, name: 'owner', type: 'address' }, { indexed: true, name: 'spender', type: 'address' }, { indexed: false, name: 'value', type: 'uint256' } ], name: 'Approval', type: 'event' }, { anonymous: false, inputs: [ { indexed: true, name: 'from', type: 'address' }, { indexed: true, name: 'to', type: 'address' }, { indexed: false, name: 'value', type: 'uint256' } ], name: 'Transfer', type: 'event' } ] Código Ahora que ya tenemos recopilada toda la información y las librerías instaladas es hora de desarrollar el código. Importa las funciones que necesites al principio del archivo. import { getProvider } from '@decentraland/web3-provider' import { getUserAccount } from '@decentraland/EthereumController' import * as EthConnect from '../node_modules/eth-connect/esm' Importa el MANA ABI (o el falso MANA ABI para hacer pruebas) import { abi } from './contracts/mana' Ahora ya puedes crear una función de pago y llamarla a uso cuando quieras hacer que el usuario realice la transacción. const PAYMENT_ADDRESS ="0x4tU......8dY" const MANA_ADDRESS = "0x0F5D2fB29fb7d3CFeE444a200298f468908cC942" const MANA_PAYMENT = 10 function payment(callback = function(error?, result?){}) { executeTask(async () => { try { const provider = await getProvider() const requestManager = new EthConnect.RequestManager(provider) const factory = new EthConnect.ContractFactory(requestManager, abi) const contract = (await factory.at( MANA_ADDRESS )) as any const address = await getUserAccount() const res = await contract.transfer( PAYMENT_ADDRESS, MANA_PAYMENT*1000000000000000000, { from: address } ) } catch (error) { callback(error) log(error.toString()) } }) Cuando esta función es llamada, Metamask abrirá una ventana emergente pidiendo la confirmación del pago, si ocurriere algun problema con el pago, durante el pago, o el usuario rechazara este pago, la función payment() capturara un error. Si lo deseas puedes poner tu propia función para gestionar el error. payment(function(error, result){ if (!error) { //Payment success } else{ //Payment fail } }) Pruebas con pagos mediante MANA falso
Por último, necesitas cambiar la dirección de contrato de MANA colocada en el código al igual que cambiar el MANA ABI por los falsos. import { abi } from './contracts/fakemana' const MANA_ADDRESS = "0x2a8fd99c19271f4f04b1b7b9c4f7cf264b626edb" Con estos cambios las pruebas en los pagos de MANA se harán bajo la Ropsten Test Network, y se enviarán a la PAYMENT_ADDRESS de la misma red también.  Con el lanzamiento al público de Decentraland, se me dio el block out de la escena, en la cual estaba encargado de reorganizar y texturizar basandome en el moodboard para Sometimes a Thousand Twangling instruments (SaTTi, a partir de ahora).  En la parte de Decentraland de SaTTi consiste en una serie de banners donde puedes cambiar los sonidos que se reproducen (los cuales se generan a partir de los dibujos), y eso cambiara la "música" dependiendo de donde pares los banners y donde estés, haciendo que el sonido se superponga de diferentes maneras y haciendo que los sonido provengan desde direcciones diferentes.  Tras ver el moodboard y sabiendo de que trataba el proyecto, y porque la fecha de entrega estaba muy cerca, decidí tomar el mismo enfoque que con las texturas: generadores de capas, alfas, y otros elementos que ya existían en Painter, para crear las texturas necesarias.
Los suelos
Este es el grupo de rellenos, filtros y generadores que use para crear el aspecto deseado. No compartiré los ajustes exactos porque el punto es llegar hasta la razón de porque los he usado.
  Los Hexágonos
Las pulidas Decide trabajar estas texturas como como un grupo de diferentes capas, en lugar de usar múltiples filtros en una sola capa, así contaba con más flexibilidad para crear variaciones, y especialmente para controlar las diferentes opacidades de los canales en cada capa. Así estas son las capas con las opciones que use para esto:
 Los orgánicos De nuevo, ataje usando un grupo de capas. Estas son las capas y la opciones que use para esto:
 Conclusión No todas las texturas hechas no fueron utilizadas al final, pero sirvieron para explorar la estética de la parcela y siempre podemos usarla en caso de querer actualizar la escena o desarrollar su aspecto visual más allá.  Obsidian  Carbon  Floors  Rocks El hecho de que usáramos Painter para hacer las texturas significa que podemos exportar las texturas en 4K y cambiar el tamaño para que se ajuste a las limitaciones de Decentraland ( max Resolución 512x512 por textura). Cada una de las texturas tenia más de tres variaciones hechas, cambiando la opacidad, opciones de blending, generadores y efectos te permite generar variantes muy fácilmente cuando tienes prisa. Premisa El 20 de febrero Decentraland fue abierta al público. Para aquellos que no lo sepan, Decentraland es un mundo virtual que se apoya en el blockchain de Ethereum donde su comunidad define la utilidad y la estética de sus parcelas, creando una relación innovadora y dinámica entre propietarios y visitantes. Bajo esta premisa, el único límite es la imaginación. Tuvimos la oportunidad de formar parte del desarrollo del contenido de varias parcelas antes del lanzamiento, desde aventuras laberínticas y arte experimental sonora hasta galerías de arte, jardines e incluso un sistema de transporte. Darle forma al futuro del transporte virtual, hoy os enseñamos como creamos el Trail Transit System en el sur de Decentraland de inicio a fin, el día anterior al lanzamiento. 
Antes de empezar Para este workflow, en Polygonal Mind hemos usado un plugin para Unity que puedes encontrar en GitHub [https://github.com/fairwood/DecentralandUnityPlugin/]. Este plugin nos ha permitido trabajar de forma nativa en Unity, componer y crear los escenarios sin tocar demasiado código. Es importante recalcar que no hemos usado exactamente la misma versión que puedes descargar en el link de arriba, el plugin ha sido modificado para sacarle todo el partido en nuestro caso particular y para nuestras necesidades, mejorando su rendimiento y dejándolo listo para el motor gráfico de DCL.  Vista del proyecto dentro del Editor de Unity. Cada proyecto requiere un acercamiento distinto y una pipeline de producción diferente, es por eso que el plugin fue modificado conforme nos fuimos encontrando con distintos desafíos y problemas técnicos, principalmente relacionados con el rendimiento una vez deployeados en Decentraland. #00 - Conceptos básicos de un sistema de transporte
 Tan pronto como empezamos a definir sobre papel todo el trabajo que teníamos que hacer decidimos inclinarnos por hacer que todo el entorno fuera una estructura megalítica con un ascensor al que se podía acceder desde el suelo. El problema del tren girando a la hora de volver fue solucionado teniendo dos vagones yendo en direcciones opuestas para evitar tener que esperar demasiado tiempo a un tren. Esto creaba un problema visual y de diseño: necesitábamos 4 plataformas por nivel y estos niveles debían estar conectados, para que el usuario pudiera subir libremente por toda la estructura.  Hice una mood board visual y la propuse para basar todo el aspecto visual para poder empezar con los primeros diseños. Para el estilo artístico me inspiré mucho en los entornos y diseño artístico de Bioshock, y en el sistema de transporte de Fallout 4. Ambos juegos tienen una influencia muy grande en el retrofuturismo, pero apoyándose en distintos estilos artísticos. Bioshock* tiene unos preciosos entornos, muy influenciados por el art-deco, mezclados con entornos monumentalisticos de hierro forjado. Respecto a Fallout 4**, tiene un mundo muy bien construido basado en un futurismo desde los ojos de la gente en los 50 y los 60, lleno de detalles.
Bioshock hace un uso magistral del canal metálico en sus entornos y esto fue algo decisivo como inspiración para mí cuando decidimos tomar nuestra propia aproximación al entorno art-deco. Una vez los límites del arte fueron establecidos, pudimos empezar a trabajar. Vamos a hacer el desglose de cómo se crearon los assets, empezando por la primera versión del tren, el que va encima del rail; seguido del disñeo de la estación y su integración con su entorno. Y por último pero no menos importante enseñaremos la iteración con el segundo tren, el situado bajo el rail. *Bioshock, desarrollado por 2K Boston / Irrational Games y publicado por Take Two. **Fallout 4, desaroolado por Bethesda Game Studios y publicado por Bethesda Softworks. #01 El tren: dándole forma al vagón virtual Para un terreno de 55 parcelas the Scene Limitations were pretty high for a environment that was basically a train system so we decided to go for a high-polygon mesh level of detail instead of a more blocky low-res shape resolution. The limits were a maximum of 550k tris, 116 materials and 58 textures (512 square max) to be implemented along the scene. El diseño resultante que salió basado en una sola imagen encajaba perfectamente en la idea que llevábamos para el "feeling" del entorno, pero nos salió el tiro por la culata durnate el desarrollo por ser una imagen dibujada a mano, sin referencia real y con perspectiva forzada de una vista del futuro durante los años 50.
Así como el diseño iba avanzando, los problemas empezaron a manifestarse en la zona de la rueda (porque deformaba la estructura principal) y cómo el tren se iba a mover en el raíl. Esto llevó a cambiar el diseño, favoreciendo una cubierta para la rueda más gande y más suavizada, y un raíl también más ancho que se adaptaba a una rueda nueva, también más ancha.
Si vamos al interior, se puede observar que el diseño del vagón está basado en concepts de los años 50 y el uso del contraste entre madera y hierro. Lo más complicado fue darle "controles" al tren, lo que queire decir que hacía falta incluir un pane lde mandos o algo similar, con palancas y botones.
El diseño de materiales consiste en utilizar principalmente dos materiales, uno para el exterior y otro para los props del interior, y uno extra para el emisivo que tenía el panel de control. De nuevo la falta de contenido dado que las parcelas iban a funcionar como un sistema de transporte significaba que podíamos dedicarle más mimo, detalle y recursos, con el límite de las texturas de 512x512 px. Tras unas cuantas iteraciones teníamos nuestro primer modelo del tren viajando por el rail y listo para hacer las primeras pruebas. #02 La estación: un balance entre composición y utilidad Como hemos dicho antes, la estación tenía que tener dos niveles de plataformas: una a 16 metros con conexiones a ambos lados de la parcela y otra a la altura de 32 metros. Todas las plataformas tenían que estar conectadas de uan forma u otra para ser jugable para los jugadores y debía ser sencillo girar hacia el lado contrario en caso de que te hubieras pasado una parada, como en un sistema de metro real. Además, desde un punto de vista artístico, la idea era evitar en la medidad de lo posible el uso de escaleras o caminos largos para poder encajarlo con la visión más mecánica y futurista de lo que un transporte debería ser que teníamos. Tomando los entornos de Bioshock y concept art como ejemplo en materiales y composición, empecé a hacer los primeros esbozos de la forma que tendría la estación. Empecé a definir el diseño del ascensor, basado en cómo Bioshock hace uso del art-deco mezclado con steampunk para sus ascensores. Decidí seguir un diseño similar desde 0 hasta el look final del modelo. El diseño terminó siendo de concepto abierto y sin apredes, para evitar la claustrofobia y que sirviera como un punto de referencia en detalle de modelo y material.  Pantallazo durante el gameplay. Bioshock (2006) es un juego desarrollado por 2K Boston y publicado por Take Two.
 El texto original antes de transpasarlo al normal map. Desde el principio quise hacer un sistema de apertura y cierre mecánico para el asvensor así que empecé a planificar cómo iba a ser la animación. Tuve que tener en cuenta dónde tenían que estar los pivotes y como tenía que ser la jerarquía para que la animación se realice correctamente.  Una vez el ascensor estaba terminado y situado en su posición final, se colocó la carcasa alrededor para permitir el acceso al ascensor. Los andenes empezaban a tomar forma. Empezamos el desarrollo de los andenes con idea de cómo iban a funcionar desde un punto de vista jugable, así que era crucial diseñar cómo la estación iba a ser jugada y experienciada por el jugador primero. Así que hice un level design o graybox definiendo los límites jugables y anticipando la parte visual que vendría después y todos los problemas que podrían venir después, y así es como encontramos y lidiamos con los problemas de conexión que había entre el suelo y el andén de 16 metros, así como otros problemas que complicaban la integración visual de todo el set.
Siguiendo la idea original, el concepto era subir al usuario del andén de 16 metros al de 32 con un ascensor situado encima del andén superior. Esto nos hizo darnos cuenta de todos los problemas de integración visual y de gameplay y decidimos descartarlo rápidamente porque sobrecargaba la escena de polígonos. En su lugar, encontramos la solución en una plataforma entre los dos andenes principales.
Con los últimos retoques era hora de pintar y diseñar sus materiales. Me decidí por usar texturas tileables seamless para los objetos más grandes, porque me daría más control de los detalles. Para los andenes y el ascensor, hice sus UVs y lo empaqueté en un atlas, maximizando el control sobre el detalle y mejorando los resultados del apartado gráfico. También nos aprovechamos del canal de metalness/smoothness para que el entorno brillase de forma natural.
 Los normal maps ayudan un montón a darle un detalle muy definido a una estructura muy grande. #03 El segundo tren: Reinventando el mismo concepto Cuando las estaciones estaban colocadas y funcionando, era hora de incorporar un segundo tren al rail. Este diseño estaba planeado para estar colgado del mismo rail que el vagón original pero con modificaciones claramente aparentes. La principal limitación para remodelar el exterior fue mantener las UVs para no tener que rehacer el texturizado, porque ambos trenes usan los mismos materiales.
 El diseño final antes de aplicarle el material  El modelo final en el editor de Unity. #04 Límites en los materiales y optimización de assets Los trenes estaban acabados y colocados en su sitio, las estaciones estaban en su posición final y los primeros tests daban buenos resultados, porque para este proyecto decidimos usar una aproximación por prefabs, y A. Picazo, nuestro programador, sugirió e implementó algunas modificaciones al plugin para reconocer las mismas meshes e instanciarlos en lugar de exportar cada uno de ellos individualmente como GLTFs diferentes.  Utilizamos un único modelo de roca y lo reusamos constantemente cambiando la rotación y la escala para hacerlo parecer único. Lo mismo para las estaciones, pues el GLTF de la estación sólo carga una vez y se copia en runtime 3 veces. El rendimiento en general mejoró muchísimo y era hora entonces de recortar un poco en el campo de las texturas, no porque realmente fuera necesario, sino porque siempre es buena idea revisitar el trabajo realizado y mejorar o borrar archivos irrelevantes. Conforme fui adentrándome más en la relación entre uso de textura y resultado final concluí que el Normal map no era realmente necesario para darle el look que buscábamos. Es porque el ambient light de Decentraland MATA este tipo de microdetalle y la luz direccional no ayuda realmente en estas situaciones. Así que los normal maps fueron eliminados de todos los materiales que no necesitasen simular información de bump.  Los normal maps de microdetalles como el suelo y la suciedad fueron eliminados porque cualquier impacto que tuvieran era dejado al mínimo por el ambient light I must say, that one thing that really helped the graphical level we accomplished in this scene was the use of the metallic/smoothness channel, as it meant a discrete type of shinning without being visually invasive as it is the glow channel.
Packing ORM de Texturas y Decentraland Decentraland recomienda la optimización de texturas usando texutras RGB empaquetadas como ORM (Occlusion, Roughness, Metalness). Es una buena idea cuando trabajas con un workflow PBR pero para este proyecto evitamos usar Ambient Occlusion y en cambio lo bakeamos en el albedo, con un modo de fusión Multiplicar. Más info de este tipo de texturas se puede encontrar en la documentación de Khronos Group: Creando Colliders Los colliders en Decentraland se crean superponiendo una malla en el modelo que quieras que tenga colisión y añadiéndole el sufijo "_collider" (en minúscula, MUY IMPORTANTE) al nombre de la mesh que quieras usar de collider. Es importante no tener el mismo nombre dos veces en la misma jerarquía o que el padre e hijo con el mismo nombre haría que el GLTF export crashee. La jerarquía y las convenciones de nombramiento (naming conventions) son muy importantes. En cuanto a rendimiento se refiere, recomiendo usar una versión low-res de la malla cuando se cree el collider porque Decentraland crea Mesh Colliders basados en la malla con el sufijo que comento antes. Si eres familiar con Unity, sabrás que los Mesh Colliders no son lo más adecuado para escenas complejas y lo mejor es evitar colliders con formas muy complejas e intentar hacer sus boundaries.
Problemas básicos al usar el wokflow de Unity Decentraland corre en una versión modificada del motor de Unity con modificaciones centradas en sus actuales y futuras características de la plataforma. Esto es algo bueno porque puedes ver cómo está quedando tu proyecto en tiempo real dentro de Unity, y lo parecido que quedará una vez deployeado. Aunque hay diferencias visuales significativas por el Ambient Light y Directional Light dentro de Decentraland. A pesar de la mejora de eficiencia, hacerlo significa que trabajar con el editor de Unity haya dos limitaciones a tener en cuenta. La mayor parte de los componentes no se exportarán por el formato GLTF y por ello no se verán tras el deploy: sistemas de partículas, luces, cámaras, componentes 2d, colliders y vfx no funcionarán. Los GTLFs solo te dejan tener los mesh renderer, materiales y un Animator con funcionalidad limitada. A tener en cuenta es que el eje X en Unity está flippeado y puede dar lugar a colocar cosas fuera de lugar, porque DCL n otiene el eje invertido. X = -X Además, el exporter no se lleva bien con escenas muy grandes y puede hacer que el editor se ralentice. Lo recomendable con escenas grandes es tener plugin de DCL escondido mientras se edita y abrirlo para evaluar las entidades y tener en mente si te estás saliendo de los límites de la parcela. #05 Fondos Tan pronto como las estaciones principales estuvieron colocadas en su sitio y el transporte era funcional, era hora de desarollar los alrededores del suelo. Me decidí por algo casi desértico, sin plantas, porque quería evitar a toda costa pasarme con los polígonos y quería mejorar el detalle de la experiencia del tren, y no empeorarla.
 Esto fue lo que decidimos hacer, el entorno rocoso fue detallado con algunas áreas de descanso y tuberías decorando los caminos. Las áreas de descanso reusan las texturas de los props de la estación. Se crearon 3 materiales más para la suciedad, las rocas y las estructuras de cristal. #06 Arreglos finales Durante la parte final del desarrollo y con el lanzamiento de Decentraland a la vuelta de la esquina, KnownOrigin decidió ser el anfitrión del art que se expondría en las estructuras para ser visto por el público. Un numero limitado de piezas fueron seleccionadas para ponerlas a lo largo del rail, permitiendo que fueran vistas mientras se viaja en el tren de una estación a otra y mientras se espera al tren.
#07 Conclusión Este entorno fue un desafío enorme para el equipo, porque necesitábamos desarollar un sistema personalizado para que le tren se moviera y se parara en todas las paradas. Todas mis fleicitaciones a A. Picazo por conseguir que quede así de bonito. Para mí, que fui quien estuvo a cargo de todo el entorno, significó mucho porque pude darle vida a un diseño genial basado en dos juegos y un estilo artístico que me encantan. Además hubo bajas limitaciones en cuanto al apartado gráfico porque acabamos reusando muchos assets, eso sí, sin hacer la composición aburrida o repetitiva. Esto me dio la libertad de mejorar la apareciencia añadiendo geometría y acercándome a un diseño de materiales realistas, dándole un toque extra de detalles a una plataforma en la que reina el flat-shading y el low-poly en los entornos como es Decentraland.
La idea
Cuando empezamos a esbozar el proyecto ya teníamos claras algunas las bases: sensación de juego arcade, fácil de jugar pero difícil de dominar... varios juegos que encajaban ese espíritu eran los clásicos de Nintendo como Zelda y Super Mario.
Nos decantamos por un estilo de jugabilidad en concreto que se encontraba en The Legend of Zelda: Majora's Mask, basándonos en un nivel en concreto anotamos varias ideas que podríamos simular en Decentraland.
Limitaciones en Decentraland
En otros artículos hemos hablado de las limitaciones que nos encontramos en Decentraland, normalmente cuanto más simple sea la forma menor la probabilidad será de encontrarnos defectos en su render.
De todas formas, en Tomb Chaser queríamos dar un aspecto megalítico, de forma que podíamos jugar mejor enrevesando la forma y la distribución de los espacios. Esta principal característica la tuvimos en cuenta a la hora de determinar el flujo de trabajo del proyecto. Desarrollamos para la plataforma usando Unity, de esta forma las composiciones pueden ser fácilmente diseñadas y tener una aproximación bastante certera de como se verá en futuras pruebas y demostraciones previas a su forma final. El plugin DCL Export que usamos nos ayuda a transformar toda la información y metadata de Unity al formato GTLF listo para Decentrlaand. En busca de acelerar el proceso de creación hacemos uso de los Unity Prefabs, ya preparados para tener colisiones en la plataforma. Durante el proceso mediante prueba-error pudimos aprender con más profundidad cómo interactuaba el motor con nuestros assets. Por ejemplo, los GTLFs están preparados para pesar poco y suponer poca carga de procesado en comparación a otros formatos estándar como .fbx/.obj/.dae ... pero por otra parte suponen otras restricciones como su imposibilidad para transportar información de luces u otros componentes más allá de forma de malla, asignación de materiales y animación de transformaciones. Una vez dentro de Decentraland, tenemos otros impedimentos visuales como una acusada intensidad de luz ambiental añadida a la luz direccional que, obviamente, funciona one sided con las mallas en escena. En Decentraland lo más difícil es que algo quede oscuro.
El diseño del suelo
Para diseñar un laberinto has de pensar en su principio y su final, el camino que los conecta y luego añadir todo lo demás. De los puntos positivos de trabajar en una LAND tan grande para este proyecto fue su gran extendida altura máxima.
Decentraland hace cálculos para determinar tus limitaciones según el número de LANDs que estés haciendo uso en el proyecto, la fórmula es la siguiente: log2(n+1) x 20
Donde n representa al número de parcelas.
Puedes encontrar más información siguiendo los siguiente enlaces:
Una tierra como esta de 25 parcelas suponía tener a nuestra disposición 94 metros de altura, esto nos daba amplia libertad para crear diferentes alturas con diferentes recorridos y diseños.
Con estas amplias restricciones decidimos dedicar cada planta a un estilo de jugabilidad, algunas dedicadas a eventos de habilidad, correr o agilidad visual. Por ejemplo, la primera zona se basaba en la velocidad y la segunda en los reflejos que tenia el jugador para poder avanzar sin perder al fantasma.
Creación de las texturas
Cuando ya tuvimos el diseño general, era hora de pensar en su aspecto visual y la creación de las consecuentes texturas. Decentraland tiene una limitación de 512px por textura creada. El número que puedes hacer uso también esta delimitado según la cantidad de parcelas que forman parte de tu estado.
Para ponerlo en perspectiva, un material PBR básico hace uso de 3 texturas RGB+A mínimo: Albedo/Transparency (RGBA) map, Normal (RGB) map and Metallic/Smoothness/Occlusion map (RGBA). Para su desarrollo hicimos uso de dos técnicas de optimización de texturas: el uso de Trim Textures y Tileable Textures, ambas desgranamos a continuación.
Mediante el uso de este tipo de texturas no deberías encontrar ningún problema visual más allá de los mencionados. El principal enemigo de las tileable textures son los patrones de formas y colores, que pueden suponer una desmejora visual. Cuanto más neutra sea la composición más fácil será de mimetizarse en grandes superficies.
"Mismo plano, diferente tamaño de textura" En este caso su ampliación en el espacio de las coordenadas UV extendiéndolo del rango 1,1 a 3,3 hace que la densidad de píxeles se acumule y cree una mayor definición de color, también creando el riesgo de que se visibilice claramente el patrón.
Trim Textures (Trim, eng. : Recortar) son similares a las Tileable Textures pero, mientras que las Tileable Textures hacen uso de su repetición extensiva mediante la ampliación de las coordenadas UVs, las Trim Textures hacen gala de "doblarse" sobre si mismas o repetirse la malla en pequeños trozos para crear el efecto de repetición. Esta situación supone un aumento de polígonos para en las UVs doblarse sobre si mismo pero su rendimiento no se ve necesariamente afectado.
Iluminando sin luz: Planos transparentes
Si decides juntar las texturas de las llamas u otros elementos semitransparentes con la información de bits de texturas opacas como la de las columnas, lo más probable es que al marcar el tipo de shader como "Fade" en Unity se generen una serie de defectos visuales no paliables sin acceder al render queue. Como este error es común debido a que las transparencias son lo último en renderizar en un espacio 3D, deberíamos siempre separar los objetos por materiales según si van a hacer uso de transparencias o no.
Ambiente oscuro a plena luz
El nulo control sobre la iluminación en las parcelas de Decentraland no te permite disponer del abanico de herramientas que Unity tiene para crear un ambiente correctamente iluminado, pero siempre hay formas de doblegar el sistema a tu voluntad, o al menos acercarnos lo máximo a nuestra visión de como queremos que sea la mazmorra.
En este proyecto toda la acción se desarrolla en un ambiente cerrado y sin apenas iluminación del exterior, pero la presencia de una luz ambiental tan fuerte lo complica bastante. Primero de todo oscurecemos las texturas, para falsificar esa falta de luz hacemos gala de una capa oscura adicional en modo multiply desde Photoshop. Mediante el uso de materiales emisivos de forma puntual podemos crear esa sensación de iluminación que realmente no existe. Además de las ya mencionadas limitaciones técnicas tenemos que poner en relieve un hecho básico en el desarrollo de entornos 3D: la luz atraviesa normales invertidas (en valor 0). Esto significa que para evitar que la luz entrara en la mazmorra había que colocar un plano oscuro mirando hacia el otro lado para cubrir cualquier posibilidad de que el valor del bias en la luz se colara en los pasillos. 
Sin cobertura / Con un plano cubriendo
Llegados al punto de tener el ambiente oscuro que deseábamos pasamos a añadir los puntos de luz que harán de contraste. Para ello hicimos uso de una forma inteligente y ligera del mapa de emisivos en diferentes assets en escena. De esta forma creábamos una imposición de color sin sacrificios visuales provocados por el post-effect automático de bloom de Decentraland.
Para los detalles finales sobre la luz, en este caso proviniente de una antorcha, deberíamos hacer uso de un mapa definido de emisivo, con zonas delimitadas en negro total para conseguir un mayor control sobre este efecto. Para añadir mayor credibilidad, una animación simple de escala y ligera rotación mediante el motor interno de Unity puede dar el toque realista que eleve el resultado a otro nivel. El uso del motor interno de edición y animación de assets de Unity es la mejor forma para así previsualizar el resultado más aproximado que se verá en Decentraland, pero recuerda que un GTLF solo aceptará la animación de sus transformaciones y nada más. 
Conclusión
Considerando todo lo mencionado anteriormente, este artículo es un gran resumen de cosas que aprendimos y aplicamos durante el desarrollo del entorno. Ha sido una experiencia interesante porque las limitaciones nos llevaron a pensar de forma básica e inteligente formas de sortear todas las limitaciones sin llegar a sacrificar el resultado visual que buscábamos.
¡Una experiencia que me gustaría repetir! Se me encargó el modelado y texturizado del exterior de nuestro juego para Decentraland 'Tomb Chaser', así que pensé que este sería un buen ejemplo para probar en producción y, aprovechando para matar dos pájaros de un tiro, mostrar una de las técnicas que aprendí hace unos meses.
 Planeando Lo primero que tenemos que hacer es planear cómo vamos a hacer nuestra Trim Texture. Porque una textura solo puede ser de proporciones 1:1 (en realidad no, pero para este ejemplo lo haremos así), así que vamos a crear un plano 1:1.  Vamos a dividirlo en diferentes secciones. Es más una guía sobre cómo creemos que podremos aprovechar cada pixel de la textura, pero como esto se puede cambiar después, vamos a hacer algo que funcione por ahora.  Después separamos cada sección para que sea su propia malla.  Esculpiendo Vamos a importar nuestro plano a Zbrush y empezaremos a separar todas las secciones que tendremos.  Ahora separamos los diferentes ladrillos que queremos.
 Debería quedar algo similar a esto una vez que hayamos hecho los detalles. Puedes aprovecharte del alpha, pinceles y booleanos y otros trucos para hacer este proceso más rápidamente. Una vez terminado, ¡podemos pasar al bake! Baking Puedes usar xNormal, Marmoset o incluso Painter para bakear tu modelo high-poly a un modelo low-poly. Asegúrate que usas un plano que tenga todo el espacio de las UVs desde U(0,1)-V(0,1) en uso para una máxima eficiencia.  Texturizar Si bakeaste en Painter, podrás empezar a pintar directamente. Si has usado otro software puedes importar tus bakes en Painter y después texturizar a tu gusto! Se consciente del estilo y tipo de Trim que estás haciendo. No es lo mismo hacer algo estilizado que algo realista (aunque esto no debería notarse en el proceso de esculpido), pero cosas como la suciedad, las grietas y los detalles de la superficie dependen mucho del estilo que estés buscando. Es un proceso de capas e intentar obtener la cantidad de detalle donde importa.  Así es como queda para mí después de texturizar. Cabe señalar que después de la implementación decidimos que era muy soso y realista, así que mi compañera Laura lo cambió un poco para hacerlo más saturado y colorido. Después de acabar esto, lo exportamos y comenzamos a hacer el exterior y algunos props con esta textura.   Conclusión Crear Trim Textures es un proceso simple y permite un nivel de detalle que es muy difícil adquirir con otras técnicas de texturizado como desenvolver cada isla de UV por separado. Espero que hayas aprendido algo nuevo hoy y puedas implementarlo en tu método de trabajo. Nos vemos por aquí! :)
Trim... ¿Qué? Tile... ¿Quién? Lo primero es lo primero, ¿qué son las texturas tileables? Una textura tileable, también conocida como textura seamless (sin bordes), es una textura que puede ser repetida a través de una malla sin que los bordes sean notados por la persona que los mira. Como puedes ver, puedo expandirlo o contraerlo tanto como quiera sin que se note visualmente la junta entre las repeticiones.  Aquí tenemos el mismo ejemplo con una textura no tileable. Mucho peor, ¿verdad?  Cuanto más tileable o repetido, más aparente se hace la repetición. Las texturas tileables funcionan mejor cuando se mezclan con otras texturas tileables a través de "vertex painting" o "heigh blends" para enmascarar esas marcas que nos hacen saber que... ¡Ahí, ahí está el patrón!  *Imagen de Arif Pribadi ([https://www.facebook.com/arifcreations](https://www.facebook.com/arifcreations) & [http://arifcreations.com/](http://arifcreations.com/blog/))* Las trim textures, también conocidas como trimsheets, son texturas compuestas de múltiples mini texturas, tileables o no, algo similar al Atlas o Tileset (para los que recordáis cómo se trabajaba en RPG Maker :D).  *Imagen de Keegan Keene ([https://www.artstation.com/silver593](https://www.artstation.com/silver593) & [https://twitter.com/silver593](https://twitter.com/silver593))*  *Imagen de Keegan Keene ([https://www.artstation.com/silver593](https://www.artstation.com/silver593) & [https://twitter.com/silver593](https://twitter.com/silver593))* ¿Para qué es útil? Para reducir el tiempo de texturizar un área general y mantenerlo consistente. Imagina un templo de la franquicia de Uncharted o God Of War 2018: es necesario mantener una cohesión y conectividad entre todos los ornamentos y motivos a través del edificio.  *Imagen de Megan Parks ([https://www.artstation.com/megific](https://www.artstation.com/megific))* Las trim textures son especialmente útiles para los PBR (Physically Based Rendering), donde no importa que haya superposicionamientos en las UVs del modelo final. Reutilizar trim textures es una manera super rápida y segura de crear variaciones de texturas y usarlas de diferentes formas. Por ejemplo, el mismo trim puede ser usado para texturizar props o el edificio entero.
Imagen de Polygon Academy (Tim Simpson) (https://www.polygon-academy.com/, https://twitter.com/polygon_academy & https://www.youtube.com/channel/UCGXr6E_g91ue1rfhA9j4TLA) Metodología general Este método de texturizado depende mucho de cómo desenvuelvas (unwrap) tu malla y de cómo la trim texture esté dispuesta. Puede bien planear las texturas antes de modelar, o al revés. Necesitaremos un plan en cualquier caso, porque ambos afectan al siguiente paso.  Vamos a reusar las texturas del exterior de la pirámide de Tomb Chaser para hacer una simple columna que puede ser reusada en el interior. Este es el trim texture usado para embellecer todo el exterior. Sí, ¡es todo un único material!  Vamos a hacer una columna dividida en secciones y verás cómo de rápido puedes cambiar el diseño una vez tengamos la geometría, simplemente intercambiando las UVs de alrededor.  Esta será nuestra columna. Como puedes ver, tiene muchas secciones bien diferenciadas que serán asignadas a diferentes partes de la textura. Cortamos las secciones en las UVs, justo donde cambian de una sección a otra.
¿Ves cómo los cilindros se desenvuelven en una moda lineal? esto es clave a la hora de sacarle toda la ventaja al espacio de la textura y los patrones a través del modelo.  Después de esto podemos empezar a modificar las UVs para encajarlas en las secciones de la trim texture.  Una vez hecho, crear variaciones es realmente fácil. Tan solo necesitamos mover las UV Shells a otras secciones recortadas.  Conclusión Podemos crear variaciones con la misma geometría y la misma textura, solo modificando las UVs de la malla. También podemos hacer variaciones de la textura y se aplicarán automáticamente a las UVs de la malla con diferentes colores o patrones, siempre que dejes la separación del patrón consistente.  ¡Espero que hayas aprendido algo nuevo hoy! Nos vemos :)
 #01 Primeros pasos: entendiendo tu plataforma, Decentraland Cuando se desarrolla para una plataforma en específico, se tiene la ventaja de saber qué puedes y no puedes hacer. De esa forma tienes una idea como para empezar a pensar qué te permitirá hacer el motor de forma rápida y empezar a pensar en trucos para solucionar los problemas que saldrán al empezar la producción. Decentraland (DCL desde ahora) es una plataforma que intenta crear un mundo digital 3D cuyos propietarios son los propios usuario, sólamente limitado por (aparentemente) unas pocas limitaciones técnicas y que se apoya en la tecnología del blockchain. Debo añadir que el motor de la plataforma está todavía en desarrollo y puede cambiar conforme se acerque la fecha del lanzamiento final. Aunque esta documentación es escasa cuando se trata de explicar cómo trabajar con escenarios 3D y no queda claro cómo funciona el motor, los artistas puedes intuir cómo sus creaciones se comportarán sabiendo que Decentraland usa Unity como base. Su guía de "publishing-tech-constrains" está ahí para tenerla en cuenta, >>Link<<, pero hay algo que Unity adora cuando renderizas tu escena: déjala lo más simplificada que puedas y reduce el número de drawcalls al mínimo. No entres en pánico si tu escena tiene una cantidad enorme de drawcalls, DCL renderizará tu escena haciéndolo de la mejor forma posible para el motor y reducirá el tiempo que tu creación está en pantalla. Estos son los puntos más importantes de DCL:
DCL no funciona con extensiones de archivo comunes (.fbx, .obj, ...) y en su lugar utiliza la extensión .gltf donde todos los datos están guardados y comprimidos para que el motor lo coloque en la escena. Documentación oficial de DCL para este problema: #02 Diluyendo los límites de DCL, atlas packing A privera vista puede parecer que DCL sea bastante restrictivo con la cantidad y tamaño de texturas permitidas, pero con reutilización, reconversión y un poquito de creatividad puedes lograr resultados geniales a la vez que reduces el uso de texturas. Por ejemplo, en esta terrorífica torre compuesta por una cantidad elevada de triángulos hemos usado solo 2 texturas para todo el modelo, consiguiendo buenos resultados.  La torre terrorífica como estaba el día 27 de diciembre de 2019. La Base de la torre estaba todavía en desarrollo.
La clave en este tipo de proyectos es trabajar con un Atlas y reusar texturas tileables. Incluso texturas pequeñas pueden tener un gran impacto en tu escena. Una textura de Atlas fue diseñada para todo el "suelo" y el barro, como las escaleras y el jardín. La otra textura fue diseñada para todos los elementos de las casas. Es importante mantener las texturas tan neutrales como sea posible para que no se noten tanto las repeticiones al reusarlas.
En muchos casos, puedes cortar y poner las UVs de forma creativa para usar sólamente una textura y texturizar todo un edificio.
Además, tener en cuenta la proyección de geometría en un espacio de UVs reducido puede dar resultados válidos como cualquier otra ténica. Los texels deben tenerse en cuenta, así que piensa en darle un espacio más grande a las UVs a las zonas que se van a ver más de cerca que a las que el jugador no va a poder ver.
El edificio por supuesto comparte materiales con otros props del escenario, como metal, oro e incluso roca, que están compartidos de forma no exclusiva por todo un área del entorno.  #03 VFX para una plataforma que no soporta VFX Los efectos visuales son un dolor de muelas, un problema y a veces difícil de solucionar, muchas veces ni siquiera se utilizan mientras se desarrolla porque el motor no los soporta. Incluso un poquito de Ambient Occlusion o Bloom pueden matar tus fps en una plataforma de bajos requisitos (e incluso en una de altos requisitos) y DCL no soporta ninguno de esos efectos de post-procesado (excepto el Bloom) así que aquí es cuando hay que ponerse el sombrero de pensar y encontrarse con algunas soluciones creativas para simular Luz Volumétrica, oclusión ambiental y bloom. Por suerte, DCL permitió hace poco utilizar el canal Emisivo en el Standard Shader y con esta característica introdujeron el efecto de bloom en el postprocesado. El bloom es controlado por la Intensidad del valor en el canal emisivo: cuanto más alto sea ese valor de Intensidad, el bloom se hace más grande y más brillante. Para el resto de efectos de post-procesado tendremos que hacer un par de triquiñuelas fáciles. Creamos un set de materiales que utilizamos para ayudarnos a darle un toque bonito a nuestro escenario.  Cada fade fue hecho con un propósito muy específico, pero todos usan la misma textura. Por ejemplo, en el entorno decidimos poner un poco de AO en las esquinas de un edificio blanco porque la luz excesiva de Decentraland mataba cualquier perspectiva o sensación de oclusión ambiental natural.
Otro logro que conseguimos con este escenario era la falsa luz volumétrica, renderizándola suavemente pero dándole a la habitación el "feeling" que estábamos buscando. En este caso usamos el bloom emisivo mezclado con material semitransparente. Como puedes ver, el efecto casi ni se nota pero se aprecia en el contexto gráfico y la composición. El bloom puede ser una espada de doble filo, dándote la oportundiad de mejorar tu composición y hacer algo precioso o básicamente arruinarla completamente.
#04 Pensando de manera creativa La única forma de lograr resultados mejor de los esperados es entender las bases de lo que estás haciendo. Hacer click a una secuencia de botones de una interfaz de usuario para conseguir resultados esperados solo hace que te des de bruces con una pared. Saber qué es lo que está pasando entre bambalinas te permite encontrar soluciones creativas cuando problemas técnicos y bugs visuales aparezcan, porque sabrás lo que son. Hay algo genial sobre trabajar con límites técnicos, y es que te obliga a crear assets que tengan múltiples propósitos. Haz de una roca un ladrillo, y de un ladrillo una puerta, la puerta ahora es una ventana, y luego una viga rota en el techo. Creo que se ve por dónde voy. Hacer una composición de un escenario completo con una textura de 512x512 px es difícil, pero no necesitas una textura de alta resolución o teselación para obtener buenos resultados. Al final la composición y la coherencia visual es lo que define un buen escenario. Hay un montón de juegos preciosos de todos los géneros y direcciones artísticas porque se apoyan en coherencia visual y un entendimiento de los límites técnicos muy profundo, y cómo superarlos para adaptar las ideas del proyecto para la plataforma. Aunque el post esté orientado a una producción de un entorno en la plataforma de Decentraland, todos estos tips pueden ser utilizados para desarrollar para móvil u otras plataformas que hace que los artistas lo pasemos mal con los límites para alcanzar nuestras metas visuales. Hasta la próxima, au revoir!
 #00 - Los principales conceptos del VFX Esta es una de las partes más complicadas de hacer en Decentraland, ya que el motor no admite el uso de partículas o cualquier tipo de efectos. Para afrontar esto, necesitamos descomponer qué efectos queremos crear en sus partes más básicas para ser capaces de recrearlos con las herramientas que tenemos a mano. Al final del proceso obtuvimos una lista de efectos que pudimos hacer mezclando tres conceptos principales, que son: animación, planos de transparencia y formas básicas. Aprendimos que estos simples conceptos mezclados nos permitían recrear una variedad de efectos que parecían difíciles de alcanzar sin un sistema de partículas o efectos. Para cada efecto implementamos estos conceptos. Por ejemplo, para el fuego creamos un gradiente para crear un mapa de transparencia, después, para el destello, animamos los planos con el animador de Unity. Las animaciones no son complejas, tan solo animaciones de escala, rotación y posición. Y, sorprendentemente, obtuvimos una gran variedad de efectos. En este artículo quiero mostrar algunos de ellos. Como el proceso es realmente similar, no voy a indagar en detalles sobre cómo los hicimos. #01 - Efectos posteriores en Decentraland Art Stations (goto)
Tom Chaser (goto)
Momus Collection (goto) Uno de los principales problemas que encontramos es que no podemos animar texturas en el motor de Decentraland. Así que para crear este efecto ponemos múltiples capas una encima de otra. Para las capas superiores otorgamos texturas transparentes del caudal del río y finalmente, animamos la escala desde 0 a 1 en loop para crear la ilusión de que el río fluye. 
 Aquí hemos creado el efecto contrario al de la luz creando un gradiente oscuro en un mapa de transparencia, así podemos crear un ambiente tenebroso en el exterior.  South Transit (goto)
Para crear el efecto del tren, creamos unos planos de luz. Sin embargo, esta vez ponemos el plano en la pista para crear este efecto de brillo.  Estos han sido algunos de los efectos que usamos en las escenas que desarrollamos en Decentraland, usando los principios que sabíamos antes de la plataforma y dándoles una vuelta para mejorar nuestras escenas y darles un extra, porque como ya sabes, el diablo está en los detalles.
 Huesos y Riggeado Lo bueno que tiene este método es que puedes hacerlo y no pasar por Unity para meterlo en Decentraland. Sin embargo, Unity te permite comprobar como quedará el modelo en Decetraland, más o menos. Aquí se riggean los modelos en tu software 3D de preferencia, y exportarlo, si decides no pasar por Unity, puedes exportar el modelo en formato .GLTF usando Blender o el plugin de babylon para Maya. Si lo exportas desde Unity, hay que seguir unos pasos si quieres que funciones perfectamente. 1. Exporta el modelo en formato .FBX con los Keyframes que quieres exportar seleccionados, lo recomendable es exportar todos los clips por separado (iddle, caminado...) y entonces importarlos en Unity. 2. Si está importado correctamente aparecerá en el inspector de esta manera:  3. Ahora crearemos un animator, esto es lo que hace que la animación funcione, puede configurarse de varias maneras y programar diferentes clips en una maya, pero en este caso solo vamos a colocar un clip. Para ello arrastramos la animación a la ventana del animator.  4. Finalmente, colocaremos el modelo en la escena y en el padre, pondremos el animator que acabamos de crear y un skinned mesh renderer con el modelo o una parte del mismo. Todo lo demás tiene que ser el hijo de este para funcionar perfectamente.  Resultado final  Lince en Decentraland Animar en Unity El método explicado anteriormente, funciona muy bien cuando queremos animar modelos complejos u orgánicos para crear NPCs o fauna salvaje. Sin embargo para objetos simples prefiero animarlos en Unity, con la ayuda de la ventana de animación. Para hacerlo tenemos que seguir los siguientes pasos: 1. Divide el modelo en las parte que quieras y organízalas (decide quién es el padre e hijos)  2. Prepara el modelo en Unity y pulsa en la pestaña de animación con el padre seleccionado, para crear un animator y una animación.  3. Una vez creada podemos empezar a añadir las claves para crear la animación, clicando en el botón de grabación cualquier transformación que se haga al objeto quedará grabada. En este ejemplo he añadido las propiedades de posición del padre, la rotación para el hijo y la escala para el nieto. Para añadir una propiedad, haz clic derecho en la propiedad y selecciona add key. Después quitaré la animación del padre, porque si la dejara se rompería la animación y movería los objetos a otro lugar de la escena al subirlo a Decentraland.  4. Anima los objetos, con este método no puedes animar las texturas, solo la posición, rotación y la escala.  5. Puedes controlar el ritmo de la animación con las curvas, si quieres que el movimiento sea constante selecciona los puntos, haz clic derecho y haz que las tangentes sean lineales.  6. Exportaremos ahora la animación para Decentraland, como dije antes, quité la animación del padre para evitar problemas.  Precauciones y Advertencias
Conclusión Aunque es un proceso bastante complejo, y puede llegar a ser frustrante cuando comienzas. Pero si se consigue aprender y manejar, se pueden hacer animaciones tan curiosas como las que aparecen en los ascensores del sistema de tránsito en Decentraland.  Ascensor en el tránsito sur (/goto -68,-117) |
Archives
June 2020
Categories
All
|
RSS Feed
