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.

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.

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.

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.

06.04.10: Intro part II

The intro images are completed, with 8 pamphlets now navigable and drag-able in Flash. I have also used more fiddly code for the drag and drop, so that it feels like there's a slight physics on the pamphlets rather than the basic static movement.

The first two images use text and lines to communicate the darkening mood of the country and the first seeds of rebellion being sown. The content they discuss also features in the storyline as some of the early starting missions.

In mockery of the more expensive regal pamphlets, this next piece of propaganda uses more elaborate design elements such as the sweeping dividing lines and repeating symbols at either end. I saw this style being used successfully in a poster from the time in an Oxford college.

These next two images conclude the introduction by declaring the start of the Civil War, rallying support and recruiting for either side of the conflict. With this first parliamentary one, I have tried to use the mocking and cocky style that many rebellious propaganda pamphlets took. I have also tried a slightly different style with the dividing lines to make it more original.

This second recruitment pamphlet for the Royalists is a take on the classic WWII Lord Kitchener posters. I have mirrored the layout and style, while creating my own cartoon of Charles I, with an equally notorious moustache.
This final screen-shot shows the material in Flash. As with each individual pamhlet, I really like shrinking down the original imagery as it looks even more detailed. I think using many of the other designs as a background works really well as the colours and imagery look similar but are broken up by the drop shadows and varying tones of paper. I think the controls are simple and easy to use and suit the visual style so that it should be a user-friendly and interesting way for the audience to get a taste for the setting and atmosphere of the game.

I may add another pamphlet to conclude the intro, maybe an advert for work or directions to the starting location for the player in the game world.