Jagpie dev log - day two

Yesterday I wrote about my experience trying to make a video game in one day.

I didn't finish the game but I had a lot of fun working on it. Today I'll be continuing work on the game with a goal of releasing it by the end of the day.

Let's summarise some of the things I want to achieve today:

1. animations for hopping and flying paces
2. UI to show the current date and word count
3. a title screen
4. add scrolling images for the rest of the terrain

0800

First step will be chosing the right frame to draw from our spritesheet based on the current pace and speed.

I want the bird to smoothly transition from stopping to walking slowly and then walking more quickly.

0830

I have something that is more or less working. Next let's get some of the terrain added, do I want to procedurally generate the mountains or just work from a pre defined image?

I definitely want to be able to support scrolling from images of clouds.

1100

After taking a break for breakfast. I got bamboozled by the calculations for scrolling a background terrain image.

I want to keep track of a terrain offset which scrolls across the source image as we move. I can treat this offset as splitting the image in two and then draw everything after the offset as coming before.

We can do this using the same draw method as we did for making a sprite sheet yesterday.

drawImage(image, 
    // source rectangle
    sx, sy, sWidth, sHeight,
    // destination rectangle
    dx, dy, dWidth, dHeight
);

This time with two calls, one for the section after the offset and one for the section before.

Trying this out the first time resulted in the image getting stretched weirdly and flowing backwards, so I went for pen and paper to work out the calculations.

1130

Based on this we want our two draws to be

drawImage(image, 
    // source rectangle - from the offset to the end
    offset, 0, image.width - offset, image.height,
    // destination rectangle - from the start to the remainder
    0, 0, image.width - offset, image.height
);

drawImage(image, 
    // source rectangle - from the start to the offset
    0, 0, offset, image.height,
    // destination rectangle - from the remainder to the end 
    image.width - offset, 0, offset, image.height
);

And that works now!

I need to make the background terrain image loop properly and it would be nice to have a different foreground terrain image for a parallax effect.

1230 terrain rendered

I've split out the rendering of the clouds and the rendering of the mountains into two separate stages. They move and different speeds relative to the character so I'm fairly happy at this point.

One thing that suprised me about the canvas element is that its internally modelled width and height is different to the one specified in css.

So if you want a one to one pixel to pixel rendering then you need to set the width and height on the canvas element:

const gameWindow = document.createElement("canvas");
gameWindow.id = "game-window";
// we want a pixel-art style for the game
gameWindow.style.imageRendering = "pixelated";
gameWindow.width = 470;
gameWindow.height = 240;

Next I'd like to set up some of the frame elements we had when we were mocking up the panels.

1300

I'm going to need to rethink the borders and some of the colour scheme but we're getting there.

I'm surprised that when rendered as background-image the layout is still a bit blurry. Perhaps there is some smoothing setting that I can disable in the browser.

1330

The trick for getting pixel crisp images is to set the css property:

image-rendering: pixelated;

Next up is getting some text onto these UI elements. I have a custom font I made a while a go that I would quite like to try using if I can load a ttf directly.

1400

The date are being rendered. Font declaration was easy enough:

@font-face {
  font-family: 'bigfont';
  src: url('/big-font.ttf') format('truetype');
}

I remember there being some serious gotchas in the JavaScript Date library but couldn't find them this time.

In the right-hand panel I would like to add two statistics. Word count and word speed.

Presumably average word speed should be buffered over a period of the last 20 seconds, so that it updates but not too rapidly. I wonder what data structure would be good for that.

1700

Word count calculations are done. I'm just going to average over the entire course of the typing period.

Reviewing our goals for today it looks like we have two main items left. The remaining animations and the title screen. Let's start with the title screen.

There is actually a cute magpie already as part of the underlying layer beneath the rendering context. Potentially we can use this as a chance to load assets whilst the user gets familiar with the interface.

1730

The title screen is done and it's all starting to come together.

After I've done the animations for flying and hopping paces I think there are a few more features I'd like to add in the future to make it more rewarding and intuitive as a game.

• the ability for the magpie to collect the words you've input (like a shiny item)
• some kind of end state, maybe a summary page when you are done or reach a target word limit
• a config page or a page explaining about the game
• a log of past days journaled as motivation to build a habit
• some tasteful music?

That being said I don't think there's not a reason to put it online in its current state.

I'm pretty happy with how things are coming along.

2000 animated hopping

Hopping animation is done. Now for the flying animation.

I had some trouble rendering the page on mobile, the device is trying to zoom in on the content especially when making the text area focussed. I will try to address this.

2200 animated flight

Animating the flight of a bird was much harder than expected. I ended up stopping because I could spend (even more) hours on this and still not getting it right. It was hard to find reference footage side on and I suspect I have mixed a few different species of magpie in the process.

In the end I split taking off and flying into two separate animation sequences. I'm not sure how we can land convincingly but let's see.

In the end I have hand drawn 31 animation frames! Not bad.

2230 taking off and flying

OK! The taking off and flying animations are done. In the end I was able to moddle taking off as another form of pace, but timed in a way that we would advance to flying before it has a chance to loop.

And with that I think we are ready to hit publish. You can try out the game here:

https://jagpie.beho.dev

That was fun. Thanks for following along. As before If you have any comments or questions feel free to hit me up on BlueSky or email me at inkpot at beho dot dev.