I've been slacking, but finally got some time to write the Post-Mortem for this game.

So let me start off by saying that this was my first time participating in Historically Accurate Game Jam, and I had a great experience with everyone involved. This really was a refreshing gust of air in a time when I felt all around me was crumbling. This Jam was so special and I really feel like not enough of the people involved saw that. It was amazing to see everyone gather around to tell stories about their home country, using this interactive medium. I don't think we'll see something quite like this again. Thank you so much!

Anyway, let's get into the technical stuff now!

IDEA

So I started fumbling around with ideas from Portugal's history. There's a lot to choose from, so it took me some brainstorming before I eventually settled on the events of Portugal's missions during the Discovery Age (early 15th to late 16th centuries). The idea of Dias' tortuous voyage around the Cape of Good Hope came to mind, and I remembered that really iconic story of the King having renamed the cape because of what it meant for the missions moving forward. The story in a way had a certain symbolic significance, sort of like a hard and terrifying task that you have to overcome in order to achieve your goal. I also wanted to highlight the importance that Portugal had overseas, and what better story to tell than this one.

BASE CODE

So for whatever reason I decided that this was a good opportunity to test out a sort of 3D-esque way of rendering sprites in HTML5. This was the first time I've ever tried something like that, because usually when I do games like this I just resort to 3D engines like Unity. This time I basically tried to make my own 3D engine from scratch inside the HTML5 Canvas.

After fiddling around (A LOT) I eventually figured out how to do it. So I made a 2D plane where the objects would stay in, inside of an array. Those objects would have their X and Y coordinates on the plane. This was the top-down view of the game basically. I then gave those two coordinates to the player character as well, and used that to calculate distances between every object and the player (also used for collision detection, more on that later). Now I just had to figure out a way to make it "3D". So, basically, the player has an orientation, where it is looking, and I used that to determine if objects would be to the right or to the left of the middle of the screen (the point of focus). This is the X axis of the object on the screen. Now that I had that, I needed a way to figure out how to place objects in "depth". So, I simply divided the size of the sprite by the distance between it an the player, and I placed the object at a certain Y value divided by that same distance and voilá! Fake 3D!

CONTROLS

Now to control the ship. I put a steering wheel on the middle of the screen, and had the position of the mouse relative to it be incremented to the direction the player was looking. Later on, I added a bunch more complexity to this to make it more fluid and dynamic. Took me a few tries but I got it working as intended eventually.

WIND AND SAILS

Oh boy. This was a toughie.

So I wanted the wind to push the boat around. Easy enough, I got it to do that, by slowly incrementing using the POWER OF TRIGONOMETRY the position of the ship in the water. However, I also decided, to make the game harder, that the ship's direction would ALSO be changed by the wind. So the direction would slowly approach the wind direction. I soon realized that using Lerp functions for angles was a TERRIBLE IDEA! The nature of angles means they wrap around, which meant that whenever the angle would pass the 360º it would reset and mess up the whole thing and make the ship spaz around and get buggy.  (This still happens with the compass sometimes but because it doesn't affect gameplay I didn't bother fixing it)

It took me several days until I figured out how to fix this. (I can't remember how anymore, sorry...)

Using the POWER OF TRIGONOMETRY I also figured out how to make the ship move where I wanted it to. However, I made the speed of the player be some multiplier of the speed of the wind, so that it was realistic. Faster winds meant faster ship. Makes sense.  It isn't so realistic however when you go upwind, and suddenly you're moving against the wind for... some reason. Anyway, I just ignored that part because I hoped no-one would notice xD

ROCKS

At this point I was like. "I got this thing figured out, it's all smooth-sailing from here, hehe!". Oh how wrong I was. The Gods of Game Dev were displeased at my leisure and so sent upon me an unforgiving CURSE that I would never be able to get rid of to this day:

DISTANCES DON'T WORK!

Such a simple concept. Such a basic idea. Not even the POWER OF TRIGONOMETRY could save me from this one. For some god-forsaken reason, objects move away from you once they approach you from the left side of the screen. This means that you can NEVER hit a rock from the left side, even if you try to.

(Oh and BTW, because I used fixed values for the size of object sprites instead of a variable dependant on the size of the screen, if you have a larger screen, OBJECTS ARE CLOSER THAN THEY APPEAR!)

THE STORM

Waves were pretty fun to code overall. I used the Sine function to make the boat move up and down, and the horizon as well, giving the real illusion of being at sea. I increase this effect based on the size of the waves, which was an arbitrary value I changed at each of the "levels".

After the wave size is larger than a specific number, they start getting of the big, foamy kind, and it really does look like a stormy sea, so I got pretty happy with that! I added rain that falls in the direction of the wind, and it was by coding the rain direction that I eventually figured out how to fix the whole wind-ship-turning bug mentioned previously.

SOUND EFFECTS

Most of the SFX were taken from Freesound.org. However, my philosophy holds that if I can produce something myself, I shall do it, I did produce some of my own SFX as well, such as the book sounds, which can be found in my account:

https://freesound.org/people/mateusboga/sounds/614082/

At this point, the game  is pretty good-looking overall. But it doesn't have much content... But do not worry, because I still have one last card up my sleeve:

THE GREATEST CUTSCENE IN THE WORLD (-ISH)

I said before and I'll say it again, I put more effort into this cutscene than in the rest of the game.

I had free time, so I said, why not? I decided to put the rest of my time doing a cutscene that would wrap up the game in a nice package. I went ahead and wrote a few simple lines of dialogue in my native language (European Portuguese, of course), trying my best to recreate how they would probably speak it in the time period depicted. I did a lot of research to try and figure out how King João II looked and all of the necessairy elements. (The location, the clothes, the flag of Portugal used at the time, etc.) Turns out there isn't a lot about the location, because it was destroyed during the Earthquake of 1755, so... Yea.

I then acted out both parts, felt pretty happy with the results, and went into coding it in the actual game. Funny thing is, I've never done this kind of thing before, so it was new to me how to make cuts using only math. I eventually realized I could measure in Audacity the time stamps of every line and code that as frames in the scene to get the image, audio and subtitles all perfectly aligned. (that is, if you don't accidentally tab out of the game at that moment, which freezes the image but the audio keeps playing so it gets completely out of sync)

I then went ahead and spent 3 hours doing a pointless, stupid lip animation for his extra dramatic last line.

Here's the result. Enjoy:

AFTERTHOUGHTS

Overall, I'm pretty happy with the results. I wasn't really planning on dedicating myself to this project too much, but I think I managed to use my time pretty well. Definitelly learned a lot with this, and will use some of these skills in other games in the future.

Thanks for reading!

- Mateus