Oh you, Ladder Cave…

All programming/development has literally been on hold this week while I fill in graphics, so it feels like I don’t have much to say recently. Level 3 is now looking pretty finished, so I’ll include some video footage in my next Devlog Video of me running around it! I didn’t have to make too much more for my latest blue level, except for a new water tile for the onsen (which may be temporary for now), and a new structure to mark where the onsen are.


The tile in the middle of the structure can be repeated to increase the width of the structure, as most of the onsen are different shapes and sizes. I originally wanted the middle to be peaked, but this raised serious difficulties when trying to extend the structure width-ways! I’ve placed the new tiles into the level, including the finished second hald of the level, which was looking very bare before.


The last part of the level to design was the level’s only cave, which stands alone with four entrance ways as opposed to having two cave sections with fewer entrances. You can see how each of these entrances align in the centre of the map in the image below, obviously in the room editor the pink squares represent warp points between rooms.


As with all cave sections, I’ve based the shape of the inside of the caves on the outer landscape. This cave has ended up with a long vertical spine with a horizontal part that crosses over it near the top. Because of the cave’s long shape, I decided to see what I could accomplish here using ladders, which can only be used for moving up and down. I worked out that the Hanging Adversary can be used as a very effective obstacle while the player is moving vertically, by placing it to one side of the ladder like this:

The player can only wait until a timed move past the plant, because a left or right movement would result in the player falling. So, with this in mind I designed (most of!) the cave to revolve around climbing as many ladders as possible.


I got a little stuck in the bottom left-hand corner, so I waited until I could test the effectiveness of the rest of the area to place something in here. In the end, this area ended up being a little maze section with no real obstacles to overcome. Because this is the last cave of the game, I’ve placed as many Hanging Adversary obstacles as possible without the stages becoming impossible/ridiculous. This cave scares me a little, but I’m glad I have the upper hand of knowing where everything is :S I recorded this video to show the evasion of each obstacle in the cave, and I somehow managed to not take any damage until right at the end! The hardest placement of obstacles here is where there is a sharp left or right turn at the top of a ladder, or where there are many obstacles together (which is where I failed!)

Where has my Sharpie gone?

It’s taken me eleven weeks (honestly, longer than expected…) and I’ve finally misplaced my Sharpie :(. The closest thing I could find was my beginner’s fude pen, so I’ve written this week’s target in Kanji with Hiragana subtitles! Its amateurism is probably offensive to the Japanese, so for that I apologise. I’m working on it!

I’ve already started to create Hanami level 2, and actually the main structure is very much in place and I’m filling out the details. I started off by making the platforms all one block colour, which I did in the previous level several times! This time took considerably less because I wasn’t making tiles as I went a long and I knew the sorts of detail I would be adding.


For the outdoor detail, I’ve also changed things like grass and plant colour to orange, as well as all man-made structures. I’ve only used my previous tileset around the door to the previous level, to show which level the door goes to! I’ve also added some orange flowers around the door to this level.


There’s currently no lighting or background in the level, which is why it looks very plain! Although in a way, I kind of like how bright everything looks. It reminds me that I sill need to sort out the ambient colour overlay in the first level, as everything still looks really dim (I actually made it darker to see how that worked out!)


I’ve made a few additions to the tileset to give this level some unique features, but they have been minimal. My old set seems really flexible, especially when it comes to creating new platform shapes. In the screenshot below, you can see a couple of new features like the bamboo fence and square plant pots. This building is supposed to be a roof garden belonging to an ikebana specialist, hence all the plants! I makes the similarly styled buildings more interesting.

As well as continuing the development for this level, this week I’m hoping to wrap up my Game Design Document so that I can produce a nicely designed copy to go into a development folder. The graphic design style used for this will be similar to the one I use in any other physical designs, such as box art and game manual design, which are really the second dimension to the retro re-enactment project! It will probably be fairly minimalist, similar to the style I’ve used so far in my Pecha Kucha presentation and rough idea for album art for my soundtrack (hah!)

Palette Swap Tactics

Palette Swapping is a cheeky little technique used by game developers in order to recycle assets. It involves taking an asset previously made and changing its colour scheme, sometimes (but not often) giving that asset a completely different look. Using a little Photoshop magic, I’ve quickly and easily turned my pink/red tileset into an orange/yellow one!



Obviously, not everything here is usable like this! I’ve kept a lot of wood and neutral colours from my original set and combined it with some of the elements from this colourised set like roof tiles and furniture. Testing is really easy in game maker because you can swap tilesets out for new ones. To see how this looked in the game, I simply swapped out my old tileset temporarily for this one and all the tiles were already in place! Here’s how it looked at a quick glance:



The level design for “Daidai Iro” is now complete, so I’ll be constructing this in Game Maker over the next week, whilst working on some of the things that still need a little sorting out from before, including the implementation of NPC characters and with that the new petal system which I still need to make!


Getting Ahead of Myself?

It turns out I jumped the gun a little last week as I was advised to “finish the first level to move on…” I checked back to my time plan this morning and my goal for this week was to add UI elements like the HUD and inventory menus. These are now well under way, so I feel like I’m doing well for time, although I know in my head that this can only mean I’ve omitted to do something a long the way. Obviously, graphics are still a working progress. The reason I wanted to start placing UI elements now is because I felt the natural graphical style would be evident enough to start expanding from background assets to the other areas, like the UI, title menus etc which will start to take form over the next couple of weeks. Right now, I’m still filling out my days with level refinement and perfecting areas which have been left overlooked for a while. So that I can’t miss A SINGLE THING, I’ve started at the beginning of the level and worked my way, changing and improving on specific things as I’ve gone along.


In a lot of places, parts of the level simply needed filling out slightly. You can see some improvements to the graphics here where I’ve added little plants and bushes and filled out large plain areas with small rock details etc, so that every part of the level has a unique combination of my existing tiles and assets. What may of may not be noticeable from this image is some adjustments to the lighting which I’ve made. I’ve expanded the sprite I use for these lights so that it covers a larger area and isn’t so concentrated on a small space, which brightens up the level significantly and adds more light variation across the level.


One major addition to the tileset has been these grassy edge tiles, which droop over the edges of platforms and just round them off nicely. They make everything seem a lot more finished, and eliminate a lot of the very hard, straight edges that were causing problems before.


Another significant change has been to the lighting system inside caves. I’ve made the ambient light nearly black, which almost makes the background invisible, except where there are lights. I’ve made these lights much brighter than the outside lights as they are significantly more essential more gameplay. I think this change make the level more interesting visually as well as in terms of how the player plays the game. Instead of looking at an entire surrounding area, the player is constrained to one small space. In this image, you can also see some improvements I’ve made to the Hanging Adversary sprite, which is now finished and working very nicely.


When it came to animating the Hello Mushroom sprite, I admittedly got a little stuck. My original design didn’t give me much space to work with, and I felt like I could only accomplish very minimal movement. This would have been fine, except my other obstacles are now much more active in comparison! So, I redesigned the shape of the mushroom to be more flexible. This new mushroom still releases spores in exactly the same way as the old design, but this one now dances about a bit. The smaller mushrooms are harmless and (I think) create a nice little piece of scenery, but warn when there is a nasty mushroom around!

Draw, Animate, Code & Play etc…

Drawing
Over the past couple of days I’ve tried to prioritise sorting out my environmental tiles, but still haven’t really come to a conclusion. I tried to test out my new idea for rocky tiles with real parts of the level design, but so far can’t seem to make them work well as they do on paper! To stop myself from ending up in a rut, I’ve discarded ALL rocky texture tiles for now and replaced them with a plain purple colour, which can easily be swapped for a textured tile when I decide what it will look like!


I made a little progress with the rock pattern around cave entrances however. I considered using straight edges around rock outcrops so that straight edges around other level features wouldn’t stand out so much, but didn’t feel this worked as well as the more natural, uneven design which is closer to my previous trace design.


I tried this design here with my previous rock texture, but decided that the rocks looked better against a more plain background. Even if I bring a heavily textured tileset back for platforms, I may stick with a plainer tile for cave walls.

Whilst trying to ignore all the complications of seamless tiles etc, I’ve diverted my attention to creating more Japanese-looking objects for the level. I’ve started by taking objects I’ve already made and adapting them to suit various instances, which is great for level continuity.


Amongst these smaller features I’ve been working on some large objects inspired by specific Japanese things, like this shrine gate:


and this bridge:


Although, the reason for the bridge’s funny shape is because it follows the shapes of my platform mask tiles. I may round this off later to make it look nicer and have the character follow the tiles rather than the shape of the bridge.

And I finally got round it pixelising the small food stand that I designed about a week ago. You probably can’t tell even if you’re Japanese, but I attempted to write ramen “らめん” in hiragana on the sign!

Without the ground texture tiles, the game definitely doesn’t look as “nice” as it did before, but the more empty spaces of the level are starting to fill up. (I haven’t built the lights in this screenshot either, which is why it looks so dark!)

Animating
In time for a proper working level prototype, I wanted to get many more character animations in. Before now, I’ve simply had one continuous running animation! I’ve only created the basics so far: running, stopping, jumping and climbing ladders.

To make the character stop you could use a single frame of the character just stood still, but I like to keep the character moving to ensure the player that the game is still running! Before now, I’ve used a breathing motion by making the character move slightly up and down, but where Hana is made of so few pixels, any rearrangement of pixels results in something far from “subtle”. I think a breathing animation is out of the question, unless I find a clever way to do this. For now, I’ve created a couple of frames that make her look fidgety when stood still, and a blink frame that flashes up irregularly.




For the jumping animation I’m currently only using one frame, although I would later like to add another to differentiate the character jumping up and coming back down.

My climbing animation is currently universal, used for climbing up and down ladders. This particular animation works best for climbing down ladders, so I may later add another one which looks more like climbing up a ladder.

Coding
The main bulk of the coding I’ve done over the past couple of days has been in the character step function, which controls the way the character moves. With all the new sprite sequences, I’ve had to customise things like image-scrolling speeds for each individual animation and can no longer rely on one over-ruling command.

I’ve split character movement into two separate “modes”-one fore running, jumping etc. and one for climbing. If the player is not on a ladder or in mid-air, the player is on_ground (this is a ready-made variable that comes with the Grandma Engine.) If the player is on_ground, the rules of horizontal movement apply, including sprite sequences and player input. If the player crosses a ladder but does not climb, ie. does not press up or down, then the rules of on_ground still apply.

if on_ground && place_meeting(x,y,obj_ladder) && !keyboard_check( key_up ) && !keyboard_check( key_down ) {
can_c = false; }

But, if the player crosses a ladder and does press up or down, can_c (short for can climb) becomes true, and the rules of ladder climbing apply. This code is pretty similar to the code I wrote before for vertical movement, but I’ve added sprite sequences and image-scrolling speeds. As you can see, I’ve applied the climbing animation twice, once for each vertical direction, so if I wanted to I could use two animations that would represent each direction.

else if (place_meeting(x,y,obj_ladder)) {

vspd = 0;
can_c = true; {

if (keyboard_check( key_up ))
vspd = -S_MAX_V /4;
sprite_index=spr_hana_climb;
image_speed=.1;

if (keyboard_check( key_down ))
vspd = S_MAX_V /4;
sprite_index=spr_hana_climb;
image_speed=.1;
}

I haven’t written much other than this, but I’ve added a few lines of code for more warp objects throughout the level. This has helped me create some clarity where caves are involved, as I have created two new rooms for caves that are joined to the main level by these warp points. Now you can see a definite distinction between the outside and inside of the cave parts!

Outside:

Inside:

Playing

Adding a lot of visual features doesn’t occur easily whilst play-testing, due to the fact that in Game Maker the platforms are made of these red-block objects that cover the background imagery. They need to do this so that I can see where I’ve put platforms! But at the same time, I can’t see if I’ve made a mistake with the imagery below. So when I’m editing tiles and want to see how they look in-game, I have to add these red blocks temporarily and delete them again afterwards. One major criticism of Game Maker is that it doesn’t allow bulk actions to be applied to all instances, so each block must be added and deleted individually, which is a looooong and tedious process. My main focus is still on visuals, but I’ll build the complete level for a play-test from volunteers next week.

This concludes my lengthy summary or the past two days!

More Changes to Environmental Tiles

I’m still not 100% about my mountain/rock tileset, which seems to be expanding increasinly to accomodate for varying edges and crossovers. I had a rethink and came up with a more simpler, more flexible solution. I’m going to try this out for now and not expand on it too much, as I don’t really want the graphics holding me back at this stage…

Here’s some of my most recent screenshots from the level test in Game Maker:



I’ve taken on some of the advice I’ve received from feedback sessions, such as using the blue brick tiles as a background layer to show depth within the mountain, however I’m still concerned about the scenery looking overcrowded, messy and repetitive. This is before I’ve even filled the level with many of the items/objects which will be added later. So I’ve gone back to my traced level design and doodled this new tile design, based on a much simpler and organised idea.


There are parts of my original design which clearly show just a few neatly aligned rocks jutting out, and I feel this suits the building graphics better than the more clustered tiles I was previously using. I created this test mock-up in Photoshop to check their effectiveness:


You can see that I’ve also changed the colour of the grass to match some of the colours used in the building, so the level shouldn’t seem so disjointed any more. I’m currently working on the rocks around the cave entrances, and wondering if I should create a non-tiled pattern specifically for all of these instances, although all of this still needs a little work.

New Tiles Screenshots


In this screenshot, you can see my new rocky tiles and how they gradually dissipated into a simpler tile further down. While I’m much happier with the continuity of the pattern compared to before, the transition between the two types of tiles is still much too harsh at this points and should be a much smoother gradient. Being a natural pattern, there shouldn’t be such straight lines and obvious pattern repetition! As a result of my last post, the guys from MiniBoss (who have made Out There Somewhere) have confirmed with me that they infact use a slightly altered tile which is placed infrequently throughout the pattern to avoid overuse of the same tiles.


Here you can see how the same tiles can be applied to things like these floating platforms, although at the moment the edges need some serious refining to better match my original level design plans. The wooden platform has been added for a little variety in platform surface, and in this case I think merges quite well with the rest of the scenery. I’ve used a slightly rocky edge around the platform to make it look like it has been built into the mountain.


This screenshot shows an example of a house made from my new set of building tiles, and how this fits into a similar environment. The wood of the house seems a lot darker than the tiles from the previous building, so I’m considering making these a little lighter. This is relieved slightly by the lighting , which highlights parts of the building and dims out some of the background, so for now it’s probably fine. I’m still using the same light effect for all lights, so I will change the hanging lights soon to vary slightly from the light of the lanterns.
You can also see the blue-tile pattern I made in this screenshot, although it doesn’t blend in nicely like the brick tile did. Feedback I got from this screenshot was that it looked like an explorable area with a blue-tiled background, so I could use it this way in the future.


Loads of things to do this week! Next week’s target is to create a prototype ready enough for testing by other people, so this week is pretty much a preparatory phase to get as much in as possible before hand.

This morning, I applied some of the new tiles I’d made to the game in Game Maker. I created the ground by laying out a random assortment of the rocky/mountainy tiles, and this is how it looked…

My first observation of this technique is firstly that the tile repetition makes the whole scene look horribly boring, and secondly that the square tiles inevitably make the scene look very angular. I noticed that the repetition is not so obvious in places where there is a lot going on. When there is a lot of space and the occasional rock jutting out, the repetition of small details are a lot more emphasised. So my first objective is to limit the amount of plain tiles used throughout the pattern.

For a little insight into how other developers are tackling the problem, I went to the DevLog section of the TIGsource forums and clicked on the first link for a random example. I’m worried that if I keep going back to the same sources, my game will appear to be a mimicry of another game…
By pure coincidence, I landed on a pixel-art style game that uses a similar rocky tileset! The game is called Out There Somewhere, and has recently been finished.

Out There Somewhere


Here, there is only one rocky tile which is regularly repeated throughout. There is a slight variation in some of the edge tiles etc, but the pattern mainly consists of one tile. Towards the bottom of the image, after the tile has been repeated 3 or 4 times, the pattern gradually breaks apart and becomes a simpler pattern, but in an organised way unlike the random pattern I had tried to create. This really helps relieve what could potentially be an over-complicated, messy design, and somehow doesn’t look “blocky”, despite this game also using square tiles.

Out There Somwhere


To resolve my problem, firstly I felt that the rocky tiles should fit together more seamlessly in the first place. I’ve seen a technique used for create seamless surface textures for 3D models which I though would also be appropriate in this situation- I split the rocky tile into 4 and offset the design so I could work on the joining parts in the middle. The result is this, which has been changed very little, but looks a lot more seamless than before:


After feeling happy with this, I went on to create the “middle” tile to connect the rocky tile to the simple, block colour tile. I created one of these tiles for each side of the tile, so it can be used anywhere in the design. I thought about using a lighter colour for this, but preferred the darker colour as it attracts less attention!


I tweaked the slanted tiles slightly, although they didn’t need changing much to fit in with the altered tile design.

There are still a few tiles I need to make to completely eliminate the unnatural-looking square edges, most of these are edge tiles to avoid too many straight lines. I’m also going to create some edge tiles for grass and some random patches of grass growth to dot throughout large areas of the same pattern.

Also, looking back at my learning agreement I’ve noticed that I mentioned that some sound should be in place by now, which is something I haven’t really considered yet… Like the graphics, I’m OK with using placeholder sounds as this point, as I mainly want to ensure that I get good, working sound throughout this project.

Weekend Update #4


Finished it! Only it covers two pages of A4 paper and won’t fit in my scanner until I bring myself to un-tape it. Next week I’ll start designing level 2.

Other than that, this weekend has been slow. I watched the Japanese Ring 2 last night and still can’t help looking at building details, although this had more of an urban setting which doesn’t apply to my building style! A couple of observations were to do with the space in front of buildings, like porches and balconies. I’ve kinda designed some roofing for these sorts of things, but haven’t come up with a good way to represent them in 2D! I’m going to carry on watching Japanese films throughout this project, but hopefully the next Japanese film I watch won’t be so horrible…

Affordable Housing (and fast food)

I’ve redesigned a few of my existing building tiles to suit non-commercial private homes that don’t need to look quite as extravagant as a B&B or a cafe. I’ve been using this photo as a starting point as I like it humble approach to home-design:


It includes similar looking features to the tiles I already have, my main changes have been to wooden-plank tiles and windows. I drew up this compare and contrast 2D version to work out which tiles to reuse and which to recreate:

Another building I’ve thought up is a mobile noodle/sushi stand. It’s based around small noodle stands that are common to Japan. However in this case I’ve combined the concept of a small noodle bar with a temporary food stall, similar to ones you would find at festivals or special outdoor events. This is mainly so it takes up little space, as its placement in the game is more for decoration than anything else. It won’t be an building that can be entered like the Ryokan or any of the homes throughout the levels. Here’s the kind of thing that gave me the idea:


And a quick sketch up of a design idea. This also combines features from various photos of dumpling stands that I’ve scanned through on flickr:

Building & Environmental Tiles
So, I’ve made good progress with the new building tiles. I haven’t made that many, but it seems that a lot can be pulled over from the set I already have! I’ve combined these here with the old tiles, although I’m not sure how clear my intentions are for their use yet as I haven’t constructed anything from them yet. I’ll probably do this straight in the engine over the top of the old tiles.

I’ve also tried to work on some environmental tiles more, especially after finishing up the level sketch. The most important point about creating these tiles is to make sure they’re not boring, as these are going to be repeated A LOT throughout the level. I used color explorer again to get some good ground colours, based on a Japanese mountainous setting (obviously, Fuji was the first mountain to come to mind at this point…)

My rock colour has ended up being that greyish-purple on the bottom row. It doesn’t seem to clash with the current wood colours and pinky-reds, although I’m toying with the idea of having coloured grass which matches the colour scheme of the level. This may change when I combine all the elements together, I’m not sure if pink grass is a little too much… I’ll be working on this much more over the next week, so expect drastic changes all round!

Level Testing

Building Buildings
Today’s level testing began with constructing the Ryokan in Game Maker using the tiles I already have. For the first time, I connected a room with the inside and a room with the outside of the building through a “warp point” at the door. Using the “warp” function in the Grandma Engine transports the character to a another room at the same XY coordinates, so the door is at the same point in both rooms.

Lighting
Today I tried out the EasyLighting extension with my level for the first time. The system requires two colours- one ambient colour which masks the entire screen, and one light colour which is the colour generated by the light source.

The colours I used in my original text were the colours used in this tutorial, which resulted in a murky/swampy ambience!

Too murky


According to advice given in the tutorial, the ambient colour should be a darker colour and the light colour a contrasting bright colour, unless of course you want to create a light which is darker than your background for whatever reason… For this opening level of Hanami, I felt that a pink scheme would be appropriate. I started off by using hex code reference websites to look for bright shades of pink for the light colour, however weirdly when applied it came up with some weird results. My first attempt turned out these very blue lights:

Too blue


To get the right colours, all I could do was test hex codes until I found a good match.

Good light colour match


Ambient light colour too dark (and purple)


Subtle indoor lighting!

Placeholder Tiles
I made these quick tiles to act as placeholder for the rest of the level. They probably won’t make the final design, but they add a little variety to the design while it’s in its early stages! Unlike my “black-block” test level, this tileset contains sloping tiles and add gradients to the level.


Combining this with the building set makes the level design seem much clearer, especially where buildings and caves are concerned. The pink line down the middle is made of my flag tile and represents the waterfall!


This level is now completely playable as it is. For now I’m carrying on the visual design on paper by tracing the mock-up, while I’m working on creating some of the gameplay functions digitally! My first objective is to create a points system when flowers are collected. Here’s where my tracing is up to so far: