Sweshi's Tutorials

Cocoos Creator Mind Your Step 3D Game Tutorial - Part 9 - Lighting and Shadows

The use of lighting and shadows can help improve the look and feel of 3D models. Cocos creator has inbuilt support for these so they will be used here.

Cocos Creator 3D Tutorial: Mind Your Step  - enabling cocos creator shadows in the game scene.

As shown in the screenshot, click on the scene, go to the inspector and make sure the following are done.

  • Go to the shadow component and check the box that enables shadows.
  • You can adjust the colour of the shadows so click on the "Shadow Color" and select a black colour.
  • The shadow position also matters so on the "Plane Direction" increase the z index to 1 from 0. This will make the shadow to be appearing behind the object from the normal front view.

Now enabling the shadow does not mean that shadows will be displayed on the objects. We need to enable the shadows on the 3D models themselves. For this, click on the Body of the player and then go to the inspector. The MeshRenderer has a DynamicShadows section for 3D objects. Switch Shadow Casting Mode to On for the 3D model that should have the shadow displayed.

Cocos Creator 3D Tutorial: Mind Your Step  - cocos creator shadow casting mode on.png

The light source also has to point towards the 3D object or should at least be high enough to cast light on the character. So click on the "Main Light" and then change the rotation values as shown in the figure. You can try -10,6,10 which is in the official documentation but I went for -60,60,10.

Cocos Creator 3D Tutorial: Mind Your Step  - light source rotation .

Try running and checking that it looks as good as you want and adjust further to get exactly what you want.

Cocos Creator 3D Tutorial: Mind Your Step  - how the shadow looks in cocos creator

The screenshot above shows how mine looks.



Videos