Showing posts with label Interaction Design (Year2). Show all posts
Showing posts with label Interaction Design (Year2). Show all posts

Saturday, 23 May 2009

Mining - Flash interactive timeline

The website is getting close to completion now. I've made my interactive piece - the Bestwood timeline which hopefully will provide a more interesting point of information for younger viewers.






On this occasion it was the aesthetics that I had trouble with more than the actual Flash coding.

Using the Cadbury World experience as my inspiration (a great vibrant piece that will surely attract younger viewers) I tried out some layouts for the timeline.


This first one was a little too rigid. It appears a little dull.


This second one has more visual interest due to the bendy nature of the lines however I feared it may be too over the top?



I arrived at a compromise between the two, it has the curvy lines, but then I tiled it too with a slate wall image. At this stage, I still wasn't entirely satisfied however. It seemed to be a little bland.

I went into Photoshop and added smudges, and dirty marks so that the coal mine theme was more evident.

When it came to the Flash motion, I wanted to make it roll over, roll out and have jazzy effects popping up. I thought a good tie in with the rest of the site would be to use a glow effect in the colours that the Bestwood site uses. This was all achievable through setting up functions that detected when the mouse hovered and also whether a rewind action was in use.

Something of importance was making the text legible. We intend to repeat the information below this Flash piece for those who do not have the Flash plug-in and so I decided to go for a slightly jazzier font too. After several attempts at various sizes I decided upon Market Deco. It has a classy look but also a dated feel, again fitting in with the mining theme.

To sum up, I feel the mining piece has gone well. I particularly like the animations that appear - they are snappy, contrast against the white background and should attract the user's attention. The text information is short and to the point and the icons help visualise the information. A younger user should find this a more pleasant way of finding out information.

@

Monday, 11 May 2009

Mining - interactive timeline - genre analysis #2

Cadbury's World was the place I first found inspiration, when thinking up interactive ideas.



It caught my eye by being visually interesting and lively. The blending of the chocolate colours, the swirling pattern is makes, the sparkling title, the warpy purple background. From this there are certain things I should be taking note of.



In terms of what this piece informs of, it lists, sort of linear, the stages you will explore as you go around Cadbury's World. Each section has it's own little cartoony like character and it gives it a likeableness.

On hovering over, the section motif is enlarged slightly and a white starry graphic placed behind. This continues the sparkly/magical feel already created. Furthermore, the title of the section is presented. I can't decide whether I would prefer this on the main piece, but that would admittedly hinder aesthetics.

Unfortunately, whereas first you are presented with an interesting colourful piece to look at and interact with, the information slide that appears when having clicked, looks rather dull. The background is darkened and a flat white box placed on it.



The same little logo is reused, bigger this time so you can appreciate more of it's detail, however the description text is small and feels rather cramped. Imagination and excitement is not maintained with this. Here there is too much whitespace and it makes for a boring, barren feeling.

Usefully, there is a link which takes you to the next stage's information, but again, it's the same bland affair. 

If I were to change this setup,  it would to be more similar to the BBC. The pop up information would appear in the main interactive piece, rather than being on top and largely blocked out. Furthermore, OK it is information but it can be made fun with bigger text, colours, layout etc. Images wouldn't go a-miss. The purple heading shows they have tried.

I think this type design will work well for Bestwood. It warps the idea of left to right timeline into something visually interesting, at the same time being educational. As we are catering for youth/community, the bright colouring and graphics will be required too.

@

Mining - interactive timeline - genre analysis

 For the interactive timeline found on Bestwood's new site, I am now going to research into what ideas others have created and analyse them, highlighting successes and failures.

The first example is from the BBC and it does well, ticking all the boxes you would expect for an interactive timeline.



http://www.bbc.co.uk/history/interactive/timelines/british/index.shtml

To begin, it uses the full colour spectrum to appear vibrant and lively. This always bodes well when trying to disseminate information about history, which can be deemed unexciting. 



Using a click and grab action, you pull the timeline from left to right, and the associated timing appears. If the user fails to understand this method, there are left and right arrows below which implement the same navigation decision.

Consistency is good here as the colour choices in the simple nav bar at the bottom are carried through in the large image space where the information is held.



When you hone in on a particular place in time, speech bubbles like that of google maps pop up with a brief statement of what occured along with the date. What I like here is that to find out more information you click the bubble and it expands with more information. This is an intuitive design decision and works well.



Within these bubbles you then have the option of extra hyperlinks which bring up an extra window so the user remains and doesn't navigate away.

There is a search button in the top right of the page so that the user can find a specific date without having to look too far. I

The option to explore thematically, i.e. if I choose Technology category, only this information is displayed, is available. I like this. It allows the user to feel involved by having selected which category they will find out about, whilst also making the information about that topic consistent.



In all, an accomplished interactive timeline including all the features you'd expect. My only suggestion would have been to include small images when the first set of bubbles appear, so to add more visual interest. 

@

Thursday, 30 April 2009

Mining - Interactive Ideas

As the younger generation is being considered for the mining website, it is important to try and appeal to their level. We translated this to mean interactive pieces/games rather than having lines and lines of text that they won't attempt to understand or believe useful.

Below are the examples we came up with:


1. Mining depth gauge - 


 


The user is allowed to set the depth to which the pully goes into the ground. After choosing a depth, an animation plays of the wheel moving and the pully going down into the ground.

 Example inputs would include:

§  15cm – which returns a worm on the end of the line

§  1.5m – a skeleton

§  10m – clay

§  Xm – coal


 2. Interactive map on the history of coal




A swirly “map” represents the timeline of coal. Along this line are several intervals which are interactive. On hovering over with the mouse, the user is presented with extra information. An input is required so to allow the maze to progress with colour, or information. An example input would be to water the seed which turns into the tree that will die, decompose and eventually end up as coal.


 3.    Cogs puzzle


 


 The user is presented with various pieces of machinery, i.e. cogs. They are required to put the parts together. On achieving this, they push a button and the cogs become animated, then playing a video related to Bestwood or coal mining process.


 4.       Equip the miner


 


Using a click and drag setup, the user can pick from several “correct” but also “incorrect “ items to dress up the miner with. On sending him down the mine, an animation plays and if any incorrect items have been chosen, it will show the resulting trouble. Example items would include, a helmet with lamp for correct, whilst flip-flops would be incorrect.


5.       Charcoal rubbing


 


The user has to pick from a selection of rocks/utensils and then rub it against a palette. This will reveal images/messages that they have to decipher. Questions will follow to check whether they have understood the information.

@

Thursday, 26 March 2009

David's typography world

http://www.visibleart.net/david/temp/ntu/flash/typo49.swf

 

Check it out. He's kind of one of our own, and he's added great visual design to his repetoire. Not only can he do PHP, but he knows good typography too.

I really like how the sun, for example, has been fashioned to represent one, using just the words. The varying sizes of the type too make this really interesting. Even the tiny detail of how the man runs, still incorporating just typography, is fluid and impressive. He fades in colour when losing life. That's a simple but great touch.

A month or so ago I criticised an effort from Honda for being too bland. This time though, David just seems to have got it right. I don't know what it is I love about typography so much, perhaps it's just the beauty of words and the respective typeface, but I definitely credit this example.

In all, this is great. It definitely deserves recognition.

@

Wednesday, 25 March 2009

Amazing Memory - evaluation

Having now finished Amazing Memory, here's the bits that didn't make the short evaluation.

My main problem namely was initiating the hit test object for the maze walls. Having used an object that the character sits within, instantly the code would recognise it as a hit and bar any movement due to how it was programmed.
I eventually overcame this by swapping to hit test point which can register x and y values, identifying co-ordinates. Now, when the character is inside the maze it can move freely and then on colliding with a wall, the stop movement is activated.



This then led onto the next problem! Whilst hitting a wall, my code removed key presses so that in theory, the user couldn't carry on through. I managed to find a solution by getting it to re-buffer away from the wall by 5 pixels - not noticeable to the player but code-wise a viable option.

The rest was reasonably simple. Courtesy of David Downes' example Flash files, the count down clock worked in it's three forms for my game. I learnt the need to disable key presses whilst the remember/reveal options were active, as the user tried to cheat and move through whilst the walls were viewable.

I noticed a bug in regards to the clock timer going past 0, i.e. counting -1, -2. In my code I had specified when timerclock==0, stop - abbreviated form. David suggested to overcome this by using <=0 as this will encorporate the switching between code and timeline and rectify it so that when it goes past 1, it will activate the stop. Rather than getting to 0, telling it to activate the stop and by this stage it has already decreased to -1 and so on.



Lastly, when updating the graphics the flower became difficult to see when placed in certain areas of the grass background. I remedied this by adding a white padding hopefully making it more legible now.



There were initally the typical problems of embedding the custom font 'Lazy' from dafont.com and me not embedding all the required glyphs. To save problems in the future, I will now just embed all caps, lower case, punctuation and numerics - this covers the span I will likely use.




In all, I found this assignment achievable by splitting it up into manageable development stages. To sit down and code this from start to finish would have been daunting and I probably wouldn't have accomplished it. If I were to make a game again, I would definitely handle it in this way - it's a sound time management system that I have since incorporated in my other modules, such as PHP.


Overall, I am pleased with my game and although difficult to play at first, I find it a different, but interesting game. Submitting it to amateur online games sites however could prove or disprove my opinion completely!


@

Friday, 20 March 2009

Amazing memory - the designs/refining

Today is the deadline and today I will submit my completed Flash game.

Having gone from a rather blank idea - remember a maze, I'm pleased with the progress. I initially put off the design side to things, unusual because I usually enjoy getting involved with that. But encouraged by the likes of Sarahs and Jacqui's visuals, I knew I had to make an effort. 

The initial look I tried was a sand background. I just wanted something that wasn't the flat and plain white background.


I then decided to try inverting it so it was the maze that had visuals. Admittedly this idea fell short pretty soon as the walls disappear, so I would have been back at square one - white!



However, I liked the grassy look. The hue and saturation is really vivid and strong. It looks good. I thought about it and tried to develop a  scene that would resemble some sort of wildlife/nature in the backyard feel. I added a ladybird as the 'ball' and flower as the 'end'. It worked well.



I went on picking out a typeface and colours that would bode well. I think the red contrasting against the green is perfect. There is a distinct clarification. 



I decided to add a cooky sort of indie typeface which again bodes with and makes up a good thematic visual. 

Making the item you navigate around with a character, named as Dotty, it gives the game a more sort of personal feel, a little life/character to it. I like this touch.



From my experience, I knew that instruction page was important. I was aware it definitely shouldn't appear too crowded, yet I didn't want to make the instructions so sparse that they weren't informative enough. 

It's minimal, but I like the visual representation of the game's aim here - get to the flower, with a curved dotted line from Dotty the ladybird. This should connect much quicker with the audience who probably don't wish to read all the text.

--

In terms of the coding/structure, I have added a points score system that collects the time left after each level and combines into one large score at the end. As with other similar games, the incentive to 'better your score' should prove encouraging enough to want to replay, being quicker and more skilled in remembering the mazes.



I am really pleased with the design after having completed it. It looks a lot like the current branding used by Robinsons. Perhaps this was an unconscious influence.

All that needs to be done now is user testing. From experience, I have found this to be vital in pointing out bugs or making me aware that something isn't clear enough/needs evolving.

@

Thursday, 19 March 2009

Amazing Memory? more developments

Compared with PHP, Flash this year has been a relative breeze. Perhaps it's error reporting is a little more specific, but I've enjoyed the game making process so far.

Since last time I've started to add an important part to games - scoring. It is this aspect that often encourage repeat plays in the hope of bettering previous scores. 


From my original game plan, I wished for any time left on completing a level to be converted into their score. Initial attempts had me trying to calculate the total time of a level (40) - timeremaining. This wouldn't function however. After a surgery session with David, I discovered it was as simple as printing the time when it stops (when they hit the finish line).

It is now simply a case of inserting the seperate score display between each of the stages. Admittedly, the graphics are currently below par. This will be addressed, although I've put it off so far! This will likely be the last development I make. I think I am going to struggle a little over graphics that are qualitative. I suppose the main essence of a game is gameplay, yet I clearly listed uninspiring graphics as a no-no in my game objectives, so I will have to commit myself to it.

Next up, the decision to include a reveal option is a great help for those struggling. It stops the main level timer whilst itself counts down for a limited period. However, I noticed that you could then cheat your way through the entire game by hitting it at any moment you become stuck. To counteract this, I decided to impose a set amount of strikes. 5 in particular, for the whole game. Even that might be too generous? I am going to conduct user testing to find out!



Lastly, I noticed just like the ping pong game, that the controls seemed a little sluggish/unresponsive. In response, I have set any key press to be a boolean: key up-true, key down-false etc. When they press the left key for example now, in the code it activates function keydown by making it true. Admittedly, the difference isn't that great compared with pingpong as I am using one frame per level, whereas ping pong streamed through 3. Nonetheless, it is perhaps still a more advanced method input for movement.

I am surprised at my development with Flash, in all. Whereas PHP has felt a bind, the syntax of ActionScript3 seems more straight forward if that's possible. Reverse a year and a bit and I would have been the complete opposite. Perhaps I can now add to my C.V: Other languages: French... German... AS3... 

@

Wednesday, 11 March 2009

Flash game update - 'Amazing Memory?'

Since my last post, I've made and implemented quite a few new features. I have found that development is manageable by doing it in reasonable stages: level designs, alpha transformation to 0, countdown clock, reveal option. 

Firstly, one of the key objectives I set out beforehand was to have levels that increased in difficulty. Henceforth, I have created 7 designs which I think will cater for a decent amount of gameplay. I did discard some other designs as I felt them a little too repetitive. However, luckily I noticed that by altering the start and end positions will make for variety within the game, sometimes you'll be heading clockwise, sometimes anti-clockwise, sometimes north and so on.

I was cautious of making the first level in the least simple, so to ease the player in and encourage them to enjoy the game.



From then on, the gameplay becomes more difficult by adding in more complex routes, or little walls that will get in the way if not remember and eat up some time as the user tries to get around the obstacle.

 
  

Importantly, these are not how the designs will stay, visually. At the moment they provide a function. On completing all the additional code based tasks, I will return to the designs and update them. I am considering themes, such as an Aztec look, or Roman, along with Egyptian or Japanese. 

The unique selling point of the game relies upon the fact that the user must remember the route/maze as it disappears within a set period of time. I moved onto installing this event.

After having researched online, I learnt that it was possible to create fading tweens within the action script. However, it appeared long and quite laborious, so I decided to opt for a straight reduction in the alpha state - from 1, to 0. 


This is achieved only after a 'remember time' clock counts down. So I had to install this too.
Courtesy of David Downes' Flash examples, I was able to look up the code required for a countdown clock. 

I decided a suitable amount of time was 8 seconds, and so set the remembertimer variable to 8. However, I soon found on testing the movie that whilst the 'remember clock' counts down, the user is able to begin their route through the map. Hence, I had to remove the stage event that listens for key events whilst the remembertimer is active.

Here is the code that now is required to suitably allow the user to remember the maze, not play, but then be allowed to play when remembering is over: 

 
maze.alpha=1;

var remembertime=8;
// total time to countdown

var remembertimer:Timer = new Timer(1000, 0);
//(delay in milliseconds, number of repeats)

function remembertimerStart() {
   // start timer and starts timerHandler function when the act is completed
        remembertimer.addEventListener("timer", remembertimerHandler);
        remembertimer.start();
rememberclock.text=remembertime;
}

function remembertimerHandler(event:TimerEvent):void{
      remembertime=remembertime-1; // remove 1 second every 1000 milliseconds
      rememberclock.text=remembertime; 
 // when clock reaches 0 then it will stop the timer and the walls will become transparent
 // the keys will become usable
 // the clock will be reset ready for the next level
      if (remembertime==0) {  
 remembertimer.stop();
  rememberclock.text="";
 maze.alpha=0;
 stage.addEventListener(KeyboardEvent.KEY_DOWN,detecthit1);
 leveltimerStart();
 }
}

As can be seen, this activates the next timer, the leveltimer, which is the total time allowed to hunt round the maze. It was necessary to use rememberclock.text="" when it completes as I decided from a design point of view to have the clocks in the same position. Otherwise, I encountered the problem that the rememberclock read 0 and overlapped the levelclock which counts down.



Lastly, through playing the test versions myself, I became aware of how difficult the game can be when not paying full attention. This resulted in me allowing more generous time allowances per maze, upping it from 30, to 40, yet still this could prove difficult in the latter stages. I am wary of extreme difficulty, as it was sometime I found I disliked through my Flash game analysis.

To combat this, from an early stage I realised the option for a 'reveal' button would be helpful. I found the implementing of code easy enough... or so I thought. Harking back to my very first days using Flash, it was a case of setting up an event listener for when the reveal button is pushed:

revealBtn.addEventListener(MouseEvent.CLICK,revealtimerStart);
 

However, I received an error concerning the third countdown clock I have working in this game. It repeatedly sought a type of event. Having always been a little unclear on the purpose of myEventObject, or e:event, or event:MouseEvent  it was courtesy of a surgery session that allowed me to get it cleared up.

Now, the 'remember clock' counts down, the 'level clock' then is cued, and should the user need it, they can push reveal and the 'reveal clock' will be activated, which pauses the 'level clock' but then makes it continue after the alotted time. 



I am pleased so far with my progress. I have tried to steer away from quick fixes, and unlike my previous history with Flash, my coding is not too superfluous. The functions that set up and make the game run are all on the first frame. Thereafter, the following slides just require calling the rememberTimerStart () function, which begins the processes.



So far I have been fortunate in encountering little trouble in the development of my game. Nonetheless, advances can still be made. As I mentioned beforehand, the design needs enhancing, but then also, I would like to add in bonus points, which that in itself requires sorting out a points score system. I have tried a little but failed in my efforts. Lastly, if time feasible, I want to limit the amount of times reveal can be used. This will no doubt concern using a variable options setting up the amount. 

@



Thursday, 26 February 2009

Flash game production

Taking some key features from ping-pong, notably the walls, I set about creating a make-shift maze. 



This sample here goes on the principle that a right button push will move the ball 5 pixels to the right if it isn't not touching the right wall. The same is repeated for up, down and left. Note that I only have one type of left wall, one right etc.

Multiple 'left' walls will not acknowledge the ball, meaning it passes straight through. To tackle this would require having several walls all with their own unique instance names and respective line of code. In all, this would mean having a stream of largely repetitive code, and as this is advanced Flash, I am looking to implement short but succint code. 

Not wishing for unnecessary, lengthy code, I had to try another solution. After hours of searching online, I was presented with the option of swapping hitTestObject with hitTestPoint and setting the shape flag to true. This would mean that it is the actual shape that detects a hit, rather than a border surrounding the entire shape. I will use one shape that is construed into warying different angles and shapes.

Unfortunately, I met with problems again. As soon as I hit any part of the shape,  the coding stops keyboard presses being recognised, the key actions became locked. I have tackled this by making it so should the ball hit the wall, it rebounds it by 5 pixels, thereby allowing key presses afterwards.



I can already see improvements are needed. The pixel differences mean that the ball can intersect a little with the wall. This will need to be adjusted and is not difficult.

Furthermore, I am now going to need to focus on implementing a countdown clock, whilst adding in bonus score points. Most important will be the end of level point.

@

Wednesday, 25 February 2009

The Flash game I will make

Taking on the strengths and weaknesses from the last post about Flash games, I have created my game.

The game itself will be similar to a Pacman like maze. You are required to remember the maze walls, as after a few seconds they will disappear. You then have to navigate your character around, trying to reach the 'finish' spot within a specified time. Along the way will be bonus items and death traps. If you finish within time, any seconds spare will be converted to additional points. There will be a 'reveal' button which can be used a limited amount of times should the user forget the map layout.



I believe it will be a success as I intend it to meet the following criteria: 
  • Have clear objectives / Sneeze says it all in it's name really, that is the main objective. Meanwhile, Big Battle was only understandable due to prior experience with it's genre, but I had no no-how on achieving the goals. This is needed for those unsure.
  • Be simple to play / Again, the controls for Sneeze are the standardised keys used in online gaming, spacebar for fire etc. There aren't superfluous buttons either whereas the weapons available in Big Battle demanded several keys to implement.
  • Have a countdown time feature so to increase pace but make the game feel manageable, i.e. the level will only last 30 seconds regardless / This I noticed was lacking from Sneeze, but was implemented in Doeo. In adds an intensity, which is good in games.
  • Have reward points, whether that be through achieving a quick time or by collecting bonus items / In the easy setting of Doeo, everything shot was worth the same, so it seemed a little bland. Where bonuses were available in Big Battle, they required a decision of whether it was worthing seeking at a cost to your health level, ammo stocks. This sort of decision is good in games, making them more complex in terms of strategy.
  • Have levels of progressive difficulty / It is expected in games that the first level gently introduces, but there needs to be caution of giving a false sense of security. The gradual difficulty increase in Sneeze I think is implemented nicely.
  • A challenge that requires thinking / Merely clicking the mouse doesn't require thinking, as is demonstrated in Doeo. The sense of achievement after having thought through an action and then successfully completed the level as a consequence is a major reason people are encouraged to continue playing.
On the other hand, I will be trying to avoid these downfalls:
  • Having instructions that are too wordy or complicated / Unfortunately, Sneeze fails in this respect. Online games are quick bursts of fun, so users will not want to spend 2 mins of their 5 reading up on how to play.
  • Consistently being too easy, or too difficult / If your users can't use the game, it fails. Extreme difficulty may indeed pose a challenge but the limit needs to be sensible, as I felt for the difficult setting in Doeo.
  • Poorly implemented controls / If it doesn't work, they won't stay around long as they haven't invested in the game financially. 
  • Uninspiring visuals / Although gameplay is fundamental to success, the visuals help make the piece. It helps with the user's perception of the game, whether it is quality or not.
In terms of the market, I think it will fit nicely within the edu-tainment sector that has gathered interest in the last few years. Brain Age on DS has become a multiple million seller, spawning Brain Age 2 which features more game like brain activites. My game could easily fit in here. 

Such games target a broad age demograph, nicknamed the Touch Generations, by Nintendo. Basically, anybody who is normally scared or deem videogames not for them should find the software interesting, useful, approachable and fun. Any age too, as the levels that increase with difficulty cater, in this respect. Younger users will enjoy the simpler, early stages whereas older, more advanced users getting to the difficult levels will find a challenge too.

@