DEV Community

Cover image for ThreeJS + Typescript + HTML Game Engine
Nicola
Nicola

Posted on

5 2

ThreeJS + Typescript + HTML Game Engine

Hi to all!

I've created a simple SpaceInvaders with only JavaScript and CSS game using only CSS, javascript and HTML.

The result was really interesting, and I wanted to move forward to something more complex, like animated sprites and collision detection, using typescript instead of javascript, emulating the Unity 3D engine lifecycle methods and behaviours.

Step 1 - converting js to ts

This was the easiest step, I've installed webpack and created a webpack.config file to compile ts files into js and to copy static files under the build/ folder.

Step 2 - using background-image property instead of emoji content for sprites

I've tried to replace the emoji with a background-image property for enemies and player.

The result?

Really bad! My FPS drops down to 1/5 maximum FPS instead of 55/60 FPS!

So I've moved to html canvas!

Step 3 - HTML canvas

This step was one of the harders, I've recreated the entire sprite and game management using Transforms and generic classes, to handle my sprites position and scaling by an easy way.

So I've created a GameObject generic class, and it's factory to handle sprite creations and rendering.

The result?

Not bad at all, but still glitchy because I was using the 2d canvas rendering context, which is less performant than the WebGL content.

Step 4 - Moving to ThreeJS and start creating a real Engine

The final solution was to use WebGL, and to use it easily I've included ThreeJS into my project. Just a few reworks and the game works really good!

The result?

Amazing! The game is running at 60 FPS!
Here there is the result video!

Conclusions

I've created a simple HTML Game Engine! Using the Unity C# lifecycle methods and other Game Development behaviours, and I want to improve it in my free time.

If anyone wants to collaborate the repo is free to use here.

I'll publish a playable demo when I've done the game ^^

👋 One new thing before you go

Tired of spending so much on your side projects? 😒

We have created a membership program that helps cap your costs so you can build and experiment for less. And we currently have early-bird pricing which makes it an even better value! 🐥

Substantially upgrade your career earning potential for $8/month ❤️

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay