Galaxy108
Back

Realistic 2D Lighting Shader3 min read

Development Log: Realistic 2D Lighting Shader in Pixel Art Game

Pixel art games can achieve stunning artistic effects with excellent lighting, but dynamic lighting often comes with significant performance costs. To achieve detailed lighting similar to 3D games, I spent a considerable amount of time researching and learning WebGL shaders. Using PixiJS's shader rendering capabilities, I successfully implemented a 2D lighting system that aligns with my vision.

Implementation Principles

The game map in Galaxy108 ranges from small to large, spanning up to 11-12 kilometers in length and width. As a seamless open world, managing the scope of lighting calculations is crucial. Here's how I approached the problem:

  1. Collision Sensors for Light Masking:

    • I used existing collision sensors to detect light-masking objects and light sources within a specific range.
    • The light intensity is calculated based on the radius of each light source.

  2. Shadow Length Calculation:

    • By comparing the height of light sources and light-masking objects, I calculated the length of shadows.

  3. Ray Casting Optimization:

    • To determine whether to terminate ray casting calculations, I compared the layering relationships of shadows cast by light-masking objects onto other objects.
    • This approach ensured reasonable light intensity and masking relationships.

debug preview debug coloring

Static Light Source Calculations

For static light sources, the collision sensor does not recalculate the detected object list until the player moves. Additionally, I implemented a time interval filter for frequent static light source calculations to minimize performance impact.

From this logic, it’s clear that objects in the game have simulated 3D dimensions. Although the shapes are simple, the results are visually effective.

Next Steps

  1. Light Source Variations:

    • I plan to add variations in light rendering based on the type of light source. For example, flickering light intensity for campfires to simulate the effect of dancing flames.

  2. Dynamic Vision Masking:

    • I have already experimented with adding vision masking for characters, and the initial results look promising. However, the performance cost is high.
    • Additionally, blending dynamic vision masking with static lighting poses challenges that cannot be easily resolved without upgrading to a newer version of PixiJS.

This lighting system marks a significant step forward in enhancing the visual appeal of Galaxy108. By balancing performance and visual quality, I aim to create a more immersive and dynamic pixel art world.

开发日志：像素艺术游戏中的动态光照

像素艺术游戏可以通过精良的光照效果呈现惊艳的视觉体验，但动态光照通常会带来较高的性能开销。为了在 2D 场景中实现类似 3D 游戏的精细光照，我花费了大量时间研究 WebGL 着色器，并利用 PixiJS 的着色器渲染能力，成功实现了符合预期的 2D 光照系统。

实现原理

Galaxy108 的游戏地图从小规模到大规模，最长宽可达 11-12 公里。作为一个无缝开放世界，合理管理光照计算的范围至关重要。我采用了以下方法：

  1. 基于碰撞传感器的光遮挡检测：

    • 利用已有的碰撞传感器检测光源范围内的遮挡物体。
    • 根据光源的半径计算光照强度。

  2. 阴影长度计算：

    • 通过比较光源和遮挡物的高度，计算阴影的长度。

  3. 光线投射优化：

    • 通过比较遮挡物投射到其他物体上的阴影层级关系，判断何时终止光线投射计算。
    • 这一优化确保了合理的光照强度和遮挡关系。

debug preview debug coloring

静态光源计算

对于静态光源，碰撞传感器不会在玩家不移动时重新计算检测对象列表。此外，我还添加了时间间隔过滤器，以减少频繁的静态光源计算对性能的影响。

从这个逻辑来看，游戏中的物体具有模拟的 3D 立体特性。虽然形状相对简单，但视觉效果非常出色。

下一步计划

  1. 光源特性变化：

    • 计划为不同光源增加渲染变化。例如，篝火光照的亮度会周期性闪烁，以模拟火焰跳动的效果。

  2. 动态视野遮罩：

    • 目前已经尝试为角色增加动态视野遮罩，初步效果良好，但性能开销较大。
    • 另外，如何将动态视野遮罩与静态光照融合仍然是一个挑战，可能需要升级到更新版本的 PixiJS 才能更好地解决。

这个光照系统是 Galaxy108 视觉增强的一个重要里程碑。通过在性能和视觉质量之间寻找平衡，我希望构建一个更加沉浸和动态的像素艺术世界。