← → lanes · ↑ jump · ↓ slide · ESC pause

⚠️ Three.js load nahi hua

Internet check karke page reload karein.

Building Zo Runner Escape: How a Simple Endless Runner Turned Into Two Worlds

A behind-the-scenes look at the game you just played · Web · Three.js

Zo Runner Escape's initial release was so small that it was almost embarrassing. The final chapter saw a cube slide between three lanes to avoid other cubes and a rising counter. The endless runner, on the other hand, entices you after completing the basic loop. Within a few nights, the cube developed arms, legs, a face, and the stubborn habit of running in the opposite direction. This blog tells the truth about how a simple prototype turned into a full game with two worlds, including a city to sprint through and a railway line to escape down, complete with a police officer who refuses to give up.

Lean left, lean right, jump over a barrier, slide under a laser, grab a fistful of coins, and try not to look at the helicopter that just appeared behind you if you came here directly from the previous game. You probably didn't notice everything that goes on quietly behind the scenes to make sure those few seconds on your phone when you try to run six other tabs at once go smoothly.

Why an Endless Runner?

Making endless runners appears to be simple. This game does not feature traditional level design, hand-placed enemies, or scripted boss fights. Instead, you create the world as you move through it. A small project can perform well above its weight due to that one concept, which is to generate the track in front of the player and recycle anything behind it. The game can cook an infinite number of meals once a recipe is written.

The issue is that "infinite" must be carefully constructed. Making thousands of road tiles would instantly cause a browser crash due to phones' limited memory. Consequently, the track consists of eight or nine sections arranged in a particular order. As the player moves forward, the segment that was behind the camera is quietly picked up and dropped back in front of them.The player is unaware of this because the trees, buildings, and obstacles in the terrain have been rearranged to appear brand-new.

The Character Who Ran Backwards

Every video game has a flaw that turns into a joke, and the character in this one was facing the wrong way. While the entire world was moving in the opposite direction, the runner was frantically sprinting into the camera. Instead of being a hero fleeing danger, it appeared more like someone moonwalking away from their responsibilities.

A single line of rotation was the solution, but getting the character to look believable took a lot longer. A real-feeling human is mostly a trick of proportion in a low-detail game. Even if each one is just a small shape, the head needs a jaw, a nose, ears, eyebrows, and lips. The hands needed fingers because a smooth ball at the end of an arm looks like a mitten and mittens instantly break the illusion. Once the limbs started swinging in time with the running speed, the little figure finally looked like it belonged in the world it was running through.

The lesson: players forgive low detail, but they never forgive things that move wrong.

One City, Then a Whole Railway

The world of the road took precedence. A gray road with painted lane lines, tall buildings with glowing windows, and sunny skies abound alongside blue skies, green grass, leafy trees, and sidewalks. When a train blocks a lane, the road turns into a pitch-black tunnel with only ceiling lights on. Buses and automobiles race toward you. That tunnel scene is one of my favorites because it only involves the fog getting darker and the lights going out for a few seconds, completely changing the mood. It is not at all difficult.

Due to the well-known experience of running down train tracks while being pursued, the railway world was later added. Consequently, the entire environment had to be rebuilt, including signal lights that stood guard, wooden sleepers, raised platforms with yellow safety lines, and steel rails that caught the light. You can switch between the two worlds through the menu, and the game silently builds one and destroys the other without reloading the page.

Trains That Had to Look Real

Obstacles could be more than just colored boxes in the world of railroads. A passenger train needed doors, headlights, a roof that was rounded, a pantograph that extended upward toward the wire above, a windshield with a straight nose, and a strip of side windows divided by pillars. The freight train, the malgaadi, needed a flat chassis carrying stacked shipping containers in mismatched colours, with ribbed sides and couplers at each end, all riding on rows of steel wheels.

These high-detail 3D models are in no way. They are groups of simple shapes carefully arranged. Organization, however, is everything. A box with two glowing headlights and a yellow stripe immediately identifies it as a train, whereas a box without those details identifies it as nothing. At this stage, complexity is less important than choosing the three or four details that tell the brain what it is looking at.

The Officer Who Never Quits

The chase creates tension throughout the railway sector. A police officer appears behind you and immediately begins to flee. If you wash your hands, he will slowly return. However, he leaps ahead of you and closes the gap whenever you come across a barrier or signal box. Survive enough mistakes and he catches you, and the run is over.

A narrative is enhanced by this by introducing minor flaws. Although a single excursion is not fatal, it is cautionary. You can feel him breathing down your neck after two or three in a row. The game does not need to shout at you because the decreasing distance speaks for itself. In addition to awarding points, it gives a clean run breathing room.

Keeping It Smooth on a Phone

Throughout the project, performance was a constant companion. A browser game needs to run on anything from a gaming laptop to a three-year-old phone, and the power differences between them are significant. A low-graphics mode that had fewer trees, simpler shadows, shorter draw distances, and less obvious particle bursts was the answer. The game checks the device before starting, but the default setting can always be changed in the settings.

The additional major technique is object pooling. Instead of creating a new set of coins and obstacles each time a new one is required, the game simply reuses the ones that have scrolled off the screen. Pooling eliminates the annoying little stutters that occur in online games when objects are constantly created and destroyed.

What I Learned

Play It Your Way

The objective is the same whether you choose the bright city road or the nervous railway escape: keep moving, get the coins, avoid obstacles, and outrun obstacles. Select a character, complete daily tasks, advance up the leaderboard, and see how far ahead of the officer or the city you can get. Since the first sliding cube, the goal of the previous game has been to be quickly picked up and played again for fun.

#EndlessRunner #ThreeJS #WebGame #GameDev #JavaScript #BrowserGame

Written from the developer's notes while building Zo Runner Escape. Every word reflects the real decisions made during development.