Diary of a game - js13k 2018

This year I'm entering the js13kgame competition, a javascript coding competition for Html5. I saw this last year but was too late to enter, plus I hadn't done a javascript game so would have been a lot to learn in the time. 

So, I've been learing javascript gamedev all year and am all prepared for this years competition.

https://js13kgames.com/

Day 1

I'm on holiday but I'm checking my phone whenever I can get a wifi signal to see what this years theme is.

Iv'e checked it twice so far but nothing has been put up, strange.

I realise later that 'Offline' is this years theme and not the state of the competition, duh! I blame trying to peek at the site while I'm trying to negotiate the Paris underground for not noticing this.

Anyway, I must admit, nothing leaps out at me as to what I can do for this but I'm on holiday so can't do any work. I'm thinking of ideas but nothing is coming to me just yet. 

I have time to think about this over the next few days.

Day 5

Traveling back home and I'm thinking of using a game I've been working on for the competition. I've been writing a Donkey Kong style vertical scrolling platform game and I have an idea that I can use.

The hero has to send an important tweet and his internet connection has been lost. You have to get to the top of the building to fix the satelite dish on the roof (donkey kong style). Think I can make this work. Flower pots can roll down instead of barrels and cats can attack you on the way.

I make some sketches on the train.

I'm thinking it's looking like the fix-it-felix house, maybe I'll have stuff poping out of windows n stuff, maybe?

Day 7

Back at the computer and I dig out my donkey kong project. Without doing anything I zip it up. 

Nearly 300k. My heart sinks, sure I haven't optimised it at all but thats too much to shrink down. It would be too much work to get this under 13k so I go back to the drawing board and start re thinking some new ideas.

Day 11

Gordon.

Project Gordon is something I did a while back as part of my learning html5 game dev. Its a tile based top down scrolling map game with a zillion enemies following the player around. Nothing more than that but it was a good exercise in getting enemies following you, scrolling, tile and sprite collision, everything you need as a game base and that's going to be my base for this.

Zipped up, its 24k. Ok thats not bad to start with and thats without ANY optimisation.

Now to think of a game idea. 

Day 13

Must admit its nearly 2 weeks in and I've done nothing but Ive an idea. Don't know how or where these come from but an idea has popped into my head.

The hero (you) have to find a wifi signal so he can tweet selfies. You have to search the map looking for a signal then open your phone and send your message, then go find the next one. There will be other npc's wandering around but as soon as you get a signal they turn into trolls and swarm to you to get your signal. The more trolls at your hotspot the weaker the signal becomes until it drops and you have to go find a new one.

The better your signal the quicker your selfie will upload. I might have other baddies like haters who attack you or something.

This is going to be awesome..!

Day 14

Sunday and I'm setup for the day to work on this.

First thing is to try and optimise my graphics. I have 2 sprite sheets, one for backgound tiles, one for sprites. 8 sprites, 5 tiles. I put them through tinypng.com/ and they come out at about 6k for both. Thats nearly half my 13k limit. No matter, let's see what the js comes down too.

I start ripping out the unnecesary files and use an online javascript compressor to minify everything.

I zip up, 15k!, not quite enough.

I lay out my source and see what iv'e got and what optimisations I can make.

renderingManager.js

This is an object that does all my drawing, sprite, box, text etc. I dont want my game code to talk to the underlying graphics functions. Instead I get the renderingManager to do all this, then I can swap this out at any time and replace it with something else easily. It also handles the loading of my spritesheets from file or embeded base64 images.

It can also clone and recolour sprites. I don't need this so I rip this out plus a few other functions I'm not going to be using.

MapManger.js

This handles the background stuff. It takes a map definition and handles the rendering via the renderingManager, the scrolling and collisons with solid tiles. Not much in here I can remove but I prune it best I can.

main.js and game.js

These handle the game loop and game logic. Plenty to do in here to get the size down. One of the casualties is my quad tree. I don't need it for this, theres probably 40 maybe 50 sprites max going to be involved and we can handle that raw.

Also my utility library takes a big hit. All those handy functions for generating numbers and finding items in an array etc have to go. Again, I just need a random number generator and one or two others.

input.js

This handles keyboard events, a few cuts can be made here. Once again, the generic event handlers I have in there that I can do without have to go.

player.js and enemy.js

My player and baddy objects, stripped down to the bare necessities. I'm hoping to need just 1 enemy script with a type, which all my npc's can use differentiated by their type to decide their logic.

One other consideration is number of files. Separating everything into separate files is good but not forgetting that each one needs an include in the html and these can be 60 or so characters each!

<script type="text/javascript" src="script/main.js"></script>

 All that done and minified, under 14k, just. Not enough though as I need some room for game code.

Calling it a day.

 

Day 15

What to do about getting the files size down. Graphics. Png's are expensive. I know I could look into generated sprites but it's too late and too much effort to work this out now.

I have an idea. I'm using 32x32px sprites and tiles. I can half them to 16x16 and render them twice as big. They will pixelate but it's ok, I'm going for the 8 bit look.

First try, I half the sprite size and compress them then I set the scale to 2, The rendering manager supports this already so thats it. File size is down and ....It works and It actually is hard to tell the difference. 

11k, great. Not much room for code but still.

After some thought, what about 8x8 sprites? Sure we are getting pretty pixelated now but, well let's see.

10,842kb. Thats will do, 3k to code and there can still be optimisation to do if required.

 Finally, there's hope. I genuinely was about to quit, thinking it was a lost cause but now I'm raring to go and back in the game!

I'm so happy I had to tweet

Day 17

Been deciding on my map. Was going to be just some sort of 'neighbourhood' with houses and gardens etc but I think a shopping mall might work better. I draw out some rudimentary mall layout, with an open space in the middle and shops around the sides. Still keeping the tile count down, just 4 so far. 2 for the floor and 2 for walls. I'll add more if I can in the final stages.

My enemies. I'm calling them that for the want of a better name. Added some simple logic to amble round the map towards a random point, wait then move to another. Also set a maxenemies = 16 and using a very simple object pool I made to handle these and recycle unused ones.

Also had to make sure that new enemies only appear off screen so as to avoid 'popping' into the display and to make sure they dont appear on a wall or another enemy or player. Tweaked my collision handler to be more generic and be called from my enemy generator for this purpose.

Day 18

Added an Info bar, I think thats what its called, the thing at the top that shows scores etc?

Anyway, added an Info object that shows scores and a wifi signal made up of some stepped, coloured rectangles like you get on your mobile phone.

Also added the wifi hotspot object. This has no display and is just a point with a radius. It holds a list of objects within its range and reports wether the player is in its range and how strong the signal is. I can pass this signal strength to my Info object and it should activate the signal strength indicator.

Quick test and this works perfectly first time. I make the most of my good furtune while I can. 

Day 19

A title screen. From past experience it's best to get this stuff in place earlier rather than later. I've left all this to the end in the past and it's always been hard work. Once all the cool stuff has been done and you have a game the last thig you want to do is start writing this stuff.

I'm going to do the whole title, intro, game over stuff as an overlay, crossy road style with the game left playing in the background. It's a cheat really as it saves having to swap things in and out and start the game up and reset it each time but also it looks kinda cool I think. I just need to disable the player and reset him agin to restart.

Nothing difficult here, a large rect over the screen with some text on it. 

I add a 2 dimensional array of lines and a method to render the lines in each array. This gives me multiple screens that I can switch between using thier index.

Had to add some key event handlers to skip through the screens and launch the game and go back when you escape or game over.

Tony btw is my working title! as with my other projects, Gordon, Graham and Arthur. It may even stay as Tony?

Day 21

Spent the weekend getting all my assets in place. The final piece was the mobile to send messages with. Pressing B will open this and Is really just a few rects on top of each other in the shape of a mobile with a screen and a send button. The player can open it any time but if your not in a signal you will just get an 'OFFLINE' message.

If your online then you can enter a text. Iv'e given up on the selfie thing and am just going to send text messages.

My initial idea was for a message to show on top and you had to type that in as a message. This might be kinda cool as the shorter the txt and the quicker you type the quicker you can send, more points etc etc. However, it's a bit cumbersome and complicated so instead you just have to repeatedly hit Space and a random text gets typed for you from a list of messages. This works ok. I keep a list of messages and show the top five in the mobile display.

The send button lights up once your message is typed and you can hit return to send.

Was going to allow you to keep moving when you opened the mobile so you can fine tune your signal and get a bit closer to the center if required but changed my mind. You cant move now when you launch your device, so you have to make sure your in a good spot first.

Added some random likes which get added to your score when you send. This was going to be based on how quick you send, the strength of your signal, the number of trolls using your bandwidth or something like that. For now, it's just a random amount. I added 'Likes' to the info banner, this will be used as your score.

Iv'e reogansied my assets into one js file. It makes it easier to minify and it reduces the links in the html. Ive added the mobile device as a property of my player and a method to get the player score from the likes on the mobile.

Been a busy week.

Day 22

Graphics.

Worked solely on my sprites and tiles. I need to get this in order now so I can get the animations in place and get a final idea of my resource size. I'm getting closer to the 13k limit so it's become quite important.

After and age of google image searching I manage to draw some sprites which Im really happy with. I've decided on 2 frames of animation up and down. No sideways animations, you just slide left and right based on which ever up or down direction you were facing. Same for my shoppers, trolls and haters. 4 characters, 4 frames each, 8x8 pixels, 375bytes in total. Can't complain about that plus they look pretty cool.

(actual size)

Day 24

Need to make this into a game now. I've put in all my components and assets but its just that right now, a bunch of components that do stuff.

Spent the evening tweaking my graphics and started getting everything into place and into some sort of game.

It's not fun right now and the sudden realisation that next week is going to be hard work.

Day 25

More work on the game code. The title screen now behaves correctly and has 2 states, attract screen then game start, then it launches the game. Added stuff like reset and start and stop to the game object and my player and baddies.

Made the wifi signal shut down once you send your message and respawn somewhere else. I should make it respawn away from you as sometimes it does so right on top of you again but I decide to just leave it.

Spent most of today making my shoppers turn into trolls or haters and chase the signal or player and reset again once the wifi is lost. I've given each shopper an alternate state, troll or hater, they get this on creation so they just need to turn into it when the wifi is active, removes the need to start randomising their type when activated and also they get to keep that type for their lifetime. I've made the chance of being a hater about 1 in 4.

Iv'e re written this code about 3 times, still not sure it's right.

 

Day 26

I've been taking the laptop to work to work in this at lunch time. I'm a software developer by day, doing this by night and at lunch and all weekend. I'm feeling the tiredness now. I intend to finish this over the weekend, I want to submit this on monday and be done.

I've changed my mind about the texting and decided to do the selfie thing. I've touched up my sprites and added a bit of shading and added a few more tiles. Changed the brick walls for my shops which looked awful to something a little nicer, added a tree and a bench, just like the real thing.

Had space for a selfie pic, bigger than my sprites which it needs to be and scaled up like everything else looks ok. Would be nice to have different photos but no room. I want to make them more dynamic, showing different backgrounds depending on where you take it and picture of the trolls behind you depending on how many there are. Again, space is at a premium and I've no real time at this stage.

Going to think about the name. If I don't sort that out it may end up being called 'Tony' after the games main character.

Just for the record, I call all my game characters Tony.

I'm going to bed, tired but I've a long weekend ahead entirely devoted to finishing this.

 

Day 27

Saturday and I start with the game title. 'Selfie Kid' or 'Selfie'! I put this into googles english to japanese translator, (I know what your thinking, why?) and I bounce this about a bit then I have it. 

Watashi no Sashin (my photo), perfect!

That done, on to the game. I modify my mobile object to show my selfie pic and get rid of the saved txt's. Enter a line and its done.

I want to give some incentive to get the best signal, so the stronger your signal the quicker the txt types, you still have to hit space repeatedly but its quicker depending on your signal strength. You also get likes and dislikes now, the more trolls the less likey to get likes, dislikes are just rnd(0, numberofhaters).

I show this in the info bar as smiley and sad faces with their number.

Bit of testing, and its definitely harder the more trolls on screen. 16 to 24 is about right. After a bit of testing, Im starting with maxenemies = 8 which goes up gradually until its 40. I also dont' just want the number of enemies to accumulate, they need to go down also and recycle. This allows my trolls and haters quota to change. I tweak the chance of them disabling after they hit a wall or reach their target. Using some debug output the num enemies is fluctuating nicely. To avoid them just disappearing before your very eyes, I only do this when a shopper is off screen.

If I had more time and space I should really have some pathfinding in here. The trolls just head in a straight line and can get stuck behind a wall, so be it. They can slide, and as their numbers increase theres always enough to give the player something to think about and the player can use this to block them in.

 

Day 28

Sunday. I'm up early and at the keyboard. The game doesn't have an end. I intended to have you at the shopping mall for 8 hours, accelerated to about 10 minutes of actual time. 8 hours is too long, so it's down to an hour. How about, your at the shopping mall and your mom is picking you up in an hour. Perfect. I add a timer, that counts down in the header panel. I adjust it down to about 5 minutes of real time to stop the player getting bored. I also wanted the haters to kill you when they touch you or rather if they get you, you become one of them and the game ends. I decide against it.

I modify the enemy code, trolls home in on the hotspot, haters chase you. They are also a lot faster now. I also simplify the scoring.

this.social.likes += Util.Rnd(0, 8-this.leeches.troll); this.social.hates += Util.Rnd(0, this.leeches.hater);

Likes and dislikes, thats the score. Not sure I like that now, so I add a proper score.

(this.pscore.likes*45000) - (this.pscore.hates*17000)

If your wondering, I made these numbers up.

I clean up the title screen, made it more retro arcade and add my new title.

Spend the rest of the day testing and tweaking. I notice the shoppers tend to congregate the most in the middle of the mall, not sure why this would be. A strange sort of artificial intelegence they have gained perhaps.

Eventually, I call it done.

Final thing is to start minifying and compressing stuff. 11,315 bytes. Had a bit left over after all but its too late now, I'm really tired and looking forward to submitting this and getting a rest.

 

 

Day 29

I'm all done but just before I submit I want to see if i can do 1 last thing. 

Was never really happy about the likes thing. You don't instantly get likes when you post something. I wanted then to come in as you play.

I try with queueing my likes/dislikes when you send, then after rnd periods of time(seconds) I pull them of the list and pop them as little bobbles over the player with a rnd name of the person who likes. 

It sort of works but I back it out. It will take all evening to get right and I want to get this done so Im calling it done. 

I zip up and submit my game to js13k. Thats it. I wonder what happens next, will it get rejected, what!!

An email arrives shortly after to say its been accepted and will be up on the site shortly.

Don't know what I'm feeling right now but I'm buzzing, mission accomplished.

Post Mortem

So, I did it and here it is watashi-no-shashin

I'm pretty pleased with it but theres more I could have done as could we all. I really want a t-shirt but as the number of entries increases my chances deteriorate. Still we can only wait and see now.

For next year I'm going to refine my game library and utilities. Then I can minify them and just use them without having all the worry about optimisation.

If I continue to use sprites then I'm going to investigate dynamic sprite generation but I'm also interested in the work done on hoverla This really nice and will look into this technique some more.

Sound. Always the last thing I add and never even attempted it this time. Again, time and implementing something I didn't kow too much about was too risky. I hope to add a tiny sound library to my collection.

I also want to look at a better method of implementing my javascript objects and look at some form of inheritance. I'm thinking of for example my renderingmanager having the basic functionality it has now, highly optimised and extensions to that that i can use to extend it which contain all the nice stuff I had to rip out at the start of this project, then I can use it fully for regular gamedev but for restricted projects like js13k I can just leave the extensions out. Same for my gameobjects, a generic sprite object with specific logic I can inject in depending on what it does.

Oh, and a map editor!

But thats it for now and I'm looking forward to an easy weekend.