126 lines
5.3 KiB
Markdown
126 lines
5.3 KiB
Markdown
---
|
|
title: 'Ludum Dare 46: Jamming with friends'
|
|
description: Recapping the development of *Micromanaged Mike*
|
|
date: 2020-04-20
|
|
tags:
|
|
- gamejam
|
|
- ldjam
|
|
- javascript
|
|
- project
|
|
redirect_from:
|
|
- /post/ebsdjtd9/
|
|
- /ebsdjtd9/
|
|
aliases:
|
|
- /blog/2020/04/20/ludumdare46
|
|
- /blog/ludumdare46
|
|
extra:
|
|
js_import:
|
|
- https://platform.twitter.com/widgets.js
|
|
excerpt: A look back at the development of Micromanaged Mike
|
|
---
|
|
|
|
Over the past weekend I teamed up with @rsninja722, @wm-c, @exvacuum, @marshmarlow, and our friends Sally and Matt to participate in the [LudumDare46](https://ldjam.com/events/ludum-dare/46) game jam. This post will outline the game development process.
|
|
|
|
## Day 0
|
|
|
|
----
|
|
|
|
Starting at 20:30 Friday night, we all anxiously awaited this jam's theme to be released.
|
|
|
|
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">The theme for Ludum Dare 46 is...<br><br>Keep it alive<a href="https://t.co/APmeEhwjEp">https://t.co/APmeEhwjEp</a> <a href="https://twitter.com/hashtag/LDJAM?src=hash&ref_src=twsrc%5Etfw">#LDJAM</a> <a href="https://t.co/bzNYi2zlDG">pic.twitter.com/bzNYi2zlDG</a></p>— Ludum Dare (@ludumdare) <a href="https://twitter.com/ludumdare/status/1251314489934446593?ref_src=twsrc%5Etfw">April 18, 2020</a></blockquote>
|
|
|
|
..and so we started.
|
|
|
|
Day 0 was spend on three tasks:
|
|
- Deciding the story for our game
|
|
- Allocating tasks
|
|
- Building a software framework for the game
|
|
|
|
We decided to program our game in JavaScript (but not without an argument about types) because that is @rsninja722's primary language, and we can use his JS game engine, [game.js](https://github.com/rsninja722/game.js). On top of that, we also decided to use [SASS](https://sass-lang.com/) for styling, and I designed [a CSS injector](https://github.com/rsninja722/LudumDare46/blob/master/docs/assets/js/injection/cssinjector.js) that allows us to share variables between JS and SASS.
|
|
|
|
After task allocation, I took on the job of handling sounds and sound loading for the game. I decided to start work on that during day 1, due to homework.
|
|
|
|
*The game's progress at the end of Day 0 can be found at commit [0b4a1cd](https://github.com/rsninja722/LudumDare46/tree/0b4a1cdb92e62ff0f9453f6f169f641dd82e8f09)*
|
|
|
|
|
|
## Day 1
|
|
|
|
----
|
|
|
|
Day 1 started with @exvacuum developing a heartrate monitor system for the game:
|
|
|
|
|
|
|
|
*Demo image showing off his algorithm*
|
|
|
|
His progress was documented [on his YouTube channel](https://www.youtube.com/watch?v=oqcbO8x0evY).
|
|
|
|
I also started out by writing a sound system that uses audio channels to separate sounds. This system pre-caches all sounds while the game loads. Unfortunately, after getting my branch merged into master, I noticed a few bugs:
|
|
- When queueing audio, the 2 most recent requests are always ignored
|
|
- Some browsers do not allow me to play multiple audio streams at the same time
|
|
|
|
Due to these issues, I decided to rewrite the audio backend to use [Howler.js](https://howlerjs.com/). I streamed this rewrite [on Twitch](https://www.twitch.tv/videos/595864066). The Howler rewrite was very painless, and made a much nicer interface for playing audio assets.
|
|
|
|
```javascript
|
|
// The old way
|
|
globalSoundContext.playSound(globalSoundContext.channels.bgm, soundAssets.debug_ding);
|
|
|
|
// The new way
|
|
soundAssets.debug_ding.play();
|
|
```
|
|
|
|
This rewrite also added integration with the volume control sliders in the game settings menu:
|
|
|
|
|
|
|
|
*Audio Settings screen*
|
|
|
|
Later on in the day, a basic HUD was designed to incorporate the game elements. A bug was also discovered that causes Firefox-based clients to not render the background fill. We decided to replace the background fill with an image later.
|
|
|
|
|
|
|
|
*V1 of the game HUD*
|
|
|
|
While developing the sound backend, and tweaking UI, I added sound assets for heartbeats, and footsteps. World assets were also added, and the walking system was improved.
|
|
|
|
|
|
|
|
*The game with basic world assets loaded*
|
|
|
|
@wm-c and @rsninja722 also spent time developing the game's tutorial mode.
|
|
|
|
*The game's progress at the end of Day 1 can be found at commit [84d8438](https://github.com/rsninja722/LudumDare46/tree/84d843880f052fd274d2d14036220e6b591e9ec3)*
|
|
|
|
## Day 2 & 3
|
|
|
|
----
|
|
|
|
|
|
Day 2 started with a new background asset, and a new HUD design:
|
|
|
|
|
|
|
|
*The game's new background*
|
|
|
|
|
|
|
|
*The game's new HUD*
|
|
|
|
@rsninja722 also got to work on updating the game's collisions based on the new assets, while I added more sounds to the game (again, streaming this process [on Twitch](https://www.twitch.tv/videos/596589171)).
|
|
|
|
From then on, development time was just spent tweaking things such as:
|
|
- A Chrome sound bug
|
|
- A transition bug when moving from the loading screen to tutorial
|
|
- Some collision bugs
|
|
- Adding a new credits screen
|
|
|
|
*The game's progress at the end of Day 2 can be found at commit [b9d758f](https://github.com/rsninja722/LudumDare46/tree/b9d758f4172f2ca251da6f60af713888ef28b5fe)*
|
|
|
|
## The Game
|
|
|
|
Micromanaged Mike is free to play on [@rsninj722's website](https://rsninja.dev/LudumDare46/).
|
|
|
|
|
|
|
|
*Final game screenshot*
|