Orchard

Tools:

• Notepad++
• Paint.NET
• Chrome

The idea in this game is; from a mere seed, grow your tree and spread, become a home for other life and just generally keep doing that.

This is based on an idea I had for a bigger clicker game, but it's been a while since I done a jam and I saw this one and thought I'd just do it. So I took the same idea and stripped it down. I knew I'd do pixel-art, I usually do and the theme/restriction lends itself to it.

But I also decided to do this in just Javascript, with HTML canvas... Which really doesn't like pixel-perfect drawing, especially fonts. So I have to use images for everything, which required me to write my own functions for drawing text from an image/texture atlas. I'm drawing directly onto the texture atlas and defining sprites from the coordinates by hand, not the quickest way but it's been therapeutic thus far and just means less tools to juggle. :)

I'll be adding to this the devlog daily.

But here's what I got for Day 1:

Today was interesting. I knew at some point I'd need to put leaves on the tree, but how to do it efficiently? I can't draw animated sprites for each stage of the tree, I also can't write all their positions out, both those solutions would take forever.

The solution I came up with was to draw certain colored pixels on the tree sprites where I want the leaves to be placed. When the texture is loaded, I extract it's pixel data and read it, building an array of all the pixel positions of that certain color on the texture sheet. I then compare all these "leaf positions" with the sprite positions and build an array of leaves relative to each sprite. I then overwrite the special colored pixels to restore the normal color, so it's all 2-colors again.

So now, even on a huge sprite, I just plot green pixels where I want leaves and in the game I can draw animated leaves on it. I can also draw a variable number of the leaves, which is perfect for the "incremental" idea, and actually seeing your growth/progress.

Here's what it looks like in practice, Day 2:

I was going to rotate the sprites to animate them, but HTML canvas interpolates them when doing that (even though imageSmoothingEnabled = false! :/). But I think I prefer just this movement anyway, now I see it.

Today I done a bit of work on the user interface, which in turn is game play as well (being an incremental game all about the upgrades, etc). I also automated a lot of the code, so things like the tree sprites are stored in arrays now. So when it comes to tree sprite, leaf data, etc, it's all 1 number. Anyway, starting to look like something now. :)

Day 3:

v

Today I got the costs and expenditure stuff in. And visualized the clicks/life per click. That is pretty much the core game there. From here on it's adding in the other incremental elements and adding art until the times up/I get bored. :)

Day 4:

Hey this looks like a cool game! What're you doing for sound effects and music? I just saw this jam and don't have a team.

I forgot to post yesterday, doh. It's coming along rather well though.

I added in palette swaps today, I'm doing it via directly changing the pixel data of the texture used as it hasn't proven to be slow or anything (the texture is only 256x256). The original colors, and my attempt at dithering there, were to try and make it look like silhouette on a sunset painting sort of thing... It doesn't really look like that, so the default palette will likely be different.

I've added in button states, so it's clearer to the player when an upgrade becomes available.

I'm going to be either making the cost boxes bigger, or tweaking the small font slightly as the text doesn't quite fit in there snugly when you hit the millions (M is always a big letter!) But the whole point of these idle clickers seems to just be about racking up those numbers into the quadrillions. :)

Day 3+4:

I missed a few days of devblog, I was otherwise busy. But today I got all the other buttons functioning, with tooltips. Here's a breakdown of what each button does.

• Tree: Grows the next stage of tree, allowing more leaves.
• Leaf: Adds a new leaf to the tree.
• Apple: Grows a new tree (all trees follow the same stats, so this is essentially a visual multiplier).
• Bird: You click birds for bonus points, this increase the points gained from that.
• Sun: Increases the amount of life generated per leaf.
• Cloud: Increases the amount of life generated per tree.
• Clock: Increases the rate at which life is automatically generated (auto/idle clicker mechanic).
• UNKNOWN: There's room for one more button, I'm not sure what it will be but I'm tempted to go down the same route as that neural network snake game on here and allow something that just insanely overwhelms the game in some way. Cause that's fun.

Done!

https://jackoatley.itch.io/orchard

Today:

So I neglected to test this game in IE before today. So I had a lot of stuff to fix to make that work, from audio, to graphics, to minor mistakes that everything else handles fine but make IE cry (like clipping a sprite larger than it's texture, wouldn't visually break anything or be noticeable at all, but IE insists on throwing an unhelpful error at you.) Audio was a nightmare, using just JS, you have to overcome the fact that you can't play the same audio over itself, you have to create a new instance. I was cloning the Audio object, but IE just wasn't having it, so that needed me to create a new Audio object manually and set it's src. Then it wouldn't automatically pause or reset when it finished so needed event listeners just to make sure an audio instance knew it had finished itself (wut) so it could play again. Everyone knows IE is "special", but it still always throws something at you. >.<

Anyway, got it done with a couple hours spare. Hope you enjoy playing it!

And also thanks to Isaac S. Johnson for the music and audio.