Wednesday, 26 May 2010

26.05.10: Module Evaluation

Module evaluation

  1. 1 Problem solving & methods of working

I have tried to develop skills and methods I had used before in this project, as well as attempt new things such as entirely new programs, more advanced Flash code and challenging drawings.

3D

I began experimentation in the first weeks of the summer before year 3, working in the Unreal Tournament 2004 editor as I had used it for a project in semester 3 and knew my way around quite well. I selected an interesting location for a central base for the player character in the game, based on the real life structure of Stokesay Castle in Shropshire. I felt it to be a really unique fortified manor, which would look great and function perfectly within the game, especially as it even featured in the English Civil War. The range of buildings within the single castle include a wattle and daub gatehouse, a large great hall with intricately angled sloping roofs and a sturdy south tower, similar to the classic castle keep with battlements and arrow slits. Working form photographs taken during visits to the location and a scale card model and architectural elevations I had made from them, I designed the perimeter and preliminary shapes to the main buildings. When I began work on creating a sky, background and lighting I came up against a number of frustrating issues and so decided to experiment with the far more recent Unreal Tournament 3 engine, from 2007. My previous work in the 2004 editor had been in interior levels, whereas here I would need to be outside. Due to the subtractive nature of the engine where you create a box to carve out your environment from, I found I constantly needed to enlarge the environment and adding to the space around the main building became very messy. The additive approach available in UT3 made so much more sense to me and so I thought at such an early stage in the project, it wouldn’t hurt to experiment.

Following a few days of teething problems, such as the slightly altered interface and controls of the new editor, I decided to convert to UT3. In a couple of days I had managed to overtake the previous model, and was excited by the potential of the mass of updated textures and lighting. While it is simply a static mesh you can place within the world, having a sky as a background helped hugely with motivation as the environment I was designing felt more advanced. The additive nature of the level design made possible by the new engine suited me far better than subtractive, which always struck me as quite a hindrance. Having to carve out a shape within which to then add seemed quite dated and inefficient, while this way simply allowed me to start building and not create limits for me in the future.

With the main shapes in place, I began to cut out the more detailed angles, shown in the links below, such as the mass of pitched roofs and windows on the main great hall and the battlements of the south tower. I found that I could accomplish a lot more of the build in a day than I had expected and while I was working in BSP rather than separate 3D programs, I felt I could still make quite detailed and accurate structures.

http://nma-fmp.blogspot.com/2009/10/06062009.html

http://nma-fmp.blogspot.com/2009/10/09062009.html

http://nma-fmp.blogspot.com/2009/10/10062009.html

A major feat with the environment was the rafters within the great hall shown here:

http://nma-fmp.blogspot.com/2009/10/12062009.html

Basing them on Google images of St Peters Church, Wootton Wowen, I created numerous sloping beams with supports spanning the width of the room horizontally. I have learned through previous projects, how important a role research can play in creating stronger work. While I have had a recurring stance since the first year in making all of my work from scratch rather than simply plagiarising content and concepts, I believe that any design can benefit from inspiration through research. As such, the locations have centred on actual environments as I think the details which make them more believable might be overlooked if I were to just make stuff up off the top of my head.

I added further detail to the map with wooden cladding on the gatehouse and further interiors and stairs as well as a windmill based on one in my village.

Just before Christmas in a tutorial, I was introduced to Google SketchUp. I experimented briefly with it and found it to be incredible intuitive and the exact sort of 3D work I wanted to be creating. While I had planned at the time to make my 3D content less prominent in the project, I found it quite a quick process to create more detailed environments than in the Unreal editors. Again, I began the Stokesay Castle map from scratch and within a week had a vastly improved model. I now came upon the challenge of which direction to take the visual style of the project in. The game engines allowed for quite realistic environments and for me to develop further my abilities in such editors, while the early cartoon styles I had used in other aspects of the project had a more unique charm. After a lot of deliberation I chose to continue with SketchUp, as it would help create a recurring visual theme across the project and still allow me to work in 3D; being my motivation with working in Unreal to start with, not primarily to design within an editor. I did experiment considerably with merging the two; importing SketchUp models into Unreal and using 3D Studio Max to build in, but I felt the native style and simple video animating capabilities of SketchUp would best suit my original intention of creating a rounded pitch for a game.

As I found the stock textures for SketchUp a little basic, I chose to design my own from scratch; drawing, then scanning and editing the images before importing into the map. One key issue with this was creating designs that would repeat successfully on a surface, such as brick designs lining up, which took many attempts to get right. The links below show my development of the SketchUp map.

http://nma-fmp.blogspot.com/2010/01/180110-back-in-ketchup.html

http://nma-fmp.blogspot.com/2009/12/261209-festive-progress.html

http://nma-fmp.blogspot.com/2010/03/150310-one-tree-hill-two-tree-hill.html

http://nma-fmp.blogspot.com/2010/03/130310-well-fielded-that-man.html

My final challenge with 3D was finding the best way to incorporate in into the Flash menus. My solution was to export videos of animations made in SketchUp then import the raw avi file into Flash. The process hilariously only worked for my version of Flash in Windows Vista and not Windows 7; a glitch that cost me many hours in unnecessary troubleshooting. The problem with the video exporting and importing was the large amounts of time it took to get anything final. 3 hours to export a minute of video and finding a tree floating in mid air so that I had to do the whole thing again was a particular highlight! It is also difficult to get a perfectly accurate preview of the transitions of the videos in SketchUp, so that a few had to be redone to be smoothened out. However, I really feel the process worked out for the best as I was able to include 3 decent videos in the project which help avoid the Flash files looking too static and 2D.

Storyline

Early in the project I started collecting extensive research into the events of the English Civil War, from informative books and DVDs, novels and dramas and even meeting with local historians where I was able to discuss my developing take on the timeline and found out excellent anecdotes to include in the story. This was the main work I completed over the course of the summer, with over a month spent researching, developing and refining the recorded events of the era into a usable structure for the game storyline and missions. I felt the storyline and missions are the core of a game and even just written down in the design document, could give the reader a real flavour for how the game would feel to play. The challenge was condensing thousands of words of hand written notes and web links into a functional game story.

The result was a sequence of 32 key missions which would develop the story of the war, building suitably from small encounters to large battles and sieges. I felt the developing nature to the events would work perfectly within the free-roaming genre of the game and that the quantity was sufficient and similar to other titles. I built in quite an advanced element of choice to the game; so that the user will be able to play as either of the two contrasting factions for any mission. They could therefore choose to ally with the wealthy and dictatorial Royalists, or rebelling and more middle to working class Parliamentarians rather than be told who they are and what they should be fighting for. The choice would exist to play through the storyline in any sequence of the two factions, being able to decide whether or not they agreed with the morality or plan of action of each side at any point. Playing an encounter from either side would also have different consequences and generate varying equipment, encouraging the user to replay the game many times over as each run would be unique. I compiled the missions into a detailed table; with further descriptions which can be found in the Single Player Game section of the document.

Logo

Following the wide background research for the story, I started to generate imagery from September to give the game an identity and logo. I created a preliminary design from my own photos and developed it to be appealing and fit the theme of the game. I chose an inverted sword for the centre of the design as the crucifix shape reflects the religious motivations for the Civil War while the violent nature of the object confers the violence of the era. A mixture of simple hilt and an ornate blade inlayed with Christian designs also represents the conflict between High and Low Church, which was a key difference of belief at the heart of the war. I then added a brace of crossed pistols which I feel make a powerful image similar to a coat of arms and are specifically relevant as they show the most advanced gun technology the player will acquire. I experimented with backgrounds and adding smoke but settled for the logo to fade into solid black as it looked most effective and set the tone of the game well. The images and design processes are described in the links below.

http://nma-fmp.blogspot.com/2009/10/240809.html

http://nma-fmp.blogspot.com/2009/10/250809.html

I decided to develop the identity of the game slightly by adding text to the logo. From my research when working on the symbol, I saw that the majority of games use text as a defining identity for the game rather than a symbol. Half-Life, Mercenaries 2 and the Unreal series have an actual symbol as well as text, but the more recognisable and iconic game identities can be simple text such as with Grand Theft Auto and Call of Duty.

As such I decided to locate a suitable font which would combine handwriting and early typefaces of the age. I considered having words scratched into wood or metal or using type in dripping blood, but felt a period typeface would have more specific relevance to the game. I experimented drawing by hand a printed typeface, as I couldn’t find a fitting default one but when looking through civil war websites to see what fonts they might have used, I found Monotype Corsiva was very popular. In the end after extensive experimentation with Mt Corsiva in Photoshop, I developed the messy title for the game. I scratched away at the letters in places to make them look worn and antique and separated each one individually; resizing, warping and changing their spacing to make them look like the irregular style of early printing. The groundbreaking use of propaganda at this time meant that printing is a key feature of the war and so a fitting concept for the main logo. I then added a slight smoke effect to it, helping the pure-white areas of the letters appear almost glowing.

Loading Screens

To support the interface work and to develop the visual nature of the game world, I gathered over 500 photos of environments around England, Scotland and Wales, throughout the summer. These ranged from old castles and ruins or bridges, to simply natural environments that typify the UK. From the large stock, I refined, edited and experimented with around 80 images trying to find the best way to present them. In the end I decided to create a slideshow in Flash which the user could cycle through, using the previous logo as a loading bar to show how the images could function as backgrounds for screens while game content loaded. I felt an effective way to complete this content would be to add text that could also cycle, which would inform the player about features of the game through hints. Many games successfully employ this, as it is a great way to keep the user interested while the game loads and could also be a way for me to communicate the many features the game might theoretically include. As discussed later, the loading screen was ultimately replaced by just a single background image, while the location photographs linked below provided me with an excellent source of original imagery to work with, which crop up throughout the project.

http://nma-fmp.blogspot.com/2009/10/280809-010909.html

Concept Art

http://nma-fmp.blogspot.com/2009/11/241009-061109.html

http://nma-fmp.blogspot.com/2009/11/141109.html

As shown above, to support the concepts I had been generating with my research I created a range of concept art including sculpture and drawings in pencil, pen and ink; both stylized and as a more informative line drawing. While doing these, it really hit me how much I love to draw and to illustrate my ideas and that a more hands-on approach to design is where my passion and strengths lie. To make the most of this I brainstormed a way to illustrate the extensive research I had done by this time; both on the story and for the wide range of player equipment. The work done researching weapons, items and vehicles presented me with nearly 150 dramatically varying objects, which I felt were largely unique to the world of video games; especially within the free-roam genre. My decision was to illustrate the unusual content in the style of the etched and woodcut pamphlets of the age. These were some of the earliest forms of advertising, propaganda and newspapers and were a key feature in the world at the time as well as an excellent window into the past. I therefore developed a range of these in varied styles to create a small portfolio of entertaining, quirky, original but highly functional designs. I also located some high quality calligrapher’s parchment and when combined with weathering in Photoshop to give the effect of poor printing, I think you get quite an authentic effect. The pamphlets which would also feature in-game are discussed further in the Feature Set section of the document, while the weaponry with upgrades is discussed in detail in the Weapons and Equipment section. An example of the pamphlets can be found via the link below.

http://nma-fmp.blogspot.com/2010/04/pedrobear.html

Map

http://nma-fmp.blogspot.com/search/label/Map

As shown above, I began gathering research and drawing out maps after collecting from the storyline the key locations required in the game. I chose to base it on Oxfordshire as I think it has an interesting shape and features strongly in the story. I started by drawing out the county, and then adapted it roughly to include more varied geography, such as a coastline and hills. I planned a tile system, where the user could zoom in and view individual tiles of the map full-screen. This would also be easier for me to make on A4 paper and be standard widescreen-ratio friendly.

I developed the maps, calculating scales and referring to the sizes of other free roam experiences. I settled on a 50-60km2 map centring on the city of Oxford for the main location, breaking the map up effectively, with each A4 tile measuring 1.5km x 2km.

I added 2 hill ridges that I had visited in Shropshire which have unusual and interesting features, working from Ordinance Survey and Google maps. As the project developed, I decided to lose the coastline to add realism and kept many of the main features of the original Oxfordshire countryside. The coast would instead be one of 5 smaller maps, accessible when the player moves to the corresponding map edge. These are Scotland (north), London (east), York (west), the south coast (south) and the Isle of Wight (south from the south coast map).

I built up a quantity of imagery for the map to have a rough sketch for each of the 20 tiles and four of them coloured in photoshop. I experimented with new techniques to me with creating a hand drawn and worn effect. I also developed several images for the legend of the map such as bridges and forts, making them appropriate and to create unity across all of the tiles.

As I worked on the tiles, I made the decision that drawing the entirety of the map from scratch would be unnecessary; not gaining me more marks, requiring a massive amount of time and still looking quite crude. I therefore started working in Photoshop with several maps I sourced of Oxfordshire from throughout the history of Ordnance Survey. I gathered my own photos of reproduction maps from the actual age of the game, which I then heavily edited to include other genuine imagery and imported at high resolution into Flash; layering an interface and user controls.

With the finished Flash product, you can view the map at 4 different levels of magnification and layer on 2 legend items: Parishes and Rivers. I experimented significantly with making the map draggable and to use the mouse wheel to zoom but decided to use those functions for other parts of the project, while I feel the style I have settled upon innovates within the free-roam genre. Here the user selects a magnifying glass of differing power and is able to view any part of the map. I haven’t seen this done before in a game and should be fun and different for the user, be functional yet slightly inhibiting to promote realism, while entirely new and challenging for me in Flash.

The two legend elements function using variables so that they remain on or off even when the user changes scale. The area is divided into 'parishes', many of which follow the actual historical parish boundaries and at 44, are a similar quantity to GTA San Andreas and Saints Row 2 who use a similar territories mechanic. They also show information when you roll over them; the faction ownership and revenue, in a small popup box which disappears when none are selected to keep the interface tidy.

Intro and Notices

As an extension of the earlier drawing and Flash work, I developed 2 menu systems for the introductory sequence and range of pamphlets I had made by this time. The intro sequence was structured along with my story to include the notorious Guy Fawkes gunpowder plot as a way to include some popular themes and to set the mood of the game. The 8 pamphlet designs work similarly to the mock tourist guides released with the GTA games as the manual; giving the player useful information in a fun and relevantly themed format. I experimented with how to present these images, deciding to make them 8 separate pages in a Flash file, with a simple interface to navigate through. Clicking on an image would then enlarge it whereby the user could drag it around the screen to view the parts they wanted. I tried out a variety of code to develop easing, so that the drag and drop didn’t feel too static.

Discussed in the 2 links below, I created a file which built on these themes to display the 15-20 general pamphlets I had developed for the game. Again, after a lot of experimentation I created a dragging scroll bar to move the pamphlets up and down, with a gentle easing. I then created a backdrop which would blur in time with the dragging to solve the problem of the foreground moving against a static background.

http://nma-fmp.blogspot.com/2010/04/170410-flashing-with-ease.html

http://nma-fmp.blogspot.com/2010/04/200410-oasis-or-blur.html

Flash Games

To add a fun interactive element to the project, I decided to illustrate two side missions which show the variety of content within the game world; being a sailing and carrier pigeon game.

With the sailing mini-game, I experimented with advanced code to make the canon fire from the centre of the screen from a fixed, pivoting ship. However, after I felt the controls were becoming a little complicated, I settled upon using buttons to press and trigger animations. For this I needed a mixture of my own animated visuals and a large amount of code, including numerous variables. Starting by getting the functioning placeholders completed, I added visuals for the sea, and each angle of the ship so that you change direction and the boat changes with you. I animated the sea to be gently moving and added moving froth to make each image of the boat feel more mobile as well as plumes of smoke for the refined cannon, with some visuals shown below.

http://nma-fmp.blogspot.com/2009/10/280709.html

To challenge myself and improve my skills, I made the decision to develop my programming knowledge. So far I have learnt from online tutorials and practicing with the code, to be able to load everything dynamically from the library, leaving the stage entirely empty. I have found the basic controls to be able to manipulate position, scale and alpha of objects which should make dynamic editing really easy.
I have also developed the Tween class of code which has dropped the many hundreds of frames I previously had in movie clips and making them easier to update.

As the project developed, I felt the boat game would be an unbalanced amount of work to complete and was slightly outside the theme of the core gameplay. As such I decided to leave that game and work on the carrier pigeon concept as well as a target shooter. My other reason for this decision was that the detailed SketchUp environment could be exploited to make extensive videos to form the backdrop for these games. The ‘on-rails’ system of having the player control and interact with effectively static 2D objects on the screen while the background moves, gives the illusion of full 3D interactivity and could allow me to make the games relatively quickly. The carrier pigeon was chosen as it would feature as a communication mechanic in the game, as discussed in the design document, while the shooter would just give a feel for the style and content of the game.

I created a flying animation for the pigeon, which you can move to the edges of the screen. I then drew several birds of prey to act as enemies who could swoop down and attack the protagonist at intervals throughout the level. To create a motivation and objective within the game, I added gently floating feathers for the player to catch in order to build up as points towards nest improvement levels in which they could upgrade their bird to a more potent species. Working with all the aspects of play in mind from previous projects, I created what I feel is an exciting and fast paced level to fly through, with spaced attacks which become more frequent as the level progresses. You go on an exciting route under bridges, into woods and through a castle tower and as you progress, the rate at which feathers appear increases. The victory conditions occur when you arrive at the destination of you message, whereby a screen appears with your score.

The target shooter follows similar concepts, using an on-rails system such as with Link’s Crossbow Training on the Wii. Here, the video moves around 5 locations within Stokesay Castle and pauses at each point for the player too shoot at targets. I created 3 different pumpkins to act as simple harmless objects, which explode in a shower of vegetable when pressed. This also triggers an elaborate pistol animation which includes recoil and 2 plumes of smoke by the barrel and trigger mechanism. To make the stages most fun, I have limited most them to 15 seconds so the player won’t get bored of the repetitive gameplay and added hidden bombs in some pumpkins which you can try to diffuse before they explode by shooting off the fuse. I think these games offer a variety of gameplay and add to the project by varying the interactivity.

These 2 games are the only points in the project which have sounds as I felt websites are generally better without noise, as a user may already have music playing or it might distract from the content. However, as they are games I felt they were lacking without any sounds and so I added music to each one and appropriate sound effects to the most necessary locations.

Shop and Gallery

The last elements of the final piece were created as a way to showcase images created from research. I also set up my own scratch-built Flash menu system in the shape of a simple carousel, with smooth, eased transitions. The user can cycle through 10 items or in the case of the gallery 3 different sets of 10, and then click on any to enlarge. For the shop I also added a blacksmith character with simple animations to make him look alive such as blinking. You can interact with him to find out about the shop or rob him; showing the options you might have in the game.

  1. 2 How the product works

As the project developed, I began to think of the best ways to display the work. As with the dissertation, I have designed with the audience as a priority so that anybody could easily navigate and understand my work; whether from a games design or multimedia background or not. I therefore ended up condensing the several components of the final piece into Flash menus, with the idea of making it accessible as a website and highly user-friendly.

I planned from mid February to create a main hub menu to act as the homepage for the site/project, from where the user could navigate easily to the 7 other pieces of content. I structured it using a system I devised for the client brief, whereby the hub will open new tabs in the users’ web browsers containing the selected content. Automatically changing to this tab, the user is welcomed by a small and immediately loading box telling them about the selected content with a clear button to return to the menu. Selecting this button closes the tab, taking you straight back to the main menu. Here, the menu has changed to a blank page with a button to take you back to the main screen, to move off the video of the game-world in the background. This is to optimise the users’ computer performance so that when navigating away, the main menu tab isn’t using any CPU or ram at all. I structured the menus in this way so that the user would never be refreshing screens or reloading pages in the same tab as I feel this can look ugly and break up or stagger the users’ experience.

I also invested a large amount of time developing the universal preloader for each piece of content as the files would all be quite large due to the video and imagery. I felt that rather than reduce the quality of the content, as it is a games design project and not web design, I would give the user something to look at while they wait. Discussed on my blog in further detail via the links below, I ended up with a detailed image and several animated elements including; the percentage of the file which has loaded, a revolving gun, smoke from pistols on the logo which fades in as the file loads and changing game hints. I thought this hints element would be a great way to mimic the loading screens of games as well as give the user a simple and rapid insight into the atmosphere and aspects of the game world. I also developed code to randomise how the 20-30 hints would cycle so that they shouldn’t become repetitive.

http://nma-fmp.blogspot.com/2010/04/260410-brief-moment.html

http://nma-fmp.blogspot.com/2010/04/260410-dropping-hints.html

Throughout the content, there are recurring help boxes with simple instructions on how to use the products. I felt this content could fit discretely into the interface while making the menus much more user friendly. There is also an ‘about’ button and screen with each piece, showing details about how I designed it and what you can do, as a bit of extra info for interested users. The recurring interface has also been a key consideration, so that the modular final piece feels like one menu. The style has been refined to be smoother and more aesthetic, such as using small cards with info and icons for many of the buttons. These buttons have altering shadows cast when up, rolled-over and pressed, so that the user has a high level of feedback.

  1. 3 Testing and feedback

Meeting with project tutor James Field and visual design tutor Gareth Sleightholme in tutorials throughout the year helped with refining concepts and designs. It’s really easy to get carried away with an idea and lose an objective viewpoint and so these tutorials offered a vital fresh perspective. Gareth provided excellent help with new drawing and Photoshop techniques and I really feel like my abilities in both have visibly improved throughout the project. He also introduced me to Google SketchUp, which I ended up focussing my 3D work in and led me to alter the entire visual style of the game. James has helped in the tutorials with refining my concepts into stronger ideas such as with the menu interface and thinking about what impacts altering the visual style might have upon the audience and market appeal.

I also met with a historian and expert on the civil war to discuss my storyline and received really useful feedback. I also picked up a few unusual anecdotes about the war which I hadn’t found in books or online, which added to the game story.

As we have worked together online in past projects as a group, the games design students on the course frequently shared ideas and designs as they developed, to get opinions and feedback. This meant that I could test each part of the project on people to get personal feedback on how it functioned for a user as well as design considerations and reference back to the brief.

  1. 4 Evaluation & appraisal

4.1 Self appraisal

When compared to what I initially intended to create in my proposal, the final pieces have varied, while slightly more content has been generated. Though the game introduction was initially going to comprise storyboards, I think the final piece fits in much better with several of the recurring themes of the work. The research into the intro has made it much more developed than I had planned and I think it sets the start of the game up well, with the atmosphere of the world and motivations for the player. I think the 8 pamphlets do convey the story effectively and at the pace of the user, while storyboarding would have been a good process to show in the project.

The map has changed radically from what I intended but is much more professional and realistic. The original 20 tiles would have been a wasted effort, while the Flash product is quirky and innovative and includes the same information.

The story has been completed as planned, with perhaps more refinement than I had envisaged, for example responding to feedback from the historian I discussed it with. I think the main storyline missions include everything a free-roaming game would need; with a good building pace and scale. The idea of making small playable missions ended up being dropped as it would have been too time consuming, while it ultimately meant the story is only in text form. I have created several pamphlets to illustrate aspects of the story, such as the intro, to compensate for this.

The weapons and equipment screens have deviated slightly from the original concept but still been included to the same extent. Instead of a screen with all 150 items made interactive, a more realistic selection of the most unusual has been included in the shop and gallery. While the scale is smaller, I feel the levels of interactivity are much higher, especially with the carousel and shopkeeper. The items each refer back to research from the design document, where all 150 have been described.

The 3D environment has possibly undergone the most redevelopment while the final piece has become more advanced than initially intended. I had planned to create only the area immediately around Stokesay Castle but ended up with a much larger piece of cartoon countryside. I think the other buildings and assets such as trees and animals really add to the map, while up-close detail may be less advanced than if I had stayed with the original plan. Learning how to use several game engines and SketchUp have been great challenges, with a much more varied final piece for having done so.

The Flash content has ended up different from what I had planned, while the concepts have remained the same. I have created 2 finished games, with all of the aspects of play I feel are required to make them enjoyable; such as feedback, objectives and victory conditions. I am happy with the outcomes of the two games and while it’s a shame to have lost the ship game, I think these are more relevant to the rest of the content.

The overall hub structuring was something I hadn’t considered initially and I feel it ties all of the work together effectively.

I think I worked efficiently and constantly throughout the year, with a varied project that helped avoid it becoming stale and boring. I managed my time carefully to be able to complete each part of the project and while some aspects have been altered or removed, I feel the final piece is larger than I had intended.

4.2 Improvements

Were I to refine the project, I would clean up the screens in the target shooting game where the level pauses at each stage. The paused video was too compressed to act as the background for each of these screens and the shots I ended up with could be improved. Both videos could also be tweaked to have smoother animation and improved quality.

I think elements such as Steve the Blacksmith worked really well as they gave the impression that you were glimpsing part of a larger world. I think more characters such as this or a marketplace perhaps, could give the same feeling of a large, living game.

4.3 Future Scope

I feel the project could be successful in the free-roam market and hopefully has enough of an outline from this project to develop from. As I was working on my research, I had a couple of ideas for potential expansions and sequels. With the success of Far Cry 2, I thought Australia could make a good setting with its similarly varied environments and relevance to the era with the emigration of criminals, slaves and travellers. I had actually considered an African setting to work in to the developing slave trade, but Ubisoft Montreal beat me to it! It could possibly still work, as you could travel across the ocean to each of the points of the triangular slave route; Africa, America and England, so that the environments would be more varied. America was my final concept for a direct sequel as many of the events of the English Civil War influenced the shaping of the American constitution and I felt the myriad nations all emigrating to the new world could make for a very varied game. As discussed in the design document, I feel the sailing game and other similar concepts which didn’t quite fit into this project could make excellent downloadable content to be added to the game after theoretical release.

26.05.10: Game Over

The project is finished!!

After a long year's work, the final menu system is online with the 7 separate pieces of interactive content. You can find the start to the menu at:

The menu system functions as I had planned, so that tabs open and close from the main hub. I redid the two mini-game videos to make them more interesting and the transitions smoother, both now having music and sound effects now to make them more fun.
To vary the gameplay of the 5 stages of the pumpkin shooter, I added a hidden bomb to some of the pumpkins which will detonate a short time after being revealed. The player however has to opportunity to defuse the bomb by shooting off the fuse and gaining more points.


The pigeon game is now more advanced, with falling feathers acting as points and spaced attacks by birds of prey which build as the game progresses.

The next and final post will be the module evaluation and its going to be BIG! sorry...

Tuesday, 18 May 2010

18.05.10: Documentary

I’ve been working on the design document and got it just about finished. The mixture of text, pictures and tables should give a good rounded view of my vision of the whole game and how it might feel to play. I have also designed a cover to sum up the whole project and make the document more interesting. The image is a combination of many aspects of the game and from looking at other game cases; most tend to include characters on the front with the title in its unique text very prominent. I trawled through my folders for the original character scans and neatened up the two leading characters in the game, Cromwell and Charles I. I then added soldiers fighting along the bottom and a hand-drawn map of the British Isles I’d done early in the project, with a photo I took of the Shropshire hills faded over it. I then added the title which, as with games in general is also a kind of logo and created a messy, smoky border to it all. This border took an inordinate amount of time to get to work properly; so that it would fit within the parameters of the printer.

15.05.10: Smashing Pumpkins

To make the most of the SketchUp map I have made three videos from animations in the program. These took a few goes to get right as its difficult to preview them as they will actually end up as well as tidying the environments up – finding a tree floating in mid air after exporting the video for 3 hours FOR EXAMPLE.

I then imported the raw avi files into Flash and tinkered the settings to get the best quality. The compression is amazing, bringing a 200mb file down to 8mb without too much of a drop in quality.

The first video is of the entire environment, slowly circling round to act as a background to the main menu. The orange glow of the morning fog helps to hide the edges of the map, so that first time users may think it goes on further and is part of a bigger world. I then created a smooth menu of 6 cards and help pointers to navigate through the entire project. To optimise loading times when online and with average computer performance in mind, when you press to view a piece of the content, it opens the file in a new tab of your web browser and changes to an empty frame with just a simple background in the main menu. This means the PC doesn’t have to process the menu video as well as any of the new content.

The second video is a slow sweep through the Stokesay Castle area, stopping at 5 locations where the player will be able to shoot at targets. While it may not be very challenging gameplay, it should hopefully be a bit of fun and a way to show the more detailed work on the buildings. I also filled the areas up with some barrels, sacks and crates to make them look less empty and provide more of an interesting target range. I was going to drop this game due to time limits, but if each stage is relatively brief and with a few varieties of target – it shouldn’t take too much time.


The final video is the most extensive, being a fly through all of the locations of the environment, ending up in the armoury at Stokesay. I have layered on the carrier pigeon from early on in the project and you can move it about the screen up to the edges. Again, with a few enemies and objects to avoid and items to pick up, it should make for a fun game that also shows off the map.


Tuesday, 11 May 2010

11.05.10: In the Gallery

To bring together all of my sketchbook work and the mini project with Gareth looking at object, character and environment design, I have created another menu to browse a selection of the content. I adapted the shop carousel so that you can select a set of 10 images for character, weapon or environment design, then cycle through as before. As they are in sets and not individual shop items, I also added the ability to cycle through each set when enlarged too, which should make navigation as easy as possible. The 30 images include work which doesn’t fit directly into the other main parts of the final piece, or which I didn’t have space to include. As before I, also made an individual card for each of the 30 images to ensure interface continuity and to boost the aesthetic as well as a brief description for each when enlarged.

To complete the work, I finished off the final piece which is a visual for the underground armoury beneath Stokesay Castle in the SketchUp map. The before and after shots below show the extensive work refining the shadows in Photoshop and the addition of the figure and cannon. I feel that this scene is descriptive, detailed and works well to illustrate the atmosphere and variety of locations in the game.


Thursday, 6 May 2010

06.05.10: Retail Therapy

With a couple of weeks until hand-in, I am now going through tidying up each of the half dozen Flash menus which will be accessed from the main hub. I began with the shop, which I felt I had made big progress with even if it still needed a lot of material. First up, I drew using ink the 10 shop items and scanned and edited them until they suited the theme of the project. They were then added to the place-holders I had created earlier; the planning saving me loads of fuss now. I created a button to hide behind each which was the exact same size, with different levels of shadow when you roll-over and press so that the user has a range of feedback.

For each of the items I created this little info card. With simple gradients, text, icons and images as well as the trademark parchment texture, I think the cards look quite effective: being detailed but simple and easy to understand. I created them wanting to alter the interface of the game and make navigation more aesthetic than the angular boxes before, and have continued the style of the cards throughout the other menus.

When you select each weapon or upgrade, the following box appears with detailed information from my design document, a much larger image, the costs and your money as well as a button to purchase. I spent a while making the box simple and clear while similar to the cards, so there is continuity.

I continued the cards through the conversation system with the blacksmith. The cards also shuffle neatly on the screen, again trying to make it visually pleasing. The concept of these cards could carry on into the real world with the popularity of collector’s cards, especially with films and games. This might work well with the lower age range I am aiming at with the cartoony style. Even if there isn’t intended to be a range of collector’s cards about the game, the audience would understand the visual appearance and maybe find it appealing.

I have overhauled the robbing option in the conversation so that the blacksmith now moves back and raises his hands. I was able to animate this rather than snap from one image to another as I had built the character out of individual pieces as described previously.

After the blacksmith quivers for a while, this box appears informing you of your robbing loot and the impacts on your other stats. I think this should give the user a flavour of how the game would feel and the mechanics within it, even if it is a simple menu.

Monday, 3 May 2010

03.05.10: Steve

While working in my sketchbook a few days ago, I doodled a shop interior as an idea I 'd had a while back. I decided to have a go at making it in Flash as it would show the social interactive sides to the game, an NPC, more of my research but in an accessible way and finally another interactive structure in Flash.

I planned to have a simple perspective for the layout, with a large shop counter to display the items on. While I only meant for this to be a simple screen… I MIGHT HAVE GOT A BIT CARRIED AWAY.


I have made a couple of carrousels in Flash in previous projects as I liked the cycling function both aesthetically and in how it can make the most of small screen space. I have created one here but much more improved than before, learning from the limitations of the previous models.I spent a long time refining it, using placeholder boxes for where the items will go and you can now cycle backwards and forwards, with a little easing for prettiness. What I am more proud of is that you can speed through the carrousel as fast as you want and it cycles accurately, as my previous attempts weren’t buggy but did limit how fast you could navigate.

To fill the empty room I decided not just to draw an NPC, but to build him in individual components so that I could make ragdoll animations with him. I didn’t initially intend to, but you can now open up dialogue with Steve the Blacksmith and navigate through a few different interactive options. You can chat about a few topics which trigger his moustache to waggle to look like speaking and for a cartoon speech bubble to appear with text. Alternatively, you can try to rob him which changes his status from friendly to hostile and raises your pistol. I will develop this a little further so that you can fight with him, as well as add the purchase items.


Monday, 26 April 2010

26.04.10: Dropping hints

The other information I have intended to include in the loading screens is hints. Most games have these simple text boxes while loading content, which allow you to convey a wide range of important game info in a useful and accessible way. I have planned to make these from the start and now that the game has evolved so much, the hints I have included are more refined and refer to much more developed concepts. With a little tweakage in Flash, the 20-30 hints cycle at random thanks to some simple code, as well as smoke from the pistols fading in as the percentage loading goes up. I thought this slight motion might make it a bit more interesting and with the detailed background image, there should be enough to keep the user entertained should the content load slowly.

With the recent Client Brief, I have picked up a few things in Dreamweaver which help tidy up and make uploaded material more professional. Setting the background colour of large swf files to match the background helps eradicate those nasty white loading boxes, and the addition of a favicon makes the whole webpage feel a bit more real.

Sunday, 25 April 2010

25.04.10: A brief moment

As I gather all of my work together to form a final product or piece, I thought it wise to have another quick shufty over the brief. I think what I have ended up working towards fits much better than my original intention which was more fragmented. The hub system, building on the simple and appropriate navigation I have been developing with my beloved pamphlets, should make the several varied parts of the project feel like one contained piece.

My recent actual work has been refining the PRELOADER! While it did the job of buffering the swf files, the placeholder preloader was a little empty. I also felt like it really needed to be nice if it might be loading large content, especially with the monster file sizes I am ending up with as I’m dealing with so many large images. I would rather make the user wait and enjoy waiting, than compromise on detail and image quality. In reality it isn’t a long wait and my intention to use code to open and close new tabs so as not to navigate away from the largest file, should make the user experience more positive.

After a lot of refinement and additions, I have created a main screen which could work as a front page to the whole thing as well as the background to the preloader. I looked at the more recent games and how they handled the loading screens and felt recurring themes were the thick black bars at the top and bottom and a loading icon or percentage. Actual loading bars seem to be less popular, while I personally find the minimalist approach of fading glowy things to be pretty useless; just annoying me as I don’t know what the hells going on :p. This is typified in the Harry Potter Wii games and even the loading content in Windows Vista and especially Windows 7. Gone are the handy bars which filled across with a percentage of completion; in are the weird glowing Windows icons and perpetually moving green fellers. AS SUCH, I am adamant in including useful information – even if I do take on board many of the other modernisations in graphic design ideas and content.

I have also brought back in the title and other imagery I found skulking at the back of a dark and dusty file, which I had kind of forgotten about. I had spent quite a while refining this title and wanted to include it as I think the typeface is more important than logo with most games. All of the other imagery is my own photographs, taken on location at several churches and castles, with a few of my own drawings too. Overall I like it – while it may almost feel cluttered, I think the main title or loading screen will have a longer lasting appeal if the user keeps on finding new things within it.

Tuesday, 20 April 2010

20.04.10: Oasis or Blur

To finish the pamphlet menu I needed a tree background to look as if they were pinned to it. I tried photographing and drawing a few, but the 500x3000 pixel shape of the pamphlet movie clip is a difficult shape to create. To avoid using a repeating pattern which would become blocky and require a lot of the computers resources to move, I decided to make a more inventive BLUR.I got the idea when working out the drag and drop code, when I stumbled across a template for $800 which blurred the background image while you used the dragger. I therefore thought... screw them, I will make my own and better one – and I kinda think I have /snoot.

I made an 800x600pxl wood grain cartoon on a parchment background and then blurred it carefully twice in Photoshop. I then set up a couple of simple bits of code in the long lines for the dragger and its easing to tween between these blurred images whilst dragging. The result I think works pretty well, giving a sense of speed and movement to a static image. It also looks a bit cartoony, which is exactly what I want with the style I am cultivating.





17.04.10: Flashing with ease…

In order to vary the interactivity and show a range of Flash menu styles, I have created a scroll bar to display the 15 to 20 general pamphlets. I have developed a more advanced scrolling system that the standard dragger, using a range of code to create easing. I think it makes the whole effect much more smooth and pleasing and hopefully looks more professional. Similar to the intro in Flash, the scrolling pamphlets are selectable and take you to a larger version of the image which can be dragged around; again with easing.

I have continued the simple menu style which I think suits the theme and doesn’t distract from the main content, while being easy to understand and use. I have made simple, appropriate transitions between screens for the interface elements to make navigation and the user experience in general a bit more interesting.

The pamphlets are arranged in categories which could easily be added to, and are displayed to appear as if pinned to a tree. I was torn with how to present them all and decided a vertical scroll would be more natural to an audience who are used to webpage navigation. I thought a horizontal scroll would make more sense if the pamphlets were displayed on a notice board, but I think being pinned to a tree is equally sensible if not a bit more fun and works really well with the shape of the space and layout on the screen.

Each of the pamphlets shows a sizable amount of time and effort with the project; from the research to locate and distil the relevant information, developing the graphic design of the text, imagery and layout and then distressing the completed image to make it appear crudely printed on parchment. I think this Flash file is the best way to digitally display them and communicate the atmosphere and development of the game world even if the file size will be pretty big... another job for the preloader methinks.

Thursday, 15 April 2010

15.04.10: Right hand down

In remembrance of my Designing for the User project in semester 3 (found athttp://www.newmedia.artdesignhull.ac.uk/rhughes/year-two/semester-three/dftu.html), I have begun to develop another aspect of the interactive video which will act as my final piece.While the GUI wasn’t great, there was one part of the DFTU project I really enjoyed and I think the tutor who marked it found quite fun too. To give a view of the player’s ‘heads up display’ (HUD), showing information relating to gameplay such as ammunition and compass direction, I mocked-up a first-person view of the player character holding a gun. You could then click on areas of the background and make the weapon fire and reload, knocking over a distant guard. I have decided to create a similar set of interactive animations for the FMP, while it will be more polished and stylised.

I have started by drawing the cartoon arm and pistol in the recurring style of the environment art, which took the best part of a day!! The perspective was pretty challenging but I think I’ve included enough detail for it to work. This was my first experiment with detailed colouring in Photoshop and it took a while to refine the tonal shading across the shapes of the arm and gun.

I then imported the image into Flash and developed the first two animations. It now starts with a simple bobbing motion to simulate breathing and by pressing on a specific part of the screen the gun will fire; with the weapon recoiling back, cartoon smoke emanating from the barrel and firing mechanism and the arm then lowering and moving around to look like reloading.

With sounds and an impact somewhere on the screen such as an object being broken, I think this could be a really fun part of the final piece for the user.

The background of the screenshots also shows how I intend to use the Sketchup environments. As the textures are all hand drawn in the same cartoony style, they will work perfectly as backdrops to these other interactive sections of the video.