TINS Logo

Welcome, new user. Please log in or register.

Eric Sat 15 Apr 17, 19:53

I have uploaded a development time-lapse video onto YouTube, and have also put Keebo's Quest on my blog. Feel free to check either of them out at your own leisure:

Development time-lapse video: https://www.youtube.com/watch?v=JvyjWoALu9k
Play the game in your browser: https://thardus.xyz/keebos-quest

Eric Sat 15 Apr 17, 17:58

It is done. I uploaded it. The whole thing is 175.9 KB in .zip format. It includes a README.txt and LICENSE.txt. I encourage you to read both (they are short, do not worry).

Changes since the my last log:

- Added license and readme files.
- Compressed images using compresspng.com
- Tested browser compatibility (works in Chrome, Opera, and Firefox; can't test on Edge or Safari)
- Finalized intro text
- Added winning / score state
- Added credits screen

I will be busy almost all day on Sunday, which explains why I have uploaded it now. If I have time, I may add some more last-minute polish, but I have my doubts.

Some things I did not implement, but wanted to, include: music, enemies, multiple colors for Gourdonians, a Wind Waker-inspired intro scene, a secret function (Mori had a secret item that so far no one has found), and a boss battle with a queen Bumble. Even though I was not able to implement everything I wanted, I am still content with the end result. Hopefully others will enjoy what I have created as well.

Sorry to hear you have reached your end, Nuno! The great thing about hacks is that, even if you do not meet all of your goals, you can still be proud of what you learned and accomplished during the event. So well done to you!

Happy Easter, everyone! I put each of you in the credits of Keebo's Quest (as your names / user names appear here).

Eric Sat 15 Apr 17, 15:00

We're in the final stretch now!

Changes:

- Lowered maximum desired carrots to 12. More than that took too long and just wasn't fun.
- Gourdonians have a total of 14 sayings now.
- Special items are now added to Keebo's inventory upon being collected.
- Special items play a special sound when picked up and used.
- The number of special items is displayed on the HUD upon getting one for the first time.
- Added a loading screen to the canvas.
- Designed an Easter egg tile.
- Special item takes longer to use than regular item, but impacts a greater area.
- Shrunk HUD text size slightly to allow more text to be displayed at one time.
- Fixed several bugs.
- Added a score counter that increases each time something is collected.
- Improved the intro text considerably.
- Added ability to destroy hives with the special item.
- Added ability to collect dropped Easter eggs from the hives.
- Display number of eggs on the HUD.

There was a bug where the Gourdonians would ask for zero items. This resulted in not being able to trade with them. As it turned out, the bug was the result of a typo! JavaScript sometimes "fails gracefully" without telling you.

There is currently somewhat of a bug where, if Keebo starts a conversation between two Gourdonians, the one you end up initiating the conversation with might not be the one you expected to do so with. This is due to using a distance-based system for determining who to chat with.

The in-game score counter goes up for every item collected: sticks = 10; pebbles = 20; carrots = 30; special = 50; eggs = 100. This is not displayed anywhere yet, but will likely eventually be displayed after winning the game. I did this to add some replay potential.

Left to do:

- Add readme and license files
- Add ability to win the game
- Improve the intro text slightly
- Add credits to be displayed after winning
- Display score after winning
- Test game in multiple browsers to ensure compatibility

Here are some quick stats:
- Total lines of code: 3487
- Total time spent developing: ~23 hours

Godspeed, everyone!

Eric Sat 15 Apr 17, 01:19

I wasn't feeling too confident that I'd make more progress earlier, but I did.

Here's what's new or has changed:

- Three pebbles are added now instead of one for each time pebbles are collected. Rocks drop a graphic of three pebbles, after all.
- Adjusted maximum desired items from 99 to 50 for sticks and pebbles, and 25 for carrots, as there are fewer of those.
- Gourdonians now forfeit their lives upon completing a trade, just like in Mori. They drop a special item.
- Fixed a bug where Keebo could place bombs during a conversation.
- Successfully implemented multiple chat dialogues with randomly-selected sayings for each Gourdonian.
- Designed the special item, but I might spruce it up some more later.
- Added one new sound effect for when trades are completed successfully.

One thing I've noticed about hack games is that they are usually (1) messy, and (2) unpolished. This is simply the nature of these events, but I always try my darnedest to keep my code organized and keep the scope manageable. Unfortunately, my code quickly becomes unorganized as I implement spur-of-the-moment ideas. As for polish, I'm trying to balance the number of items necessary to advance without making the game too tedious or too easy. We'll see how it pans out in the end.

The Gourdonians each desire a particular item and a particular quantity of said item. The quantity used to have a maximum of 99, but in play-testing, that was simply much too high. To combat this, as I mentioned in my changes above, I made pebbles multiples of three, and lowered the desired items significantly. It may require more tweaking, however.

Fun fact: A random map may generate with 485 rocks, 259 carrots, 6701 trees, 142 hives, and 162 Gourdonians.

Finally, I'm thinking that if I can't implement enemies in time, I might make it such that the goal is to obtain stolen Easter eggs from Bumble hives. The hives currently spawn, and I have things in the works to be able to destroy them, but little beyond that. Perhaps each hive harbors an egg, and the goal will be to get back a set amount of eggs. We'll see.

I really like what I'm seeing from everyone. You're all doing great work here. Don't give up--stay true through the end!

Eric Fri 14 Apr 17, 16:32

I'm falling behind schedule. Much of yesterday and the day before was spent working on the library rather than the base game.

I am officially calling it quits on allegro5.js. There are some things that make sense in C on the desktop that do not make sense (or could be implemented better) in JavaScript on the Web. I wanted to very closely recreate the API and functionality into JavaScript, but it's looking like it just won't be possible. So instead I've started my own bare-bones library called "Momo" (Japanese for "peach"... I like peaches).

Momo is on GitHub: https://github.com/ecj2/momo

Momo so far can draw primitives (arcs, circles, rectangles, triangles, lines, and filled versions of each), draw images (normal, rotated, scaled, partial), draw text (normal or outlined), and can detect key presses. I've tested it in the stable versions of Chrome, Opera, and Firefox so far, where it works without issue. If I add audio support to the library, and if I have enough time before Sunday, I will convert Keebo's Quest to use Momo.

Fun fact: Firefox renders text differently than all the other browsers. Especially in regards to textBaseline, its "top" value is fundamentally different. It took me a few hours, but I made a commit that circumvents the issue (surprisingly the "fix" is just a few lines): https://github.com/ecj2/momo/commit/8f2580280559d863b6d61f32bc4d8b5c88dcedda

Anyway, back to Keebo's Quest...

Changes:
- Decreased bomb detonation time (so it detonates twice as quickly now).
- Fixed a bug where chat dialogues would be drawn behind objects.
- Made it such that Keebo can not move during a conversation (previously Keebo could move and start multiple conversations, which lead to some issues).

Need to do:
- Add multiple things for Gourdonians to say.
- Be able to give items to Gourdonians.
- Add cool-off timer on bombs.
- Add and be able to use special item
- Keep track of goal on HUD
- Spawn enemies

EDIT

There will be bees (I'm calling them "Bumbles") in the game. Oh, and I just realized I'm missing "you" from the text dialogue (see the screenshot). Whoops!

Eric Thu 13 Apr 17, 17:47

Gourdonians now spawn with a name, a desired item, and a desired quantity of said item. There are eight names total (four male and four female), but I might add more names later.

Yesterday I began learning about how classes are handled in ECMAScript 2015. My game uses the the old-style function-based "classes". I don't think I'll change the classes for this hack unless I have time at the end. Can you believe that JavaScript has inheritance, but no visibility of classes (everything is public!)?

My text manager is not working as I had hoped. I might just scrap it for monolithic blocks of hard-coded text instead. That's what I did for Mori, and while I don't like it, it'll work.

Keebo can now chat with Gourdonians. Currently, this feature is limited to only being able to hear their name and desired item. There is currently a bug where the text dialogue appears underneath other objects, which I'll need to fix. I also need to make the dialogues able to be closed, as well as not allow Keebo to move during a conversation.

I made a handful of cosmetic changes: the HUD text now sports subtle drop shadows (I still need to finalize its design); there is a dialogue box that appears when talking with Gourdonians (it's "animated" like the rest of the graphics); and the intro text and background colors have changed.

Lastly, I have some concerns regarding performance. My game runs quite well in my browser, but I wonder how it will do in other browsers on other machines. I'll have to do some testing before finalizing it all.

Oh, one more thing: I have stopped developing allegro5.js (https://github.com/ecj2/allegro5js) for the time being. It is now a standalone library, which is good, but I am having issues implementing an event queue like Allegro 5 has in C. So I might call it quits on the library and start my own custom JS library instead (so I won't be a slave to the functions and expectations of Allegro).

Just a few days left now! I hope to finish sometime on Saturday, the 15th.

Eric Wed 12 Apr 17, 14:23

Happy Wednesday, everyone. There's an Italian restaurant in town that sells calzones at half price on Wednesdays. I might go there for lunch.

Anyway, progress has slowed down considerably. I spent much of yesterday making commits and bug fixes to allegro5.js instead of working on my game.

Here are the things I did manage to accomplish:

1. I changed the bomb to also destroy dropped items. They newly blown-up tiles were even accompanied by a "blow up" spot. However, I didn't like the accidental destruction of tiles, nor did I like the way the "blow up" spot looked, so I scrapped them both.

2. I fixed a bug where the way Keebo would spawn would result in getting out of bounds.

3. I increased the blast area of the bomb. See the screenshot for details.

Eric Tue 11 Apr 17, 14:38

In my last progress log, I mentioned my desire to destroy map tiles by means of shooting projectiles. Well, I began implementing that when a bug occurred: my projectiles wouldn't move! They were totally stuck in place from where they were activated. Rather than fix this, I decided to turn the projectiles into bombs! Bombs are animated, accompanied by sound, and destroy a sizable area after detonation.

Here is a GIF of the bomb in action: https://twitter.com/ecjii/status/851604526620712960

Aside from bombs, other updates include spawning enemy nests; optimizing and refactoring the source code (currently only 1188 lines); reduced Gourdonians' facing direction to only left and right; redesigned Gourdonians and added shadows; stopped drawing and updating Gourdonians when outside of the camera's view; added collision between Keebo and Gourdonians; changed how Keebo spawns; and added some new sound effects.

In Mori, which is the game Keebo's Quest is improving upon, the NPCs were actually tiles in the map system. In Keebo's Quest, the Gourdonians are their own entities, separate from the map system. I toyed with the idea of tinting each of the Gourdonians, but unfortunately tinting is much too slow to pull-off in real time. I could created a tinted bitmap and then draw said bitmap, but even that adds seconds to the load time.

Keebo now spawns surrounded by rocks. My idea is that this will be a little teaching moment to learn how to use bombs. I will have to write some on-screen text to demonstrate this accordingly.

I am considering scrapping the intro text idea and just go with in-game text boxes instead, kind of like how Mori did it. Don't fix what isn't broken, right?

As for story, I have a rough idea, but I won't spoil it too much here. Just know this: it will somehow feature an Easter egg. ;)

Here's what needs to be done:
- Add more sound effects
- Add background music (could go without this)
- Finalize HUD
- Somehow incorporate bones
- Be able to talk to Gourdonians
- Be able to trade with Gourdonians
- Add multiple bombs and/or bomb types
- Do something with the intro

Also, for anyone who might be curious, every tile in-game has two frames, which gets switched out four times per second. The end result is somewhat of a "wiggling" doodle effect. I achieve this by drawing all of my tiles once in GIMP, and then by tracing over them again and then moving them to a separate layer (see the attached screenshot). The subtle differences between layers gives the impression of slight movement. My thinking regarding this art style is to mimic early drawings of children. Easter has me thinking of children, after all (Easter bunny, drawing books, etc; kids love that stuff).

Finally, according to my screenshots (which I will use to make a time lapse video later), I have spent 14.7 hours developing Keebo's Quest so far. Neat.

Eric Mon 10 Apr 17, 20:59

I was unsuccessful in achieving all of my goals yesterday, but I have achieved some of them today:

- Shrink bounding boxes for colliding with items
- Add carrots instead of persimmons (the persimmons did not look right)
- Add ability to pick up carrots
- Display inventory count in temporary HUD
- Change debug info to display non-solid tiles as blue (see screenshot)
- Spawn non-playable characters in random tiles (I call them "Gourdonians")
- Have Gourdonians turn to face Keebo, just as the NPCs of Mori did (Gourdonians only look left or right though)

I am considering using the number keys to select different items. Well, that or add some sort of inventory GUI, but I am not too sure about that right now. Also, I may add icons for each of the items on the HUD instead of text.

Soon:

- Be able to talk with Gourdonians
- Intro with text explaining the goal / story
- Add enemies or enemy "spawners" to the map
- Be able to destroy tiles by shooting them (maybe)
- Add health and health-restoring items (maybe carrots will suffice)
- Add ability to die
- Improve sound effects
- Add music (maybe)

Also, I figured out what was wrong with my percent-based tile generation code from the other day; it was looping over the same few spots every time, rather than selecting from the whole map. I will not be re-implementing that though. Oh well. Oh, and I encountered a bug with JavaScript where declaring "use strict" more than once resulted in broken objects. I do not totally understand it myself, but removing the redundant "use strict" fixed it.

Finally, here is the collision detection code I am using:

function isColliding(ax, ay, aw, ah, bx, by, bw, bh) {

return (Math.abs(ax - bx) * 2 < (aw + bw)) && (Math.abs(ay - by) * 2 < (ah + bh));
}

It is just your standard bounding box collision. I have seen some fairly verbose functions online, but this is by far the most succinct I have encountered.

Eric Sun 9 Apr 17, 21:32

I am enjoying some downtime right now, so I thought this would be a good time to write another progress log. Specifically, I would like to discuss some of the technologies I am using throughout this event.

First of all, I am using scrot to take screenshots at 5 second intervals, which I will eventually pipe into FFmpeg to generate a time-lapse video. Here are the commands:

# Take a screenshot once every 5 seconds:
while true
do
scrot

sleep 5;
done

# Create a 60 FPS video out of the screenshots:
ffmpeg -framerate 60 -pattern_type glob -i '*.png' -c:v libx264 -r 60 -pix_fmt yuv420p out120.mp4

Second of all, I am using JavaScript to write my game. Specifically, I am using allegro.js, a JavaScript library which uses HTML5's canvas API to draw pictures to the screen. The library is fairly low-level and mimics the functionality of Allegro 4 quite nicely. However, I prefer Allegro 5, so I wrote a wrapper called allegro5.js, which overhauls allegro.js with Allegro 5 naming schemes and functionality (like drawing bitmap regions, audio panning, creating tinted bitmaps, and bitmap flags). Both are freely available on GitHub (the latter still being a work in progress).

https://github.com/TheSos/allegrojs
https://github.com/ecj2/allegro5js

Third (and last) of all, my game and all its files currently weigh in at 78.9 Kb compressed, or 212 kB uncompressed. The size rule should not be a problem at all. I will compress the image files (PNGs) using compresspng.com before uploading the game.

Append:

I am using these programs:

Atom (atom.io) - Text editor
GIMP (gimp.org) - Graphics editor
Bfxr (bfxr.net) - Sound effects generator
Vivaldi (vivaldi.com) - Web browser to test game

Eric Sun 9 Apr 17, 15:01

Happy Sunday, everyone!

A lot has happened since my last progress log:

- Display debug information when the D key is pressed; this currently shows bounding boxes
- Changed Keebo's design to include a "spinning" top bit (like a propeller hat)
- Added shadows to most tiles; things really "pop" now!
- Replaced boundary graphics with skulls, because skulls are cool.
- Began working on a text manager for the HUD (Mori lacked such a thing, which resulted in monolithic blocks of code for simple text boxes).
- Text was drawn one character at a time, and a sound played for each character (like in Banjo-Kazooie); but I scrapped that.
- Added game states (just intro and normal game for now); no real intro just yet--just placeholder text.
- Keebo can now destroy trees and rocks using the X key.
- Trees drop sticks when destroyed, and rocks drop pebbles (I might add a chance of dropping acorns to trees).
- Destruction works just like in my KrampusHack 2016 entry, Kitten Kerfuffle--tiles are destroyed in a rectangular area around the player.
- You can pick up rocks and pebbles (but no real inventory at this point).
- Added sound effects for destroying trees and rocks, as well as for collecting sticks and pebbles.
- Chose a basic font to use.

Keebo's Quest will feature NPCs similar to that of Mori. And of course, you will be able to trade with them.

My goal for today is to draw Keebo in a darker shade when destroying tiles; to add more sound effects; to design the NPCs; and to spawn NPCs.

Eric Sat 8 Apr 17, 23:36

The map is progressing at a comfortable pace. Unfortunately, I was not able to remedy the map bug I mentioned previously, and so I had to remove the percent-based tile generation that I was so proud of. On the plus side, tiles are now evenly distributed throughout the map, which is nice.

Graphics for grass, trees, rocks, and the first few frames of the player have been added. I intend on adding graphics for the non-playable characters and extras soon. For some reason, I think a persimmon would look nice as an in-game item. I like persimmons.

Each tile has two frames, which the game shifts between regularly, making things look like they are "wiggling", like in a hand-drawn animated doodle. It currently changes frames every 15 ticks, or 4 times per second. This value used to be 8 though, but that felt much too quick and made me a bit nauseous. Hopefully 4 times per second will not trigger nausea in anyone.

Collision detection and solid boundaries have been added. The latter being dotted on the very fringes of the map (currently represented in-game by a question mark). The movement system in Keebo's Quest differs from that of Mori. In Mori, the player was locked to moving between pre-defined tiles only. I call this "Pokemon-style" movement, because I was playing one of the earlier Pokemon games at the time of writing Mori, and the earlier Pokemon games all used per-tile movement. However, in Keebo's Quest, the player can move freely, not forced to exist on a particular tile.

This kind of free movement adds a new sense of freedom to the game world, but resulted in some tricky collision issues. An example of such an issue is as follows: if the player wanted to pass through an opening between two solid tiles, sometimes it would not be possible to line-up with the open space. This was because the movement speed would push the player too far in either direction, making the player instead collide with other objects. So in order to squeeze between the solid tiles, pixel-perfect alignment was needed. I have temporarily remedied this issue by simply shrinking the player's bounding box for collision. It works, but I would prefer a more permanent solution.

I also made it so the player spawns in a random location of the map. The player would sometimes spawn inside of a solid tile at first, but I fixed that by changing the spawn tile to grass.

Here is what else I would like to start working on before the day is finished:

- Design non-playable characters
- Spawn said non-playable characters
- Find a suitable font to match the "art style"
- Spawn special objects in-game, like NPC shacks or something