Polygonal Mind
  • Home
  • SERVICES
  • Projects
  • Decentraland
  • Blog
  • Assets
  • / CryptoAvatars

Blog

Creating Worlds from Paintings

7/14/2020

0 Comments

 
The Mission

Here in the Polygonal Mind team we always try to reach new heights when presentings our visuals. Our latest environment which we created on VRChat is a testament of that.
​
On this article I wanted to talk more about how we developed this idea to create the world and from where it comes.
Resources

  • An Artist you like
  • The software of your preference
Creating worlds from paintings
Bringing 2D into 3D

Momus Park was the first time we tried this with surprising results. For those who don't know, the majority of the textures used are based on the The Starry Night from Van Gogh. Trying to imitate the spirals and the brush strokes from the sky and the city on the models.
Momus park in decentraland
Momus Park
In this project, we took these ideas and methods a step further, by not only trying to recreate the texture but also the looks inside the painting. Creating in that way a world in which wherever you went or looked, you experienced the sensation of being inside a painting, uniting 2D and 3D.
​
Actually, this is not a new concept, however most of the 3D works that try this method are static images or videos, an impressive technique and design without a doubt but it's a shame that you can't go around the world they created.
Where to start

Once we have limited what we want to do and the feeling we want to get, it's time to gather references and styles.

In this case, we were looking for artists that had painted open aired spaces and gardens, since the main theme of this world it's called Avatar Garden. Meaning that the player have to have places to walk throught, select the different avatars and relax zones where the players can meet with other people.
​
The other condition that we put ourselves was that it had to be a classical painting, since we were connecting the 3D and the 2D, we thought it will be interesting to join a classic art medium with a new one. Putting this two things together inmediatly gave us the thought of the impresionist movement, with artists such as Claude Monet or Édouard Manet.
Un bar aux Folies Bergère - Édouard Manet
Un bar aux Folies Bergère - Édouard Manet
Water Lilies - Monet Series
Water Lilies Monet Series
This style has a lot characteristics that make it ideal for this, the textures have a lot of personality with a strong presence of brush strokes and spots of colours, making it really easy to create tileable textures. Finally after reviewing a few artists, we decanted ourselves for Gauguin and his tahitian landscapes.
Gauguin painting
Gauguin painting
Take notes

Once we have an artist selected, it's important to take notes. Each artist has a particular style that took years to develop, and if we want to recreate their paintings or artworks, it's a must to try to imitate these details. In this case we can pinpoint a few things from the get go that will helps us in order to recreate it:
​
  • the colors are saturated and very strong (red, greens and yellows predominate in the scene)
 
  • the brush stroke is visible, characteristic of the impresionist movement.
 
  • the shapes are represantive, not a literal representation of the object (as the impresionists said, recreate the impression the object left)
 
  • the cool colors are used very scarcely and in zones that is inevitable their use, for example the sky or the darker parts of the jungle.
​
When we have these main points clear it's time to prepare the props and the assets. To get started, we created some of the most basics props to fill a simple scene. That way we can define more details and polish the models even more.
3D trees based on paintings
Original models based on the painting on the right
Gauguin painting
This also helped us to develop a pipeline that allowed us to work more efficiently, which more or less consists of this:

  • create a list of models and textures you will need.
 
  • try to use tileable textures, it will be preferible to use that as base for the models, for example in this world, we created a single texture with colour variants from green, red and yellow.
 
  • create the models and try to reuse the textures, if a texture is required, ask yourself if it will be possible to repeat it, if it's possible make the texture tilebable so that it can be reused, if not, paint the model in Substance to recreate the strokes more faithfully.
 
  • we can use the transparencies to add more details on the models and recreate the texture of the bushes and trees (more of that in the next point).

Finally, in the spirit of Gauguin, we decided to change the world to an island instead of a garden.
Improvise, Adapt and Overcome

Creating this pipeline gave us an idea about what we will need to make, however it's not as easy as that. As always happens in these kind of projects, we found a series of problems. Especially when adapting some of the assets into the paintings style.

There were times when we had to reject some models because even though the final result may look impressive, the time spend on it, the resources it took or the number of tris, made the process not worth it.
​
For example this tree below (reference on the left), to recreate it we put a base on the leaves with a green texture, and them we recreated the yellow strokes with transparent planes. On the right you can see the tree in the process. Sadly we had to drop it because of the reasons stated above.
Gauguin painting
original tree
3D tree based on painting
tree in 3D
Other example comes from the vegetation, in particular from the bushes, since the forms are not very detailed, if took a lot of tries until we achieved a satisfying shape, it was a difficult time to make because a lot of times they resembled deformated spheres. Since this was a necessary model, we repeated the model until we achieved the desired result.
3D bushes based on painting
Final shape of the bushes
The most important lesson from this point is that not everything comes as one imagines it, so when you arrive to this, is important to stop and think about it. It is necessary? it is taking a lot of your time? how can I change it? This is normal, so it's important to improvise, adapt and overcome.
Improvise. Adapt. Overcome.
If you keep going you can finally obtain the desired results, as you can see:
100 Avatars world in vrchat
100 Avatars world in vrchat
100 Avatars world in vrchat
100 Avatars world in vrchat
Conclusion

While working on this project we discovered that it was a good way to test our limits, and what we can do inside an enviroment project. We tried to recreate a paradise that Gauguin viewed when he first traveled to Tahiti. All in all, I hope to see you there.
Vacation cat

Picture
Laura Usón
3D ARTIST
Passionate about videogames, movies and creatures. artist by day and superhero at night.
Cent
0 Comments

Worlds in VRChat, uploading and doing cross-platform environments.

7/2/2020

0 Comments

 
Upload worlds to vrchat cross platform
The Mission

Uploading something to VRChat is extremely easy and it has made a new dawn for community content as the Unity Engine has a flexible editor that can help you create amazing worlds where to hang out with your friends.
​
Creating content is good, but better is to do it in a way that everyone can enjoy it!
Resources

  • Unity 2018.4.20f1
    • Android SDK installed
  • VRChat SDK
    • VRCSDK2 for Legacy Worlds and Avatars
    • VRCSDK3 for Udon Worlds (alpha)
  • Photoshop
Creators that think about optimization and user experience are cool meme
Before doing anything, let's keep some important stuff in mind:

Of course, first of all you need to have the SDK imported into the project in order to upload your content. Never mix the SDK2 or SDK3 in the same project, do clean uninstalls of the sdk prior to uploading or migrating the projects as it can corrupt your data. Currently (22/June/20) the most stable SDK is the VRCSDK2 as it contains the legacy inputs and triggers for worlds.
​
As the official page says: "Choose wisely."
vrchat choose your sdk wisely
https://docs.vrchat.com/docs/choosing-your-sdk
Worlds with cross-platform support share the same "seed" or "world-id" provided by VRChat once you upload the world for the first time. There is no real limitation for the PC version more than having a thought on lower pc machines and not to overload the scene with RT events or graphics that require real-time processing.

To start the port to the Quest version, first of all duplicate the project as a way of back up and also to make the convenient tweaks you think you have to do to match the hardware limitations of the platform. The Unity profiles is a great help to know what is loading and how much is taking to render each frame of the camera.


As a creator, you should keep an eye on the performance of your world:
  • Tweak and polish performance, learn to know how the Unity Engine behaves itself with the data you are giving:
    • "Static" gameObjects in scene help Unity improve framerate by freezing their render batching.
    • Use the less shader passes as possible. (Keep transparency usage low)
    • Bake lights and avoid real-time lighting for Quest
    • Use only one Directional Light in mixed mode to fake normals into bakes and to give Avatars detail and light direction (as it was a "sun" light).
 
  • Set up an Occlusion Culling matrix and optimize it to make the engine only render what it has to be visible on screen.
​
  • Keep the collision complexity as simple as possible, avoid using mesh colliders and instead recreate your scene with box colliders or other primitive shapes that grant fast-loading and good player interaction with it.


For the Quest version (which is the version that is going to run on an Android platform with graphical limitations), keep in mind the following hard specifications:
  • Keep the build file around 30 mb. All worlds that exceed 50 mb won't run on Quest.
 
  • Texture size space should be kept the lower the better, pack atlas and keep it as a square 1024px texture when possible as they are read faster than higher texture sizes.
​
  • Keep the material list low.
Useful links:
https://docs.vrchat.com/docs/quest-content-optimization
https://docs.unity3d.com/Manual/LightMode-Mixed.html
https://docs.vrchat.com/docs/submitting-a-world-to-be-made-public
https://docs.unity3d.com/Manual/OcclusionCulling.html
https://docs.vrchat.com/docs/setting-up-the-sdk
Prepare Unity to be able to upload scenes to VRChat

Once you have created and optimized the scene for your first time upload (PC build), just click the Show Control Panel button to do all the work to test and upload.

This window will ask you for an account in order to start working, log in and you will be granted access to upload your content.

The tab "Builder" is going to be your bestie during the upload and preparing the scene, this tab will tell you whatever is wrong with your world and will give you instructions to avoid errors.

The first thing it will tell you is that you dont have a scene descriptor. Scene descriptors are gameObjects placed once in the scene as "directors" and managers of the scene content and the rest of gameObjects. They state general behaviours and manage the spawns of players.
​
Create an Empty gameObject on your scene, call it Descriptor and add the Component VRC_Scene_Descriptor to it. Then create another Empty Object, call it Spawn and make it son of the Descriptor. You can place more spawn points and add them to the array list. The gameObjects work as a transform point to place the player when entering the scene.
Picture
Picture
vrchat sdk show control panel
vrchat unity sdk builder screenshot
A common developer screenshot of the builder
Picture
You can customize the orientation of the player spawn, by default is the Z-Axis (blue) in charge of the forward direction.
Picture
Once you have this basic setup, you now can press the big button and upload your content for the first time!
Configure vrchat world 100 avatars
Once the SDK packages all your data and makes it ready to upload, prior to start it will ask you to put the name and other descriptions to your world (Unity will go play mode). Do a thumbnail, state tags or mark specific content and check the box prior to upload.
If you want your World to be public you must have at least "Known User" to be able to send it to Community Labs and let VRChat review if your World is good to be Public.
My PC build is live, what now?

Next steps are important, first of all duplicate your project, this way one project (development ended) will be the PC version and the other will be the Quest/Android version. I usually make use of the PC version as the master and the Quest version a semi-automatic downgrade.
Picture
Once duplicated, open the project with Unity. We are going to need the project in Android, once its open, go to File > Build Settings. You will see a list of diferent platforms to build your project with. Click on the Android platform and next click "Switch Platform".
Unity build settings android
Click on Switch Platform and wait until the process ends. It may take some time, depending on the size of your project. Once ended the platform switch, the Unity environment will be set with Android.

With the change of environment, you will no longer be able to do local tests so keep in mind to do "core" stuff on the pc build prior to duplicate the project. Use this project as a downgrade on texture sizing, high level compression and low-near-zero dynamic or real-time events being displayed on screen. With the same scene, the descriptor will be mantaining its World ID and with the upload the World will be updated with Quest support.
​
During the upload keep all info input the same as the PC version: name, tag, description...
Useful links:
https://docs.unity3d.com/530/Documentation/Manual/android-sdksetup.html
https://docs.vrchat.com/docs/cross-platform-setup
That's it, we hope to see your amazing world over VRChat!

Picture
Alejandro Peño
TECHNICAL ARTIST
Videogame and animation enthusiast. I aspire to become a great videogame artist and developer, providing enriching experiences for those who share my passion.
Linkedin
Picture
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
0 Comments

Upload Avatars to VRChat Cross-Platform (PC and Oculus Quest)

6/3/2020

0 Comments

 
The Mission

Upload to VRChat a character to use it as an avatar can be a bit difficult or messy to do, even more if you want it to be Cross-Platform, here we are learning how to do it.
Resources

  • Unity latest stable version
  • Mixamo
Picture
Before doing anything, is my character compatible
​to be a Cross-Platform Avatar?

For a character to be able to be Cross-Platform it requires to be optimized for mobile devices:
​
  • Maximum size of 5-8 MB.
  • Have less than 5.000 triangles.
  • Only 1 Skinned Mesh.
  • 1 Material for each Avatar, 2 only when neccesary.
  • Textures should be 1024x1024 at maximum.
​
For more information about what you can and can't do with your avatar visit this website:
https://docs.vrchat.com/docs/quest-content-optimization
Prepare Unity to be able to upload Avatars to VRChat

You will need these things to upload your own Avatars to VRChat:
​
  • A VRChat Account (The Steam account doesn't allow to upload custom characters).
  • Unity latest estable version
  • VRChat SDK

In the following link they explain the requirements and how to set up the SDK:
https://docs.vrchat.com/docs/setting-up-the-sdk
In my personal experience It worked when I didn't installed Unity Mitigation Tool, so I don't recommend installing it. Maybe it's just a coincidence. To import the SDK you have to go to Assets > Import Package and select the SDK in the folder.
CAUTION: Importing the SDK will only affect the current Unity project. You will need to import it in every Unity project in which you want to upload something to VRChat.
If its the first time you log in with an account in the SDK you will have to wait until you are able to upload anything to VRChat.
Setting up the Character in Unity

Once you have the Unity Project with the SDK and your rigged character its time to put it on a scene.
​To import the fbx model go to Assets > Import New Asset.
​
You will have to do the same to import the texture (Another way to import them is draging them into the Project Tab).
Picture
Once you have imported both, drag the model into a new Scene. To create a new Scene you can go to File > New Scene; Right Click on the Project Tab > Create > Scene; or simply type Ctrl + N.
1. Change the Scale

To be able to see how big is your character with respect to the world, go to GameObject > 3D Object > Cube. A cube of 1x1x1 will appear in the Scene so you can compare it with your character.

​If you need to change the Scale of the character DON'T DO IT ON THE TRANSFORM COMPONENT OF THE CHARACTER IN THE SCENE, this could create unwanted errors in the future.

​To modify this parameter the best option is to click the character in the Project Tab and in the Inspector Tab > Model change the Scale Factor value until you have the size desired. You will need to Apply to see the change in the Scene.
Picture
2. Create a Material

To create a new material in the Project Tab, Right Click > Create > Material. Left Click in the New Material and in the Inspector Tab should appear the configuration of the material.
Left Click in the circle between the square and Albedo. A new window should appear, showing all your textures in your project, you have to select the one you want for the model. Once you have done this, drag the Material from the Project Tab to the model of your character in the Scene Tab. If everything is ok the model will show now the texture correctly.
Picture
Another option is to click your character in the Project Tab > Material and there click in the circle in the list of materials and choose the material you have created previously.
Picture
Quick Tip: If you want to change the name of something in the project, for example, a material, in this version of Unity you can press F2.
3. Add the VRC Component

Now you click the parent object of your character and look at the Inspector. Click in Add Component, search VR and add the VRC_Avatar_Descriptor.
​
In this component change the parameters of View Position to align it in front of the character. This is where the First Person Camera will be when playing with this character. In theory this would be enough to upload the character, but for caution lets check that there isn't any big problems.

Go to VRChat SDK > Show Build Panel Control, popping up a small window. You have to look at the messages below the button Build & Publish.
Picture
If you want to add Visemes to your character so it can move their mouth when you talk I recommend you to check our Visemes Guide:
https://www.polygonalmind.com/blog-posts/create-and-upload-a-vrchat-avatar-with-blend-shapes-visemes

TIP
Enable Legacy Blend Shape Normals in Unity 2018. Or your character will have weird shading when talking. It can also make your upload a lot larger and so, prevent you to upload since over 10 mb.
Picture
thanks to @franadaVRC for the tip
4. Fix the Rig

Click your character in the Project Tab > Rig and change the Animation Type to Humanoid.
Picture
Go back to the VRChat Tab.
Picture
If you have this problem you have to click on Rig > Configure and select None in the UpperChest box and change the Chest bone to Spine2. Make sure that you have at least 3 fingers rigged:
​Thumb, Index and Middle to have Full IK and Tracking later.
Picture
Picture
Picture
If there is no Red Errors it should be fine. Then click Build & Publish. The build can take some time depending on your computer and the model you are uploading.
Picture
This should appear in the Game Tab. Here you can name the avatar, give a description, indicate if there is any content warning and if you want it to be able to be shared. Make sure to check that you own the rights of the characters. If for some reason in the future you upload a character you dont own you can have legal problems later.
​
To change the preview image you have to go to the Scene Tab and move the new VRCCam in the scene.
When you are done, click Upload and wait for the process to end!

Still have doubts?

Reach us on Discord!
Discord

Picture
Alejandro Peño
Technical artist
Videogame and animation enthusiast. I aspire to become a great videogame artist and developer, providing enriching experiences for those who share my passion.
LINKEDIN
0 Comments

Create and upload a VRChat Avatar with blend shapes visemes

6/3/2020

0 Comments

 
The Mission

VRChat uses blend shapes to detect phonemes via a microphone, and adjust your character mouth to the correct shapes, giving the impression that you character is talking. Let's learn how to do it.
Resources

  • MayaLT 2018
  • Blender 2.79b
  • Unity 2017.4.15f1
Blend shapes visemes in vrchat turorial
Premise

Isn't it great when you talk with somebody online and you see his mouth moving while he talks? It really add ups to the experience, specially in Virtual Reality.

That's what this is about. Creating different shapes so you can see yourself talking when you look at a mirror.
It's the little touches that makes something good to something better.
Starting

Let's say you already have your model done, it's also rigged and skinned so its ready to go. But, you want to make some blend shapes because in-game they look neat and funny.

Well, let's make them!
​

First, we need to know how many blend shapes we need to make. VRChat uses 17 different blend shapes. These are:
  • ​Blink left
  • Blink Right
  • Lower lid left
  • Lower lid right
  • aa
  • ch
  • dd
  • ee
  • ff
  • ih
  • kk
  • nn
  • oh
  • ou
  • pp
  • rr
  • ss
  • sil (silence)
  • ss
  • th
It's important to know that these shapes that we are going to make will need to have a very specific name. For example, aa is called vrc.v_aa; ch is called vrc.v_ch; etc...
​
The only exceptions to this rule are the first 4 of the list. Their names will be vrc.blink_left, vrc.blink_right, etc...
Visemes vrchat list
As you can see in the image, there is no "." in any of the names, and that's because Maya doesn't let you write dots in the names. We will roll with it for the moment.
​
Duplicate your character and move it to a side. Hide what is not necessary and show what it is.
Use an image of reference to know how to shape the mouth depending on the shape you need.
eyes and mouth expressions visemes
3D model with different face expressions
This gives you a general idea of how I made the different shapes of the mouth depending on the viseme.
​
You can see that there is not any vrc.blink_right or vrc.lowerlid_right, but I will talk about that later.
​
Another thing to keep in mind is that even if vrc.v_sil doesn't change the shape whatsoever, you must change something regardless. When we use Blender later, when exporting, if Blender detects that "sil" it's the same as the base form, it will remove "sil" from the blend shapes. Move a vert a little bit, one that no one will see, on the back of the mouth, for example.
​
Now that we have every shape done, we will use the Shape Editor.
Open the Shape Editor in the sculpting tab in Maya. Or going to Deform>Blend Shape.
Maya 3D Deform Blend
Now, select one shape that you created and then select the original model. Go to the Shape Editor and click on "Create Blend Shape". Repeat this with all the 17 shapes.
Picture
Before, I said that I didn't have any blink_right nor lowerlid_right and that's because you dont usually need them. If the character is symmetric, you can duplicate your blink_left, select the new target and in the Shape Editor go to Shapes > Flip Target.
​
This will create a mirror effect and making the right eye to blink. You should change the name once it's done.
Export and Import

We have every shape ready, so now we will export all the package. Select all the shapes, meshes and bones and go to export.
​
Be mindful of checking in the box of Animation and making sure that Blend Shapes is activated too, because if it's not, it wont export correctly.
Picture
Write the name you want and export it.

Now we will open Blender, where we will change the names of the shapes to the correct one.
Open a new scene and delete the objects that get created all the time. Camera and light too.
​
Then, import the file we made earlier.
Navigate through the menus to find the Shape Keys sub-menu.
Picture
Here you can change the names of all the shapes. Delete the first "_" and replace it with a "."
​
The last thing you have to do is to re arrange all the shapes to be in order. The order is the same as the list that I wrote at the beginning.
Picture
Once that's done, export as fbx.
Upload

You should have your Unity latest stable version already set up. If you don't, check this guide out made by my friend Alejandro Peño where he explain how to set it up.
Upload Avatars to VRChat Cross-Platform (PC and Oculus Quest).
With the character imported, we will add a new component called VRC_Avatar Descriptor.
Picture
We will draw the mesh into the "Face Mesh" section. All the visemes should appear below there.
Now just click on each section and select the corresponded viseme.
Picture
Like this.
Picture
Once it's finished, you can upload the character like you usually do. Again, if you don't know how, you can check this guide:
Upload Avatars to VRChat Cross-Platform (PC and Oculus Quest).
Conclusion

Blend shapes visemes are a great way to give life to your avatars in VRChat.
​I would 100% recommend using them in your future avatars.

Depending on the model it takes around 30 min to an hour to create all the shapes needed, and they look great.
​
It's a lot of fun making these, so give them a try!

Picture
Pedro Solans
3d animator
​Junior 3D Animator improving every day possible. Videogame and cat enthusiast.
Twitter
0 Comments

Guía para modificar el Plugin de Decentraland para Unity

5/14/2020

0 Comments

 
English
Por qué necesito modificar el Plugin de Unity?
Usar el SDK de Decentraland para poner entidades "manualmente" en el código de typescript puede ser un proceso lento y tedioso, especialmente si tienes que colocar muchos de ellos y tienes que comprobar que estén todos en el sitio correcto.

Por eso necesitas herramientas que ayuden a construir una escena, como el Decentraland builder o el Unity to DCL export plugin. Aun así, hay ciertos límites sobre lo que puedes hacer con ellos.

En esta guía vamos a ver cómo hacer modificaciones al Unity plugin para DCL para expandir el número de cosas que puedes exportar al código de Decentraland desde el editor de Unity.
​
Antes de empezar con la guía deberías tener un mínimo de conocimientos del SDK de Decentraland, cómo exportar una escena desde Unity para DCL y algo de programación (usaremos typescript y C#).
Decentraland Documentation
https://docs.decentraland.org/development-guide/coding-scenes/
https://docs.decentraland.org/blockchain-integration/display-a-certified-nft/
El Objetivo

Vamos a enseñar un ejemplo de cómo modificar el plugin para hacerle exportar a typescript información necesaria para colocar NFTs en una escena.
Tomando esto como base, deberías ser capaz de hacer tus propias modificaciones que se adapten a las necesidades de tu proyecto.
Recursos

  • Unity 2018.3.6f1
  • Visual Studio (recomendado para usar junto a Unity)
  • Decentraland SDK
  • Unity to DCL export plugin
  • Decentraland para principiantes
Modificaciones en el plugin de Unity de Decentraland
Preparar el proyecto de Typescript

Antes de nada, vamos a programar nuestro propio componente y a dejarlo listo para usar en el proyecto de Typescript.
https://docs.decentraland.org/development-guide/entities-components/#custom-components
No es necesario hacer un componente propio para poner un NFTShape (que ya es un componente de por sí), pero para esta guía lo haremos igualmente, además será últil para usarlo como base para tus propios componentes más complejos.
Antes de empezar a escribir el código en tu archivo game.ts, ten en cuenta que el plugin de Unity sobreescribe el archivo entero y todo tu código se perderá. Por ello debemos trabajar en un archivo separado.
​
Crea un nuevo archivo en src/imports/components/NFT.ts con el siguiente código:
//Crea un componente NFTShape con la información dada
export function createNFTComponent(entity: IEntity, smartContract: string, tokenId: string){
entity.addComponent(
new NFTShape('ethereum://'+smartContract+'/'+tokenId,Color3.Blue())
)
}
//Añade un componente NFTdata a la entidad, crea un componente NFTcon la información dada
@Component('NFTdata')
export class NFTdata{
entity: IEntity //entidad del NFT
smartContract: string //Smart contract del NFT
tokenId: string //Token ID del NFT
constructor(entity: IEntity, smartContract: string, tokenId: string){
this.entity = entity
this.smartContract = smartContract
this.tokenId = tokenId
createNFTComponent(entity, smartContract, tokenId)
}
}
Crea otro script en src/imports/index.ts con:
export { NFTdata, createNFTComponent } from "./components/NFT"
Ahora tenemos nuestro código listo para cuando el plugin exporte el game.ts
Haz un script de Unity que contenga la información a exportar

Crea un script vacío en Unity y ábrelo con Visual Studio (o tu editor de código favorito).
Unity crear un nuevo script de C#
En este ejemplo, solo necesitamos guardar la información del NFT, pero siéntente libre de añadir lo que necesitas para tu propio proyecto.
public class nft_script : MonoBehaviour
{
public string smartContract;
public string tokenId;
}
Añade este script a la entidad de la escena que quieras que tenga el componente del NFT y rellena la información.
​
Address: 0x06012c8cf97BEaD5deAe237070F9587f8E7A266d
Token id:
​558536
Información del NFT en el inspector de Unity
Ahora tenemos la información guardada en nuestra entidad, el último paso que falta es traducir estos datos a nuestro proyecto en typsecript.
Modificando el plugin de Unity en C#

Modificar el plugin puede parecer una tarea muy complicada, pero ten en cuenta que solo necesitamos añadir nuestras pequeñas piezas de código para expandir sus funcionalidades; muy sencillo de hacer si sabes dónde hacerlo.
​
Abre SceneTraverser.cs en la carpeta del plugin de Decentraland: Assets/Decentraland/SceneTraverser.cs

Encuentra la función public static ResourceRecorder TraverseAllScene y añade el siguiente código después del comentario //====== Start Traversing ======
//====== Start Traversing ======
if (exportStr != null)
{
exportStr.AppendLine("import { NFTdata } from \"./imports/index\"\n\n");
}
Esto importará nuestra clase NFTdata al inicio de game.ts
​
Después encuentra la función public static void RecursivelyTraverseTransform y después de exportStr.AppendFormat(NewEntityWithName, entityName, tra.name); añade:
nft_script nftObject = (tra.gameObject.GetComponent("nft_script") as nft_script);
if (nftObject)
{
exportStr.AppendFormat(SetNFT, entityName, nftObject.smartContract, nftObject.tokenId);
}
Último paso,
​encuentra dónde están declaradas las strings de exportación y añade la string del SetNFT al final.
SceneTraverser code
private const string SetNFT = "{0}.addComponent(new NFTdata({0}, \"{1}\", \"{2}\")) \n";
Este código comprobará si la entidad exportada tiene un nft_script y le añadirá el componente NFT data a la entidad dentro de nuestro archivo game.ts.
​
Con todo esto terminado, tu escena está lista para ser exportada a un proyecto de typescript y tu game.ts resultante debería parecerse a esto:
import { NFTdata } from "./imports/index"

var entity1372n = new Entity("NFTentity")
entity1372n.addComponent(new NFTdata(entity1372n, "0x06012c8cf97BEaD5deAe237070F9587f8E7A266d", "558536"))
engine.addEntity(entity1372n)
entity1372n.addComponent(new Transform({ position: new Vector3(6, 1.5, 6) }))
entity1372n.getComponent(Transform).rotation.set(0, 0, 0, 1)
entity1372n.getComponent(Transform).scale.set(1, 1, 1)
Consejos finales

Puedes acceder desde cualquier parte en el proyecto a cualquier array de entidades con tus componentes personalizados, y esto puede ser útil para controlar dónde y cómo algunos componentes o comportamientos empiezan.
engine.getEntitiesWithComponent(NFTdata)
No necesitas hacer nuevos componentes muy complejos si no lo necesitas, por ejemplo puedes exportar desde Unity solamente la información para añadirle a una entidad en un array y aplicarle un comportamiento personalizado.

Antes de empezar a hacer tus propios compontentes, echa un vistazo al sdk de Decentraland y a la librería de utilidades de Decentraland, puede que ya tengan hecho lo que estás buscando.
​
Referencia a la API de ECS:
https://github.com/decentraland/ecs-reference
decentraland-ecs-utils:
https://github.com/decentraland/decentraland-ecs-utils
npm install decentraland-ecs-utils
Conclusión

Si has entendido los pasos de ésta guía, estás list@ para hacer tus propios componentes para Decentraland y poder utilizarlos en el Editor de Unity, y será de gran ayuda para llenar tus escenas con gameplay e interacciones. Espero que te haga el proceso de desarrollo para Decentraland un poquito más fácil.

Picture
Alex Picazo
PROGRAMADOR
Videogame programmer, love developing cool stuff. Always searching for new interesting stories.
LinkedIn
0 Comments

Guide to make modifications in the Decentraland Unity plugin

5/14/2020

0 Comments

 
Español
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).
Empty C# script in Unity
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
NFT data in the Unity inspector
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.
SceneTraverser code
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.

Picture
Alex Picazo
PROGRAMMER
Videogame programmer, love developing cool stuff. Always searching for new interesting stories.
LinkedIn
0 Comments
<<Previous
Forward>>

    Categories

    All
    Decentraland
    Decentraland En Español
    Maya
    Mixamo
    Morphite
    Substance Painter
    Totally Reliable Delivery Service
    Unity 3D
    Updates
    VRChat

    Archives

    December 2020
    October 2020
    August 2020
    July 2020
    June 2020
    May 2020
    April 2020
    March 2020
    February 2020
    December 2019
    October 2019
    September 2019
    August 2019
    June 2019
    May 2019
    February 2019
    January 2019
    December 2018
    November 2018
    October 2018
    September 2016

    Picture
Home
Projects
Assets

Picture
Crypto
Friendly
Picture

Subscribe to get some 💚 in your inbox once in a while.

Follow us and your visit will never be forgotten!
Picture
Picture
Picture

 © 2015-2020 POLYGONAL MIND LTD. ALL RIGHTS RESERVED.
  • Home
  • SERVICES
  • Projects
  • Decentraland
  • Blog
  • Assets
  • / CryptoAvatars