跪拜 Guibai
← All articles
Frontend

Faking 3D Depth in a 2D Game Engine with Four Points and a Fake Z-Axis

By 亿元程序员 ·
Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Embedding a 3D-looking mini-game into a 2D project usually forces a costly engine switch or a full 3D pipeline. This method keeps the entire feature in 2D with a handful of nodes and a single depth parameter, cutting integration time and avoiding asset rework.

Summary

A game team needed to embed a 3D music-ball gameplay into an existing 2D project without adding models, materials, or a 3D camera. The solution uses four manually placed anchor points that define a trapezoidal runway on a static background. A custom `depth` variable, separate from the engine's coordinate system, drives every platform's position, scale, and occlusion order. Linear interpolation between the far and near midpoints moves each platform along the track, while a smoothstep function scales it from 12% to full size to sell the illusion of distance. The ball's bounce is not animated independently; its jump phase is derived from the next platform's depth, so changing the speed or spacing automatically keeps the ball in sync. A short scale-up-and-fade animation on contact provides step feedback. The approach keeps the camera fixed and avoids any real 3D pipeline, making it practical for a sub-gameplay inside a larger 2D title. The article also outlines extensions like multi-lane tracks, BPM-driven platform generation, and timing-based beat alignment.

Takeaways
Four anchor points placed on a background image define a trapezoidal runway that serves as the entire perspective skeleton.
A custom `depth` value, ranging from 0 (far) to 1 (near), drives platform position, scale, and occlusion without touching the engine's Z-axis.
Platform position is computed by linearly interpolating between the far and near midpoints using the depth value.
Scale is tied to the same depth value and smoothed with `smoothstep` to make size changes feel more natural than linear scaling.
The ball's bounce phase is calculated from the next platform's depth, so speed or spacing changes automatically keep the ball synchronized.
A short scale-up-and-fade animation on the platform at the contact depth creates the sensation of stepping on and breaking through it.
Extensions like multi-lane tracks, BPM-driven generation, and beat-aligned timing are possible by replacing the fixed depth gap with song-beat calculations.
Conclusions

Deriving the ball's animation phase from the platform's depth, rather than running an independent loop, is the detail that prevents desync and makes the whole illusion hold together under variable speeds.

Using a smoothstep curve on scale but keeping position interpolation linear is a deliberate trade-off: it adds visual polish where the eye is most sensitive without complicating the movement math.

The entire technique hinges on a single constraint — position and scale must share the same depth driver — and violating it immediately breaks the illusion, which is a useful litmus test for any pseudo-3D trick in 2D.

Treating the four anchor points as the sole source of truth for the track means the effect can be re-targeted to any background just by repositioning those points, making it surprisingly reusable across different scenes.

Concepts & terms
Pseudo-3D in 2D
A rendering trick that simulates three-dimensional depth on a 2D plane using perspective cues like scaling, positioning, and occlusion, without any actual 3D geometry or camera.
Depth-driven animation
A technique where a single custom depth parameter controls multiple visual properties (position, scale, opacity) of an object, ensuring all perspective cues stay consistent as the object moves.
Smoothstep
A sigmoid-like interpolation function (often `t * t * (3 - 2 * t)`) that creates an ease-in-out curve, making transitions feel more natural than linear interpolation, commonly used in shaders and animations.
Source: juejin.cn ↗ Google Translate ↗ Backup ↗