2D Lighting System for Cocos Creator - Visual Editor & Real-time Shadows

[soida]

CocosCreator doesn’t have a usable 2D lighting system for game development, so I implemented one myself based on my needs.

This is a convenient and easy-to-use 2D lighting system that works out of the box.

Store Link

Light2D Visual editing lighting system

Web Demo Address
Click to check it out

Other plugins by the author

• 2D curve texture 3.x version, can achieve terrain similar to Hill Climb Racing
• 2D curve texture 2.4.x version
• Polygon sprite, arbitrary polygon texture rendering that can be batched
• RiveAnimation, load Rive format animation, supports WeChat and Douyin mini games
• SpriterAnimation, load animation exported by Spriter, supports all platforms

Supported engine versions

• Engine version: Cocos Creator 3.6.0 to 3.8.7

Features

• The lighting system is registered into the engine’s main loop in the engine’s way, logic and rendering order are controllable.
  

• All light source components can be visually edited in the editor, what you see is what you get.

• Global ambient light
  
  

• Point light
  
  

• Spotlight
  
  

• Sprite texture light source (use prefabricated textures to blend lighting brightness)
  
  

• Regular rectangular light source
  
  

• Regular polygon light source (regular polygons and circles)
  
  

• Custom polygon light source (polygon vertices can be edited in the editor)
  
  

• Supports setting normal maps, effective for all rendering components, such as Sprite or spine animation
  
  
  
  

• Supports attaching any light source to any node or animation, such as Spine animation
  
  

• Currently supports several major rendering components in the engine (Sprite, Label, sp.Skeleton/Spine, TiledLayer/TiledMap, dragonBones.ArmatureDisplay(DragonBones))

• Optimized light source rendering data submission, no performance issues.

• Great compatibility and optimization for rendering shader calculations, ensuring webgl1.0 (opengles2.0) can run, webgl2.0(opengles3.0) has better performance.

• The author has tested the available running platforms and different performance levels of mobile phones, all can run normally without obvious performance problems.

Features to be optimized

• drawcall optimization will be updated in the next version.
• dragonBones will be updated in the next version.

Quick installation tutorial

• Plugin mode installation and usage

  • After downloading the plugin, when importing, the plugin will automatically copy the Light2D and Light2D-samples folders to the assets directory, and you can view the corresponding sample scenes in the editor.

• Full project mode usage

  • After downloading the plugin, there will be a complete sample project in the plugin package, such as flashfin-light2d_Vxxx_CCC38X_Project.zip, you can unzip it and import it directly into the editor to view.

• Settings required after installation

  • Enable 3D Basic Features in Feature Cropping
  • Enable Keep Scene Main Loop Running in Preferences

Super quick usage tutorial

• If your project already has game scene A

1. Copy the existing LightSystemKeep node to scene A
   

   

2. Set the main camera of scene A to the Main Game Camera property of the Light2DShadowCamera component
   

   

3. Add a Sprite node B in scene A, add a Light2DReceiver (light receiver) component to node B, and the rendering result of B will be darkened (receiving the default ambient light).
   

   

4. Add an empty node C in scene A, add a Light2DSource (light source) component to node C, and the rendering result will be a circular area illuminated.
   

   

5. Now you can run to see the effect, the running result is consistent with the editor.
   

   

6. Continue to add a Sprite node D in scene A, add a Light2DObstacle (obstacle) component to node D, place node D within the illuminated range, and click run (shadow function is invalid in the editor), you will see shadows generated by the obstacle.
   

   

7. Add an existing script component MoveWithTouch to the light source node C, click run, and you can drag node C to dynamically view the shadow.
   

   

8. The above is the basic usage of point light and shadow functions. For more features, you can open the sample scene to view.

Some recommended production tools

• Promote some useful tools, you can purchase if needed.
• The atlas making tool used in the plugin sample is TexturePacker
• The normal map making tool used in the plugin sample is SpriteIlluminator

Contact the author

• For any usage questions, please contact the author in time.
• flashfin@foxmail.com
• wechat: soida3

[soida]

v0.3.0 Update (Now Live)

Store Link
Web Demo

New Features

• Height Property for Light Sources
  Added height property to Light2DSource component (with matching support in Light2DReceiver) for enhanced lighting normal simulation control.
  
  

• DragonBones Animation Support
  Light2DReceiver now supports DragonBones animation components.

• Material Instance Caching Optimization (Drawcall Optimization)
  (Enabled by default globally)

  • Current Support: Sprite and Label components
    (Spine/DragonBones EnableBatch coming next version)

  • Sprite: Supports single textures, system atlases, and TexturePacker atlases

  • Auto-Batching Conditions:

    • Same texture ID (regardless of atlas status)
    • Same Receiver material instance (matching properties/lighting data)
    • Normal maps require identical UV layout as diffuse maps when atlased
      (Use TexturePacker’s “Same Layout” feature)
      
      
      

  • Label: Requires cacheMode set to BITMAP or CHAR

    • Sprite Batching Compatibility:
      • Sprites using single textures + dynamic atlas
      • Text using BITMAP cache mode + shared material instances

• Breaking Changes

  • Changed Light2DReceiver._normalMap type from Texture2D to SpriteFrame
  • Manual Action Required: Reassign normal maps on all affected nodes