A Day In The Life and js13kGames 2017

Ah!

This year I was so close to not participating in my beloved js13kgames competition!
But I like it so much, so, in the end, I made some extra effort working during the night, and I finally found some time to!

For those who don’t know, the js13kGames is a Javascript coding competition with the main rule of keeping the final game package under 13.312 bytes.
Also, all the entries have also to release their full commented source code on GitHub together with their zipped build!

So, yeah, this makes it a very interesting competition, totally great for learning a lot, strengthening Javascript, coding and game developments skills and sharing cool ideas  together between participants!

Both the community and the competition are very good, growing a lot every year, I suggest you to visit the official website to know more information about js13kGames yourself!


JAM THEME & IDEAS

This year’s competition’s theme was “Lost”.

At a first sight this year’s theme may not seem as hard as last year’s, but, actually, as ever, it is.

The main goal of the competition is to create a game within 13k, so, focusing on the code, finding cool solutions for keeping everything small, smooth and performing, should receive the main effort.
I totally loved a couple of entries this year, with their awesome coding solutions.

But, I personally value very much implementing the theme deep within my entries,  because it’s way more challenging, way more stimulating!

Not on the programming side maybe, but, for sure, it is a lovely challenge on the game dev side.

I like to participate in the j13kGames to free my mind a bit from the gray daily works, for experimenting and creating something new and challenge myself.

All of this, just to say that I struggled A LOT, this year, for implementing the theme 😀

As always,  I focused on creating a well polished game with enjoyable gameplay, sounds and graphics, while keeping everything as challenging, tricky and unique as possible.
I think that these should be the main points when creating a game, specially a small game for a competition.

But, creating something cool, satisfying around the theme “Lost” it has been far from easy.
I was thinking all the time: “Where should I put “Lost”? In the name? Gameplay? Story? Meaning?”

Trying to be creative while lacking sleep and working during the night wasn’t helping.
But, fortunately, brainstorming with friends did it.
You know? Friends blasting every idea you come up with?
Well, that worked  😀

So in the end I finally, and happily, came out of the creative block with an idea for implementing the theme both as the core part of the gameplay and in the story/meaning of the game, and I created



A DAY IN THE LIFE

A Day In The Life is a one tap retro minimalist 8-bit pixel art action endless running game, with a small glance to the meaning of life.
Overcome daily life obstacles, while gradually losing your powers.
Can you survive the day?

Play A Day In The Life now


In A Day In The Life, you’ll face the daily challenges, presented as obstacles and coins to take, while losing your powers during the day.
Yes.
You’ll start the game with all the power ups like double jump, flying and invincible dash, and you’ll lose them while playing, while running through the day.
The obstacles will always be the same, but you’ll have to change your way to approach them according on the powers you have left.

And here’s a little spoiler: A Day In The Life has two different endings 😀

For sure, A Day In The Life is a tribute to the homonym song by “The Beatles”, which is one of my favourites 😀
Oh, and try not to miss the quote to Shakespeare’s Macbeth, too 😀

 

GRAPHICS SIDE

I made a difficult choice, too.
I could have used a still-pixelated but more detailed graphics like last year, but I choose to keep it minimal, with a palette made out of just 5 plain colors, no more, no less.

Also, ALL the graphics are 8×8 pixels, with created an additional challenge, that left the power ups icons to be made in just 6×6 pixels, making them the most difficult part of the graphics development 😀

Both choices are, obiously, a hint to the overall game meaning.

CODING SIDE

I’ve first of all strengthened the grunt building/minimizing process of last year.
I’m stucking with that because I’m satisfyied, it’s working well and I’m improving it as soon as I learn something new.
You can check it in the source code.

Also, I used again both TinyMusic and PixelFont the first as-is and the latter adapted a little bit with the letters I needed, the possibility to right-align the text and the choice, as last year, to write text on a different canvas than the game.

Oh, yeah, I’m still using a 2d canvas.
Many entries uses WebGL, but I’m still using a 2d canvas for my own. I’m thinking about using WebGL in the future, but for the moment I’ll stick with a 2d canvas.

The biggest change I made this year was about the engine.
The Ga framework that I used last year is pretty good, but this year I choose to change, just to experiment and try something new.

At first I created my own little framework, but then, by checking the js13kgames resource page I found out about KontraAnd I gave it a try.

Kontra is easy to use, small, performing and modular, so I liked it very much from the beginning 😀
Its game loop is so simple and effective that makes it a pretty good tool for a js13kGames entry, I highly recommend it.
Thank you Steven, great job!

Specifically for “A Day In The Life” I’ve used Kontra’s Game Loop and Asset Loading modules, which together with Kontra’s core are just like 1.5 kb.
Well, that’s convenient!

Summarizing I’ve used these tools/libs:

Grunt (for the build process)
Kontra (used for game loop and assets preloading)
TinyMusic (as is, for the music)
Pixel Font (adapted, for the fonts)
-xem’s responsiveTouchGameFramework (for the canvas setup)

As always,  for the js13kGames, all the games are open-source, for the purpose of learning.
You can check A Day In the Life source code here.

I know the whole code can be optimized, but I was limited by the one month timeline, and, in the end I made this game in the no-more-than-a-week time window that I had.
Lately, due to a lot of timelines and jobs, I’m really close to what someone call “fast coder”, so, please forgive possible mistakes and lack of optimizations.

By the way, I tried to write as much as code comments as possible, keeping everything readable, hoping that the code be useful to someone, as other people’s code is often helpful for me 😀
That’s part of the js13kGames spirit, too 😀


So, yeah!
It’s the third year I’m participating in js13kGames, and this year too, I’m quite satisfyed with my entry!
I feel that I’m learning something new each time, and that’s a great feeling.


 RESULTS

Now, just two words about the resultsWOOOOOH YEAH!

A Day In the Life placed 5th out of 53 for the mobile Category and 11th out of 222 for the Desktop one! AWESOME!

I’m really glad that the judges caught the meaning and the efforts behind my game, behind the theme implementation and all the choices!
I’m happy that my A Day In The Life was polished, playable and funny enough to reach the top 5 mobile and the top 12 desktop this year!

It’s a really great placement within the whole list of this year’s awesome entries!


CHECK THE ENTRIES!

If you are interested in js13kgames, indie games, javascript, html5, jams, golfing etc. I suggest you to double check all the entries, their code, too, because they can be a good source of new ideas. Coding and development side.

An example?
LOSSST by Xem.

It is really something different.
Aside the great idea for the game, the puzzles, the surprises during the play, check the CSS3d work, the use of emoji and the great idea for the music!
There’s also a level editor for creating puzzles and share them!
And remember it’s just 13k!
If you want to learn more about LOSSST, Xem wrote an awesome, full detailed, making-of!

As you can see, it is for sure the entry that caught my attention the most this year, but it’s not the only one!

This edition of js13kgames also added the new A-Frame category, which consists in building a WebVr game using A-Frame, so as you can imagine there is plenty of interesting, experimental games and cool ideas to check and learn from!


Final thanks? Final thanks 😀

MANY THANKS to all the js13kGames community for sharing their suggestions, feedbacks and ideas, for learning and improving together!
Congratulations to everyone who managed to create their own game in 13k or just tried to do it!

Thanks again, and again to the judges and the sponsors, and, obviously the biggest thanks goes to end3r for keeping this competition up! Thank you end3r!

Thanks for reading all (or part, or just the links or the images) of this PostMortem!

It’s a long blogpost, I agree, but I felt to share my ideas and experiences about this year’s js13kGames, so I HAD to write this long! 😀

Somehow, I hope this can be helpful to someone, sooner or later, as the other post-mortem are always useful for me!

Cheers! 😀

 

 

 

Leave a Reply

%d bloggers like this: