next »

[Rebusmind]

Love the steam animation, reminds me of Mario & Luigi Superstar Saga on the GBA. :D

[supermega_peter]

Nice, that's a big improvement on the water jets. You're also right in that it reduces any ambiguity about the bckground

[Raku]

Ooh, I love that style of animation on the steam vents. Definitely feels more natural this way.

[Ishi]

Hello all!

My break is over - me and Leilani are back from exploring...



It's been a bit longer than I intended since my last post. I've been busy with a lot of different things, including work, jetlag and other non-game projects, but have found a bit of time to start getting back into Leilani too. The only thing I really have to show you is that the steam vents now have new animations for turning on and off!



One interesting thing I'm doing with the steam vents is that they have a toggle option to choose whether they will apply their upwards push during the on/off animation. For timed vents that are always beneficial (e.g. they help you jump over spikes) they'll still push you upwards during the animation. For dangerous vents that you push you into ceiling spikes, they'll be more lenient and will only push you when they're fully on. I think this will make them more fair.

I also spent a lot of time while I was away thinking about the game generally and ideas for content - things like ideas for unique objects or mechanics per level. It doesn't necessarily help me finish the demo, but it's nice to be thinking ahead and have stuff to aim for.

I've got a busy week ahead at work but will try my hardest to have something to show next week!

[Ishi]

Aloha!

UI / Frontend

This week I've gone back to the frontend and been working on the UI system. I'm aiming to get a lot of the frontend working in the next couple of weeks, so I can launch the game and actually use the menus to get into the gameplay. It'll feel a lot more like a real game then!

I've mostly been refactoring my UI code so there isn't a lot of actual new stuff to show. Instead here's a screenshot of the debug view for my UI.



The UI system is a big hierarchy of simple elements. I won't be using an editor to create the UI, so I'm trying to make it flexible but keeping it easy to build the UI by writing code.

For example, the green box in the bottom right corner is an Arrange element which automatically positions the elements inside it to go side-by-side. The three main buttons are customised versions of the MenuButton element. The title at the top is another custom element, ScreenTitle, which will be reused on most screens. I'll probably make it prettier later.

To make the UI interactive, I first set up directional connections between the elements I want to be selectable. For example the main three buttons have up/down connections between them, and they all have a right/left connection to the Control Settings button. Then I simply set one of the elements as highlighted, and input to move between the buttons will work!

The hand sprite is an element that automatically detects which of the other elements is currently highlighted, and positions itself in the bottom left corner of it. I'll add more animations and stuff to the hand later to hopefully give it a bit of Leilani's personality.

[Raku]

Ahh, I love menus like that! disembodied pointing hand is the best cursor for it

[Ishi]

Aloha!

Sorry for the lack of update last week - I've had really limited time to work on the game recently. Today I've finally had a productive day on the game!

I'm still focused on UI at the moment. I'm made lots of improvements to how the menus are put together and added better transitions between screens. I've also refactored my font system a bit. I haven't talked about my font system before so thought I'd explain how it works.

Fonts

My fonts are all hand-pixelled, which takes a little time to do but allows me to totally tailor the font to the style I want. I have three fonts at the moment - small, medium and large. They will undergo a bit of tweaking at some point but I probably won't need to make any new ones, as the game isn't exactly text-heavy.

The image for my small font looks like this:



It's the standard ascii* layout. The font is rendered in two layers, similar to how my tiles are rendered, so the outlines (the lower half of the font image) can be coloured seperately, and can blend seamlessly with outlines of neighbouring characters.

Kerning (the process of determining spacing between individual characters) is done automatically when the font is loaded. For every possible pair of characters (aa, ab, ac, ... ), it runs through each row of pixels and calculates how close together the characters can be without overlapping. For this I ignore the font's outline layer, so the outlines of the two characters end up overlapping.

Here's an example of some text with kerning (left) and without (right). The kerning puts the "Fi" and "ct" a little closer together, which to me looks more natural and readable.



In some situations this kerning step can actually just make things look worse, particularly when punctuation is involved. I also find that numerical characters 0-9 look better when they have a consistent fixed width, especially when being used in a timer or counter that changes a lot.

I solve these problems by using a pixel colour in the font (dark turquoise in this case) that isn't rendered, but is taken into account by kerning. That gives me flexibility to fix bad kerning situations where I need to.

In the case below, the punctuation looks too cluttered on the default kerning (right). By adding the kerning adjustment (left) below the quotes and above the period, it looks a lot nicer.



The final thing to note in the font image is the top-left character, with three lines in it. These lines represent the top line (the height of capital letters or tall characters), the mid line (the height of lower case letters) and the base line (the line the characters sit on). These are used for vertically aligning the text in the desired way when it is rendered.

The new feature I recently added is the ability for a font to be put together from multiple images! I call these pages. Rather than using ascii, the characters in the additional pages each have a name. This name is referenced in the string, e.g. "Press &xboxA;", to display one of the additional characters.

So now I can use a single font with three pages to display some button prompts.



Hurrah! This will also be useful for the controls customisation options.

Supporting multiple pages in my fonts will also make it far easier to add non-ascii characters if I want to localise the game later.

* actually this wikipedia article is pretty interesting!

[warchild14]

Aloha!

Sorry for the lack of update last week - I've had really limited time to work on the game recently. Today I've finally had a productive day on the game!

I'm still focused on UI at the moment. I'm made lots of improvements to how the menus are put together and added better transitions between screens. I've also refactored my font system a bit. I haven't talked about my font system before so thought I'd explain how it works.

Fonts

My fonts are all hand-pixelled, which takes a little time to do but allows me to totally tailor the font to the style I want. I have three fonts at the moment - small, medium and large. They will undergo a bit of tweaking at some point but I probably won't need to make any new ones, as the game isn't exactly text-heavy.

The image for my small font looks like this:



It's the standard ascii* layout. The font is rendered in two layers, similar to how my tiles are rendered, so the outlines (the lower half of the font image) can be coloured seperately, and can blend seamlessly with outlines of neighbouring characters.

Kerning (the process of determining spacing between individual characters) is done automatically when the font is loaded. For every possible pair of characters (aa, ab, ac, ... ), it runs through each row of pixels and calculates how close together the characters can be without overlapping. For this I ignore the font's outline layer, so the outlines of the two characters end up overlapping.

Here's an example of some text with kerning (left) and without (right). The kerning puts the "Fi" and "ct" a little closer together, which to me looks more natural and readable.



In some situations this kerning step can actually just make things look worse, particularly when punctuation is involved. I also find that numerical characters 0-9 look better when they have a consistent fixed width, especially when being used in a timer or counter that changes a lot.

I solve these problems by using a pixel colour in the font (dark turquoise in this case) that isn't rendered, but is taken into account by kerning. That gives me flexibility to fix bad kerning situations where I need to.

In the case below, the punctuation looks too cluttered on the default kerning (right). By adding the kerning adjustment (left) below the quotes and above the period, it looks a lot nicer.



The final thing to note in the font image is the top-left character, with three lines in it. These lines represent the top line (the height of capital letters or tall characters), the mid line (the height of lower case letters) and the base line (the line the characters sit on). These are used for vertically aligning the text in the desired way when it is rendered.

The new feature I recently added is the ability for a font to be put together from multiple images! I call these pages. Rather than using ascii, the characters in the additional pages each have a name. This name is referenced in the string, e.g. "Press &xboxA;", to display one of the additional characters.

So now I can use a single font with three pages to display some button prompts.



Hurrah! This will also be useful for the controls customisation options.

Supporting multiple pages in my fonts will also make it far easier to add non-ascii characters if I want to localise the game later.

* actually this wikipedia article is pretty interesting!

awesome. I had so many problems to find the right fonts. And you did all this freaking work. Thanks for sharing :D

In my game I found a nice font to make the english part... But to make the Portuguese with all accentuation stuff... uuu kinda hard. And what about the japanese with a whole new alphabet. haha xD Font is always a delicate moment of designing :~ Pixel fonts doubles the challenge.

[Ishi]

awesome. I had so many problems to find the right fonts. And you did all this freaking work. Thanks for sharing :D

In my game I found a nice font to make the english part... But to make the Portuguese with all accentuation stuff... uuu kinda hard. And what about the japanese with a whole new alphabet. haha xD Font is always a delicate moment of designing :~ Pixel fonts doubles the challenge.

That's one of the other advantages of making my own font - if I need any weird characters I know that I can just add them! Although like you say, Japanese would be a lot of work...

[Ishi]

Work is still a little slow at the moment as I'm busy with a lot of other life stuff, and the work that I have managed to do has been more frontend UI that I don't have much to talk about.

So! I thought it would be nice to fill in the dry spell by showing some work-in-progress features that have been in the game for a while. Let's start with this one.

WIP: Flower Platform

This is a moving platform that spins and floats up as Leilani (or an enemy) moves on top of it.



Obviously it's in need of some graphics work - a stem would be nice - but more importantly I'm not really happy with the way it behaves at the moment.

I want to integrate the roll mechanic more meaningfully throughout the game. So my plan for this is that rolling past the flower will make it spin and float upwards, where it'll float for a while before falling back down. It'll probably also have a sensible limit on the height it floats - 3 or 4 blocks (Leilani's jump is 3 blocks high).

I think this offers good potential for gameplay - you could send an enemy rolling past the flower to start it spinning, and be ready to jump on top of it before it gets out of reach.

[Raku]

Ahh wow that looks fun to use, and I like the idea of using a rolling enemy to start it up. Also the flower's animation looks great, visually!

[Voltz.Supreme]

Looks great and the music is fantastic!

[tuglaw]

Haha that spindash :D

[Ishi]

This week I added a new gameplay feature!

Sequences

Sequences are a way to add some fun, interesting setpieces and surprises throughout the game.

I started off with the idea of making sequences of shells (the game's main collectable) that appear one after the other. My usual way to approach a feature like this is to open Tiled and start playing around in there - because I think it's better in the long run to decide on the most convenient, flexible way to author the content, and then figure out the code side later.



I figured the Polyline tool is the best way to describe the order in which the shells should appear. I've used it on previous projects but not on Leilani yet. It's really simple just to draw a line between the shells!

Then while I was thinking about this over the next couple of days, I realised that it would be easy to keep this system really general - why just have sequences of shells? What I ended up with is that a sequence can be triggered by any game entity, and can contain any other game entities. The sequence itself is also an entity in its own right, meaning that a new sequence can start as a result of completing a previous sequence.

Here's a gameplay example:



And here's how it looks in the editor:



The two sequence entities are represented by the two blue icons at the top. Each sequence has a polyline. The first point of the line is always on the sequence. The second point on the line is the entity that triggers the sequence. The remaining points on the line are the entities that are part of the sequence.

So the sequence on the left is triggered by hitting the block, and makes the four hidden shells appear. The sequence on the right is triggered by the first sequence being completed (all the shells are collected), and makes four more hidden shells appear.

I can set up delays per point on each sequence to make them more flexible. I also have a second sequence type that only activates on entity in the sequence at a time (so for example the next shell would only appear when the previous one had been collected).

To make an entity support sequences I just define what it means for that entity to be part of a sequence - for example a hidden shell appears, a door opens, lava spurts from the bottom of the screen, or a coconut falls out of a tree. Similarly any entity can easily trigger the sequence to start - a block is hit, an enemy is killed, or an invisible trigger box is hit.

[Quicksand-T]

The duck (?) enemy getting flattened on the wall is just the most adorable thing.

[Tokinsom]

Interesting use of the polylines. Typically I use a mess of IDs for stuff like that but this seems much quicker, and it's nice to have a visual reference. Anyway, looking great as usual!

[zilluss]

Are you connecting the objects and the polylines by their tile ID?
I have something similar in my game but I ended up tinkering with the Tiled source and implementing an UUID generator and a way to connect objects with lines, but I implemented it quick and dirty that's why there's no PR for it.

[Ishi]

The duck (?) enemy getting flattened on the wall is just the most adorable thing.

He's a Maca, kind of a cross between a duck and a macadamia nut. I do feel a bit bad about beating them up all the time...

Are you connecting the objects and the polylines by their tile ID?
I have something similar in my game but I ended up tinkering with the Tiled source and implementing an UUID generator and a way to connect objects with lines, but I implemented it quick and dirty that's why there's no PR for it.

Each entity remembers the X,Y coordinates of the tile it came from in the map. Then later the sequence gets the position of one of the points on the line, and uses that to search for the entity at that position. It's pretty simple and easy, though it's not ideal for every entity to be storing its original tile position only for this purpose. I try not to worry about whether a solution is perfect though!

[Raku]

This game is getting more and more incredible and stylish with each update <3

[Ishi]

This game is getting more and more incredible and stylish with each update <3

Thanks for the support! I'll keep trying to add cool stuff!