Godot 3 2D Day/Night Cycle

A 2D ☀️ Day / 🌔 Night cycle using CanvasModulate and a moon light effect using Light2D.

Examples

Cycle without the moon light.

Cycle with the moon light static.

Cycle with the moon light moving.

🕹️ Demo

• Clone the repository or download it in a ZIP file.
• Open day_night_cycle/project.godot.
• Play around 🙂.

📑 Documentation

• Time
• DayNightCycle
• MoonLight
• DebugOverlay

🛠️ Setup

• Clone the repository or download it in a ZIP file.
• Copy the following files and folders to your project:
  • time.gd file (day_night_cycle/src/singletons/time.gd).
  • day_night_cycle folder (day_night_cycle/src/day_night_cycle).
  • moon_light folder (day_night_cycle/src/moon_light).
  • debug_overlay folder (day_night_cycle/src/debug_overlay).

🚀 Usage

• Prerequisites
• Add a simple cycle
• Add a cycle with a moon light
• Add a delay between cycles
• Add a debug overlay

Prerequisites

Add the Time singleton:

• Go to Project -> Project Settings.
• Go to the AutoLoad tab.
• Add the time.gd file.
• Enable it.

Change the Time parameters to your liking.

Add a simple cycle

Instance the DayNightCycle node in the root scene.

Node
├── TileMap
├── Player
├── OtherStuff
└── DayNightCycle

Change the DayNightCycle parameters to your liking.

Add a cycle with a moon light

Instance the DayNightCycle node and the MoonLight node in the root scene.

Node
├── TileMap
├── Player
├── OtherStuff
├── DayNightCycle
└── MoonLight

Sync the MoonLight with the DayNightCycle.

The MoonLight can be static or moving in sync with a DayNightCycle.

Change the DayNightCycle parameters and the MoonLight parameters to your liking.

Add a delay between cycles

• Create a CanvasLayer for the background and set its layer to -1.
• Instance the DayNightCycle node in the background CanvasLayer previously created.
• Instance another DayNightCycle node in the root scene and add a delay.
• Instance the MoonLight in the root scene and sync it to the DayNightCycle node with a delay.

Something like this:

Node
├── CanvasLayer (layer = -1)
│   └── BackgroundSprite
│   └── DayNightCycleBackground (delay = 0)
├── TileMap
├── Player
├── OtherStuff
└── DayNightCycleForeground (delay = 1800)
└── MoonLight (cycle_sync_node_path = DayNightCycleForeground)

This will create the effect that the background starts changing before the foreground.

Add a debug overlay

Test the passing of time, the cycles and the moon light.

• Create a CanvasLayer and set its layer to 1.
• Instance the DebugOverlay node.

Something like this:

Node
├── TileMap
├── Player
├── OtherStuff
├── DayNightCycle
├── MoonLight
└── CanvasLayer (layer = 1)
    └── DebugOverlay

🗒️ Changelog

See CHANGELOG.

👤 Author

• hiulit

🤝 Contributing

Feel free to:

• Open an issue if you find a bug.
• Create a pull request if you have a new cool feature to add to the project.

🙌 Supporting this project

If you find this project helpful, please consider supporting it through any size donations to help make it better.

If you can't, consider sharing it with the world...

... or giving it a star.

👏 Credits

Thanks to:

• Solo CodeNet - For the YouTube video tutorial that inspired this project.
• Terkwood - For helping with an issue about comparison operators in the cycle state.
• Mitch Curtis - For an amazing PR (#4) that helped improve the project big time.
• Luis Zuno - For creating the Sunny Land assets.
• Twemoji - For the emojis.
• Andrea Calabró - For creating the Godot logo.

📝 Licenses

• Source code: MIT License.
• Documentation (GDScriptify): MIT License.
• Emojis: CC BY 4.0
• Godot logo: CC BY 3.0.
• Sunny Land assets: Public domain.