Aranami by Frozen Fractal
A soothing and relaxing puzzle game. Find the optimal route to drag your rake across the zen garden between the rocks.
Uses HTML5, CSS3 and canvas. Best played in Chrome; known to work in Firefox but more slowly.
Uses HTML5, CSS3 and canvas. Best played in Chrome; known to work in Firefox but more slowly.
| Web | http://aranami.frozenfractal.com/ |
| Source | http://github.com/ttencate/aranami |
| Unfinished bonus game | http://aranami.frozenfractal.com/composition |
| Original URL | https://ludumdare.com/compo/ludum-dare-26/?action=preview&uid=7882 |
Ratings
| Coolness | 69% | 3 |
| Overall(Jam) | 3.67 | 75 |
| Audio(Jam) | 3.37 | 141 |
| Fun(Jam) | 3.12 | 187 |
| Graphics(Jam) | 4.10 | 62 |
| Humor(Jam) | 1.67 | 385 |
| Innovation(Jam) | 3.90 | 32 |
| Mood(Jam) | 3.57 | 91 |
| Theme(Jam) | 3.71 | 116 |
As others have said, it would be great on a tablet or something. You should definitely continue to develop this prototype into a bigger game. Think about how the gameplay could be expanded a bit.
Very well done!
I updated my project page with a hint for RED. Cheers.
Awesome job!
Really well polished graphics, love the effect of the lines on the sand.
Awesome job!
All I wanted was a "undo" button, that allowed me to cancel my last move.
Also a "sandbox" (heh) mode, where I can place stones at will and play with the rack would be welcome :-D
Thanks for the game!
- SEPHY (@sephyka)
Although, the collision box frustrated me sometimes as I wasn't sure if I collided or not. Also, I was stuck for countless movements sometimes when some unfortunate collisions occured, so I think the scoring system isn't really fit.
Polish thingies tho. :)
This belongs on mobile/tablets!
The sand is basically a bump map, done in software JavaScript (CoffeScript). A height map indicates the level of the sand at that point, 0-255 with 128 being the initial value. We can easily draw arbitrary things into the height map, because it's just a regular (albeit invisible) canvas element.
To show the rake's trail, we draw a series of "dent" sprites, which are small circles that are black in the centre (the trough), white around the outside (the little wall around the trough, where the sand was pushed out), and then fade out to transparency (so the wall slopes gently outwards). To prevent dents overwriting each other, each dent is actually a semicircle, rotated so the round side faces the direction of movement of the rake.
We then calculate the lightness of a pixel based on the dot product of the normal with the light vector, as in regular Phong shading.
To this we add some random noise based on the normal and the pixel's location, which means that every small change in the height map results in some noisy change to the colour. This gives the impression of grains of sand rolling around.
All this would have been much easier and faster in GLSL shaders, but as we started out with 2d canvas, it had to be all software rendering. Which, in spite of several optimizations, is why it's still a bit slow on Firefox.
I'm no stranger to needless software rendering: http://namuol.github.io/earf-html5/
;)