Turn your own superhero into a 3D browser game: reskin the hero and villain, tune for phones and host it

"We have a hero, a villain and a following. We'd love a game people can play in the browser, but a 3D game sounds like a year of work." Comic creators, YouTube and animation channels, toy and snack brands, and edtech teams with a mascot all run into this. A full 3D production with modelled characters, rigs and an asset pipeline is out of reach for most of them. A finished game whose characters are built in code is not.

This guide shows how to put your own original hero and villain into a 3D browser game, tune it for phones and host it cheaply, using Suryaveer vs Krodh, our free suite of three superhero games built with Three.js, Phaser 3 and TypeScript. It is written for developers, studios, agencies and educators working with an IP owner, or for IP owners who code.

First, the rights question

Suryaveer is an original hero inspired by classic Indian TV superheroes, in a maroon and gold suit with a sunflower chest emblem. The name, emblem and villain are our own. If you publish a version that uses a real show's name or logo, get permission from the rights holder first. If you are bringing your own character, you are already on the right side of this.

What good looks like

A superhero browser game for a brand or a fan base usually needs:

• More than one way to play. Not everyone wants the same game, so variety keeps people around.
• Characters that look like yours. Colours, costume and silhouette, in every move.
• Readable on a phone. A joystick and big action buttons, and a camera that never loses the hero.
• Runs on older devices. A quality setting that keeps it playable on budget phones.
• Cheap to host. No servers for a campaign that might last a few months.

The suite covers this with three games in one app: a 3D Arena Fighter (Three.js), an Arcade Beat 'Em Up (Phaser 3) and City Protector, an open-world 3D city (Three.js). It ships no image, model or audio files. It is about 520 KB gzipped, Phaser and Three.js load only when their game starts, and it needs only static hosting.

Step 1: Run it and play all three

With Node.js 18 or newer (20 LTS recommended), run npm install and npm run dev, then open http://localhost:3120. The hub shows the three games, with portraits rendered from the real 3D models at start-up.

Play each game before you change anything, because each one sells your hero differently:

• Arena Fighter: a one-on-one boss fight with four elemental stances (Fire Fists, Earth Armour, Air Shield and Solar Ray), three-hit combos, a dodge and a fist-clash moment when a punch meets the boss's charge. Every win is graded S to C.
• Beat 'Em Up: three side-scrolling stages (City Street, Subway Tunnel and Rooftop Helipad), each ending with the boss.
• City Protector: fly over a procedural 10 × 10-block city, lure the villain into parks and construction sites where strikes count triple, and rescue people with a telekinesis beam.

City Protector is the one with a story your audience will remember: the best play is to lead the villain away from people, not just to hit harder.

Step 2: Put your hero in the suit

There are no model files to replace. The 3D hero and villain are jointed, toon-shaded rigs built from primitives with outlines, and the 2D fighters are jointed vector figures baked to textures. A reskin means editing code:

To change	Edit
How the hero and villain look in 3D	the HERO / KRODH colours and the buildHero() / buildKrodh() rigs in src/art/models.ts
The 2D fighters	BUILDS in src/art/figures.ts
Music and sound effects	src/core/audio.ts

A practical order of work

1. Start with colours. Changing the HERO and KRODH palettes gets you most of the way to "that's our character" in an hour.
2. Adjust the silhouette. Edit the rig builders for costume details such as a cape, helmet or emblem shape.
3. Match the 2D fighters. Update BUILDS so the beat 'em up looks like the same hero. Open ?gallery to review every pose on one page.
4. Rename everything. Change the titles, the villain's name and the stance names to match your universe.

Step 3: Tune difficulty for your audience

Balance lives in a few clearly named places:

• Arena: the damage, cooldown and boss HP constants at the top of src/games/arena/logic.ts.
• Beat 'em up: zones, waves, pickups and boss HP in src/games/brawler/stages.ts.
• City: the grid, block size, safe-zone positions and mission timers in src/games/city/logic.ts.

For younger players, lower the boss HP and lengthen the mission timers. For a fan base that wants a challenge, go the other way. Run npm test after every change: the tests include bots that must beat the boss in the arena and clear all three beat 'em up stages, so a change that makes a fight unwinnable fails before your players find out. The case study explains how that works.

Step 4: Make it work on phones

On phones, players get a virtual joystick and labelled action buttons (punch, kick, dash and chakra in the arena). Landscape works best, so say so on your landing page. In Settings, players can choose 3D quality: High (shadows, sharp) or Fast (for older devices). If your audience is mostly on budget phones, consider making Fast the default.

On desktop, each game shows a controls card listing every key; H hides or shows it.

Step 5: Host it

Build the app and deploy it to any static host; Vercel and Netlify configs and a GitHub Actions CI workflow are included. There is no server, database or API key to manage, so a campaign site can stay up for months at very little cost.

Tips and pitfalls

• Keep rules in the engines. Each game is a pure, deterministic TypeScript engine plus a renderer that only draws it. Put rule changes in the logic.ts files, not the renderers.
• Test on a real phone in landscape. The included Playwright tests cover a phone in landscape and a 2× high-DPI screen, but your audience's devices are what matter.
• Saves are local. One browser save holds settings and best results, so there are no accounts and no cross-device progress.
• Plan the reveal. A hub with three games is a good fit for a staged campaign: launch the arena first, then unlock the beat 'em up and the city.

Who it's for

The suite suits IP owners, comic and animation creators, brands with a mascot, and the studios and agencies that work with them, as well as educators who want a readable 3D game codebase to teach from. If you need a custom game built around your character, our web development team can help, or contact us.

Next step

Suryaveer vs Krodh gives you three superhero games with code-built characters you can recolour and reshape into your own hero, plus phone controls and static hosting. Sign in to any DEV3 account to get the full source free from the Suryaveer vs Krodh marketplace page.