next »

[purplemonkey]

Just wanted to chime and say that this game looks wonderful. The perfect use of colours is really setting a fresh and cute tone!

[Ishi]

Hi all, time for the weekly update!

I spent quite a bit of time implementing then tweaking the movement for the fire feather. The feather doesn't float through objects, so it has more potential to interact with the environment, like triggering collapsing platforms and other fun things.



I added a couple of sparkles too, so powerups are feeling a bit more polished now!

I've also worked a little more on level design and streamlining my level editing process. I thought I'd talk a bit about that side of things today.

Level Editing in Tiled

I use Tiled to create the levels for Leilani's Island. It's a really useful tool that includes both tile placement and freeform object placement, so it's really flexible.

Here are some of the tricks and techniques I use to try and make level editing as painless as possible.

Layers

Tiled supports adding multiple layers of different types to a single map. I have a standard set of layers that I use:

Main Layer



Most stuff you can see here is on the Main layer. It contains scenery tiles (all non-moving scenery) and entity tiles (all interactive objects and some special ones that I'll mention later). Whenever possible I use only this layer and no others, which makes is much easier to copy/paste/move chunks of the level around.

Main2 Layer



This is used for when I need to place both entities and scenery on the same tile. For example here the star blocks are placed over the purple ledge.

Contents Layer



This is used for placing entities inside others. It's not super flexible, so only certain entities can make use of contents, the blocks being a good example. In the picture here the left hand block contains a flower powerup. The right hand block will default to containing a single shell - I used to have to manually add shells to every single block and it was driving me crazy!

Properties Layer



This layer contains freely placed box objects. Tiled allows custom properties to be set for these boxes which is super useful. The way I interpret this layer in the game is that any entity placed on the Main or Main2 layers will inherit the custom properties from the first box object that overlaps it.

In the example above the Entrance entity (which is a point where Leilani can appear) is given the name "Enter".

Entities

This is the tileset I used for placing entities on the Main / Main2 / Contents layers. It's a real mess and contains loads of old graphics and old entities that I'm not using at the moment. As some point I'll reorganise it a bit!



Most things on here are interactive entities that are just placed straight into the level (blocks, enemies, spikes).

The tiles with small versions of shells or powerups are used for the Contents layer as shown above. You can see a green spiky ball powerup that I never used, and a pineapple!

The entities on the 8th row are used to limit the in-game camera. The camera cannot travel past the red markers, so those always border the level. The blue camera markers are just a soft limit that the camera will only go through if Leilani goes through too, so I use those if I want the effect of the camera scrolling from one screen to the next.

The second to last row has an invisible Exit trigger, which is used to end the level or switch to a different area of the level. The Entrance one I talked about before - that's where Leilani appears when starting a new area of the level. The <-> icon is used when combining multiple Tiled maps!

Combining Multiple Tiled Maps

The <-> icon is one I just added today. Each level in the game can contain multiple areas, which Leilani travels between by falling down holes or going through tubes. But each of these areas can be made up of multiple Tiled maps which are stitched together by the game. This is really useful, because if I want to expand something in the middle of the level I can just edit one of the small maps to make it wider, without having to move every single thing in the rest of the level two tiles to the right. I can even swap the order of a couple of the sections by simply editing an xml file to load the Tiled maps in a different order.

Which brings me to what the <-> entity does: I place one of these on the right hand side of one map, and one on the left hand side of the next map, and the game uses those to automatically align the two map files with each other by moving them up/down. This means I don't have to worry about making every map the same height or introducing unintended walls/cliffs into the level!

Scenery Tilesets

This is the version of the Cave tileset that I used within Tiled.



and this is the version used in the actual game:



They're quite different! Firstly, the Tiled version uses 16x16 tiles. The in-game tiles are 24x24, but they're drawn 16 pixels apart. This means the tiles can overlap their borders a bit, so the platforms can stick out a bit at the edge for example without me having to place a lot of extra tiles everywhere.

The game version also contains two layers - the black border layer is all drawn first, and then the top detail layer. This means the black borders from neighbouring tiles all merge together and I get a consistent border around all scenery regardless of how the tiles are placed. Again this saves a lot of extra tile combinations, and a lot of time placing the correct borders everywhere.

Finally there are the red tiles in the Tiled version of the tileset. These represent tiles that are automatically placed by the game. For example, there are three versions of each of the cave tiles, containing different patterns. In the editor I just place the first version of the tile. The game automatically alternates between all three versions, according to some rules in an xml file.

Hopefully an image describes it better. The main result is a level that looks a lot nicer in the game than in the editor!



I hope some of that was interesting, and maybe useful to anyone thinking of using Tiled!

[Sam B]

Now -THATS- how you post to a devlog. Really interesting, thank you for sharing.

Can't wait to see more!

[Ishi]

Weekly update time!

I've had a really good week this week, working on various different things.

Woofle gave me final versions of the first batch of music! It all sounds amazing. I implemented the music system, and added some music to the game. It makes a big difference to how the game feels.

I improved the system for creating the parallax-scrolling level backdrops, and started revamping the cave backdrop, which I was never too happy with. I'll post an image soon when it's in a decent state to look at! I might go into more detail about the backdrop system in the future if anyone's interested.

Rumble
I also improved the controller rumble system! This is one of my favourite bits of feedback to add to a game. The different rumble presets are now stored in an XML file:

Code:

<Rumbles>
	<Group name="RollCollide">
		<Rumble light="0.6" length="0.12" />
	</Group>
	<Group name="Hurt">
		<Rumble heavy="0.6" length="0.18" />
	</Group>
	<Group name="Die">
		<Rumble light="1.0" length="0.12" />
		<Rumble heavy="0.2" length="1.4" falloff="true" />
	</Group>

	<Group name="PlatformCollapse">
		<Rumble light="0.4" length="0.15" minRange="2.5" maxRange="3" />
	</Group>
	<Group name="PlatformDestroy">
		<Rumble heavy="0.4" length="0.15" minRange="3.5" maxRange="10" />
	</Group>
</Rumbles>

It's pretty simple - heavy and light refer to the strength of the heavy and light rumble motors, and length is the duration. Falloff means the rumble strength reduces to zero gradually.

Finally the rumbles that specify a minRange/maxRange are the ones triggered by objects other than the player, for example a collapsing platform. The rumble is reduced if the player is between minRange and maxRange distance, and isn't felt at all if the player is further than the maxRange. This prevents the player feeling rumble from distant or offscreen objects.

It's now really easy to add new rumble feedback to the game! My aim with these kind of systems is always to make them as easy to use as possible, preferably with a single line of code.

To trigger one on the player:

Code:

cGlobal::GetGameInput()->AddRumble("Hurt");

(cGlobal holds all my big one-off game systems.)

To trigger a non-player rumble, the collapsing platform contains this code:

Code:

m_pGameGrid->EmitRumble("PlatformDestroy", GetBodyCentrePosition());

Sorry for the lack of colourful images this week!

[lasttea999]

This is currently my favorite out of the Indie game projects I'm following! Thank you for updating this devlog as well as announcing those updates on Twitter!

[alwex]

Nice use of Tiled. I also use this good piece of software in my game Tikotep's adventure, but I rely entirely on the level editor and In some maps, I use up to 15 layers.

I use a room layer to clamp the camera (rooms are just square delimiting the viewport and the camera adapt its position/zoom depending on that viewport) and an object layer wich deal with enemy, lights, scripts and every interactive things.

My maps become quite big and complicated to maintain but the whole game can be created only using tiled now as every event/script/scene/map transition are handled using plain javascript added as properties of object.

If I understand well, the camera object in your map is used to determine the camera bounds?

[aamatniekss]

So clean and beatiful. This is looking really promising. Looks like it's taken straight from GBA.

[Igor Sandman]

Your game it as cute as it gets! I really love the colors.
I'm following

[PrimeVest]

I think the way this game plays just feels very nice, i love the characters and the animations

[Ishi]

Thanks everyone Apologies for the lack of an update last week - I've been really busy recently and didn't have much worth showing. I'll hopefully be able to get a good amount done this weekend - I've got a lot of tweaks and little touches I want to add. So much to do!

Nice use o Tiled. I also use this good piece of software in my game Tikotep's adventure, but I rely entirely on the level editor and In some maps, I use up to 15 layers.

I use a room layer to clamp the camera (rooms are just square delimiting the viewport and the camera adapt its position/zoom depending on that viewport) and an object layer wich deal with enemy, lights, scripts and every interactive things.

My maps become quite big and complicated to maintain but the whole game can be created only using tiled now as every event/script/scene/map transition are handled using plain javascript added as properties of object.

If I understand well, the camera object in your map is used to determine the camera bounds?

Yeah, the red camera object is a solid left/right/bottom/top barrier across the entire map. It's simple but not very flexible.
The blue camera objects are barriers that the camera will move past once the player has gone past, and also affect the entire map. They don't work very well at the moment so I haven't used them.

I found this recent article about cameras in 2D games to be really interesting!

http://gamasutra.com/blogs/ItayKeren/20150511/243083/Scroll_Back_The_Theory_and_Practice_of_Cameras_in_SideScrollers.php

Since reading that I've been thinking more about how to improve the camera in Leilani. One thing I'm considering is being able to define a path for the camera to take through a level, and lock the vertical position of the camera to the path at all times (see the Wonder Boy example in the article above). It's simple but could make the levels feel much more natural and interesting by including a bit of vertical camera movement.

It would also make it even easier to stitch different Tiled files together into one big map, because I wouldn't have to care about where the global camera boundaries across the whole map.

[Ishi]

Hello!

Today I finished overhauling the cave visuals - here are the results! It uses some recently added features like animated background layers and environment particle effects (for the water drips). It's pretty steamy down there.



Compared to the old version:



I feel like this brings me a lot closer to a decent playable version of the game, though still lots of work left to be done. I've written up a big todo list of things to look at, so that'll help me keep working in the right direction.

My next goal is to improve the moving platform system, which has been needed for a while, as well as more bits of level design here and there as usual.

[Balrog]

This looks so good. Keep it up, man!

[JaJitsu]

love the swaying leaves and the little punch during the idle!
I'm a bit confused with the moving background bit. Are they clouds? Right now since they are so opaque they look like trees or bushes.

[Ishi]

Thank you both!

I'm a bit confused with the moving background bit. Are they clouds? Right now since they are so opaque they look like trees or bushes.

Yeah it's meant to be steamy clouds. The colour is a bit weird, but green really works nice with the pink/purple scenery I think. Also I'm not using transparency in the game. I was aware it's a bit of an unusual background, so will consider it for further improvements later on. It's good to have feedback about it.

[Moth]

Love that parallax, the animated foliage is beautiful too. The caves look super amazing now.

[Quicksand-T]

Thank you both!

I'm a bit confused with the moving background bit. Are they clouds? Right now since they are so opaque they look like trees or bushes.

Yeah it's meant to be steamy clouds. The colour is a bit weird, but green really works nice with the pink/purple scenery I think. Also I'm not using transparency in the game. I was aware it's a bit of an unusual background, so will consider it for further improvements later on. It's good to have feedback about it.

To my eyes the color is perfect, its just the light outline and bulbous highlights that make it look abstractly plantlike.

[JaJitsu]

To my eyes the color is perfect, its just the light outline and bulbous highlights that make it look abstractly plantlike.

Agreed! the green/pink is great.  I still think some transparency will take you a long way, but changing the highlight should help a bit too.

[Cow]

watching this devlog so closely that i can see the shadow mask on my tv

[Raku]

This looks magnificent! I need to follow this game's progress, I love what I've seen so far! The art style, the movement and weight of every object, the little details like those plants swinging in the breeze, it all looks so well-done and stylish. Kind of reminds me of the Wario Land games, in a very good way!
Keep up the great work!

[Ishi]

Aloha!

Steam Vents

I added this new feature this week - steam vents that carry Leilani upwards.



They're a replacement for these water jets that I was previously using - I never really liked them, so I decided to do something totally new rather than try and improve the artwork.



The water jets were made of multiple sprites so they could extend as high as I wanted, but that made them look a bit un-natural. I don't think I'm losing much by making the cloud from the steam vents a fixed size - in fact it's probably better to keep them consistent so the player knows what to expect. They're also much wider than the water jets which just makes them less fiddly to use.

Plus the steam is much more suited to the level theme and hopefully helps to identify the background!

Break again

Unfortunately I need to take another 2-3 week break from working on the game, due to a combination of crunch time at work plus some more fun things, but Leilani will come back better and stronger than ever!