Show HN: Mini Metroidvania in 13KB of JavaScript | Hacker News Reader

Show HN: Mini Metroidvania in 13KB of JavaScript

arineonshark.itch.io

238 pointsarikgalactic79 comments

As part of the annual JS13K games challenge, I've put together a pretty large (but small-in-code) Metroidvania game that fits in just 13KB of compressed Javascript.

The source is available here: https://github.com/arikwex/infernal-sigil

NOTE: the current head of the main branch is at 13.6KB due to quality of life patches. The legit 13KB version is tagged in github.

Useful hacks: - Using Roadroller (https://github.com/lifthrasiir/roadroller) for compression - Compressing the map data as grayscale PNG paired with some code generation. - Using procedural animation for all characters. - Replacing string enum with numeric enums for compression. - Built a small game engine for object lifecycle and rendering. - Single function to generate unique procedural songs for different regions.

Open articleView on HN

Very smooth animations. Impressive work. Are we about to see a bunch of serious web/JS games coming (with Vampire Survivors paving the way?)

Crosscode was amazing and is a pure JS/canvas game. I dunno I've fiddled a bit with some engines, but the tooling/docs are pretty lackluster compared to unity/godot

the main challenges facing web games are:

1. hard to monetize

2. lack of mature tooling (Unreal dropped Web support, Unity pretty much has just 1 FTE maintaining WebGL support, and Godot is still catching up)

3. mobile UX sucks (try playing a game in Safari on iOS)

not to say it isn't possible to make really cool games on the web. and some have been quite successful recently, like FNF. but it's a verrrrry tiny slice of the overall games market, and has been shrinking over time since the death of flash and the rise of mobile

If it's really 13kb, how can there be a loading screen?!? Checkmate!

In seriousness though, this is awesome! I love little metroidvanias. :) And the interactions, like the jump and swipe, feel remarkably satisfying. Great stuff.

But seriously, why is that?

I assume the code is 13kb but loads external assets like image/audio.

That is not permitted in JS13K, no.

1. The WebAudio api requires user interaction to allow playing audio. The main menu saying "press any key" is intended to trigger that. 2. One WebAudio is ready to use, I build all the sound effects procedurally. There's 13 SFX and 3.5 minutes of music that need to be generated! This takes about 5-6 seconds total to churn through all the math used to build the audio buffers.

Why aren't they generated while waiting for the player to press a key?

I'm guessing it's because WebAudio won't let you create audio buffers until a user gesture like a click allows audio context to be started ("resumed").

That was fun :) spent 38minutes.. 571 bones left, 8 dead

Too many buttons IMO for a keyboard

I found j,k,l and n very comfortable (layout 2). I don't really play video games either.

Huge thanks to the itch.io community for recommending this second layout. Glad you found it comfortable.

As a comparison, a zstd compressed copy of the US Metroid ROM comes out at 59781 bytes. Castlevania comes out at 71237 bytes.

JS is an interpreted language that isn't really a fair comparison

It actually is a fine comparison. At ~140 chars on a browser, JS can do this: https://www.dwitter.net/d/26107 . That's not idiomatic JavaScript, but then, people had to work hard for the old roms as well.

(I recommend browsing through the https://www.dwitter.net/top/year top section to get more example of "demos that fit in a twit".

So since you can abuse eval() in a wacky way, that means JS should be compared to compiled code? I don’t understand your point.

While we are being pedantic I seriously doubt either Metroid or Castlevania was compiled, given that most NES games were written in 6502[1] assembly.

1: 6502-ish, it was a clone with the BCD instructions disabled.

My point is that code density is code density regardless of underlying CPU, programming language, and libraries - up to a constant (bounded above by size of an emulator and said libraries). That’s actually very rigorously defined for those who care - and has a lot of implication. The rabbit hole starts with “algorithmic complexity” also known as “Kolmogorov complexity”.

The constants matter. It may be harder to get an impressive dwitter style output from bare NES or C64, but there a 32, 64, 128 and 256 byte demo “micro scene” for c64 and DOS that pumps out very impressive stuff for the size - some that would even be impressive on dwitter.

Most NES code is tight (due to constraints). Most JS code is not (there are essentially no constraints) but that’s not inherent, as is shown with demos and proven by kolmogorov solomonoff and chaitin.

Speaking of 256 byte demos, I have to push these out http://www.youtube.com/watch?v=f1joQfp78Yo (tube by 3SC) and https://www.youtube.com/watch?v=QdaMbGPEXV8 (A Mind is Born by lft).

Impressive stuff indeed.

Right, but that 140 bytes of JS runs on mountains of browser and OS code. The ROMs run directly on the hardware.

Just think of the boilerplate needed to set up graphics when you can't simply output to a canvas tag. That's the point being made - JS is an interpreted language, so you can't really compare code size with compiled code.

Amen

Wow. Reading along and I didn’t fully appreciate it either. This adds a ton of perspective to what early game devs were working with.

But hardware back then was simple and uniform per platform. I developed professionally for the SNES some 30 years ago. You could set up sample playback with a handful of instructions, sprites with another handful, etc.

It actually is comparable in my experience and opinion.

Setting up graphics modes on the SNES was much easier (hardware wise) than e.g. switching VGA (or even CGA) to graphics mode - one did have bios INT 10h to rely on for the PC, but “select and set up graphics mode, colors, etc” in practice was a comparable effort.

And many games implemented tiny virtual machines to simplify and compress code. As another example, ZX Spectrum basic rom (16k of z80 machine code and data) spent a few hundred bytes implementing a floating point stack VM interpreter that compressed relevant math code by approximately 1:5 compared to “native” calls.

>At ~140 chars on a browser, JS can do this

*a JS function, utilizing dwitter-specific functions, called in some other dwitter-specific function, included in some specifically designed frame

Wouldn't be surprised if the total JS code required nears the submitted game.

The NES had a dedicated sprite engine, Javascript has a huge standard library.

Of course it's apples-to-oranges, but surely we can make such non-serious comparisons in a thread about a metroidvania game written for a fun contest?

For the note of extreme pedantry however, Castlevania is not a metroidvania game

can we stop using this term just for this reason alone?

Castlevania: Symphony of the Night is a Metroidvania (and the first Metroidvania in the Castlevania series, with almost every 2d Castlevania released after that also being a Metroidvania).

Castlevania 1 is not a Metroidvania. Metroid 1 is though.

From the same competition: this game "Dante" appears to be 3D (or at least pseudo-3D), and has a first person mode too. In 13Kb... mind blowing. https://js13kgames.com/entries/dante

See also https://js13kgames.com/entries/2022 for this year's submissions. As always it's great to see so many people making games in so small size.

Wow this is really cool. It controls extremely well on a gamepad. This might make me try out game development. Well done!

So smooth! Easy to get started, and fun to play. I'll enjoy taking the time to explore the game world. The code is so readable too, I'm learning from reading it.

Lovely work, especially the feeling of the controls and smooth movement! And I like how the main character looks like a fox!

Impressive technically, with very smooth and intuitive movement.

I would prefer to see a key legend that I have to close. "Figure shit out yourself" when I've got a hundred keys to choose from is... not good.

Gameplay was frustrating. I kept taking damage from stupid things like spikes but never found energy pickups. After I made my fourth or fifth movement mistake and took significant penalties for it each time (bones scatter when dying but upon my return they were not there to pick up), I did not want to continue playing.

I give some counter feedback from someone with some platform experience.

The keys were obvious from the start, the right hand swipe was one of the first keys i accidentally mashed.

The logic was simple, consistent and worked as expected. The dash and swipe mechanisms were untuitive and clear.

I'm willing to commit more to 'hard things', but this really wasn't even in the 'hard category', my definition of hard begins at games like the soulsborne series. The penalties were obvious, dont jump on spikey things, dont get hit by enemies.

I loved it and wanted to continue playing.

- Actually 180KB (src/ only; 344K for everything except .git)

- As served it requires 950KB, which compress down to 396KB???

Damn it doesn't even use WebGL context, just plain canvas 2d drawing api, congrats to the dev, great job

Very cool! Love the simplicity of the characters, but smooth animations.

Huge respect for keeping the Demoscene culture alive!

Not working on Safari

Only tested in Chrome + Edge + Firefox. I'll look in to Safari and report back!

It semi-works. It launches, loads, says something about wingspan and double jump, then immediately teleports you to a location where you're stuck.

It's all very jumbled: https://imgur.com/a/1PNTW7E

Yeah, here's the place I got "teleported" to: https://i.imgur.com/rI5rPiX.png

I'd like more of this, it was very entertaining. The controls are great.

Tip: You can use the regular attack to slow your descent when falling.

and to move horizontally a bit too

In my limited testing I wasn't able to get much more distance vertically. I did try to abuse it to sequence break but wasn't successful. There was an early part to the left where if I could get it to work reminded me of a popular sequence break in hollow knight. Maybe an homage?

Hight quality stuff, especially the animations.

Fell out the bottom of the map

There doesn't seem to be a way to kill yourself and go back to a checkpoint

cool as FUCK!!! this is awesome!!

bones: 499

time: 59.15

deaths: 7

took a few short breaks

best speedrun: 8:46, 3 deaths

Broken in Firefox under Linux, “TypeError: navigator.getGamepads is not a function”.

It's working for me on Firefox Nightly, but I do have a gamepad.

Hmm… seems like I had dom.gamepad.enabled set to false, which is not the default value. I don’t recall ever touching it. ¯\_(ツ)_/¯

Is this something that web assembly could actually do well?

What would you want it to do differently from the JavaScript here?

The character controls and animation feel satisfying

Agree, movement was really nice. On controller would be slightly better.

Nice I like it! Good work.

Really fun and smooth!

Great level design!

Love this Ori!

very good

Great work on such a small footprint, but there's nothing Metroidvania about it. It's just a regular "jump 'n' run" platformer.

After playing it for 2 minutes there are clearly two kinds of obstacles that could only be surmounted by some kind of enhancement. And there's a Metroid-style grid map you can bring up.

There's nothing useful about this kind of negative comment.

If the maker wants to advertise his little game as a metroidvania and the first impression is that it seems like a simple platformer then the metroidvanianess isn't obvious enough and there's room for improvement. If you've made the game yourself you can become blind to little things like this and it's very useful that someone points it out.

"Negative comment" my ass. It literally starts with the words "great work". That's a clearly a supportive comment.

I wouldn't say it was a negative comment but I also wouldn't say the comment's assessment was correct. "Nothing Metroidvania about it" is plainly false. "Typical run and jump platformer"... wouldn't agree there, either. This is closer to Metroid or Castlevania than say, Donkey Kong or Super Mario.

Even the atmosphere. It had - dark themes, 'creepy, dungeon' music, Skeletons, Spike traps, Spiders, and the Map screen we've seen since SOTN.

Lastly, you can start a comment however you like that doesn't make the comment that way. I could say, "Great work! For a worthless pile of garbage like yourself" and I don't think anyone could argue that because I started off my saying, 'Great work' that the comment was positive, maybe that it was supportive! (But again, I don't think the comment was negative, no matter how much I disagree with it)

No negative intention. It's just an observation.

The metroidvania inspirations are pretty clear, it's a large map that you unlock gradually by finding abilities on the map. Including some back-tracking.

What do you think is missing for it to be called a metroidvania?

The graphics and scenery. It's 13 kilobytes of JavaScript with no bitmapped graphics in it, I know, but if we settle for (as an example) your two very broad strokes of running back and forth and unlocking new areas then hundreds of old NES and SNES games have suddenly become Metroidvania, despite nobody ever branding them as Metroidvania.

I don't mean to come off as a retro-gaming connoisseur, but there's a certain feel and atmosphere to the Metroidvania branding - it's more than a sub-genre - and it shouldn't be taken lightly.

Hm. I don't know if I'd consider atmosphere part of the genre. But it's missing boss fights which are a pretty core part of the genre I think.

Which other NES or SNES games take place on one continuous map that you backtrack with new abilities to find a way to progress?

Edit: that you wouldn't consider a metroidvania, I mean.

Zelda, Metal Gear, Wizardry, Faxanadu, Rygar, Ys, Mother/Earth Bound. The list goes on and on. The element of revisiting previous stages/locations to unlock portions you couldn't access earlier on was a basic ingredient of old adventure games.

Well, not so fast.

https://es.wikipedia.org/wiki/Rygar -- genre: metroidvania

https://en.wikipedia.org/wiki/Faxanadu -- wiki categories include metroidvania. style: "like castlevania".

The thing you're also missing is that a {castle,metroid}vania is a 2D side-scroller, so Zelda, Metal Gear, and friends are not.

This kind of "umm actually" stuff is boring.

> https://es.wikipedia.org/wiki/Rygar -- genre: metroidvania

Spanish wikipedia, while English wikipedia says something else. Did you hunt with Google until you found some lone source citing it as "Metroidvania" just to try get a point across?

> This kind of "umm actually" stuff is boring.

Yet you dug deep into it.

> Did you hunt with Google until you found some lone source citing it as "Metroidvania" just to try get a point across?

Or maybe he's just Spanish

In the spirit of "umm, ackshually", their username does start with "hombre"...

I live in a Spanish-speaking country, so Google defaults to Spanish Wikipedia. I forgot to change it to English like I did with my second link for the HN crowd. But you are incorrect yet again. https://en.wikipedia.org/wiki/Rygar ctrl-f "Metroidvania"

My point is that you create a lot of noise when your "corrections" aren't actually correct. It's basically nerd sniping to be wrong on the internet, especially about games.

Yes, I'm contributing to the noise. But I'm correct, so it's okay according to unwritten HN guidelines.

I'd say that, particularly in modern genre terms, "Metroidvania" refers to a game involving gathering abilities that unlock new areas, with either mandatory or optional-for-bonuses backtracking to previously blocked paths. (This is distinct from just flipping switches or finding keys -- you have to find things that change your character's moveset, and the new capabilities are what let you pass through.)

Non-linearity and ability-acquisition are the only essential elements. There's often platforming, a certain isolation-vibe, and a large single map, but those aren't mandatory to get the label.

Admittedly, that definition as given leaves most Zelda games qualifying. You go around gain abilities, there are often optional rewards for backtracking and using those abilities. (BOTW is a pretty major exception here, and so are the NES zeldas).

One notable difference is that there is rarely benefit to backtracking into previously completed dungeons. Even for 100% it is often possible to get everything with the first pass (without even using glitches or unintended interactions), which is not like most metroidvanias. However, most Zelda games but the games do tend to favor overwold backtracking for optional rewards.

Reply on news.ycombinator.com