Blog

Guide to make modifications in the Decentraland Unity plugin

5/14/2020

Why do I need to modify the Unity plugin?

Using the Decentraland SDK to place entities "manually" in the typescript code may be a slow and tedious process, especially if you have to put a lot of them and you have to look one by one if they are in the right place.

That's why you have tools to help you build a scene, like the Decentraland builder or the Unity to DCL export plugin. However there are a limited set of things you can do with them.

In this guide we'll see how to make custom modifications to the Unity plugin for DCL to expand the number of things you can export to code from the Unity scene editor.

Before starting with this guide you should have a minimun knowledge of the Decentraland SDK, the basics of how to export a scene from unity to DCL and some programing basics (we'll use typescript and C#).

Decentraland Documentation

https://docs.decentraland.org/development-guide/coding-scenes/

https://docs.decentraland.org/blockchain-integration/display-a-certified-nft/

The Mission

We'll do an example modification of the plugin to make it export to typescript the necessary data to place an NFT in the scene.
Taking this example as base, you should be able to make your own custom modifications to meet your project needs.

Resources

Unity version 2018.3.6f1
Visual Studio (recomended to use with unity)
Decentraland SDK
Unity to DCL export plugin
Decentraland for starters guide

Modifications in the decentraland unity plugin

Prepare your Typescript project

First of all, we are going to code our custom component and have it ready to use in the typescript project.

https://docs.decentraland.org/development-guide/entities-components/#custom-components

It isn't necessary to make a custom component to place an NFTShape (which is already a component), but for the sake of the guide we'll do it anyway, besides it will be useful for you as a base to make your own more complex components.

Before start writing code in your game.ts file, be aware that the Unity export plugin will ovewrite the entire game.ts file and your code will be lost, because of this we need to work in a separate file.

Create a new file src/imports/components/NFT.ts with the following code:

//Creates an NFTShape component with the given info
export function createNFTComponent(entity: IEntity, smartContract: string, tokenId: string){
entity.addComponent(
new NFTShape('ethereum://'+smartContract+'/'+tokenId,Color3.Blue())
)
}
//Add a NFTdata component to the entity, creates an NFT component with the given info
@Component('NFTdata')
export class NFTdata{
entity: IEntity //entity of the NFT
smartContract: string //Smart contract of the NFT
tokenId: string //Token ID of the NFT
constructor(entity: IEntity, smartContract: string, tokenId: string){
this.entity = entity
this.smartContract = smartContract
this.tokenId = tokenId
createNFTComponent(entity, smartContract, tokenId)
}
}

And another one src/imports/index.ts with:

export { NFTdata, createNFTComponent } from "./components/NFT"

Now we have our code ready for when our modified plugin exports the game.ts

Make a Unity script to hold the data to export

Create a empty script in Unity and open it in visual studio (or your favorite code editor).

You only need to store here the NFT address info for this guide, but fell free to add anything you need for your project.

public class nft_script : MonoBehaviour
{
public string smartContract;
public string tokenId;
}

Add this script to the entity in the scene you want to have the NFT as component and fill the address data.

Address: 0x06012c8cf97BEaD5deAe237070F9587f8E7A266d
Token id:
558536

Now we have the data stored in our entity, the only step left is to modify the plugin to translate this data to our project in typescript.

Modify the Unity plugin in C#

Modifing the plugin may seem like an overwhelming task, but keep in mind we only need to add our little pieces of code in it and expand its functionalities, simple if you know where to do it.

Open SceneTraverser.cs in the Decentraland plugin folder: Assets/Decentraland/SceneTraverser.cs

Find the public static ResourceRecorder TraverseAllScene function and add the following code after the comment //====== Start Traversing ======

//====== Start Traversing ======
if (exportStr != null)
{
exportStr.AppendLine("import { NFTdata } from \"./imports/index\"\n\n");
}

This will import our NFTdata class at the start of game.ts

Next find the public static void RecursivelyTraverseTransform function and after exportStr.AppendFormat(NewEntityWithName, entityName, tra.name); add this code:

nft_script nftObject = (tra.gameObject.GetComponent("nft_script") as nft_script);
if (nftObject)
{
exportStr.AppendFormat(SetNFT, entityName, nftObject.smartContract, nftObject.tokenId);
}

Last step, find the place where the export strings are declared and add the SetNFT string at the end.

private const string SetNFT = "{0}.addComponent(new NFTdata({0}, \"{1}\", \"{2}\")) \n";

This code will check if the exported entity has an nft_script and will add the NFT data component to the entity in our game.ts file.

With all done your scene is ready to be exported to a typescript project and your resulting game.ts should look like this:

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)

Final tips

You can access from anywhere in the project to an array of entities with your custom components, this can be usefull to control where and how some components or behaviours start.

engine.getEntitiesWithComponent(NFTdata)

You don't need to make complex new components if you don't have to, for example you can export from unity only the info to put an entity in an array and apply to them a custom behaviour.

Before start making your componets, take a look at the decentraland sdk and the decentraland utils library, they may have what you are looking for.

ECS API Reference:

https://github.com/decentraland/ecs-reference

decentraland-ecs-utils:

https://github.com/decentraland/decentraland-ecs-utils

npm install decentraland-ecs-utils

Conclusion

If you have understood the steps done in this guide, you are ready now to make your own components for decentraland and place them using the Unity editor, this will be very usefull to fill your scenes with gameplay and interaction. I hope it makes your development process for decentraland easier.

Alex Picazo

PROGRAMMER

Videogame programmer, love developing cool stuff. Always searching for new interesting stories.

Comments

Simple MANA transactions in DCL

5/8/2020

Comments

Español

The Mission

This is a short guide on how to code in typescript, a simple MANA payment for your scene in Decentraland.

Resources

How to make simple MANA transactions in Decentraland

Decentraland official documentation

https://docs.decentraland.org/blockchain-integration/scene-blockchain-operations/

Libraries and imports

You need to install in your typescript project the eth-connect library, to interface with Ethereum contracts and call their functions.

npm install eth-connect

Also, you will need to import the following functions in your file.

getUserAccount to obtain the user's ethereum address.

getProvider to create an instance of the web3 provider to interface with Metamask.

getUserAccount and getProvider are provided by the decentraland SDK.

import { getProvider } from '@decentraland/web3-provider'
import { getUserAccount } from '@decentraland/EthereumController'
import * as EthConnect from '../node_modules/eth-connect/esm'

For this libraries to work in the DCL localhost preview, you'll need to paste &ENABLE_WEB3 to the url, example: http://192.168.0.112:8000/?SCENE_DEBUG_PANEL&position=12%2C44&ENABLE_WEB3

Important information needed before start

To perform a MANA payment you need to gather some info.

Ethereum address to pay the mana, this will be the address that will recive the MANA from the user's payments.

example: const PAYMENT_ADDRESS ="0x4tU......8dY"

MANA units you want the user to pay

example: const MANA_PAYMENT = 10

The MANA ethereum contract address

const MANA_ADDRESS = "0x0F5D2fB29fb7d3CFeE444a200298f468908cC942"

Fake MANA contract address (optional), only if you want to do test transations with Fake MANA

const FAKE_MANA_ADDRESS = "0x2a8fd99c19271f4f04b1b7b9c4f7cf264b626edb"

The MANA contract ABI

https://etherscan.io/address/0x0f5d2fb29fb7d3cfee444a200298f468908cc942#code

Create a empty file inside your project, "/contracts/mana.ts" and paste the MANA ABI in export const abi, or paste the contents of this file.

Hide
Show

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"}

Fake MANA contract ABI (optional)

Hide
Show

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'
}
]

Code

Now that we have all the info and libraries we need it's time to develop or code.
Import the functions you'll need at the begining of the file.

import { getProvider } from '@decentraland/web3-provider'
import { getUserAccount } from '@decentraland/EthereumController'
import * as EthConnect from '../node_modules/eth-connect/esm'

Import the MANA ABI (or the fake MANA ABI for test only)

import { abi } from './contracts/mana'

Now you can create a simple payment function, to call when you want the user to pay.

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())
}
})

When this function is called, the user's Metamask extension will popup a comfirmation for the payment, if there is a problem with the payment or the user rejects it, the payment() function will throw an error. If oyu want you can add your own callback(error, result) function to manage the success or fail of the payment request.

payment(function(error, result){
if (!error) {
//Payment success
}
else{
//Payment fail
}
})

Test with fake MANA payments

Before you run your code for the first time, maybe you want to test it with fake MANA and fake etherium, to check if everything works fine, and don't lose real MANA in the proccess.

First, you need to change the network in your Metamask extension to the Ropsten Test Network.

Second, you need to obtain free fake ethereum and mana in the Ropsten Test Network.

Fake ethereum:

https://faucet.ropsten.be/

Fake MANA:

https://faucet.decentraland.today/

For the last step, you need to change the MANA contract address and the MANA ABI in your code for the fake ones.

import { abi } from './contracts/fakemana'
const MANA_ADDRESS = "0x2a8fd99c19271f4f04b1b7b9c4f7cf264b626edb"

With this your test MANA payments will be done with the fake in the Ropsten Test Network, and will be sent to the PAYMENT_ADDRESS in the Ropsten network as well.

Alex Picazo

PROGRAMMER

Videogame programmer, love developing cool stuff. Always searching for new interesting stories.

Comments

Developing the aesthethic of SaTTi

5/4/2020

Comments

Español

With the release to the public of Decentraland, I was given a scene block out and I was tasked with the rearranging the elements around and making textures based on a moodboard for Sometimes a Thousand Twangling instruments (SaTTi, from now on).

The Decentraland part of SaTTi consists in a series of banners where you can change what sounds are playing on them (which are generated from drawings) and that change the "music" depending on where you stop the banners and where you stand in the floor, making the sounds overlap in different ways and making the sounds come from different directions.

After seeing the moodboard and knowing what the project was about, and because I was in a tight deadline, I decided to take the same approach for textures: layer generators, alphas, and other elements that already existed in Painter to create the needed textures.

The Mission

Creating a wide variety of textures and materials to make the scene more interesting in a fast and reliable way, to match a moodboard look.

Resources

Substance Painter 2018.2+

The Floors

This was the brief and references I was given to produce something similar but with a more liquid look to it.

This is the stack of fills, filters and generators I used to create the desired look. I won't share the exact settings of the effects because the point is to get straight the reason of why I used them

Fill → Liquid
Blur Directional with low intensity
Blur Directional with lower intensity but lower scale, for the high frequency details
Warp to bring back a bit of the liquid effect but with a "main" direction this time
Warp but with a smaller intensity and scale
Levels to invert the colours and adjust the clipping blacks and whites
Levels to do the same as before, but this time for the Roguhness, so the black parts are rougher and give the material a more interesting look when ligh hits them.

The Hexagons

These are some of the examples we were going for when making man-modified rocks. I really liked the contrast between the polished, machined aesthetics with the irregular and bumpiness of the natural ones.

The polished ones

I decided to approach these ones as a stack of different layers instead of using multiple fills and filters in a single layer, since it gave me more flexibility to create variations, specially controlling the different opacities of channels in each layer. So these are the layers and blending options I used for this:

Fill → Grunge Galvanic Large in the Roughness channel, and with a Color Dodge blend option
Duplicate the layer, put it under the previous one and add:
- Blur Directional
Fill → Fluid with a Blur filter in the Height layer, for those surface scratches

The organic ones

Again, I approached these as a stack of layers These are the layers and blending options I used for this:

Fill → Grunge Galvanic Large on the Roughness channel for a bit of variation on the spec
Fill → Crystal 1 on the Height channel with Warp, Blur, and repeat those last two to give the surface a more organic and porous look
Fill → Crystal 1 with a bigger scale on the Height channel with Warp, Blur, and repeat those last two to give the surface a more organic and porous look
Fill → Crystal 1 on the Height channel with a big Warp, enough to make it look like big soft shapes wobbling the surface, then Blur to smooth it out
Fill → Crystal 1 with a small scale on the Height channel with a big Warp, enough to make it look like little spikes coming out, then Blur to smooth it out
Fill → BnW Spots 1 with default settings (click on the seed button to get a unique pattern) on the Height channel to give that organic surface look
Duplicate that last layer, invert the colours and with default settings and reduce the Balance to get a clipped mask, for the inside cavities
Using BnW Spots 1 with a new random seed, modifying the Colour, Height and Roughness to a more matte, high-detailed one

Conclusion

Not every texture made was used in the end, but it served to explore the aesthetic of the parcel, and we can always use them in case we want to update the scene or keep developing the visual aspect of it further.

Obsidian

Carbon

Floors

Rocks

The fact that we used Painter to make the textures means that we can export the textures in 4k and change the size after to meet the limitations of Decentraland (max resolution 512x512 per texture). Each of the textures here had 3 more variations made to them. Changing the opacity, blending options, seed of the generators and effects lets you generate variants very easily when you're in a rush.

Álex

3D GENERALIST

Alejandro Bielsa is a junior 3D artist working at Polygonal Mind's in-house team. Passionate about videogames, vivid tutorial drinker and cat lover.

Twitter

Comments

Creating a virtual Transit System for Decentraland

4/6/2020

Comments

Español

Premise

The 20th of February Decentraland was launched. For the ones who do not know, Decentraland is a virtual world backed by the Ethereum blockchain where its community owns the shape and purpose of their LANDs, creating an innovative and a dynamic relationship between landowners and visitors. With this premise, the sky is the limit.

We got a chance to be part in the development of some LAND content prior launch, from adventure mazes and sound experiments to art galleries, gardens and even transit systems. Shaping the future of virtual transportation, today we are describing how we created the Trail Transit System in South Decentraland from scratch to its final patch prior launch day.

The Mission

Decentraland is aiming high with its innovative concept and content creation highlights where creatives can create, own and control its designs inside the blockchain. This project breakdown can help designers, users and peers at Decentraland to understand the creation process or even serve as an introduction to new content creators.

Resources

MayaLT
Substance Painter
Photoshop
Unity 2018.3.6f1
Decentraland SDK

Transit System Decentraland train in station

Before starting

For this workflow, here at Polygonal Mind worked with a custom Unity plug-in that you can find at GitHub [https://github.com/fairwood/DecentralandUnityPlugin/]. This plugin allowed us to work natively from Untiy, compose and create all the scenarios without heavy coding. Note that we did not use the plug in in its vanilla version, we slightly modified it in order to be suitable for our custom environments, improve its performance and be "game ready".

An inside-view of the Unity Editor.

Each project requires a different approach and production pipeline and that is why the plugin got modified as we faced different challenges and technical issues, mainly related to performance issues once deployed in Decentraland.

#00 - Scratching the main concepts for a transport system

The initial idea was to create a modern transit system suitable for a long Decentraland State that had interesting stops between its line start and end.
As we started to do our first steps Daniel and I faced some interesting challenges.

How the train would stop?
How the users would get to the platform?
Would the train turn to get back?

The first sketches contemplated creating two levels of platforms to create connections between LANDS and pretty much a smooth workflow.

As soon as we started defining on paper all the work that had to be done we set the environment to be a megalitic structure with an elevator to be accessed from the ground level. The train direction returning issue was solved by having two wagons going in the opposite direction of each other in order to avoid long waiting queues. This created a visual and design problem, we needed to design 4 platforms per level and these levels to be connected as well. So the user could easily go through the whole building.

I made a visual mood-board and pitched it in order to get my hands on the first designs. For the general art style I got a heavy inspiration from the Bioshock* environments and art design highlights, and from Fallout 4 I took the transit concept. Both games take a heavy influence on retro-futurism but being backed by different art styles. Bioshock has a gorgeous and well defined art-deco environments mixed with iron forged monumentalism environments and on the other hand we have Fallout 4**, which has a well built and detailed-retro futurist world based on how the future was being dreamt in the late 50s and early 60s.

This became the main reference and principal inspiration for the shape, color palette and the idea of how it "worked" as a train.

An interesting concept, the shape was interesting.

One possible way to attach the train

Dual train track concept

Bioshock does a materfully use of the metallic channel on its environment and that was key for me on the idea of doing a similar approach on an art deco environment.

Once the art boundaries were set, we could begin the work. We will do the breakdown as we created the assets, beginning with the first version of the train, the one who goes on top of the trail; followed by the design of the station and its integration with the environment. And last but not least we will take a look on the second train.

*Bioshock, developed by 2K Boston / Irrational Games and published by Take Two.
**Fallout 4, developed by Bethesda Game Studios and published by Bethesda Softworks.

#01 The train: Shaping the virtual wagon

For a 55 LAND State 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.

The whole design turned around one single image that fitted perfectly the mood we were aiming for, although it backfired during development as its a hand-drawn forced perspective of the future from the 50s.

Reference Transit System in Decentraland

The main reference

One of the first iterations, the window was quite bigger and the wheel had a bigger gap.

As the design advanced, the main issues turned around the position of the wheel (as it deformed the main structure) and how the train would "move" along the train track. This lead to a better and smoother shaping of the wheel cover and a bigger track for a bigger wheel.

From the inside point of view, which it was made up entirely from design interior concepts from the 50s and the use of wood in contrast of an iron structured wagon, the main issue was to give a "direction" to the train, as it has to have a control point or something similar stuffed with mechanical levels and buttons.

Its Material design consisted on two materials, one for the exterior and one for the interior props, plus one exclusive emissive material for the control panel. Once again, the "lack" of content as the LAND was purely a way of transport meant an advantage to dedicate more resources to detail and patch with more materials the constrain of 512px textures.

After a few iterations we had our first model running on the track and ready to have its firsts tests.

#02 The Station: Balance between composition and utility

As we said before, the station had to have two levels of platforms, one placed at 16m with connections along both sides of the LAND and another platforms placed on the 32m level. All the platforms had to be connected one to another in order to be fully playable and easy to turn in the opposite direction in case you missed a stop, just like a normal subway design. Furthermore, from an artistic point of view, the idea was to avoid as much as posible the use of stairs or long paths in order to match a more "mechanic" and futuristic view of what transport would look like. Taking the Bioshock environments and concept art as a main guideline in colour and material composition I started to sketch the main shape of the station.

I started defining the design of the whole elevator, based on how Bioshock portrayed art-deco steampunk elevators I decided to follow a similar approach from scratch to the final model visuals. The design came to be open and wall-less in order to avoid a claustrophobic feeling, it also served as a concept in model detail and material design.

Bioshock reference for Transit System Decentraland

Gameplay screenshot. Bioshock (2006) is a game developed by 2K Boston and published by Take Two.

The 1.0 version of the material

The original map prior to transporting it to normal.

From the very start I wanted to make a mechanical opening and closing elevator behaviour and so this made me keep in mind where the pieces pivots need to be placed and how the parenting got to be done in order to get correctly animated.

Elevator Elevator Transit System Decentraland

Once the elevator was done and placed, the carcass was placed and its access holes designed. The platforms began to take shape.

We began the development of the statio platforms by its playable design, for me it was crucial to first design how the station would be played and experienced by the user. So I made quick greyboxes doing the playable boundaries and anticipating future visual and experience design troubles, that's how we found and dealt with the troubling connection of ground with the 16m level, as well as how we started to spot complications with the visual integration of the whole set.

One of the original problems we had was the great gape between the entrance and the low and up platforms added to the narrow land

How the connexion between the elevator and the platform were visualized.

The very first boundaries done, we did use the avatar model to have a size reference. Although we had to keep in mind the camera FOV as an additional size constrain. The second train was still in the to-do list and therefore there was no real idea of its size. So I took the first one and placed like if it was going to be on the lower track to have an scratchy idea on sizing.

The very first model of the exterior carcass prior to "mix it" with the upper one.

Following the original idea, the concept was to take the user from the 16m level to the 32m level by an elevator placed above the upper platform. This lead to notice heavy problems with visual integration and gameplay utility and was quickly discarded as it overloaded the scene with an amount of avoidable tris for a short experience. Instead a -middle level- was created that connected the upper platform of the 16m level with the lower platform of the 32m level.

Here can be seen the connection of both platforms prior to place the carcass.

Once the both carcasses were placed, the design morphed to a shape that looked alike an eight.

The idea was to create a dynamic composition with connections that did not seem cheap-made.

A little resting area next to the train stop platform

With its final touches it came the time to paint and design its materials. I decided to use seamless tileable textures for the biggest objects as it would give me more control of sharp detail, we had the exterior structure. For the platforms and elevator I made their UVs and packed them in an atlas, this maximised control over detail and enhance graphic results. Also we made a clever use of the metallness/smoothness channel to make the environment shine naturally.

Exterior texture for Transit System Decentraland

The normal maps helped a lot to give a defined detail to a very big structure.

#03 The Second Train: Reconverting the same concept

When the stations where set, running and the overall was working, it was the time to incorporate a new train to the tracks. This train design was planned to be upside down using the same track as the original wagon but with obvious appearance modifications.

The principal constrain when remodelling the exterior was to keep and preserve the uvs or reshaping the train without needing to redo the material. Because both trains use the same materials.

Reference for Transit System Decentraland

The main inspiration for the train shape

As the wheel entered abruptly inside the train, an added cover was needed over.

This drawing help to focus on the variation for the lower trail.

The additional shape that was made to hide the wheel.

The final design prior to material assign

The final model in editor view.

#04 Material consumption and asset optimziation

The trains were done and set, the stations placed and the first tests showed good results, because for this LAND project we decided to use a prefab approach and A. Picazo, our programmer, suggested and implemented some modifications to the plugin to recognize the same 3D models and instantiate them instead of exporting them individually as separated files.

We used a single model of a rock and we reused it constantly changing the rotation and scale to keep it fresh. The same goes for the station, as the station GTLF is loaded once and copied on runtime 3 times.

The overall performance was boosted and it was now time for a texture cut, not because we really needed it, but its always a good idea to revisit the work and improve it deleting or replacing irrelevant files.

As I started to dig in the relation between texture usage and the final result I concluded that the Normal map was usually not necessary to achieve a good result. This was because the ambient light in Decentraland KILLS this kind of micro-details and the directional light is not really helpful in such conditions. So normal maps were eliminated in every material that did not simulate high bumps.

Micro details like the ground and dirt normals maps were removed as its graphic impact was killed by the ambient

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.

As it can be seen, the smoothness channel gives the normal mapping a perfect tone.

ORM Textures and Decentraland

Decentraland recommends texture optimization by using ORM (Occlusion, Roughness, Metallness) RGB textures. This is quite a good point when working in a PBR workflow but for the project we avoided its use as Ambien Occlusion requires a specific prop-set composition in order to be truly useful. Furthermore if I needed a darker area of occlusion I would just do a light multiply over the Albedo channel instead.

More info about this textures can be found in the Khronos Group documentation:

https://www.khronos.org/blog/art-pipeline-for-gltf

Creating Colliders

Colliders in decentraland are created by overlapping a mesh on the model you want with collision behaviour and writing the suffix _collider to the mesh name. It is important to not have the same name twice in the same hierarchy or have the parent and child with the same naming as the GTLF export would crash. Parenting and naming order is a must.

On the performance side I highly recommend to use a low-res mesh when creating the collider as Decentraland creates Mesh Colliders based on the mesh you had named with the suffix. As you may know if you are familiar with Unity, Mesh Colliders are not quite the best workaround for complex scenes so its quite better to avoid colliders with high detail or matching the original objects and do their boundaries intead.

Base mesh

Collider meshes keep the boundaries of the original mesh without getting complex shapes.

Basic issues of a Unity workflow

Decentraland runs a modified version of the Unity engine with high modifications focused on their current and planned features on the platform. This is quite great as you can use the plugin and Unity to develop and preview how it will look once deployed. Alhough there are significant visual differences because of the Ambient and Directional light on deploy, you can pretty much guess how it will look like.
But although the efficience boost that means working with the unity editor there are two main constrains to keep in mind.

The major part of the components will not get exported with the GTLF format and therefore will not be shown in deploy: Particle Systems, Lights, Cameras, 2D components, Collider components and VFX will not work. GTLF only gets to have the basic mesh renderer, material shading and basic Animator functionality.

Note that the X axis in Unity is flipped and can lead to missplacements when working with the plugin, as DCL does not have its axis inverted.
X = -X

Furthermore the exporter doesnt get along with large scenes and can lead to a laggy editor. The recommendable when working with large scenes is to have the DCL exporter window hidden while editing and opening it to evaluate all the entities and keep in mind if you are going out of bounds.

#05 Backgrounds

As soon as the main stations where placed and the it was functional. It was time to develop the ground surroundings. I decided to do an arid vegetation-less approach because I wanted to avoid a polygon overload and maximize detail above where the experience of the train was, not below.

This was the decided approach, the rockish environment was detailed with some resting areas and pipes decorating the paths. The resting areas reused the textures from the props in the station and there were created 3 new materials for the dirt and rocks and one for the glass structure.

#06 Final Patches

During the very end of the development and with the Decentraland launch ahead KnownOrigin became the art host for the crypto art we wanted to display. A limited number of art pieces were curated and placed along the trail, being able to be seen and admired while you travel from one point to another and wait for the train.

The same base used in the resting areas along the ground was placed also below the elevator base.

NFT crypto art in Transit System Decentraland

Two examples of NFT crypto art from Known Origin placed in the station. Users can contemplate trendy cryptoart while waiting for the train.

#07 Conclusion

This environment meant a huge challenge for the team, as it needed to develop a custom behaviour for the train and its stops, all the props for achieving the train to move go to A.Picazo. For me, who I was in charge of the whole environment, meant a lot as I could bring to life a truly great design based on two games and an art-style I love.

Furthermore there were low constrains regarding graphics as they were reused without boring the composition, this gave me the freedom to enhance the appearance by polygons and make a difference by doing a realistic approach with the material design and give extra detail in a platform that mainly relies on flat-shading and low-poly conceptualisation of environments.

Kourtin

environment artist

I purr when you're not looking. I'm passionate about environments and all the techie stuff to make them look rad. Learning and improving everyday to be a better hooman.

Twitter

Comments

Tomb chaser - showcase

4/2/2020

Comments

Español

The Mission

Recently was the big opening of decentraland, where we could participate, contructing some of the lands there.

One of the projects we could made there was Tomb Chaser, a maze in which you have to follow the ghost to arrive to the treasure room.

In here I want to write how we started the project until arriving to the final model presented on decentraland.

Resources

Decentraland

The Idea

When we started to concoct this project we wanted to recreate an arcade game, easy to play, hard to win, for that purpose we looked into classic games like Zelda or Super Mario.

Finally we looked into the laberynth from the games such as The Legend of Zelda: Majora's Mask, after watching the videos a couple of times, we anoted a couple of details that would be interesting to replicate.

Repetetive texture one the walls, to make the player loss in the laberynth.
the ghost serves as a point to know that you aren't loss, if the player is far away from the ghost he can lose the game.
exploit the space to create new rooms, with enclosed space and more open in other places.

Decentraland Limitations:

In other articles we have already discussed the limitations of decentraland, when the structures are not very complex or if you have to create a scene with models, there is, usually no problem.

However in Tomb Chaser we wanted to build a really big estructure, so that we could play with the space more precisely. In order to do that we incorporated a few steps to our pipeline to make it faster.

For Decentraland, we utilise unity to mount the scene and use a plugin to export it in local and test the scene. The good thing about unity is that the illumination is very similar to Decentraland so we can see in a game engine how it is going.

In order to accelerate de the process we create prefabs that we already prepare with the collider of decentraland. In this proccess, we learned quite a bit about the gltfs and the engine of Decentraland.

For example the gltf's don't have to ocupe a lot of space, the software doesn't handle them very well, the ambient light travels throught everything and illuminates everything, so the dark ambients have to be faked.

Floors

To design a Laberynth, it's not complicated, just think about the start and the finish, then add the rest. One of the good things about decentraland is that you have a lot of height to play with, you can calculate how much you have in your land throught this:

log2(n+1) x 20 Height in meters

where n represents the number of parcels, also you can check this excel where it appears more clearly for designers.

https://docs.decentraland.org/development-guide/scene-limitations/

https://docs.google.com/spreadsheets/d/1BTm0C20PqdQDAN7vOQ6FpnkVncPecJt-EwTSNHzrsmg/edit#gid=0

Being a land of 25 we had 94 meters to work with, so when we divided the different floors, we created different storeys, that helped later on to create the open space rooms.

Tomb Chaser exterior without exterior walls

Exterior of first floor without the exterior.

Interior open space first floor.

Also we decided to dedicate each floor to theme or traps, that way in each floor we tested one of the abilities of the player, for example on the first was speed and the second, reflexes.

Textures creation

Once we have the design made, was time to think about the textures, this is one of the biggest limitations in the platform, not only there is a limited number of textures for each scene, but you also have to take into account the size. The max size of the textures is 512 kb.

In order to work with that we used two technique that are the most useful for the environment design adn help a lot with optimization; Trim Textures and tileable textures.

Example pixelation. If we zoom the color information does not increase and therefore its density low, causing the colors to appear stretched or out of shape.

Tileable textures is a texture that can be placed side-by-side with itself without creating a noticeable boundary between two copies of the image. It can be tileable from one side, two or all the sides.

This kind of texture works really well in floors and walls, if you don't use these textures in big surfaces you have the risk of have pixelated pictures. it's dangerous because that pixelation can make the environment bad pretty quickly.

With this textures you don't have this problem, since you can reduce the texture and you won't notice. The only thing you have to be careful is in create patterns, if you add something that it's not usual (like the sand mountains below) the pattern is easy to cacth. A way to bypas this is to make it completely random, that way you can conceal it.

Trim textures are similar to tileable textures, however while tileable texture you just have to enlarge the uv sets and you are ready to go. But with the trim textures you divide texture set in small textures, in squares or rectangles better, is easier to scale. That way we can create the small parts of the dungeon without abusing of the use of textures.

2D vs 3D

Example of the trim texture used on the interior assets

Transparent Planes

To work, and specifically with transparencies, I recommend the use of the .png (RBGA) or .tiff (RGB + A) formats, since they are two optimal formats that can hold information on an alpha channel without high compression and in the same document.

Before we have talked about the limitations in tris, textures and materials. For that reason one, of the most useful things to save in that is to create planes, and add transparent textures to it.
This works for example in the flames, grass, spider webs, among other examples.

To use transparent materials in decentraland form unity, you have to put the standard material in fade.

Also, i would recommend that the texture is in .png or .tiff format, and to aislate the transparent textures in one texture.

Also take into account that if your export your textures, Decentraland only admits .JPG, so it will covert your formats and moreover rotate them 180º.

If you mix the textures, for example columns with flames, and mark the material as a fade it makes the columns transparent to, and don't look good. So if you are going to add transparencies annotate them and prepare them in a single texture.

Dark ambient

Before I said that decentraland does not allow you to put custom lights in your scene at the moment, however we can create one, since it allows emissive materials.

In this case we want to create a dark dungeon, to do that first we have to obscure the textures, one way to do it will be add a multiply layer in photoshop, with a dark color. That way you paint the model normally and them control how "dark" you want them throught the multiply layer.

Also since the light, travels throught inverted faces, (interior models like walls) we have to create a cover for them. To prevent the sun for entering the dungeon.

without cover / with cover

Finaly is time to add some light, what we used were emissive maps but with a low intensity, the emissive has the particularity that when intensity is mayor, it burns the surroundings and you can't see the models below.

I would also recommend use an emissive map, to delimit where emissive is acting, since we want a complete control over our "lights". You can also add movement to the planes throught animation, I would recommend to do it in unity thought because you have more control over waht you animate and the bones are not neccesary, like in other pipelines that you got to rig the mesh to animate it.

Conclusion

All in all, these is a compedium of tips that we have learned while we were working with the platform. It has been an interesting experience, because the limitations pushed us to look for turn arounds and tricks to recreate what we wanted to express.

A wonderfull experience that I can't wait to repeat!

Laura Uson

3D ARTIST

Passionate about videogames, movies and creatures. artist by day and superhero at night.

CENT

Comments

Trim Textures: Making Of

3/31/2020

Comments

Español

I was tasked with the texturing and modelling of the exterior of our Tomb Chaser DCL game so I decided this would be a great example to try in production and, killing two birds with one stone, also show one of the techniques I've larned just a few months ago.

The Mission

To show you how I make Trim Textures to use in the environments we make.

Resources

Zbrush 2018+
Maya, or your 3D software of preference
Substance Painter 2018.2+

Planning

So first we need to plan how we are going to make our Trim Texture. Because a texture can only be 1:1 proportions (not really, but for this example we're going to go with that) we are going to make a regular 1:1 plane too.

Let's now divide it into different sections. It's more of a guide on how we think we're going to able to take advantage of every pixel in the texture, but this can be changed later so just go with something that works for now.

Then separate every section so it's its own mesh

Sculpting

Let's import our plane into Zbrush and start blocking out all the different sections we're going to have.

Let's block out all the different bricks we want

You can now Subdivide each section with the smooth disabled so we can have even density

It should look something like this once the detail pass is done. You can take advantage of Alphas, Brushes and Booleans and any other tricks you want to make this process faster. When you're done, it's time to bake!

Baking

You can use xNormal, Marmoset or even Painter to bake your high poly into your low poly. Make sure to use a plane that has all the UV Space from U(0,1)-V(0,1) in use for max efficiency.

Texturing

If you have baked in Painter, you can start painting right away. If you've used something else you can import the bakes into Painter, and then start texturing to your liking!

Be mindful of the style and type of Trim you're making. It's not the same to do something stylized and doing something realistic (althought this should've been noted in the sculpting process too!), but things like dirt, cracks and just sheer surface detail depend a lot on the style you're going for. It's an exercise of layering and trying to get the right amount of detail where it matters.

This is what it looks like for me after texturing. It should be noted that after implementing it we decided it was too bland and realistic and my coworker Laura changed it up a bit to make it more saturated and colourful.

After this was done, we exported it and started making the exterior and some props with this texture.

Conclusion

Creating trim textures is a very simple process and it allows for a level of detail that is very hard to get with other regular texturing techniques like unwrapping every UV island by itself.

Hope you learned something today that you can implement into your own workflow!
See you around :)

Alex

3D GENERALIST

Alejandro Bielsa is a junior 3D artist working at Polygonal Mind's in-house team. Passionate about videogames, vivid tutorial drinker and cat lover.

Twitter

Comments

Trim Textures: A New Hope

3/27/2020

Comments

Español

The Mission

To understand the concept of using tileable textures/trimsheets that can be reused as much as possible.

Resources

Zbrush 2018+
Maya LT 2018
Substance Painter 2018+

Trim... What? Tile... Who?

First things first, what is a tileable texture?

A tileable texture, also known as a seamless texture, is a texture that can be repeated across a mesh without the borders being noticeable to the person looking at it.

As you can see, I can expand or make it smaller as much as I want without it giving away a clear visual indication of a seam between the repetitions.

This is the same example with a non-tielable texture. Much worse, right?

The more you tile it or repeat it, the more apparent the repetition is. Tileable textures work best when mixed with other tileables via vertex painting or height blends to mask those landmarks that make us go: "Aha! There's the pattern!"

*Pic by Arif Pribadi ([https://www.facebook.com/arifcreations](https://www.facebook.com/arifcreations) & [http://arifcreations.com/](http://arifcreations.com/blog/))*

Trim textures, also known as a trimsheets, are textures composed of multiple mini textures, tileable or not, something similar to an atlas or tileset (for those of you who remember working on RPG Maker :D).

*Pic by Keegan Keene ([https://www.artstation.com/silver593](https://www.artstation.com/silver593) & [https://twitter.com/silver593](https://twitter.com/silver593))*

What's it useful for?

Reducing the time for texturing of a general area and keeping it consistent. Imagine a temple from the Uncharted franchise or God Of War 2018: there needs to be cohesion and connectivity between all the ornaments and motives throughout a building.

*Pic by Megan Parks ([https://www.artstation.com/megific](https://www.artstation.com/megific))*

Trim textures are specially useful for PBR (Physically Based Rendering), where you don't care if there are overlaps in the UVs of the final model. Repurposing trim textures is a super fast and relaible way to create texture variation and use it in different ways. For example, the same trim can be used for texturing props or for texturing the whole building.

Square and columns with tileable textures

Pics by Polygon Academy (Tim Simpson) (https://www.polygon-academy.com/, https://twitter.com/polygon_academy & https://www.youtube.com/channel/UCGXr6E_g91ue1rfhA9j4TLA)

General workflow

This texturing method relies a lot on how you unwrap your mesh and how the trim texture is laid out. you can either start planning the textures first before modelling, or the other way around. We'll need to plan it either way, because both affect the next step.

Let's reuse the textures from the exterior of the Tomb Chaser pyramid to make a simple column that could be reused in the interiors. This is the current Trim Texture used to beautify the whole exterior. Yes, it's all a single material!

So let's make a column divided in sections and you'll see how fast you can change the design once we have our geometry there, just by switchting the UVs around.

This is going to be our column. As you can see, it has many differentiated sections that are going to be assigned to different sections of the texture. Let's cut those sections in the UVs, right where they change from section from section.

See how cylinders are unwrapped in linear fashion? This is key for taking advantage of our texture space and patterns throughout the model.

After this we can begin modifying the UVs to fit into the preexisting "sections" of the Trim Texture.

And once that's done, creating variations of this is really, really easy. We just need to move the UV Shells around to other Trim sections!

moving the uv shells to other trim sections

Conclusion

We can create variations with the same geometry and the same texture, just by modifying the UVs of the mesh. We can also make a variation of the texture and it'll automatically apply to the already UV'd mesh with different colours/patterns as long as you leave the pattern separation consistent

I hope you learned something new today! See you around :)

Álex

3D GENERALIST

Alejandro Bielsa is a junior 3D artist working at Polygonal Mind's in-house team. Passionate about videogames, vivid tutorial drinker and cat lover.

Twitter

Comments

Nails, bolts and some ducktape, good looking scenarios in a low spec platform

3/24/2020

Comments

Español

The Mission

We all want to get great results in our daily tasks of creating stunning scenarios and replayable (or not) experiences for a selected range of audience. This article goes through tips and workarounds when working with high technical constrains that are out of our control and we just have to get along with them.

Resources

Maya LT 2018 or higher
Unity 2018 or higher
DCL Unity Plugin (external)
DCL (Target Platform)
Photoshop CC (Bitmap editing tool)

Good looking scenarios in low spec platforms

#01 First of all, understanding your platform: DCL

When developing for a specific platform, you get the advantage of knowing what can and what cannot be done. This way you can get an idea of what you were thinking of doing won't get along with the engine at first sight and start thinking workarounds for the first production expected-unexpected troubles to get the same visible results.

Decentraland (DCL from now on) is an online 3D-powered-platform that aims to create a vivid digital world as a life sim owned by its users, ruled by a few (apparently) technical constrains and backed by blockchain technology. I must add that the platform engine is still in development and can change as the final first release of the platform is made. Although its documentation is scarce when explaining how to work with 3D scenarios and is not well told how the engine works, artists can take a huge hint on how their creations will look or behave in scene by knowing that Decentraland runs in its core Unity.

Their "publishing-tech-constrains" are online to take a general boundary, >>Link<<, but overall there is one thing that Unity loves when rendering your scene: keep it as simple as possible and drawcall reduced at maximum.

Don't panic if your scene has an incredibly amount of theoretical drawcalls, DCL will end rendering your stuff but making it easier for the engine will reduce the time your creation appears on screen.

So what are the tech highlights in DCL:

All childs of a mesh will be blended into one mesh (parent), if the mesh has to interact with the player, you should remove it from the hierarchy and place it in root.
- In Unity the best suitable scenario is to make one mesh with only one material to avoid drawcall duplication, but is not clear if DCL is affected.

In order to create colliders you must create another mesh with the name "_collider" on its end to indicate DCL that the mesh will work as a mesh collider and should not be considered as a visible model.

Within Unity, the export plugin will detect the instance of materials as independent materials, but during the export this "issue" is fixed. You have to keep a manual count of the materials you are using.

Unity works with the X axis inverted, this is a huge trouble at first because the export will flip the model and cause the model to surpass your LAND boundaries (or just make it look displaced). This issue is fixed by rotating the model 180 degrees on its Y axis to preview and test inside the Unity Editor. The transforms are reset once you export (and they will look as its shown in Unity).

DCL uses a general "Ambience Light" mixed with the basic skybox of Unity that highly lightens your scene, keep that in mind when creating your palette of colours or planning textures, as clear tones will get highly lighted.

Although it accepts the PBR pipeline and the Standard Material from Unity, it doesn't get all of its capabilities, making it tricky to get good results without applying texture channels or being able to modify the shader texture input to save texture count.
- Emissives are a good way to enhance your creations, the DCL renderer has a bloom post-effect.

DCL doesn't work with common 3D file extensions (.fbx .obj ...) instead uses its own file extension .gtlf where all data is stored and compressed for the engine to place in scene.

Useful DCL official docs for this issue:

https://docs.decentraland.org/3d-modeling/3d-models/

https://docs.decentraland.org/3d-modeling/meshes/

https://docs.decentraland.org/3d-modeling/materials/

#02 Blending DCL boundaries, atlas packaging

At first sight it may seem that DCL is quite restrictive with the amount and size of textures permited but through reutilization, reconversion and a little bit of creativity you can achieve great results and at the same time not use a lot of textures.

For example we have this spooky tower composed by a notable amount of triangles but using only 2 textures for the whole appearence, achieving nice looking results.

The spooky tower as seen the 27th of December of 2019. The Base of the tower is still in development.

The key in this type of projects is to work with Atlas and reusable-tileable textures. Even small textures can make a difference in your scenes.

One atlas texture was designed for all the "ground" and the dirt elements such as the rocky stairs and the wasted garden. The other texture was designed for all the house elements. It is important to keep the textures as neutral looking as posible to avoid repetition to be noticed.

512 px textures for south tower in Decentraland

The building (512px x 512px)

This is an Atlas made out of neutral looking textures with the purpose of being reused constantly in the environment.

The grounds (512px x 512px)

This is a tileable, easily reusable and seamless texture

In multiple cases by folding the UV geometry you can place the whole model within the atlas and get the desired results.

The Uv-s of the interior walls are folded in a way that it seems a wall with double color, the same goes for other parts of the house as they keep on repeating without being clear. Note that all the pieces use this texture, creating coherence between rooms without being noticeable that they are just repetitions.

512 px textures for dark house in Decentraland

A texture of 512px made this!

Furthermore even hosting the geometry projections in a really reduced UV area can be valid as a result. Texels are quite important here, so keep in mind to give a major space to uvs that will be seen closer than the ones that cant be barely visible.

The top roof cant be seen from a normal point of view, it simply uses a minimum of space where matches with the surrounding colors.

Its Uvs are located bottom-left under the ston railing

The building of course shares other materials with other props among the scenario, materials representing bare metal, gold or even rock are shared and non-exclusive from an area of the environment.

#03 VFX for a non-VFX platform

Visual effects are a ̶p̶a̶i̶n̶ ̶i̶n̶ ̶t̶h̶e̶ ̶a̶s̶s̶ troubling and sometimes messy issue, commonly avoided when developing just because the engine is not used to it. Even a simple AO or Bloom can ruin your frame rate in a low platform (or even in the high ones) and DCL doesnt support any (but bloom) **so here is when you put on your creative-mood-hat and you get to work with some useful workarounds for Volumetric Lighting, Ambient Occlusion and Bloom.

Luckily DCL enabled recently the emissive channel from the Standard Shader and with this feature they introduced the Bloom post-effect. Bloom is handled with the Intensity value in the emissive channel, as you increase the Intensity value, the bloom gets bigger and brighter.

For the rest of post effects we will have to do an easy workaround. We created a set of materials that were going to help us in the journey of embellishing our scenario.

Each fade was made with a specific purpose, but they all share the same texture.

For example, in the environment we decided to place some AO in a white building as the scene lighting killed all perspective or sense of geometry occlusion/collision.

Ambient Occlusion for South Tower in Decentraland

The AO is built with one quad placed on both sides of the corner.

Another achievment in the scenario was to fake volumetric lighting, being rendered softly but giving the room the approach we were looking for. In this case we used the emissive bloom mixed with a fade to transparent material.

As you can see, the effect is barely noticeable but appreciated in the graphical context and composition. Bloom can be a double side effect, giving you the opportunity to turn your composition into something stunning or basically ruining it.

fake volumetric lighting in Decentraland

#04 Thinking outside the box

The only way to achieve higher results than expected is to understand the basics of what are you doing.

Matching a sequence of UI buttons to get supposed results leads only to unexpected crashes. Getting to know whats happening behind the frame will help you create workarounds once the technical problems and visual bugs appear, because you know they will.

There is a thing when working with high technical constrains that leads to reuse and think constantly about multi-purpose asset creation. Turn a rock into a brick, make the brick be a door, the door now will be a window, later a broken beam on the ceiling and so on.

Composing a whole scenario with a 512 pixels square texture is harsh, but you don't need high texture detail or mesh tessellation to get good results. In the end the composition and graphical coherence is what defines a good environment. There are a bunch of good looking games of all type of genre and art direction because they rely on visual coherence and strong technical understanding of constrains and how to surpass them adapting your project ideas to the platform.

Although the post is heavily oriented towards the production of an environment in the Decentraland platform, all this tips can be easily used when developing for mobile or other platforms that make us artists struggle with different constrains to reach our graphic goals.

Until next time, au revoir!

Kourtin

ENVIRONMENT ARTIST

I purr when you're not looking. I'm passionate about environments and all the techie stuff to make them look rad. Learning and improving everyday to be a better hooman.

Twitter

Comments

Visual Effects in Decentraland

3/19/2020

Comments

Español

Mission

Decentraland is a platform that aims to innovate and impulse artists to create, own and control its designs inside the blockchain.

However some of its limitations have us scratching our heads, we took it as a challenge and developed a series of special effects to employ in our scenes. Here we are going to explain some of the VFX we developed.

Resources

MayaLT
Photoshop
Unity 2018.3.6f1
Decentraland SDK

#00 - Scratching the main concepts for VFX

This is one of the trickiest parts to make in Decentraland, since the engine don't allow the use of particles or any kind of post effect.

In order to tackle this, we have to decompose which effects we want to create, and decompose them in their basic parts to be able to recreate them with the means we have at our disposal.

At the end of the process we had a list of effects, that we could do mixing three main concepts, that are animation, transparency planes and the basic shapes.

We learned that this simple concepts mixed allowed us to recreate a variety of effects, that looked difficult to achieve without the help of the particle system or effects.

For each effect we implemented these concepts, for example for the fire on the we created a gradient to create a transparency map, then to do the twinkle we animate so planes in the animation tab on Unity.

The animatons aren't too complex, just animations of scale, rotation and position. And surprisingly got a variety of effects. In this article I want to show some of them. Since the procces is really similar, so I'm not going to dwell in the process of how we did them.

#01 Post Effects in Decentraland

Art Stations (goto)

Here we can see two ways to use the transparency maps.

The first one is in the light in here we use a gradient map as a way to create the source of light, and an emissive map to add some lighting to the model.

The second one, is in the corner of the wall, with a plane over the window, and using the ambient oclussion as a reference to darken the corners of the walls.

Tomb Chaser (goto)

Temple light exit decentraland tomb chaser

In here, we used the transpararency to create an operture full of light for the finish room, this was made to give the exit a victorious ending kind of feeling.

This is what I explained on the first part, to create the tiwnkle effect we animate the plane with the scale, also the fire follows a similar aproach.

It consist of three planes animated in squash and strecht while rotating slightly the plane.

Momus Collection (goto)

One of the main problems we found is that you can't animate texture in the decentraland engine. So in order to create this effect we put several layers one of top of the other.

And of the top layers we put transparent texture of flow of the river, finally we animate the scale from 0 to 1 on loop to create the illusion of flowing river.

Sunray effect in decentraland, momus park

This process is the same as explained on the art stations for the lights. But in this case we overlap several rays to create the effect of the sunray.

Animation of small spheres with an emissive material to create fireflies.

Plane with open red eyes drawing, but animated in the scale to create the winking effect.

In here we created the opposite effect of the light by creating a dark gradient in a transparency map, we can create a dark ambient on the exterior.

South Transit System (goto)

Same concept as lights explained before, but here we create a more complex mesh to create the light of the elevator.

which we animate throught the scale to create the effect.

To create the effect of trail on the train, is like we create the planes of lighting. However this time we put the plane on the tracks to bring a gleam effect.

Train with light and gleam effects in decentraland

Conclusion

These were some of the effects that we used on the scenes we developed on Decentraland, using the principles we knew worked on the platform, and twist them to improve our scenes and give them an extra, as you know the devil is on the details.

Laura Usón

ARTIST

Passionate about videogames, movies and creatures. artist by day and superhero at night.

Cent

Comments

Animations in Decentraland

3/16/2020

Comments

ESPAÑOL

The Mission

In the process of working with decentraland we found out that animation is one of the most complex things to do.
In this guide I'm going to explain two methods that we learned in order to create simple animations and put them in your land.

Resources

Unity 2018.3.6f1
Decentraland SDK
Plugin decentraland for unity
your prefered 3D software

Bones and Rigging

The good thing about this method, it's that you can do it and don't pass for Unity to put it in Decentraland. However, Unity allows you to check how the model will look in Decentraland, more or less.
In this you rigg your models in your prefered 3D software, and export it, if you decide not to use Unity, you can export the GLTF format using Blender or babylon plugin for Maya.

https://doc.babylonjs.com/resources/maya_to_gltf

If you export it from Unity, there's a few more steps to follow if you want it to work perfectly:

1. Export you model in .FBX format with the selected keyframes you want export the model with. The recomendable thing is to export all the animations separated (iddle, running...) and them import them into Unity.

2. If it's imported correctly it will appear like the image bellow on the inspector.

3. Now we will create an animator, this is what will control that the animation works correctly, it can be configured in several ways and program different clips on one mesh, but in this case we are just going to set one. For that we drag the clip into the animator window.

4. Finally, we put the model into the scene and on the parent, then we add the animator we just created and a skinned mesh renderer with the model or one of the parts of the mesh. Everything else has to be a son of this object to work.

Ending Result

Lynx in Decentraland

Animate on Unity

The method explained before, I believe it works very well when we want to animate complex models or organic ones to create NPC's or Wild life.
However for simpler objects I prefer to animate them in Unity, with the help of the animation window.

To do that we have to follow these steps:

1. Divide de model in how many parts you want them, and organize them acordingly (parent, sons...).

2. Set the model in Unity and click on the animation tab with the parent selected, to create an animator and a clip.

3. Once created we can add keys to create the animation, by clicking the red button you activate the recording button and every transform you make to the object will be recorded.

In this example we added the properties of position of the parent; rotation for the son and scale for grandson. To add a propertie right click on the property and select add key. Later I'm going to remove the key from the parent because if I left it that would completely break the animation and move it to other places in the scene.

4. Animate your objects, with this method you can't animate textures, only the position, rotation and scale.

5. You can control the flow of the animation with the curves, if you want to make constant select the points, right click and set both tangents in linear.

6. Then click the export button and it should appear correctly, like I said I removed the animation from the parent to avoid problems when you upload it to Decentraland.

Simple animation in decentraland tutorial

Precautions and Warnings

If you are animating a prefab, it's important to do it in the coordinate (0,0,0), because If not the object may move out of its place.
Don't animate the parent it will break the animation and move it to other places. even if you don't animate any property

without animating the parent

animating the parent

Don't put the animator in entitites (the plugin indicates if it's one), the animation won't work in your scene.
If you want to fix the one stated above, add a mesh filter and a mesh renderer, that way it becomes a GTLF. You can put a model from unity (quad) and add completely transparent material to it, to make it invisible.
Inside a prefab, there can be a different set of parents each one of them with its animator. But a parent can't have two animators

Conclusion

Although it's quite a complex process, and can be quite frustrating when you start with it. But if you get to learn how to work with this you can create complex and beautiful animations, such as the ones of the transit system.