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).
  • DayNightCycle folder (day_night_cycle/src/DayNightCycle).
  • MoonLight folder (day_night_cycle/src/MoonLight).
  • DebugOverlay folder (day_night_cycle/src/DebugOverlay).

🚀 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

• Twitter: @hiulit
• GitHub: @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.
• Start a new discussion about a feature request.

🙌 Supporting this project

If you love this project or find it 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.
• Emojis: CC BY 4.0
• Godot logo: CC BY 3.0.
• Sunny Land assets: Public domain.