A little bit of History
Don't worry! This is going to be short, although the colour has been studied from the 15th century: how to obtain colours, involving physics, chemistry and even maths. But it's not until the year 1920, that the Bauhaus School developed different theories, about the transmission of the colours and how do we view them, especially the studies of Johannes Itten, a Swiss expressionist.
It's thanks to these studies that we could develop the modern colour theory.
Johannes Itten → Zweiklang 1964
Have you ever done an image in photoshop, but when you print it the colours look different? That's because we have different methods to produce colours, where the primary colours change.
These colours are used by screens, and anything that emits light. The wavelengs of the light create the different tones, and when more light is added, the tone is brighter.
In this palette we consider the primary colours the red, green and blue (RGB). Here, white is the combination of all, and black the absence of colours.
Used by anything that reflects light, like books or other print materials, unlike the additive system here, the pigment determines its colour to the human eye depending on the light reflected.
The primary colours here are: Cyan, Magenta and Yellow (CMY), white is the absence of colour while black is the combination of all colours.
It's important to remember that pigments we have at the moment don't absorb the light completely, because of that when we mix all the colours the closest to black will be a dark, dark brown. To fix that we add a four pigment, which we call Key, hence CMYK, this four pigment is essentially Black.
Primary, Secondary and a lot more
Once we have explained the different systems, it's time to start explaining the different things that compose a colour. Mixing all of this together is when we obtain any possible colour.
This marks the position on the colour wheel, usually on programs, like photoshop, is referred in degrees (because it's a wheel), for example perfect violet is on 270 degrees.
How bright a colour is, usually it goes from 0 to 100%, being 0% the black and the 100% the white.
This components tells us how rich a colour is. Less saturation means the colour becomes a shade of grey, and a perfect colour with the full saturation, the pinkest pink, if you will.
The colour as a chameleon
As you can see on the image; you may think that inside each square, there is a square of different colours but is there?
An important rule when you are painting, the colour changes depending on it's surroundings, this is a well-known optical illusion, the truth is that the colour in the small squares it's the same.
If you think carefully is not necessary to have a deep knowledge about the theory of colour to get beautiful compositions, but it is recommendable, especially on cases like the optical illusion, because one colour can ruin a whole composition. Now I'm going to give a few examples of how to combine the colours, the usual ones. All the Palettes created here are from Adobe Color.
A single hue extended, changing the brightness and saturation.
Colors that are directly oposed in the colour wheel, this example is a simple one but you can create a palette with a double complementary, that consist on the combination of two complementary colour pairs.
Three colours that are equidistant on the colour wheel.
A group of colours that is adyacent to each other.
This is just a small introduction about the theory of colours to create a pallete. You can use the method you like the most or create one in a intuitive way. In my case the ones Ilike the most are the ones created with complementary colours combined with the analogous palette.
I think it's ideal to accentuate a part and create a point of attention. If you want to further investigate how the colour can change depending on its surroundings, you can do the same as in the gif I made.
You can do it with photshop or mixing cartulines of different colours and it's a good exercise when you are starting painting or designing.
If you already have an advanced knowledge of decentraland maybe you want to skip this guide and go straight to the finished tutorial project on github.
We'll asume that you have some basic knowledge of making a basic game in typescript using decentraland components, if you need to know more about Decentraland components check the following docs:
Entities and components | Decentraland
It would be nice to if you check before starting the Decentraland docs about using P2P messaging, but won't be necesary as we'll cover this in the guide:
About multiplayer scenes | Decentraland
Prepare your component
If you already know everything about DCL components and input on entities you can skip this part.
For the sake of this guide we'll use a very simple component to change the color of a BoxShape entity, and the spawn cube function provided by the init example DCL project. Of course you can adapt this guide to use it with your own project and components.
To our new ColorComponent we'll add some functions that will be usefull to manage the component via player input or P2P message
To get everything ready for start coding our P2P messages, we'll finish first the update from our local player input, if you don't know how to do that I recomend to check the Decentraland docs for input in entities
One last thing, lest make an array of 3 cubes to manage instead of only one.
Now we have 3 cubes that chage color, ready in a local only scene
To simulate multiple players in your local scene, open the decentraland preview in two different browser windows
First we need to define the structure of our messages with the data we want to transmite, in this tutorial this structure is simple, but in your game be careful with this part, the more information you need to transmit the slower will be te updates. Always try design your game to reduce the amount of data transmited.
Make a function to update the entities with a recived CubeState
Before making any messages we need to have an unique player ID, you can make your own system, but since the decentraland player names are unique we'll use them in this tutorial
Messages that are sent by a player are also picked up by that same player. The .on method can’t distinguish between a message that was emitted by that same player from a message emitted from other players.
Now we can start with the P2P code, make a function to capture emmited messages
And in the ColorComponent, when the local player change the color, send a message with the new color index.
The game is ready now, open the preview in two browser and check the cubes change colors in both windows.
What's a Style? It's edible?
If we look the definition in the dictionary, a style is a list of peculiar characteristics that identify an artist, work or a period in art history. When we talk about videogames, we could choose the most obvious ones, like stylized, abstract or realistic.
Abstract Videogames: Geometric Wars, Monument Valley
Stylized Videogames: Overwatch, Zelda breath of the wild
Realistic games: Assassin's creed Odissey, Uncharted
I know it's kind of an easy to see with examples proposed, you can easily identify each one of them looking at them. But it is a good exercise to look at your preferred medium and try to identify their defining characteristics.
How to take on a Style
As we said before, a style is a series of characteristics that makes someone or something easily identifiable. In Polygonal Mind, for example, we do a low poly and stylized look, while maintaining an unique edge in each project. When taking on something as complicated as this, I like to view it from examples that are close to home. So let's see what I mean looking into one of the projects of Polygonal mind, the museum for decentraland. Taking a look back, the museum is a virtual building for Decentraland. It had to be cyberpunk and similar to the style of Blade Runner, if you want more information on that you can check the article here:
Developing an Style 101
Sometimes developing can seem to be really easy, but truth be told, it's not child's play.
A Style is something that can take years to evolve until it becomes yours truly
So take this as a series of tips to start creating your own way of doing things.For that reason I'm going to try to exemplify it using the props for the museum on Decentraland.
Photo of the museum
When I want to develop props for a project, I like to write a list of the
That made the scene feel different. In this case we can say that:
Another thing to take into account, is the palette of colours, if there is a series of colors that are already selected, then you can work with the same colours, select complementary colours (colours on the opposite side of the colour wheel) or on the same hue but with different saturation (the intensity of a colour, expressed as the degree to which it differs from white).
For instance, green hues don't match in this scheme of colours, since the pink and blue are the commanding tones on the scene. However, as you can see on the screen that surround the tree, yellow tones work really well, because they are complementary with the palette. Nevertheless, in this project I preferred to use the same colours as the building.
Once we have the characteristics and the list of models, I search for references in Pinterest and Google Images. Here are some examples of some sketches for the props.
Sketches of props
As you can see in the sketches I tried to make it as similar as possible to the list of attributes I wrote before, that way they can blend with the scene perfectly.
Into the modeling
At this point, the process we follow is very similar to the one described in the last article I wrote, so if you want a more developed description you can check it at the link I provided before. But as I said before...
Nevertheless, never forget the musts. Reference, Blockout and Detail.
Moreover, in case of 3D, don't forget that you can view the prop, object or character from different angles, so it is important to think in all the angles the model can be viewed, see the expositor below.
As I said, this is more a series of tips rather than through guide, but I hope that it's useful. Sometimes it can be complicated, but with a little bit of attention to details and dedication, you can get a unique design.
Main Parts of the Wearables
A wearable is an item of clothing, accesory or body feature, that are used to customized your avatar inside the world of Decentraland. Although there are some wearables that you can use already once you create your account. Now you can create your own custom wearables.
However before you proceed in creating your own clothes, you need to know several things. First things first, each wearable is organized in different categories such as:
This divides the wearables in different categories, that determines which body part of the avatar will be applied to, some wearables will have to replace others completely to work. The categories that appear in the builder are these:
And last but not for that less important, we have to talk about the limitations for the 3d models and those are:
Starting to build
Once you have clear the division between the parts of the wearables, you can start modeling. In this guide I'm going to do the basic wereables, such as feet, lower body and upper body. So you can know it as a reference, however you can follow this same progress to create all the wearables following the limitations I wrote before.
Before start I recommend to download the basic avatar male and female from the link below, so you have a reference of where to start. Inside you will also find a Blender file with the armature, that we will use later on to rig the models, as well as some references of other wearables.
Wearable Reference Models - Google Drive
Inside the Drive folder and where to find the basic resources
In my case I'm going to download the fbx model of male and female avatar to load them in my maya scene to start modeling, but you can use your prefered 3D software.
Modeling & Texturing
In this section on the article I'm going to comment on three ways in which I take on making the wearables together.
First one, is taking one part of the model duplicate it, and modify the vertex and faces to create the new model. making sure that connects correctly with the other parts. In this case since I'm making the feet this model can be for male and female, so I only need to make this wearable once.
Making the feet from the base feet of the model.
The second one, is to create the model from zero from a basic shape and model the vertex to create it. In this case the skirt, while I use the female legs as the base the skirt is created from a cylinder, and increase the triangles conforming I'm modeling. Also in this case I create a variant for male avatar, that are pants, following the first method.
Skirt for female avatars
The third one, consist in model the wearable without taking into account the number of tris and when we have the final shape, make a new retopology that fits on the criteria. In my case, I use Zbrush to create the shape of the model and then I make the low poly in Maya. The model of the upper body is the same, but it changes the body shape, so I duplicate the model and change the shape a little to create the variation.
Creating the Upper body jacket
For the textures, since is such a small resolution texture I recommend to made UVs symmetrical so that the UVs can be a lot of bigger. I don't touch any part of the AvatarSkin material UVs because I can break the texture when loading in Decentraland.
For my models I paint them in Substance Painter, and I can only put two textures in the model so I only paint on the Base color channel. Don't forget to change it also in the viewport in Substance to see the final result. Also when you create a new project remember to put the resolution in 512 px.
Painting all the models
Rigging & Exporting
Once we have all the models, materials and textures done, is time to rig them and export them in GLB. For that purpose you need to have Blender 2.8 or superior, you can rig the models in other softwares however when exported, the models tend not to work correctly.
First we have to import our model into the scene, armature.blend in the drive folder, if you have modeled it using the original models as a reference you will have not problems in the placement of the model, nevertheless I recommend to apply the transformations on the move and scale.
When I have the transformations applied I rig it selecting the armature and the model, pressing P with automatic weights, check the weights and if necessary correct them.
Finally, it's time to export it. I select the models just in case, click File → Export → GLB. Check apply modifiers, and skinning in the extra options in the exporter.
Then repeat this steps with the rest of the models.
Rigging the model and exportin it from blender
From there you are ready to add your items, press add items and drag or select the models, in the new panel that appears we can select the basic options for our wearables. You can select the body shape and select the male or female options and then add the counterpart. Change the name, the rarity which determnines the number of wearables that will be created, and the category that configures which part will replace.
If you press EDIT, you will enter a menu where you can view the wearable in the avatar, and complete the rest of the options.
Once we have all the wearables, we can return to the main menu in the collection. Click on set a price, where we can put a price or make it free, put our address and finally submit it to the curation commite.
Here is a general guide that can help you create your own wearables. In the decentraland guides you can find more information about the curation process, and the textures of the skin and the standard texture, if you need them.
I believe the builder is a great tool to check this wearables, and test them pretty fast. With this models I think it is time to say; have fun and can't wait to see what you make.
Setting up the Unity Project
It's possible that you can use older and newer versions of Unity, but for the sake of not complicating things, I recommend you use Unity 2018.3.14f1, since it's the same I use.
As always, create the Unity Project with the correct version. No need for Android versions. Now you should be on the empty scene. Before creating anything, let's install a couple of things first.
The Unity Recorder allow us to record videos, Gifs and images directly from the program, so no need to screenshot anything. Just Unity.
To install this, you need to go to Window > Package manager
The package manager will open up, and it'll take a couple of seconds to load everything.
Unity Post Processing Effects
Same as the Recorder, go to Window > Package manager and search for Post Processing
Now you only need to install it, there's no need to do anything else for now.
This is more of a personal preference, but you can search online for diferent shaders that you can use on your avatars to make them look cooler. The one we use is Toony Colors Pro 2, although there are a lot of free online alternatives that give similar results.
This is the fun in this part of the avatar process, experimentation.
Setting up the scene
It's time to set up the scene. At least the basics so you can always start with something.
I'll leave a UnityPackage down below with everything I'm about to do.
For a good representation of our characters, we use 3-point lighting method. It is a traditional way of lighting up a scene and it uses, as the name suggests, 3 different points of light to illuminate the avatar. Only the avatar, not the scenary around it.
Use this link to get the basic set-up of lights.
This is the basic setup we use for the avatars. Regarding the rest of the scenary I use the standard directional light that comes with every Unity scene and I create any new light that I see necessary to achieve the result I want.
You might be asking yourself "how can I make one set of lights affect the avatar and not the scenary or viceversa?"
We use the layer system Unity has by default. For this test I use a cube, but its exactly the same when you have your avatar posed.
First you need to create the layer your avatar will be on.
We have the canvas ready with the frame but how can I see the final result?
You need to set up the game window to display the correct resolution for it to work.
If the canvas is active everything will set up correctly and you will see the frame in place.
Poses for your avatar
Now it's time to pose your avatar!
I hope you used Mixamo because if you did, this part will be a lot easier.
Just use the FBX file you used to create the VRM (with the rig and the visemes) and upload it again in Mixamo. This time it won't ask you to put the bones in place, because it already has them!
Anyway, find a pose that you like.
Once you have what you need, download the avatar and put it on the scene. But that's not all!
You can still manually edit the pose by manually moving the bones to get a better, exagerated and more expressive. Also you can move around any dynamic bones you have manually to get much better results.
Think how your avatar would be like, what kind of personality would have and how it would act. If you have a nice base pose you can get a much better result if you edit the pose afterwards. Look at this example:
Play with the poses so you can represent how cool your avatar is! There is no limit!
Color and composition
Color is one of the most important factors. You need to understand what colors your avatar have and how to complement them accordignly to make it pop-up in the scene.
Having a basic understanding of the theory of colors will help you tons in this one.
To give you an example, I'll use the Cool Banana render that I made because it shows perfectly what I'm trying to explain.
The principal color of Cool Banana is, of course, yellow, which complementary is purple.
Of course this is not a Law, but rules. You should not follow these strictly and can bend it around how you please, so for Cool Banana I used both purple and tones of Dark blue.
By using these rules, you will ensure that no avatar will blend with the background and they'll be the first thing you will see. Not only that, it'll make sure complicated poses are easily readable.
What? You don't know what color is which and you can't figure it out? Don't worry, I have a solution! Adobe Color Wheel!
You can select the colors you want and with a click of a button, it will give you your complementary colors. What's even better, is that you can actually upload an image and it'll tell you what are the 5 more prominent colors, so you can then, select a few to color the rest of the background.
One of the most useful tools to have, and with practice, you won't even need it in the future!
Now it's time to set up a scenary for our avatar.
This is really up to you, if you have ideas where your avatar will be posed, make it a reality. Play with the primitives Unity provides to make a scenario or use Blender or Maya to create an even more detailed background.
Play with perspective, at the end of the day, its just an image, so you can stretch and deform everything to make it look cool. Look at this example of out Avatar nº26 Udon.
Looks pretty normal. But look how the scene is set up.
You can use another shader material to give a different look to you avatar. The material is one of the most importants parts to change on your avatar since it will radically change how it looks. See the diference down below.
Now that you have the background and the avatar in there, it's time to give the final touches, that is, post processing. Go where you camera is, and add a new component called "Post Processing Volume"
Now it's time to take the picture.
If you have done the steps of how to configure the recordings from before, just open the recording window and hit "Start Recording". It'll automatically render the first frame of the camera and it'll save it on your PC.
Be sure to turn off the frame from the canvas since it'll be already added when you mint your Avatar in CryptoAvatars.
Thats all I have! Experiment, and look at the renders we and other creators make for inspiration for your own work.
The avatar cards are one of the most important pieces on the whole process since it's the first thing any potential buyer is going to see.
Be creative and have fun!