EYESORE! is a short puzzle-platformer built for JS13K 2017. Made by Studio Universe.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
src
EYESORE.zip
README.md
gulpfile.js
index.html
l-concat.js
level1.gif
level2.gif
level3.gif
level4.gif
level5.gif
package.json
screenshot.png
screenshot_large.png
submission.png
submission_small.png
thumb.png
thumb_large.png

README.md

EYESORE!

EYESORE! is a short puzzle-platformer built for the JS13K 2017 competition. The theme was "lost" this year (or LOST as I prefer to see it).

ScreenShot

Everything was done by me @alpearcedev. It took me around 3 weeks on/off to finish.

Thanks to my friends for playtesting, and my girlfriend for putting up with me during this ordeal! (I saw 4am more often than I care to admit).

I'll revise this readme and do a full review after the competition has passed.

Code

CHROME ISSUE THE GAME MUST BE PLAYED ON LOCALHOST OR A SERVER DUE TO context.getImageData. (I'm pretty sure WebGL has a similar issue). Levels are created by reading each pixel in the .gif files. Due to browser Chrome cross-origin policies, reading image data when being served over the file system (file://) doesn't work.

Creating levels using .gifs in Photoshop (super zoomed-in, with pencil tool) is neat.

I didn't have time to make all the code look nice, it should all be readable, but entities.js and collisions.js are a bit of an eyesore...

There are also a few code eccentricities, mainly to help Uglify do it's thing e.g. I use 'directions' instead of 'direction'.

Gameplay

One thing that grinds my gears is how terrible the control schemes tend to be on mobile platformers, and so I wanted to attempt to address this. My solution was removing the jump button! This was really the tipping point for me in realising how my game and the level design and puzzles could work and start coming together.

The player climbs walls when you 'walk' into them, with a simple jump-esque animation. In my head, he's kind of bounding up them.

There are 4 puzzle levels, plus the start level.

You can play the game in reverse if you go all the way left while in the start level.

You cling to ceilings automatically. I tried to make this obvious without 'telling' the player - I really like how games like The Witness let the player learn to play by encouraging experimentation.

The third puzzle level seems to have the most challenging puzzle - I promise it's possible, the level's not broken!

Graphics

All sprites are generated when the game loads, including the assortment of tiles that forms the background and foreground layers.

The layers are cached on their own canvas for performance. And the water just draws the main game composite in reverse.

The game makes use of HSL colours. I would strongly recommend using HSL because creating colours just 'makes sense' when you are shifting light and saturation, rather than the amounts of r/g/b. Because of this approach, the game has quite a few colour schemes I almost went with. I will add screenshots at some point of each one I particularly liked!

Compression

I managed to get the final ZIP to weigh in at ~11-12kb.

  1. Run gulp to concatenate the JS (creates l-concat.js)
  2. Run this uglify command to minify (creates /dist/l.js)

uglifyjs --compress --mangle --mangle-props --output ./dist/l.js -- ./l-concat.js

Omissions

I'm not great at making music, and felt it would distract me too much from the design and gameplay, which I wanted to focus on.

I would've liked to add more levels, but the gifs take up too much space.

More animations, and maybe some particle effects, would have also been a nice touch. Had some nice ideas for dying/reviving where your old body turns to 'ash', and your new body grows at the start from that ash.

Fun fact: in one version of the game your dead body became part of the level permanently, but I quickly removed the feature when I thought about all the problems that could cause.