Loading Cookies...
2019-10-24
JS13K Games 2019 - Image Encryptor

JS13K games is Javascript golfing competition that runs for a month between August 13th and September 13th every year. The game jam has one main characteristic - the entire game (source code, graphics, sounds etc.) must be contained in a 13 kilobytes ZIP archive, as constrained by the creator of the compo, Andrzej Mazur (@end3r).
Js13kGames
Why 13 kB, you may ask? End3r once explained that he liked the js1k and java4k gamedev contests and the front-end challenges where participants had to build a website in 10k, but he imagined a larger file size limit and more relaxed timeframe. In order to differentiate and stand out, the original 13k limit was chosen with "bad luck" as first theme, 13th August as start date, and a whole month of competition time.

My participation in the Compo over time

JS13K first took place in 2012, and at that time there were a total of 61 submissions. I'm participating for the fourth time in a row now; the competition has been more popular lately, with around 250 submissions in the last three editions of the compo. I wrote an article about the Lightweight JavaScript Libraries prepared beforehand and, along my first entry "Skip'n Glitch", which I submitted in 2016. One of the classes included there is a 900-bytes Tweener used for animation, timed callbacks, and various DOM manipulations. My first three submissions were non-real-time games, and the tweener came in handy for them as I used a lot of DOM elements. The game that stood with unique mechanic was my 2017 submission "Formation Absent". In my latest submission "Super Bunny Strikes Back!" I relied on HTML5 Canvas and went for old school platformer with high FPS demand. Each year I'm trying to increase the quality and complexity of my entries, and I also tried to incorporate this year's theme "Back" in greater depth... but more about that later. Here are my compo submissions:
Skip'n Glitch Formation Absent, 2017 Storm of the Chaos Bane Super Bunny Strikes Back!
The 13 312 bytes limit

The 13,312-byte limit may sound pretty tight, considering that even a tiny image can occupy dozens of kilobytes, but it's actually enough to compress quite a large chunk of text, i.e., Javascript code. Depending on the code density, you can pack from 32 kB up to 128 kB of Javascript. There are a lot of tricks you can use to save space. For 2D games, image spritesheets must be compressed with tools like TinyPNG or Compress-Or-Die... On the other hand, I have seen participants using CSS techniques extensively, or the SVG vector format. Not to mention that every year there are more and more 3D games utilizing advanced WebGL techniques. I prefer to compact the game into a single index.html file, cutting the multiple file overhead. If you have multiple files, they can increase your archive file size by a lot. Images can be inlined as Base62 encoded strings, but for the purpose of the JS13K compo, here is a great way of storing the image data:

Image Encryptor

For my latest two entries, I used eight colored (3-bit) images. They are stored as text strings, encoded specifically to not use special ASCII characters. This makes the data suitable for archiving. The method for storing was invented by one of the jam participants, @xem. I extended his miniPixelArt tool and made it possible to load image files:

Tip: open the Image Encryptor in a new window in order to maintain a history of the loaded images.

Graphics

In Super Bunny Strikes Back I have two playable main characters and they comprise significant portion of the sprites used in the game. I knew there won't be much space and decided not to cut from their 6-frame jumping animations, but rather reduce the enemy creatures count and diverse them with different color pallets (changing colors is quite trivial if you use the Image Encryptor).

Super Bunny Strikes Back! Super Bunny Strikes Back!

The sprites have 7 colors and transparency. In addition I use a special approach to mimic a contour by applying a drop shadow filter on all images. This comes with a bit of limitation on what can be drawn with the sprites - for example you can't place two pixels of contour vertically next to each other. But with a little effort this can be walked around with suitable pixel art.

Super Bunny Strikes Back! Super Bunny Strikes Back! Super Bunny Strikes Back!


2024-01-28

In the previous part, we learned about the basics of the Apple II Hi-Res graphics mode, allowing us to display up to six colors on a 280x192 pixel screen. Today, we will explore the Double Hi-Res mode, its 16 colors and doubled resolution, how it works, the memory it occupies and what are its advantages and challenges...

Read more
2023-06-12

Flash was once the dominant web technology for creating interactive and multimedia content. It powered countless websites, games, animations, and videos that entertained and educated millions of users. However, Flash also had many drawbacks, such as security issues, performance problems, and compatibility challenges. As newer web standards like HTML5 emerged, Flash became obsolete and was eventually discontinued by Adobe in 2020...

Read more
2023-04-11

Have you ever stumbled upon an old blog post that you wish you could read again? What if that blog post was about something you're passionate about, like retro computers and programming? Unfortunately, many old blog posts are no longer available online today. But don't worry! Thanks to the WayBackMachine - an internet archive that provides backups of webpages throughout the years - you can still access these precious internet resources. In fact, it's important that we make sure these resources are available to the public again so that we can continue to learn from them and appreciate their value. That's why I'm excited to share with you a blog post about Apple II programming, especially about its Double Hi-Res graphics mode, originally published in BattleStations...

Read more
2018-07-26

The Puzzle of Life was created during Castle Game Jam 2018 by Noncho Savov (me, programming) and Jurgita Raynite (art). The Game Jam was organized by James Newnorth (Spelkollektivet) and was held in a medieval castle located in Örebro, Sweden between the 7th and 15th of July. The main theme of the jam was "Capricious"...

Read more
2018-06-01

My upcoming rogue-like role playing game RogueVerse Dungeon was showcased at Retrospelsmässan - one of the largest retro game conventions in the world! The convention is held every year in Gothenburg Sweden and I presented my game as part of Spelkollektivet exhibition. It was an amazing experience - I managed to collect a great portion of feedback from attendees of all ages.. and it was incredible to see a little girl beating my game:..

Read more
2017-09-09

Check out my new game Formation Absent - a turn-based tactical puzzle, which is easy to win but hard to master. A game that is only 13 kilobytes, submission in JS13K competition. Theme of the competition this year is "Lost". As per Compo rules the game is contained in 13kb archive and includes 13 stages and a level editor. The game also keeps your game progress and score through utilizing URL vars. Here is an example of the gameplay:..

Read more
2017-05-01

Each year, a unique JavaScript game development competition takes place within one month, starting on August 13th, named JS13KGames. What's interesting about this competition is that there is a filesize limit requirement on the submitted game source - the entire game must be packed in 13kB ZIP archive. In 2016, I participated with Skip'n Glitch, a two player competitive logical game involving strategy and arithmetics. The game has a single player mode set against a simple and predictable but challenging AI opponent. Two players can play against each other on the same device...

Read more
2016-11-23

As the web tech is evolving, the flash player for web browsers is getting more and more obsolete. For example the biggest advertising platform - Google's DoubleClick dropped support for flash ads. I'm not speaking against the flash technology, which is still viable for game development (it can be easily compiled for mobile or wrapped into Steam). However in web there are new heroes and one of them is the HTML Canvas. I've already shared some lightweight JavaScript libraries used in #js13kgames and today I'm sharing another class - Lens Flare effect!..

Read more
2015-02-28
Archived
2014-07-03
Archived
2013-05-24
Archived
2013-04-10
Archived
2012-10-23
Archived