JavaScript game jam dev log!

Hello! This is where I’ll post my dev log for my JavaScript Game Jam game! If you have any questions about me, this dev log, javaScript, or really whatever, feel free to ask them here.

This version will update as I code:

Other links will be snapshots of my code at the time of posting and will not update, so that future readers have context :slight_smile:

Dev log #1: The idea and the concept art.

Ok, for this game jam I came up with the theme “Floating”. I wanted the theme to be fairly general while also inspiring games that were not just themed platformers, so I really liked this theme idea.

This theme reminds me a lot of outer space, and since I just made a space game for the Destruction mini game jam, I thought I might be able to expand on that idea of a space adventure. Since I came up with this theme even before my first announcement, I had quite a large head start. I also wanted to have a dev log ready on launch, so I started brainstorming. The trick to brainstorming ideas is writing them all down, no matter how dumb they sound! Even if they don’t fit the theme at all. After writing down around 15 ideas, I narrowed them down to some basic ideas that I wanted to combine into one game:

  • trapped in space in broken spaceship
  • gather resources from asteroids
  • fly around in a space suit with a jetpack

I also had some other design goals I wrote down:

  • cursor controlled movement
  • mess around with palette changing
  • dialogue… uggg

For those who haven’t noticed, my games don’t usually have dialogue, and if it exists there is always a way to skip through it as fast as possible. It’s also usually done in the laziest way possible (for example, my Infested game has dialogue using the Splash block that you can skip through easily or avoid entirely.) This is because dialogue is one of my biggest pet peeves in games. It’s the reason I haven’t played much of the Makecode Forums series, and is why I was kinda glad when this month’s mini game jam was not Game Show themed (even though Richard said it would be on stream, which is why ADM_F was disappointed)

Anyways, I think that my dislike of dialogue comes from being forced to read text so much slower than the speed I normally read at, as well as being unable to skip it, so I want to create a dialogue system that doesn’t have those annoying flaws.

With these ideas in mind, I started drawing some stuff. My main plan is to make a game where you wake up in a ISS-like ship that has been destroyed somehow. The ISS is module, so I was thinking that maybe the module you are in survived the destruction, but the rest did not. So now you’re stuck in space, in a barely functioning chunk of a spaceship, and you need to collect materials from asteroids!

I just started drawing/writing ideas and had this by the end:

So now I had a bunch of ideas. Then I was bored in class and started some concept pixel art on Thursday, and yesterday I coded this:

https://makecode.com/_UK95uzbFbAda

First I made some concept art, based off of some drawings I made in class. That’s the art you see at the end of the intro.

Then I started messing with the image.setPalette() function. This function takes in a buffer 48 bytes long, one byte for each RGB element of each color, from 0 - 255, and looking at some image setup code (Explorer → screen → targetoverrides.ts → line 9) Makecode stores the color palette in this hex buffer asset:


hex`__palette`

I made a fade effect function that takes in two palette buffers and an amount of time over which the fade occurs. I only use it to fade to black and back at the moment, but I have plans to use it for a flashing light effect that turns all the colors slightly red like a warning light.

Next was the text. I wanted to be able to make a text box that I could completely control, so I didn’t use any extensions. I made a class called textBit and attached some variables like image, x, y, width, height, text, color, and font. I added the font because I wanted to be able to attach custom fonts for each text element. Then I coded in a way to make the text appear over time. It doesn’t work well if you have a clear background and a border color, but I’ll fix that later. I also added a sort of start screen with the pixel art I made, and I made it so that the font of the text elements changes to a bold version when you mouse over the text box. This effect turned out looking really good, and it uses a modified version of WoofieBold8 from my Makecode font editor. Later I’ll expand this class to give the elements movement and such. I have some interesting ideas for it, and hopefully I’ll use it to make some really nice text effects later! I’m currently coding a way to skip text, so when I have that done it will be in the link at the top that updates over time. Probably press A to skip text will be what I use.

That was a lot to read, so once again I’ll say thanks for reading and happy coding!

10 Likes

Wow! A lot of cool stuff. I built a notification system for @Fixitude for a game that he is no longer working on, because the extension wouldn’t work on a game update (for some reason). I would love help on how to make it an extension; even if it isn’t that great. Sorry, probably wrong place to go on about this.

1 Like

This is a fine place to talk about whatever! Idk about turning it into an extension, as it isn’t very… nice to use right now. Though I have expanded it and will keep adding to it, so maybe when I’m done with the game I’ll isolate it into its own project. I believe there are existing text systems, so I would want to look at those and see when they do right/wrong and if there really is a need for a new one.

2 Likes

Dev log #2: not much lol (exams)

https://makecode.com/_9KAYbcL1Kgje
I haven’t done much for how the game looks on the outside, because this weekend I was studying for exams, but the textbit class has been greatly expanded. It now uses that image variable! It stores the image of the text in that image, and then draws the image to the location. Later, this will allow rendering text on a scene without recalculating everything every frame. Instead it will just draw the image, and change that image when something else changes. I’m thinking of changing the text system a bit. I think the class should have a list of all the text boxes it “controls” and use the class as just a way to hold the colors and font settings used to make the text box. I hope that will be less confusing for me.

I also slightly improved the art of the spaceship before launch. I was looking at some images of NASA launch pads and noticed that many of them have water towers. Apparently they use water to absorb the sound of the rocket engine, to prevent it from vibrating itself to self destruction on the launch pad! I added one of those, as well as a building next to the rocket. The building has a red logo, but idk if I like it yet, so it might change in the future.

I finished that code for skipping the dialogue using A, and added a small “skip-(A)” text box in the bottom right, and those text “Start” and “Settings” options can detect when you click on them now! They don’t do much, but it’s still nice. I made the border change color too.

2 Likes

ur doing more than me, nothing important is happening and I have just been procrastinating lol

1 Like

Dev log #3: slightly bigger update, but still not really

https://makecode.com/_PTE1VCh0RD2m
I updated the text system again! Now there is one class called textGroup that holds 2 sets of all that color info, and then it has an array of textBit elements, which hold x, y, image, and a state variable. The state variable switches which of the two sets of color info from the textGroup class that the element uses. This is really 90% gonna be used for switching the info used when you hover over the text element, like how the start/settings screen works.

I also kinda added the spaceship…? I really like the floor tile, and that’s about it. Everything looks too small and too big at the same time, and idk I’ll probably change it all later.

That’s all for now :)

2 Likes

The floor tile looks great!!! I might need a look at that text code, looks pretty awesome. Keep up the great work!

1 Like

Forgot it was all in javascript :zany_face:

1 Like