Staying “Retro”

Things have changed.
The way we buy and play games has evolved and old aspects of gaming have been replaced by their modern equivalents. With the recent retro resurgence, things have changed again. Incorporating “retro” into games doesn’t mean that games are purchased from shops on cartridges as they once were, it’s more about implying retro through audio/visual aspects.

One of my objectives for this project is to recreate other aspects of “retro” as well as the graphical style I have chosen to use. I’ve mentioned this in my learning agreement but haven’t talked about how I’m going to do this much yet, so firstly here’s a little look into why…

What I loved about old games…
…back when they were new games, of course!

1. Cover Art
The cover art of a game was often a selling point for me. Games were placed cover forward in shops and if a cover caught my eye, I would read the synopsis on the back of the case. I was always a fan of Japanese RPGs, so any anime character on a game box would usually get me interested… So, take Breath of Fire IV for Playstation as an example. This game had used a very striking anime art style on the cover to represent the game.

This image told the viewer a lot about what to expect from the game, even if they hadn’t played any of the previous Breath of Fire instalments (I hadn’t at the time!). But obviously, this said nothing about the actual in-game graphics, except that the characters were based on a similar anime style. The point of the “art” on the box was to sell the game in a way that the actual graphics couldn’t.

With the help of box art, I think developers could give a better impression of how they saw the game.

2. Game Manuals
I confess, I LOVE game manuals. When I was younger, I would read the entire manual before playing most games, simply because I loved getting to know the game world and back-story in a way that was often summarised in the manual. This seemed to shorten the length of time between Saturday shopping with my parents and finally getting home and actually playing the game!

As well as game info and instructions, the manual was normally very well designed and stylised, and also included bits of concept art. The Final Fantasy series was particularly good at showcasing its art, worlds and characters in the manual.

I especially loved reading pointless information about each character, including birthdays (which I remember marking on my calendar at one point :S), age and height. This sort of stuff was never mentioned in the game- probably because if was completely irrelevant… It just seemed like a bonus chunk of knowledge. Obviously, the main point of the manual was to relay instructions on how to play the game, which was obviously very useful…

3. The Game Disk
Or whatever storage your game happened to be on. I started gaming on PC and moved to console gaming via Playstation and didn’t actually acquire my SNES until after the PS2 was out! So to me, games generally came on CDs or the occasional floppy. In any case, the storage device containing the game was another piece of artwork…generally. And even if it wasn’t, the hard copy of the game to me was a testament to how much pride I had in owning a game. If I liked a game enough to part with my hard-earned pocket-money for it, it was worth keeping in good condition. This applied to the case and manual too. If I loved a game, I would keep it pristine. It was like a pet or a younger sibling, I felt a responsibility to make sure it was always comfortable.

What’s changed since then…

1. Cover Art
Obviously, games still have cover art. They still try to catch customers’ attention in shop displays etc. However, game graphics have improved immensely since I bought Breath of Fire IV. Not only game graphics, but the ability to create high quality 3D models in general has resulted in CG being used more and more in cover art on games. The point of the cover seems to emphasise the technological achievement of the game, rather than represent it through a piece of “art”. This is the game’s selling point, the game’s attention grabber.

Take Uncharted 3 as an example, which I bought last year. The cover art consists of a CG representation of a scene from the game. This scene was used as the main promotional image for the game as it separated this instalment from previous Uncharted titles, and emphasised its differences as well as a few similarities. It’s a good showcase of the in-game graphics and shows the potential buyer a little of what to expect from the game, but it’s not art. I rarely get excited because I may have found the next greatest undiscovered Japanese RPG when I see box art.

2. Game Manuals
It’s a common belief that the instruction manual has been replaced by lengthy tutorial levels in game. The player learns by doing, rather than reading through pages and pages and later trying to relate what they’ve learned to the game, so I guess this is understandable. People don’t expect to have to read instructions for games any more, and as a result, the instruction manual for most games has shrunk and decreased. One franchise notorious for its painstaking tutorial levels is the Call of Duty series. Here’s a section of a page of the CoD: Black Ops instruction manual (which is the most recent instalment that I’ve actually played…)

I haven’t cut anything off- the rest of the page is blank. There are no images, no extra bits of information… Nothing but instructions. It’s straight and to the point, but so, so very boring.

3. The Game Disk
Obviously, game distribution has been infinitely easier for developers as digital copies of games can be purchased via the internet. I’m not complaining about this at all, as this means that gamers have access to hundreds of game whenever they want them. If I am to be distributing my game, it will be digitally, as its convenient for me and whoever decides to download it. But this method of distributing and purchasing games means that none of the physical aspects mentioned above apply any more. At least this eliminates the possibility of poor design!

What can be done to stay true

1. Paper made of PDF…
When I looked into recent awesome game Out There Somewhere which keeps cropping up in my blog posts, I noticed that a lot of effort was put into portraying the game through digital artwork. This can be seen throughout the game’s Devlog and on the MiniBoss website.

Not only does the game contain a lot of assets based on digital concept art, but the same style has been used to create a retro cover for the game. The game will be distributed digitally only (as far as I’m aware), and so the cover is not necessary but is a nice finishing touch. The game uses a pixel-art style, and the cover gives the player a good impression of what is represented by the tiny pixel sprites. Little homages to retro have been dotted around, like the cover’s similarity to the box art for old Sega Master System games…

The pre-order version of the game also comes with a PDF hint manual, which to me sounds very intriguing!

2. Paper made of…paper
My old favourite Superbrothers: Sword & Sworcery EP has recently re-marketed its soundtrack (and in a way, the game itself) by releasing a range of goodies for buyers. The soundtrack can be purchased digitally through Bandcamp, but buyers now have the option to also purchase a vinyl and cassette version of OST, in keeping with retro formats.

This to me is the ultimate revival of everything I loved about old games. It includes obsolete formats which need to be taken good care of and beautifully designed cover art and inlays, as well as a bonus poster designed by Pendleton Ward! Although the game itself has no cover art, manual or hard copy as it downloaded only, this is the perfect accompaniment for fans of the game and fans of “retro”. It’s something you can hold in your hand and love- something which just can’t be said about games any more.

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!

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.

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:

Hanami Pecha Kucha

A Game Called Hanami

Some bits from the Game Design Documents and designs so far.

Changes to level design

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.

“Momoiru” Mood Board

A mood board of all things pink and Japanese! A little inspiration for creating a pink level….

Objective: Play

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.