Starting game development in JavaScript with no experience

https://jslegenddev.substack.com/p/how-to-start-making-games-in-javascript

by JSLegendDev • 11 months ago

80 40 11 months ago

jslegenddev.substack.com

reactordev• 11 months ago

This is like those learn how to draw tutorials with the owl…

SrslyJosh• 11 months ago

"Game development", "javascript", and "no experience" is quite the combination.

protocolture• 11 months ago

seems like no experience explains the earlier 2

chrisco255• 11 months ago

If you have little experience programming, JS/TS is arguably one of the best choices for making a game. You have a built-in rendering engine in the form of the browser and it's universally accessible by nearly any device. There's no permission needed for distribution: just create a web page with a live demo and share the link. It's a great way to learn about game loops, pathfinding algos, state management, physics and world building and there's tons of free tools. A couple of my undergrad projects were JS games and they were very fun to work on. Clearly not the right choice for AAA game dev or a full length indie game, but definitely solid choice for learning.

minimaxir• 11 months ago

There are very few game development tutorials which aren't how-to-draw-an-owl and I'm not fully sure why.

jamesgeck0• 11 months ago

The Broughlike tutorial is pretty decent. It targets a very specific genre, but it does explain every step and you have a serviceable game at the end.

https://nluqo.github.io/broughlike-tutorial/

whartung• 11 months ago

Because most game tutorials are about moving things around, maybe sounds, maybe collision detection.

And the actual mechanics of, notably, a 2D engine, are reasonably straightforward. But going from moving stuff around to “game” is a lot of work. A lot of polish, testing, feel, balance, etc.

Now, to be fair, a full tutorial of something like Breakout or Space Invaders doesn’t seem like too much to ask, since they’re so simple. But then it depends on what kind of games folks want to write.

Something like a simple RPG or platformer can be complete black holes.

abetusk2• 11 months ago

For me, the "owl" was all the polish and game feel. "The art of screenshake" by Jan Nijman of Vlambeer [0] was what helped fill in the steps to "making the owl".

I think most people with reasonable know-how can make a basic game, whether it's asteroids, flappy bird, breakout, etc. For me, I never understood how to get past the "finished the tutorial" to "looks like an actual game". Screenshake, aka game feel/polish/production effects, was what made it gel.

[0] https://www.youtube.com/watch?v=AJdEqssNZ-U

socalgal22• 11 months ago

The video that inspired that one

https://www.youtube.com/watch?v=Fy0aCDmgnxg

bob1029• 11 months ago

Stick to 2D, Since 3D is More Complicated

This isn't necessarily the case if you are looking at total cost of ownership.

3D provides things like perspective projection, which enables intuitive experiences and notions of "world space" that are fundamentally meaningful and map well with our physical reality. You can do a lot of damage with 3d primitives, an FPS camera, a skybox and some clever lighting.

jagged-chisel• 11 months ago

And how did this illustrate that 3-D is not “More Complicated”?

imachine1980_• 11 months ago

Game like a short hike use rendering pipelines instead of accuracy in the models for example

thrown-0825• 11 months ago

better tooling around 3D in my opinion

prisenco• 11 months ago

2D games can require a lot of assets. And most programmers are not artists.

darth_aardvark• 11 months ago

That's really cool! Sounds complicated though.

p1necone• 11 months ago

I think that statement can only be said with the right context.

Building an engine from scratch? 3d is definitely more complicated.

Using an existing engine? Tbh shoehorning 2d sprite based games into engines like unreal or unity is often harder than 3d because it gets less development effort on the engine side put into it.

Asset creation? Depends - the great thing about 3d assets is you only need to model each thing once, whereas with 2d unless you're doing skeletal animation you have to draw every frame, facing direction etc.

But on the flipside creating one 3d model could take just as much time as a pixel art walk animation in 4 directions.

There's also art styles for both 2d and 3d that can significantly cut down on effort (low poly, drawing everything from absolute top down perspective, using ascii characters roguelike style, using simple 3d primitives only, first person perspective etc etc etc).

IcyWindows• 11 months ago

I wish the software/libraries mentioned had links to them, but the only links are to more videos from the author.

Sn0wCoder• 11 months ago

Here ya go https://kaplayjs.com/ https://kaplayjs.com/docs/guides/starting/ https://www.mapeditor.org/docs/scripting/ https://phaser.io/ https://phaser.io/tutorials/making-your-first-phaser-3-game/... https://www.aseprite.org/

ramesh31• 11 months ago

However, as opposed to using an engine like Unity, Godot, Unreal, using a frameworks still allows to you architect your codebase with a greater degree of freedom and prevents you from spending too much time learning how specific game engine workflows and UIs work.

If your goal is to make a game, these are exactly the things you should be learning, not reinventing your own architecture. If you just want to learn about engine internals, then sure go for it. But games (even very simple ones) are an incredible amount of effort that has nothing to do with programming. If you actually want to make one you should be working at the absolute highest level of abstraction possible so that you can start doing the real work; building the mechanics, creating the art, designing levels, writing the story, music, sound effects, etc. etc. Many of the succesful indie games these days are made almost completely via "no-code" visual tooling. It's basically a meme at this point for programmers to want to make a game and just end up wasting their time writing a naive engine.

yoyohello13• 11 months ago

Exactly right. That’s why the joke “There are 100 game engines written in Rust… and 5 games” is so funny. Programming nerds love the engine stuff more than the art stuff. I know I fall in to this category.

3vidence• 11 months ago

After bouncing off of Unity the first few times, I finally decided to commit to it after trying out some of the JS game frameworks (like Phaser)

Absolutely worth it, have made lots of games in Unity just for myself that feel pretty polished, there are just so many systems to make a game work.

The advice around game engines kind of seems like "to learn how to write programs first create the compiler.

Not to say all games should be made in engines but it certainly helps.

socalgal22• 11 months ago

Arguably the reason is making a game engine is easier than making a game. Obviously creating all of Unity/Unreal is a ton of work. But, to make a game engoine you have a checklist of features (gameloop, rendering, audio, input, ...) each of which you can break into smaller features. It gives you a free todo list, each item on the list has generally known solution, and makes it feel like you're making lots of progress as you check things off and see systems come up. That progress feels great. And you are making progress but you're making progress making a game engine, not a game.

A game on the other hand is a blank sheet. There is no checklist. It's way harder to make progress on a game.

65• 11 months ago

I'd say any beginner should start with P5.js first before going into larger game dev frameworks. You can make simple games and the API is very approachable.

Ctrlmonster2• 11 months ago

Fyi if you're interested in making games on the web / with web tooling join the Web Game Dev Discord (we're over 2k devs in there).

QuantumNomad_• 11 months ago

You didn’t include a link but I assume it’s this one.

https://www.webgamedev.com/

As it matches the name and has a discord channel with about 2000 members.

Ctrlmonster2• 11 months ago

Oh yeah my bad LOL. Yup that's the one.

strix_varius2• 11 months ago

I'm curious about the goal here... if you wanted to learn how to turn gameplay ideas into playable video games, then the most effective way would be picking up either an ultralight engine like Defold or an ultra-tutorialized engine like Unity.

If you wanted to learn JavaScript by building games, then you should definitely not use Kaplay or Phaser, etc, since they're so far removed from JavaScript you wouldn't learn anything (other than how to build things in their particular environments). Web standard JS is more than capable of building simple games with no abstractions separating you from what you're trying to learn.

pull_my_finger• 11 months ago

I'm confused by your advice, honestly. Defold is definitely not ultra-light, it's a whole ide/studio engine. If I was recommending for ease of entry, I'd 100% pick a "fantasy console" like Pico-8[1] or one of the many alternatives[2] that are free and use a different language if Lua isn't the person's thing.

Second, Phaser[3] actually IS regular javascript. It's the opposite of Defold that is a whole node based editor thing. Phaser is just a an API you use in a script file, that you just splonk into your html page. I don't know how much more standard JS you can get than that.

[1] https://www.lexaloffle.com/pico-8.php

[2] https://github.com/paladin-t/fantasy

[3] https://docs.phaser.io/phaser/getting-started/set-up-dev-env... (linked to the hello world example)

strix_varius2• 11 months ago

Defold is definitely not ultra-light

Defold ships as a ~2MB executable, is designed for lightweight performance on non-cutting-edge mobile devices, and focuses on portability with a commitment to never require any build tooling. Professional game developers and hobbyists alike very much consider it a lightweight platform, but you're welcome to disagree with them.

I'd 100% pick a "fantasy console" like Pico-8

Ok?

Phaser[3] actually IS regular javascript ... I don't know how much more standard JS you can get than that.

Your linked example starts with `class Example extends Phaser.Scene` as the base for everything, then fills it with gems like `this.physics.add.image(400, 100, 'logo')` ... For your colleagues' sake, I truly hope that's not the sort of "regular javascript" you use at work.

spamjavalin• 11 months ago

Just use AI

avinassh2• 11 months ago

I don’t want to use JavaScript /TS but I want to make games for the web. Are there any nice framework which lets me write in Rust, it compiles to WASM for web?

lwansbrough• 11 months ago

I’m working on something for this. It’s sort of on the back burner right now but perhaps I’ll put more time into it… https://rune.sh

Ironically web support is not in yet.

avinassh2• 11 months ago

This looks great! I hope you will be able to get back to it

Starting game development in JavaScript with no experience

Related Stories