next »

[Ishi]

I can't help but notice that you have some unusual prefixes on your various type and variable names here. Would you mind going a bit more in detail about what your naming convention is if you haven't already talked about it?

If I had to guess:
c: Class
p: Pointer
e: Enum
s: Struct
m_: member variable

The m_ prefix goes before the other prefixes. So for example if you have a pointer as a member variable the variable would be named m_pVariableName.

Yep those are all correct. I don't place a lot of importance on variable naming systems - my policy is to use whatever system you find comfortable or useful*! These are just habits I've picked up in various places and they suit me.

*(unless your programming job requires you to use a certain system, of course)

[qMopey]

I've always found m_ useful. Recently also adopted s_ for static variables (file-scope, or otherwise static). I find these little conventions help with readability-at-a-glance.

[Ishi]

I've always found m_ useful. Recently also adopted s_ for static variables (file-scope, or otherwise static). I find these little conventions help with readability-at-a-glance.

Ah yes I do also use s_ for static (or ms_ for static member variables).

Devlog - Progress update

It's been a while since I did a normal devlog update! So I thought I'd just explain where the game's progress is currently at.

Since I got back into development after some time off in June I haven't really got back into my routine of focusing each month on a specific part of the game. I do intend to return to that soon. My ongoing goal has been to put an improved demo build of the game together, with the aim of getting a little more playtesting done.

Finalising what I wanted to include in the demo turned into quite a big task in itself. I needed to properly get to grips with what content I actually had in the game already, since I have quite a few levels that are old or only partly finished. So I made a spreadsheet, I added every level I currently have, with various information for each level: name, roughly how finished it, the visual style of the level (beach, volcano etc), the music used in the level, etc. It was really nice to be able to see all this information in one place.

I then added notes for each level on what needs to be done. I separated this into: small tweaks (small level design or mechanic changes that can be made to improve the level), large tweaks (large parts of the level that should be reworked, or parts that are entirely missing), and visual tweaks (does more foliage need to be added or animated, which backgrounds need improving, etc).

In the spreadsheet I sorted all the levels into their rough order within the final game. Then, finally, I added placeholder entries for all the levels I'd like to add. Some of these placeholder entries have ideas about what the level could be, but a lot of them are currently just blank.

I think this puts me in a much better place than I was before. In the near future I plan on using the spreadsheet to be more focused about what I work on, to help me work towards actually producing the rest of the content the game needs. For what it's worth, the spreadsheet currently tells me I'm 20.2% of the way through creating the game's levels. Don't count too much on the accuracy of that, though.

As for the demo, I'm still working towards it. I've created a simple demo version of the world map:



It's just a big beach island. This works much better for a demo build than me trying to shoehorn a random selection of levels into the game's real world map, and I can shuffle levels around without worrying about having to shift a lot of scenery around.

Rainbow boost rings

Finally, I mentioned previously that the recently-added boost rings were also meant to replace the rainbow rings that were already in the game. I got around to making the animations for the rainbow version of the boost ring, so it's now in the game!



Going through the ring triggers a sequence of rainbow drops that need to be collected before they touch the floor, with a reward for collecting all 7.

[ProgramGamer]

Thanks for answering the question about variable names! I should probably also go back to previous updates, there's probably some more technical stuff and good practice advice that I've missed.

[afilionComposer]

When is this coming out? I'm completely in love <3 I want to play it now :D

[ProgramGamer]

would you say that

you're addicted

[Razz]

Happy to see that this is still going strong ... I just love how this game looks. It's so pretty.

[Ishi]

Happy to see that this is still going strong ... I just love how this game looks. It's so pretty.

Thanks! Nice comments like this help the progress to continue :D

When is this coming out? I'm completely in love <3 I want to play it now :D

Thanks! No release date yet sorry, it's done when it's done.

Devlog

This week I continued polishing various parts of the game.

I added some placeholder sounds to the world map for the first time - until now it's been pretty much silent. I reused various sound effects from the gameplay (which themselves are mostly placeholder) and triggered them off things like completing levels, and Leilani moving around the world map. Even with placeholder sounds it feels much nicer to hear something alongside these actions.

Background particle effects

I made a new cave tileset and backdrop, as I was never really happy with ones that I had previously.



For this background I added a new feature - level backdrops now support particle effects. You can see them in use as the dust that's floating down through the shafts of light in the far distance.

As with many things in the game, level backgrounds are an XML file. They define a number of background layers. Each background layer has a main sprite, which can repeat in a pattern. Typically for a horizontal level the sprite repeats along the X axis only.

This is the "RaysTop" sprite that's part of the background:

Code:

<Layer main="RaysTop" repeatX="true" x="-40" y="-20" xSpacing="50" parallax >
	<Particles effect="FallingDust" />
</Layer>

So here the RaysTop sprite repeats horizontally across the level. "x" and "y" offset the sprite to put it where I want it on the screen. "xSpacing" adds additional space between the sprites as they repeat. "parallax" controls how fast the layer moves relative to the camera (this layer is quite far away, so it scrolls slowly as the camera moves).

The new feature I've added here is the "Particles" tag. This allows a particle effect to be played on this background layer. Each layer of the background has its own particle system running.

The particle effects in the game are also defined in XML:

Code:

<Effect name="FallingDust" looping="true">
	<!-- Left, smaller shaft -->
	<Stage type="Line" randomOnLine="true"
		style="Dust" count="1"
		xStart="42" yStart="-24"
		xEnd="68" yEnd="47"
		xOffset="-45 to 45"
		xVelocity="3 to 6" yVelocity="6 to 12"
		/>
	<!-- Right, larger shaft -->
	<Stage type="Line" randomOnLine="true"
		style="Dust" count="1"
		xStart="-111" yStart="-28"
		xEnd="-79" yEnd="50"
		xOffset="-30 to 30"
		xVelocity="3 to 6" yVelocity="6 to 12"
		/>
	<Stage type="Delay" length="0.35"/>
</Effect>

This is the particle effect for the falling dust. It's a very bespoke effect, designed for this exact situation.

'looping="true"' causes it to loop forever through its three stages. The first stage of the effect spawns a dust particle in the left hand shaft of light. The second stage spawns a particle in the right hand shaft of light. The third stage waits for 0.35 seconds, to control how quickly the effect loops.

The particle system runs relative to the centre of the sprite. This diagram shows the area in which particles can spawn:

• Pink cross: the centre of the sprite. This is the coordinate 0,0 for the particle system.
• Yellow crosses, and green line: the spawn line. The dust particles are spawned randomly along these lines. The "xStart" and "yStart" govern the position of the top yellow crosses relative to the sprite's centre, and "xEnd" and "yEnd" govern the position of the bottom yellow crosses.
• Orange lines: this represents the "xOffset" value. Each particle that's spawned is randomly offset within this range.

The result of these parameters is that the dust particles are spawned within the light shafts. It requires me to manually measure the sprite to figure out which values I should use, but it's quite flexible. Ideally my particle system would have a visual editor, rather than just typing out XML, but the time it would take to write such a thing doesn't seem worth the investment right now.

Finally I thought I'd show an example of how the particle system repeats along with its background layer's sprite. In this example I've attached a fire effect to one of the factory ceiling's hanging lights.



You can see that even though the velocity of each particle is randomly generated, each instance of the effect here looks the same. This is because there's only a single particle system running. When it comes time to render the background layer that contains the particle system, that one system is rendered multiple times, repeating across the screen in the same pattern as the background layer's sprite.

[ShaneThannerComposer]

This post awakened some deep Warioland 4 nostalgia in me. Nice work!

[LyricalReverie]

I still love how clean the art style of your game is. It is very colorful, soft and vibrant. On top of that, there is just the right amount of the detail. Enough that it doesn't look bland but also not too much detail that it would look busy and hard on the eyes.

[Ishi]

Hi all,

Sorry for the long time between devlog posts! I've been very busy both working on Leilani, with work, and general life stuff.

I recently released a new video for the game, so without further ado, here it is:





I feel like this video represents a major milestone in the game development for me. As I mentioned previously I've been working towards a new build of the game that I could use for playtesting, and I finally finalised that after being focused on it for around four months. The video displays a lot of the polish, new artwork and better level variety that is now in the game.

I'd like to write a devlog about how I put the video together. My process is nothing groundbreaking but might be interesting to anyone looking to make a similar video. I use a mixture of tools - both free and paid.

Video / Trailer Creation

1. Recording footage

I use a paid version of Fraps to record game footage. I've heard people mention other software used for capturing video, like OBS, so there are free alternatives available.



I reduce the window down to its minimum size - 400x240 - before recording. I use the lossless video capture - this doesn't have any compression, meaning I'm guaranteed to have perfect quality video to take to the next stage of the process. But that means that the video can take up a large amount of space. By keeping the window small, it helps to avoid any CPU overhead of processing large videos, and means the video files only take up around 5mb per second, which is reasonable.

I don't record any sound in the videos - firstly the game's sound effects aren't worth showing off yet. But I also want the final video to simply have some music over the top with no interfering sound effects.

2. Converting video to HD

I next need to convert the video low res video into a HD format. It's helpful to do this as a separate, standalone step, as it gives full control over how the scaling is done.

For example, if I just used the low res video files in the next step of the editing process, it would just be scaled up using a bilinear filter and would come out super blurry. Instead I can achieve a nice sharp upscale.

The program I use to upscale to HD is VirtualDub. This is a fantastic free program that makes basic video conversion a breeze (I also use this to convert my Fraps videos to 30fps gifs).

VirtualDub allows filters to be applied, one of which is "resize". I use two of these resize filters to achieve the desired scaling effect. This replicates the way that the game would handle the upscale to 1080p.

The first resize is a nearest-neighbour 400% scale. This gets me as close as possible to 1080p using a pixel-perfect integer scale.



The second resize does a bilinear-filtered (smoothed) scale to a height of 1080p (and then adds black bars, because my game isn't actually 16:9 ratio).



The smoothing from the bilinear filter provides an anti-aliasing effect which prevents the game's pixels from appearing to be different sizes.

I export the video using a GoPro codec that I have. I ended up using this one because it's the first one I found that produced video that was compatible with the next stage of the process. No other reason.



It's worth noting that I don't crop the video files at this point, even though VirtualDub does make it easy to trim the unwanted ends off the videos. I prefer to leave extra footage on either side of the video clips, and then crop them during the editing stage.

3. Editing the video

For video editing I use the free version of Lightworks.



I don't have much prior experience of editing video outside of the old versions of Windows Movie Maker. My experience of using Lightworks was certainly not intuitive - but, once I got used to how it works, I found it quite quick and enjoyable for my simple purposes.

I'm not interested in writing a full tutorial, as I'm sure there are better resources available online, but I'll quickly describe my process.

The timeline at the bottom of the window represents the whole video. By default it has a lot of audio tracks - presumably for surround sound. By right clicking and using the Tracks menu, you can remove a lot of unnecessary tracks which leaves more room for the useful tracks. There is also only one video track by default. I find it handy to have at least two, as it gives more room for shuffling videos around while I figure out how I'd like to edit the clips together.

I drag and drop all of the 1080p video clips into the project. Then, I drag each clip from the "Project Contents" panel on the left down to the timeline. The clips can be moved around easily. It's also possible to crop the clips from either end by clicking and dragging. Additionally, it's possible to 'lock' the ends of clips in place by clicking them, which puts a yellow marker on the end of the clip. I don't make much use of this, but it's worth knowing that this 'locked' state exists, as it's confusing when it happens unexpectedly.

Eventually after much trimming, adjusting, and choosing which clips need to be removed, I have a video of a reasonable length. Just a couple of more steps left.

4. Splash screen

This is of course optional, but I like having a bit of info at the start of the video, especially to highlight that the game is still in development.

I use the free vector editing program Inkscape when I need to create this kind of image. I also created the game's logo in this program.



Inkscape is incredibly useful and powerful, and I highly recommend it. I export my image as a 1080p .png file. This image can be dropped into Lightworks and placed in the video just like a video clip.

5. Soundtrack

The video needs a soundtrack. As mentioned before the individual clips do not contain any sound.

To edit the sound I use Goldwave which is a paid program, but something like Audacity would be a great free option (I use Goldwave for most of my audio editing needs, although I do use Audacity for exporting multi-channel music for use in the game).



No complex editing going on here - I load a track from the game, trim it to the length of the video, and add a fade to each end. I save it out as a new .mp3 file, drop that file into Lightworks, and add it to the video timeline.

6. Export and upload

The main limitation of the free version of Lightworks is that there's only a small number of options for exporting videos. Luckily, one of those options is "YouTube". It only exports at 720p, which is unfortunate, but perfectly fine for a pixelly game like Leilani.



Right clicking on the timeline reveals the Export option.

Lightworks does have the ability to export the video directly to YouTube - but I took the option to save it out to an .mp4 file and upload it to YouTube myself. (This video can also be uploaded to other places like Steam).

(Edit: I forgot about the custom video thumbnail. I also used Inkscape to create this image.)

Done!

Phew! I hope that contained some useful or interesting info for you. Obviously there's the whole area of choosing what footage of your game to record, how to edit it together, that kind of thing - I'm definitely not an expert there so I just wanted to cover the more technical details in this post.

One bit of advice I will give is to have patience. This is only the second video I've made using this process, and the first one was so long ago that I'd forgotten a lot of the steps. Using unfamiliar tools can be a frustrating experience so make sure you allow yourself plenty of time to poke around the software and search for solutions online when necessary.

It's also really useful to step away from the video at times - do a first pass at editing the video, and then literally just don't look at it for a day or two. When you come back to it you'll have fresh eyes and you'll be able to spot parts of the video that don't flow nicely, or are too busy, or if the video goes on for too long.

Thanks for reading!

[JobLeonard]

Great write-up as always

[qMopey]

Loved the ending of your gameplay! Great moment where the ring turns into the sun

[Devilkay]

i love your color palette! Great work!

[ProgramGamer]

Your devlog updates are always such great reads! This thread is honestly a must-read for anyone looking to make an indie platformer.

[Ishi]

Hi all!

For the last couple of weeks I've been focusing on polishing up the game's menus.

Display Settings improvements

Old     ->     New

It's been quite a big overhaul in many different areas, on every screen of the UI. I'd like to do a higher level overview of all the menu screens in another devlog post - here I'll just list examples of some of the changes that have happened on this screen.

• Longer buttons - More localisation friendly, as they can fit more text in.
• Moved button icons to the left - it feels better to me.
• Improved text colours - easier to read.
• Tweaked the medium-sized font to make some characters more consistent or bolder.
• Improved icons.
• Improved wording.
• Improved order of options
• Added drop shadow and icon to the title bar.
• Added Full Screen type option, and implemented maximised borderless window full screen mode.
• Display the F11 shortcut on the Full Screen checkbox.
• The background shakes when the Shake Effects option is selected

So yeah I'll cover the general layout and workings of the UI in the future. I hear a lot of people say how they hate working on UI - but I think it can have a huge impact over the impression of quality when someone plays a game. If anyone has any questions about UI stuff I can try and cover it in a future post.

But specifically today I want to cover one option on this Display Settings menu:

Scaling Modes

This option decides how the game's 400x240 visuals are scaled up to fit the window/screen. I think I've talked about this a bit before - though I can't find the post, and I've added new scaling options since then anyway.

There are five modes which I'll list here, and then cover in more detail below.

There are example images of how each mode looks on a 1920x1080 screen.

• 1. Pixel-Perfect
  
  
• 2. Fit to Screen
  
  
  
• 3. Fill Whole Screen
  
  
  
• 4. Flat TV Effect
  
  
  
• 5. Curved TV Effect
  
  
  

1. Pixel-Perfect


Click for 1080p image

This mode is for those who want super sharp images. It only scales the image up by integer sizes, resulting in no blurriness.

Steps:

• a. Find the highest integer scale that fits within the screen/window size. For 1080p, the image can be scaled 4x to 1600x960.
• b. Draw the image in the centre of the screen/window, scaled up using nearest neighbour filtering.

2. Fit to Screen


Click for 1080p image

This mode is for those who want to fill as much of the screen as possible without distorting the image. It scales the image up in a way that feels more like anti-aliasing than blur.

Steps:

• a. Same as before - find the highest integer scale that fits within the screen/window size. Again, at 1080p this is 4x scale.
• b. Draw the image to an intermediate texture, scaled up using nearest neighbour filtering.
• c. Draw the intermediate texture to the centre of the screen/window, scaled up a little further so that it fills either the entire width or height of the space. This scale uses bilinear filtering, so the edges between the game's pixels become blurred. When seen from a distance, the game pixels still appear to all be the same size.

3. Fill Whole Screen


Click for 1080p image

This mode is for people who hate black bars with a passion! On a 16:9 monitor this results in a little bit of stretching, but it's still playable.

The player could also resize the game window to be really narrow and tall - and this mode will still stretch the image to fill the whole thing, even though it looks terrible. But it's flexible for weird hardware setups, particularly in cases like mirroring a laptop's screen onto a TV - sometimes it's useful to be able to fill the whole screen with the image regardless of the actual resolution / pixel aspect ratio.

Steps:
Identical to the steps for "Fit to Screen", except c: the intermediate texture is stretched to fill the entire screen/window, with different amounts of horizontal and vertical scaling.

4. Flat TV Effect


Click for 1080p image

This mode is for people who like a slightly softer image, or want the retro feeling!

This effect was originally inspired by this tweet. My engine doesn't support shaders, and it inspired me to see what kind of CRT effect I could make without them.

Steps:

a. The goal of the first step is to blur the image horizontally, but not vertically.

The game image is drawn to an intermediate texture, which is 1200x240 - so the image is scaled 3x horizontally, but not scaled at all vertically.

Using bilinear filtering here would give an acceptable horizontal blur effect, and would look like this:


Click to see whole intermediate texture

However this is a good opportunity to enhance the CRT effect a little by separating the Red Green and Blue channels out slightly. I use additive blending, and draw the image in 3 passes:

• 1st pass: Red image RGB(1,0,0), -1 x-offset
• 2nd pass: Green image RGB(0,1,0), 0 offset
• 3rd pass: Blue image RGB(0,0,1), +1 x-offset

The first pass draws only the Red channel of the image into the intermediate texture. The second pass draws only the green channel of the image - thanks to the additive blending, this gets added to the Red that was already drawn, rather than overwriting it. Then the 3rd pass adds the blue channel.

Because of the offsets in each pass, the effect is to shift the red element of the image to the left slightly, and the blue elements to the right slightly, blurring the image in the process. It kind of simulates how the red, green and blue pixels are displayed on some monitors (though I'm not going for any real kind of accuracy with this filter). The result is this:


Click to see whole intermediate texture

b. Next this intermediate texture is drawn onto a second intermediate texture. This second texture is 1200x720 - a 3x scale in both directions from the original image. By using nearest neighbour scaling here, the horizontal blurriness remains, but no vertical blurriness is introduced.


Click to see whole intermediate texture

c. Scanlines are drawn onto this intermediate texture. Literally just drawing 240 lines across the texture (but batched into a single draw call, so it's fast.)

Side note: These scanlines pose a problem - the overall effect of these scanlines is to darken the entire image, which is not desirable.

To fix this, we can make an amendment to step a, and brighten the whole image while doing the additive-blended passes. The scanlines are 15% black, and one in three pixels of this image will be covered by a scanline. By adding 5% (0.05) brightness to the image, we can overbrighten it, so the scanlines will return it to normal later.

• 1st pass: Red image RGB(1, 0.05, 0.05), -1 x-offset
• 2nd pass: Green image RGB(0,1,0), 0 offset
• 3rd pass: Blue image RGB(0.05,0,1), +1 x-offset

After drawing the scanlines we have this:


Click to see whole intermediate texture

d. Finally, draw this second intermediate texture to the screen. This is done in the same was as the "Fit to Screen" mode - it's stretched to fill the width or height of the screen/window.

5. Curved TV Effect


Click for 1080p image

This mode is for people who like fake curved CRT monitor filters! It feels a bit of a cliché effect in games nowadays, but - this is my personal favourite filter to use when playing Leilani, so I'm sure other people will like it to. :D

This is identical to the Flat TV Effect, but:

c. After drawing the scanlines, also draw curved black corners onto the second intermediate texture. The corner is a pre-made sprite.

d. When we draw the image to the screen/window, we distort it. Rather than drawing the image using two polygons (a quad), it's split into a 10x10 grid of quads, and the vertices of these quads are pushed inwards to curve the entire image.

[Schoq]

Awesome! Video options are often lacking in pixel art games and it always makes me happy seeing people putting in that effort

Would you also add the option for straight bilinear scaling? I personally think that's ugly but I know a few people prefer it for some reason

[Ishi]

Would you also add the option for straight bilinear scaling? I personally think that's ugly but I know a few people prefer it for some reason

A softer version of the Fit/Fill options could be a good idea - thanks! Will give it a try.

[XianXian]

Wow this is really adorable. The artwork is magnificent. I rarely ever see dark skinned characters in video games or tropical settings. Keep up the good work!

[Ishi]

Happy new year!

An update on the last couple of months of game development. I was mostly focused on adding some polish and responding to feedback I'd got from playtesting. The general flow of the world map received some improvements (not that map itself, which is placeholder, but the interface and the usability of it).

After completing a level, the shells and newly collected chips are tallied up:



The number of completed levels, displayed in the top right, is now represented with a flag icon. I also put a flag on each completed level. It should be easy to understand what the number means now (previously it was an ambiguous/confusing battery icon).

Also, I added button prompts to show how to navigate the map, which is especially handy on PC if the player hasn't gone into the control settings by this point. I adjusted the size of the border and moved the level name upwards to make room for the prompts.



The flag icon is also used to display the number of completed levels on the file select screen.



A course list screen is now available in the pause menu, which will come in useful later in the game to easily get an overview of game progress without having to actually navigate the world map.

Would you also add the option for straight bilinear scaling? I personally think that's ugly but I know a few people prefer it for some reason

I added this now! The player can choose from Sharp / Soft / Softest pixel edges. "Softest" is simple bilinear scaling. "Soft" scales up to 2x using nearest neighbour before doing the bilinear scale, so it's somewhere inbetween. "Sharp" is the previous method I described, which scales up to 4x using nearest neighbour before the bilinear scale.

I also added optional border patterns to fill in the edges of the screen. I think it feels a bit more polished compared to just leaving those areas of the screen completely black. I linked the brightness of the borders to the in-game fade ins, fade outs and transitions - so typically if the game has faded to black, for example when loading the level, then the border has also faded to black. This makes the border feel a bit more integrated into the game and less like playing an emulator with a border around it

Click for 1080p images:




I added a little stretch/squash anim when jumping/landing during a roll. This gif might not show it off that well as the gif is 30fps. But I think it's a nice little touch, since rolling is such a core feature of the game, but was feeling a bit underserved in terms of animations compared to non-rolling Leilani.



Now we're moving into the new year, I'm planning on getting back to work on some new levels and in-game mechanics.