Jump to content

Floor Thirteen — js13kGames entry


ooflorent
 Share

Recommended Posts

Hi everyone, 

 

I just released my js13kGames contribution. It's a retro top-down shooter called Floor Thirteen.

Every feedback is welcomed, shares too!

 

http://js13kgames.com/entries/floor-thirteen

 

The game is rendered using an HTML canvas.

Internally the game loop runs an Entity-Component-System engine.

That was a real pain to build a robust ECS engine which does not exceed 1kb.

 

The source code is available on Github.

https://github.com/ooflorent/floor13

 

title.png

 

ig.png

Link to comment
Share on other sites

Floor Thirteen — Post mortem

 

 

What went right
 
1. Entity Component System

 

I wanted to develop Floor Thirteen using the ECS pattern to demonstrate that an HTML game could implement it and perform well.

Coding this part of the engine was really fun and quite challenging because I had to balance performance and library size.

 

Adding features to game was easy as 1-2-3! Code decoupling was the key: every system is responsible for a small game logic.

 

2. Package size

 

Since the beginning I knew that I would have to be careful about the way the game is done.

 

I used UglifyJS and a few other grunt tasks to compress assets.

All sprites are packed in a spritesheet minified using a color reducer and a PNG optimizer.

 

Even using a ZIP archive with the max compression level, that would be enough.

Dirty JavaScript tricks were used to reduce the code size:

  • Don't use long property names. This one is the ugliest part... Every property and method names were reduced to one or two characters. This really hurt code readability but saved more than 2kb!
  • Rethink loops and tests. When order does not really matter, I used decrementing for loops to save some bytes: for (i = 0; i < n; i++) becomes for (i = n; i-- ;).
  • Prefer ternary operator and logical tests over if. 

Thanks to all these optimizations, the package size was reduced from 92kb to 13004 bytes!

 

3. Art

 

While I lost a lot of time reworking the graphics, this was one of most fun part of the contest! Image were drawn using Pixelmator.

I took inspiration from a lot of deviants (Deviantart users).

 

4. World generation

 

I wanted each game to be unique. Every floor is generated using a dungeon generation algorithm.

The final version uses a modified version of a Python dungeon generator.

I tried different approaches using B-Tree and spatial partitioning but those were not as efficient as the Python's one.

 

5. Rendering

 

Coming from the AS3 world, I looked for a library with similar concepts.

Pixi.js retained my attention and I decided to implement a lighter version of it.

 

 

What went wrong

 

1. Theme and game concept

 

I'm a programer, not a game designer. I usually work with a friend which has stunning design ideas but this time he was not able to compete with me.

I was not inspired at all and decided to simply build a rogue like shooter in 13kb without any specific idea.

Results are here: the gameplay is quite minimalistic (IMHO).

 

2. Time

 

My day job takes me a lot of time. I though 1 month would be enough but I was wrong. Nights were short or nonexistent...

I did not had the time to implement all developed features such as loot quality, bosses, armors.

 

3. Balancing

 

The *final* version of the game was achieved 6 hours before the deadline. Due to lack of time, I was not able to balance AI and weapons.

 

 

In conclusion

 

In the end, I'm very happy with the game. I finally finished something to be proud of.

Anyhow, thanks to everyone who played my game and gave feedback. If you haven’t tried it yet, you can check it out here.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...