Hai, my name is Suzi and I study BA Digital Media Production at the Arts University College Bournemouth. I make pixels more interesting using colours and movement. My main aims in life are to create, play and be happy.
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.
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!
I’m still having problems capturing videos of gameplay, so until I work out how to sort this out/find an alternative to Hypercam, I’ve strung together some screenshot highlights of my game so far.
This week’s aim was to create a level which was playable from start to finish and included some of the functions that would be seen in the final game. The result is a playable place-holder graphic level with a basic placeholder HUD (“Heads Up Display”) containing level progression info. Below is a list of all the current features…
Incorporation of the EasyLighting system
So far I mainly have lights inside the first building, some of the lights can be seen in the image above. When the player moves into a light source, the light affects the brightness of the sprite’s colours. A comparison can be seen below, when the character moves into an unlit area.
Ladders
When the character comes into contact with a column of red lines such as this one, the custom variable “canc” is enabled which I’ve set up to allow for vertical movement. I’ve used some of the Grandma Engine’s custom variables such as “vspd” (vertical speed) and “S_JUMP_SPEED” (jump speed). The current climbing speed is half the value of the jump speed, which I’ve currently set to -5.25. This has actually resulted in climbing speed which is faster than the walking pace, but I’m keeping in for now for faster level testing!
if (place_meeting(x,y,obj_ladder)) {
vspd = 0;
canc = true;
if (keyboard_check( key_up ))
vspd = S_JUMP_SPEED /2;
if (keyboard_check( key_down ))
vspd = (-S_JUMP_SPEED) /2;
}
Press up to warp function
Previously, warping from room to room occurred on contact with the “warp” object (invisible in this screenshot!) In this instance, the warp object is placed in front of the door, so that when the character came into contact with the door, the character would be automatically transported outside the building. The X and Y coordinates for the door are the same in both rooms, so the character arrives in the new room in the same location.
Since incorporating this feature, I’ve adjusted the mechanism to only warp when the “up” key is pressed. This was quite simply achieved by adding the line:
if keyboard_check ( vk_up )
to the code!
Item Collection/Level Progression
I’ve dotted some of my sakura objects around the level for player collection. On collision with the character, the blossoms disappear as they did before to avoid the player picking up the same flower twice.
I’ve created a very basic HUD which tells the player how many flowers they’ve collected. Each time a blossom is collided with, the figure (starting at 0) goes up by one. This affects the global variable “gamescore”, controlled by a HUD object which always appears in the player’s view rather than on a fixed point in the level. The object contains draw commands which tell Game Maker to draw the figure “0” followed by a string of text saying “/30”. This is currently just a random figure as there aren’t even 30 collectable items in this level…
Player Hit Points
Underneath the level progression information is a figure representing player health. This needs the most work so far! I’ve currently set this figure to start at 5, and decrease by one every time a black blossom is collided with. These blossoms also disappear on contact, so you can only be hit by something once. The “enemy” objects probably won’t disappear in the final game, for now I have simply set it so that health cannot reach 0. I don’t currently know what will happen when this figure reaches 0! But it will probably re-locate the player to a designated re-spawn point.
As for the rest of the level, I’ haven’t really made any changes but I’m hoping to work on some new tiles soon. Tracing the level design by hand has given me some really good ideas for environmental tiles and objects. Hopefully I’ll get a video up and running very soon!
EDIT: My Devlog Video 1 is now online! And nearly works.
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:
New Design
Parts of the level design simply just needed re-thinking. The second cave (Cave 2, as I have named it) took up a lot less space than it could have done, so I drew out an outline and tried filled in the gaps by hand, thinking about the level from a visual perspective more than a play perspective. This did mean I had to make changes to the design, marked by scribbles and notes, but this way I got thinking more about the aesthetics of the level. It gets very dull using black squares!
I also started thinking about hazards whilst jotting down ideas, and have come up with three types of basic “enemy”.
1. Sits motionless on the ground
2. Swings from a ledge
3. Moves along the ground/through the air.
Details to follow!
Test-Based Adjustments
Where the level only needed adjusting rather than redesigning, it was easier to make changes in Game Maker’s room editor, where blocks could easily be moved and tested and quick succession! I used this technique at the end of the level to test jump distances and spread platforms apart:
Game Maker Test
Adjustments added to Level Mockup
New Level Design
The overall size of the level hasn’t changed, but I’ve managed to use more of the available space to create a more playable level:
What I can do now is add the structure to a Game Maker project to create a playable level made of placeholder objects (in a similar way to before!) Only this time, I intend to use all the assets I have currently created, including tiles, characters and lights. More graphics can be added as I make them, so by the end of the week I’ll have something visually more finalised as well as in terms of gameplay. Today I started to block in the ryokan tiles and create platforms around them, making sure that all dimensions were perfect! I’ll be adding the character and some lighting tomorrow.
My objective for this week is to have a playable prototype level ready. While this will not be an accurate representation of the final game in any way, it will:
include all graphical features currently made–sprites and tiles
show an accurate level layout, mainly using placeholder graphics
have accurate game physics (mainly character physics)
include a points system when items are collected
So far today I’ve carried on working on my initial mock-up design for the first level of Hanami. Today I’ve been really concentrating on background and decorative parts of the level, finishing off the look of the level as a whole. It gets confusing in places because I mainly used one colour, so when I get the time I’m going to use varying shades of grey to determine depth and which items you can walk in front of.
Key:
Dark Grey: Buildings
Light Grey: Inside Caves
Green: People
Pink: Sakura Blossoms
Red(ish): Red Blossoms
Blue: Water
Half-Blocks: Jump-through platforms (mainly ladders!)
If you look hard enough you can almost see how I’ve based this around the original Kanji, although admittedly it becomes very obscured…
桃色 Pink ~ Momoiro
To test out how the level plays, I reconstructed the Photoshop mock-up in Game Maker using an arrangement of solid block objects. I didn’t worry about wasting my time with large filled in areas, all I needed was a frame for the character to play on.
Apologies for the pink. I was just trying to stay topical.
For the first time I also applied my animated character sprite to the game! I worked out animation speed settings in the character preview, but keep changing my mind as she occasionally looks as though she is walking backwards in game. The pink background was actually an attempt to separate her leg colour from the background colour and show leg movement more obviously.
It’s probably important to point out a slight oversight at this point. The level design is snapped to a 16×16 grid, so some gaps between solid blocks are only 16 pixels high. When I added an extra pixel to my character height, I accidentally designed a flawed character who couldn’t fit into these spaces. Luckily with Game Maker, not all of the character has to be solid. I’ve set the character’s collision mask to allow for a non-solid edge which will not collide with solid objects!
Through a process of trial and error, I’ve settled for these settings so far. I’ve tried to keep movement slow enough to be realistic, and kept jump distances low to make obstacles less easy to avoid. As the game has only environmental obstacles, if they were too easily avoided then the game would have no element of challenge!
S_GRAVITY: 0.3 //a fairly standard gravity setting
S_RUN_ACCEL: 0.3 //a fairly slow acceleration speed
S_RUN_FRIC: 0.6 //slightly high level of friction.
S_AIR_ACCEL: 0.1 //a very low setting, attempting to avoid too much air control
S_AIR_FRIC: 5 //a very high setting, attempting to avoid too much air control
S_JUMP_SPEED: -5.5 // just high enough to reach a platform triple the height of the character
S_DJUMP_SPEED: (N/A really as I am disabling double jump)
S_MAX_H: 1.5 //a low setting, but perfect for walking pace
S_MAX_V: 4 //a decent falling speed!
S_SLOPE_SLOW (not yet tested as I don’t have any slopes!)
Unfortunately (as I am currently using Hypercam…) I can’t guarantee that the speed of this video is anything like the speed of gameplay. You will just have to trust me that the speed is not an issue!
After playing through the level a little, I realised that a lot of the platforms are too close together to act as a challenging level. I will probably add fall damage when I give the character a health bar, so calculating jump distances is vital to play. At the moment, it’s almost impossible to fall in some places, and in other it’s almost impossible to move. I will try to resolve this by spreading the level out. This video actually plays from the beginning to the end of the level, but obviously in order to collect items, the player must play through the rest of the level beneath. I’m not yet sure whether I want to stretch out the width and length of the level too, to increase play time. This may simply come with spreading out platforms.
Just as well. I still haven’t managed to pick up any tracing paper
Edit: I worked out that the illusion of “backwards moving legs” is caused by the similarity in foot and block colour. The problem is resolved mainly by changing the colour of the platforms.
Some More Character Designssubject to change and/or disposal
These characters are complete rip-offs of a few of the characters from 51 Japanese Characters, so are subject to name and feature changes in the future to avoid being a total copy-cat. While most of the inhabitants of the places in Hanami are effected by the so-called Hanami Crisis, I’ve picked out a few personality types who could have avoided the crisis in various ways. These characters will play very minor roles in the game, they will appear at most once per level, and simply hand over a blossom they have found, or something similar. Everyone’s doing their bit to help! Left Character: avoided the crisis because he is a monk. Protected by spiritual powers etc. Middle Character: avoided the crisis because he was stuck inside a Panda costume. Right Character: avoided the crisis because he fell asleep under a table in a cafe. Details on the “crisis” are still a little vague, so I don’t know how this would have helped him, but it did. Kirainet, the predecessor to A Geek In Japan, has dedicated plenty of its Blog-space to photos of people sleeping everywhere and everywhere in Japan, it seems perfectly acceptable to just fall asleep where ever you’re standing.
I’ll be converting these characters to pixel form soon!
Character Animations
I’ve been plodding along with walking animations for the last week, but found I was taking leaps and bounds this weekend! I scanned through as many TIGsource Forum threads as I could a couple of evenings ago to find good examples of walking cycles that were a similar size and shape to my character sprites. Ultimately, I could only find things vaguely similar enough to help, but while this didn’t provide a pure reference, I was glad to see that I was on to something original. My current cycle too has a few frames which are similar to others I found, but I had to tween using my own initiative for most of the process. Here is my current Hana sprite:
I gave it a go applying this same animation to Za-chan, although it wasn’t always clear how to go because she wears a long dress and you can’t see most of her legs! I will probably tweak this if I have to use it in the game. At the moment, it’s more of a practice in applying one animation to varying sprites:
For the rest of my character animations, I will hopefully be roping in some volunteers to perform for me so that I have photo-references of people doing various actions. Finding examples of various walk-cycles wasn’t necessarily a difficult task, but unfortunately I’m going to need more than that…
Level Design
I’m currently still set on using the Kanji basis for my level design. Over the weekend I just had to grab a pen and piece of paper and get down all my thoughts on the level, what it should consist of and how it should look. It’s slightly more decipherable than previous attempts, although some of the designs cross-over quite confusingly! I tried to draw out the entire level in the bottom half of the page:
According to Peter McClory’s level design technique, the next step would be to draw this out to scale on squared paper. However, I decided to use Photoshop instead, so that the level was easier to edit! Once it’s done I’ll print and trace it as if it were drawn on squared paper. The design currently lacks detail and is not finished, but it’s given my a huge insight into the scaling of the level, which in places in completely different to how I imagined it. Here is a rough idea of the level so far:
My Plan for the rest of the week now is definitely to get this mocked up and playable in Game Maker, possibly before tracing in the details. I still haven’t settled for any particular character physics within the Grandma Engine, so I will have to make sure that the character feels natural to handle whilst working their way around this specific level. Once the layout is finalised, I’ll fill in some detail, but this is a secondary objective to getting a playable level right now.
Some thoughts on sound…
I started to play around with a piece of music creation software called PXTone. It’s a development from Daisuke Amaya, creator of Cave Story, and it sounds as though he uses this himself to make the music for his games. It’s default instruments are all very synthy, but you can combine classic chip-tune instruments with midi-sounding instruments to create something generally retro sounding, yet something original. There are a vast amount of starting instruments, which makes this program easier to get started with than other chiptune software I’ve previously used where you must create your own instruments :S So far I’ve just had a play around to see if it would be appropriate for this project, although I’m still not sure what my music source will be yet. Original music would be a huge bonus, so this is definitely on the list.
