Ask HN: ReactJS component library for making games? | Hacker News Reader

Ask HN: ReactJS component library for making games?

2 points2pointsomone8 comments

Hi HNers! Does anyone know if there is a component library for React that has all the common elements found in games? I am a web person who has built information-driven apps and sites for a long time, and am a little overwhelmed by the thought of building loops, and stages, and worlds, and ka-ching moments, etc. from scratch. Just like component libraries not only made it easy to not write repeatable code but also encapsulated industry patterns in easy-to-import components, I was wondering if there is an equivalent for building simple web games that I could use.

View on HN

Familiarity with React might be tempting to reuse it for games, but there are plenty of HTML5 game engines out there which will do a better job. In fact React is successful in web apps because it is basically using a game loop. For a quick example: https://www.babylonjs.com/community/

Oh incredible. Okay, then may be I was looking at the wrong approach all along.

Are there clear HTML5 web components tied to those engines? I am thinking a confetti component, for example.

These engines generally don’t use the DOM; instead, they render in a canvas element and provide you a framework to deliver logic and drawing instructions to each frame before it renders. That’s an entirely web-standards-compliant approach as Canvas was meant for this. There is stock code and art out there to save you time creating in-game objects for any particular engine (my personal preference is Phaser. )

Thanks for explaining!

I will check out Phaser.

They are not HTML5; they are totally "internals" - the only DOM involved is a <canvas> element or some WebGL element.

Thanks, dylz. I think I am not interested in high-performance graphics, so I am not sure I am fond of working only with the <canvas>, even with these abstracted game engines.

I might just sit for a day to write beautiful CSS and use animeJS or something like that to go back to DOM approach of doing this.

FWIW, I am doing something similar right now and I can tell you that making thousands of overlapping divs sucks for performance already on desktop, and is even worse on mobile. I can see why the canvas thing is in use.

Most JS game engines should support firing native events of some sort, like you should theoretically have the ability to call window.confetti() from canvas-rendering game code in response to a victory screen or similar.

This is very useful to know, dylz. Thank you!!

Reply on news.ycombinator.com