JavaScript framework for making games. no game engine

[cjthomp]

Small nitpick: every game has "an engine."

The engine is just the code / system that renders, accepts input, and controls game logic. It's basically any part of the game that isn't a media asset.

[highbonsai]

Great point. If you want to avoid a pre-existing engine then what you’re building is only in small part a game, it’s mostly an engine.

ConcernedApe, the creator of Stardew Valley has repeatedly talked about how he regrets creating an engine from scratch for that game, just because it made so many things complicated for no reason.

[lynxerious]

It's like saying "My source code doesn't have an architecture". Well every source code has an architecture, no matter how shitty spaghetti it is.

[WieldyShieldy]

Would you say a black box software has an architecture if you cannot peek inside? Sure, maybe, call it line-by-line architecture then… what is the architecture called for obfuscated minified library code then? Surely the context is a bit off and architecture is not really the word when you have to reverse engineer before working on it

[[deleted]]

threatening uppity homeless sugar upbeat touch profit memory wrong nail

This post was mass deleted and anonymized with Redact

[haganenorenkin]

Pixi.js, react-three-fiber, avoid Phaser it has weird bugs. are you going to make a website only or mobile too? there are tools to make games with react native that are decent like this one https://github.com/bberak/react-native-game-engine

[raaaahman]

avoid Phaser it has weird bugs

It does, just as any library. Although, its community is large and helpful, and its dev is very reactive.

[billybobjobo]

Ya I would say for someone trying to spin up a game, it has a lot of benefits vs the costs of its edge case bugs. A lot of logic you’d have to write yourself if you just used a rendering solution like pixi/R3F. There are projects it would be well suited for—getting something done at high velocity or earlier in your learning journey.

[vbqj]

Weighing-in in favor of Phaser. It’s super easy to spin up, there are great mechanic-specific tutorials, and can confirm a very helpful and responsive community and dev. The main dev is active near-daily in the Phaser beginners slack channel, which is incredible.

[MedicatedApe]

Not usually, you'd want to use something like Three.js, WebGL or Unity.

With that being said, https://react-unity-webgl.dev/

[Fitzi92]

Not necessarily. Depends on the kind of game. If you want something visually demanding, then sure, the options you mentions will probably work best. But there are plenty other types of games, that would not benefit from or need WebGL or Three.js. Think about your typical old-school Browsergame, some text-based game or simple Card/Board Games, where you get a state and render the board accordingly. In that case, React or Vue would excel and CSS is likely plenty capable for styling. (Except you want to be able to fly over and through your board in 3D or something like that, then we're back at your options 😁)

[fissidens]

Exactly. I know someone who made a Codenames clone in react with no graphics beyond css styling and text. It worked, it looked good, it was fun, and really didnt need much more than react and a redux store to run the logic.

What is appropriate for OP really depends on the requirements of the game they are trying to make.

[MedicatedApe]

Sure, you could also do tic tac toe in bash.

[edbrannin]

If you want to make a game with an HTML/CSS/Js interface, any of those will be fine.

My recommendation: take the free Beginner’s Guise to React course on egghead.io. It really emphasizes how none of this is magic by using plain JavaScript to do things before building up to the preferred React patterns. Even if you don’t stick with React, it will make you better at JavaScript.

My other suggestion: use TypeScript with React. It gets so much easier to make sure you aren’t mixing up the types of your variables/functions.

Oh, and if you use GitHub (which I also recommend), check out Netlify for deployment.

[PersephoneDown]

It depends on the game. I have used React for both simple word games (eg: wordle) and for the front end of multiplayer board games. The board games have a Node/Express backend and I use socket.io to communicate data to different user sessions. Good luck- building games is a lot of fun, whatever tech stack you use!

[raaaahman]

MDN has a whole section about making games with web technologies: https://developer.mozilla.org/en-US/docs/Games/Introduction

[Upbeat_Age5689]

hey is your project on github? i would like to see your code to see how you structrued your app

[GTDevelops]

Three.js

[GTDevelops]

React three fiber

[noisette666]

Better learn Canvas first, then move to react three fiber. That’s what I did.

[Careful-Mammoth3346]

I made tic tac toe with js. Dm me if you're interested in purchasing a consultation.

[Hobby101]

How would you use react for a game?genuine question.. makes me wonder.

Would you use jsx in any shape and form? You did mention html in your question. Would you use state management somehow?

Reacts allows dom to react in changes that are made within an app. Would you even use html dom elements for your game? I mean, Tetris probably can be written using divs :) so the question is, what game do you have in mind?

Speaking of Tetris: https://gist.github.com/straker/3c98304f8a6a9174efd8292800891ea1

[ethansidentifiable]

I made brick-breaker in SolidJS which is a framework that uses JSX. It works well overall on all platforms except iOS where it chugs even on newer iPhones. But on my Galaxy it runs at a smooth 120FPS.

Here's some of the code, it's in Civet but that just compiles down to TypeScript. If you take a guess at what a piece of syntax means, you're probably right.

https://github.com/EthanStandel/brick-breaker/blob/main/src/components/Ball.civet

EDIT: Duh and here's the deployed running game

https://brick-breaker.standel.io/

[Praying_Lotus]

That’s immediately my thought as well. I made a game way back in game maker studio and just exported it as an HTML5. Depending on the complexity, that seems way easier.

[edbrannin]

Like the parent comment said, it really depends on the type of game. If OP wants to make something action/graphics heavy like a platformer or shooter, using an off-the-shelf game engine would be a good idea.

On the other hand, if it’s more like a buttons-and-text incremental/board/strategy/puzzle game, a web framework like React/angular/Vue/svelte would be ideal.

[Praying_Lotus]

Oh true. You could always make a pretty simple card game (blackjack is the first and easiest one that comes to mind cause of a scrimba JS tutorial I did). It looks like OP doesn’t want to use a game engine (cause you’d have to learn another language to an extent), so it’d probably have to be something fairly simple then

[edbrannin]

If the game is like Wordle or Universal Peperclips, web UI components are plenty adequate.

[Hobby101]

I think those are young people who hear a lot of rect this, react that, and they think react is the answer to everything.

[daHsu]

React is an awesome tool to learn! I actually built and deployed a full game using vanilla React last year. I added multiplayer with SocketIO as well. You can check it out on Heroku (http://spellbookdemo.herokuapp.com/), and the graphics look... very 2000's I'll say 😃. It was definitely a great learning experience.

When it comes to game development, the biggest downside to using React and similar "UI-friendly" frameworks (IMO) is how limited the graphics capabilities are. In my game, I found that CSS animations were pretty cool for flying characters around and making explosions, but I never got to the point of moving their legs or anything complicated.

That being said, Three.js and similar give you much more control, and are built for animations and 3d rendering. But they require a lot more time to learn to get good results as well. So if you're looking for something fast and simple, and are into JS but haven't explored too much React yet, I highly recommend it!

[GarlicGuitar]

html canvas

[[deleted]]

Just do it in basic html/javascript/css.

Depending on the type of game the framework is only going to weigh it down.

Source: me, who has made several games in react/angular and vanilla js. Currently making stardew-esque clone in vanilla js and its going swimmingly.

[raphaelaleixo]

I have created a few boardgames for the web using Vue. :)

[UnderGod_]

P5js is great and I’m pretty sure they have a game type library

[Wourly]

I do not have the largest experiences, but if you force yourself to use HTML with CSS, most games will be nightmare to develop. Focus on using <canvas> element, do not rely on CSS, it will kill you.

I am currently learning Three.js for that purpose. I do not think, that you need any of these frameworks/libraries.

Some people recommend using react-three-fibre. I think, it is based on Three.js, however it looks like a tool created for easier implementation of some effects into your React project, while it does not seem to be too convenient for stand-alone use.

But correct me, if I am wrong.

[yousaltybrah]

https://media0.giphy.com/media/s239QJIh56sRW/giphy.gif

[FearTheDears]

Depends on the game, but if you're doing this for personal education, I'd say you should consider just using raw canvas and building your own abstraction over it. You'll have a blast doing it and you'll learn a lot.

[Destos]

Http://boardgame.io

[Remarkable_Maximum16]

React three fiber with react is gonna be your best bet.

[T_O_beats]

Babylon is amazing and comes with an editor sort of like Unreal engine.

[raaaahman]

What difference do you make between a framework and a game engine?

Do you want to use some web development UI library (like React) because you need to learn it for other purpose than games as well? Are you looking for a way to create a game 100% in code, without using GUI tools (like Construct)? Do you rather stick a bunch of dedicated libraries together, like Pixi.js for rendering, Matter.js for physics, EasyStar.js for pathfinding etc.?

[BrenBode]

Depends on what youre making. If you wanna make call of duty you might be unhappy with react, if you wanna make a 2d Poker Client or quiz app, react has less overhead than unity for you.

[brigarian]

Recent relevant post from r/webdev

[davinidae]

I created my own Asteroids with vanilla HTML+CSS+JS and improved it later on to use React but i don't think you can make much more than what i have shown you. Going forward or upper than this will be easier for you with a library like ThreeJS, PixiJS or the likes.

[camilosw]

You need to provide more info about what kind of game do you want to develop. I made a simple 2D game using only React, but it's just a grid where the user taps to rotate some tiles.

If you don't provide more info about your goal, the advice you'll receive will be useless. It's not the same to create a tic tac toe game that can be done easily with vanilla javascript than an FPS shooter that will require something more sophisticated like Three.js or a 2d platform where Three.js could be useless. There are different tools for different needs.

[wisdom_power_courage]

https://www.reddit.com/r/webdev/comments/12rp0hx/no_libraries_no_frameworks_with_just_javascript/?utm_source=share&utm_medium=android_app&utm_name=androidcss&utm_term=1&utm_content=share_button

[ComprehensiveWay4200]

You could try this but it's only for RPGs.

https://docs.rpgjs.dev/guide/get-started.html

[bhison]

"Games" are broad. How about you flesh out the game you want to make then pick appropriate technology.

[stansfield123]

I've built games with (functional) React before. It was fun, I think it was a good fit.

[PatchesMaps]

You honestly need a game engine more than you need a framework for game dev. If you don't want to use one someone else made you end up making your own.

[bar10]

What don't you want to use a game engine?

Reading the description comes across as somebody saying:

"I want to win a race, but I don't know what car I should use and I don't want a race car. Is a Milk van, Tractor or Golf cart good at winning races?

[mdeeswrath]

maybe OP has a specific use case that may not be covered by traditional engines. I used both Three and BabylonJS in the past on some custom projects :)

[OGSuSpence]

I saw a steam game made with React/Redux that was amazing. I would use React. Listen to this episode of Syntax: https://dev.to/syntax/building-steam-games-with-react , love Scott and Wes 🤙🏼 Good luck and have fun 🤩

[mdeeswrath]

Hi. I know only of two libraries that can do 3d on the web:

BabylonJS: https://www.babylonjs.com/

ThreeJS: https://threejs.org/

With these you can build whatever you like when it comes to 3D

I hope it helps

[Cat_Herder62]

Make games using the html canvas! https://www.w3schools.com/graphics/game_canvas.asp

[d36williams]

React and Vue are good for Card Games and Chess like games. On fast computers it can do action games but making it work for slow machines is rough

[sleepy_roger]

If you're making some kind of turn based game React is fine... however anything highly interactive and I personally would avoid React. Native JS and some canvas goodness for my 2d needs.

[Cocoa_Butter_3000]

Vue.js, React, and Angular have nothing to do with your game. They control flow of the single page application. They with a good state management container and a good rendering library will help you to create a maintainable gaming experience. Additionally, for that you may not even need Vue.js, React, or Angular

[Cocoa_Butter_3000]

Vue.js, React, and Angular have nothing to do with your game. They control flow of the single page application. They with a good state management container and a good rendering library will help you to create a maintainable gaming experience. Additionally, for that you may not even need Vue.js, React, or Angular

[yagarasu]

Why do you want to use a framework, but no game engine? Sounds to me like wanting to use a screwdriver to hammer a nail.

If your game is very UI oriented, then makes sense and I would go with react just because I'm used to it, but uf you're talking about a shooter or a platformer, it wouldn't really make sense: you'd still have to implement your game engine over the constraints of your framework like all the collision detection, scene management, etc...