Mouse Wheel Animation Control with Easing

The previous post gives a simple ActionScript 2 solution for using the mouse wheel to control forward and backward play along the Flash timeline.

This example extends that to introduce an element of easing. When the user stops scrolling the mouse wheel, instead of coming to an immediate halt, the animation gently glides to a stop.

var damping = 0.95;
var accelerator = 0; //equivalent to movieclip frames per framerate frame

//detect mouse scroll
var mouseListener:Object = new Object();
mouseListener.onMouseWheel = function(delta)
{
accelerator += delta/3;
};
Mouse.addListener(mouseListener);

//manage the animation
onEnterFrame = function ()
{
accelerator = accelerator*damping;
framespeed = Math.round(accelerator);
moveframe = clip_mc._currentframe + framespeed;
clip_mc.gotoAndStop(moveframe);
};

And there you have it. Play a MovieClip animation with speed and direction determined by the direction the user scrolls the mouse wheel. And when the mouse wheel is released the animation slowly comes to a halt.

Happy days.

Controlling Flash Animation Frame, Direction and Speed with Mouse Scroll

Most animations just play, you set their frame rate, your press play, and away they go. But I have an interactive item that I want users to be able to play forwards, or backwards, at the speed they scroll their mouse.

I am using ActionScript 2 for this, and the code is blissfully simple:
var mouseListener:Object = new Object();
mouseListener.onMouseWheel = function(delta) {
     frame = (clip_mc._currentframe + delta);
     clip_mc.gotoAndStop(frame);
}
Mouse.addListener(mouseListener);

As you can see you just create a mouseListener object and then build a function that acts on the onMouseWheel event.

When the mouse is rolled the 'delta' (or the value of the mouse scroll, forward or backwards) is used to calculate a new position in a MovieClip's timeline based on the current frame. The function then moves the play head using gotoAndStop to that new position in the timeline.

And you're done... This can be used to control the speed and direction of animation play within a MovieClip. I have a few creative applications of this technique in mind for the future - I hope you find it helpful. Happy scrolling.

3D Game Environment Modeling

Setting the pace for my level 3 students... One of my teaching philosophies is to lead and show, not just explain. Doing this provides ample resource for students to see the entire process, and to aspire. Here's my example.

A job well done!

It is with some emotion that I look back on the last few years spent working as a lecturer and teacher of graphics, interactive media and game design. But today more so as I received visits from two of my old students who have made a fantastic success of their lives since attending my classes.

Both recently graduated with Degrees and have successfully found work in the creative industries they trained for. One as an animator, the other in game design. Thanks for visiting me today you two, I could not be more happy for you. Thank you for bringing me news of your other friends who I also had the pleasure to teach. If you ever read this, I am proud of you, just as I am of all my other students progressing with their education or professional careers, buying their first houses, raising their children...

Right now, though, having visited today, you two represent everyone I have taught over the last 7 years, you are in many ways the symbols of what I hoped my career would be about. I wish you, and all my students every success. The future is bright it really is, it is in your hands, I know you can do it. And what made my day today was seeing that you know you can do it too.

Google Pulls Support for Unofficial Weather API

Well, it had to happen, it was never officially supported, and now it has. As Slashdot has reported, the Google Weather API is no more.

But... there are some alternatives, notably the Yahoo weather API - more details here:

http://dansinteractive.blogspot.co.uk/2011/03/finding-weather-with-yql-and-yahoo-api.html

And, if you don't get on with that, you might take a look at this alternative:

http://www.wunderground.com/weather/api/

Happy weather forecasting :-)

Game Designers

You've heard of Alfred Hitchcock, Steven Spielberg, Ridley Scott, James Cameron? Sure. All film directors. Visionaries in the medium of film. Artists and creative geniuses every one of them. But what about the medium of the computer game? Who were and are the names in games?

Perhaps like me you also "wasted" many holidays, evenings and weekends, as a youth, playing computer games. The first game I remember was "Jet Set Willy". A friend had loaned their Sinclair Spectrum to my older brother (I must have been about 8 at the time) and after what seemed an age of waiting for it to load there before my eyes was the first computer game I ever saw working in my own home. Since then I have played many games on many systems. Over the years home I have lived in hosted various home computer and game platforms - ZX81, Spectrum 48k, Oric, Spectrum +2a, NES, Game Gear, Atari ST, Atari Lynx, Master System, Mega Drive, PS1, XBOX, XBOX 360 and the Wii. Not to mention more iterations of PCs than I can remember, and of course my old iPAQ PDA, and now my Android smart phone. I played games on them all, more games than I can possibly remember, and behind each game were clever, creative designers pouring their ingenuity into their creations like the Scotts and Camerons of the gaming world.

Having recently become acquainted (and in some cases re-acquainted) with the knowledge of some influential names in the game industry, I decided to do some homework to learn more about other important names that influenced my youth. In other words, who were the Hitchcocks and Spielbergs, the game designers, behind my favourite games, and what do they have in common that I can learn from?

Matthew Smith

While possibly not strictly a game designer by the current definition, Matthew Smith probably represented the nearest equivalent in 1983. Strictly Matthew was a programmer, but as often seems to be the case (the OS user interface and the WWW being prime examples) early uses of computer technology, including in games, were driven by programmers. Mathew is best known for his work on Manic Miner and Jet Set Willy, for the Sinclair ZX Spectrum. Both represented early examples of the platform game genre.

Matthew's games demonstrated that playability was of high importance along with an understanding of the capabilities of the destination platform and how theses can be harnessed in creative and innovative ways. One example of Matthew applying this is the use of in-game sound in Manic Miner, it was the first Spectrum game to include in-game sound by making clever use of alternating CPU attention between game and sound.

Paul Woakes

Paul Woakes gets the first developer and concept credit for probably the game I played the longest - Mercenary. I played it on the ZX Spectrum, but it was available for several platforms. Produced in 1985 Mercenary was the first full 3D game, and first open world game, I ever played. Conceptually and technically it pushed some boundaries (particularly on the Speccy), delivering a unique gaming experience that made it stand out from the flat linear game play that was more common at the time.

Looking purely at game play (and not at 1980s technology limited graphics) Mercenary implements several of the approaches we still see today in open world games, including interactions with NPCs that push the story along and direct the player. I see Paul as a pioneer of 3D open world games.

Robin and Rand Miller

One of the best games I never completed was MYST, designed by Robin and Rand Miller and released in 1993. From a technical point of view it made innovative use of what was in effect a system of hyperlinks, and overcame limitations in the real-time 3D capabilities of the time by making innovative use of pre-rendered static images and animated sequences. The visual design was fantastic and combined with the slowly unfolding story and interlinking puzzles results in an immersive believable 3D world. Although there is no threat of violence ever in the game, the haunting loneliness, ambience and surreal landscapes always had me "looking over my shoulder".

For me this game really stands out as an example of designers Robin and Rand Miller being able to think of absolutely everything while demonstrating a high level of creativity and originality - a complex story that must be revealed in parts, complex puzzles, visual style, architecture, game play, game mechanics, use of available technology... - and how it all must come together to make a seamless whole.

Common Attributes

There are some schools of thought that suggest it is possible to "bottle excellence". That if we knew the ingredients of excellence we could teach anyone to achieve it. What attributes then do these four game designers demonstrate that I can learn from?

• Creativity - leading to originality
• Understanding of the available technology - in order to innovate with it and to push its boundaries
• A holistic view of the whole creation - seeing both the whole and the details and how they fit together
• Never giving up - because nothing ever gets finished if you do

Thanks guys :-)

Getting creation event coordinates for Game Maker

I am currently getting into using Game Maker for games development, and am beginning to use 'timelines' to initiate the creation of 'enemy' object instances.

Two of the parameters needed in the object instance creation event are the X and Y coordinates for the object's creation. This is very easy to input, but only if you know the intended pixel coordinates off the top of your head, which is less easy to simply guess at, and for some games may need something more precise than a guess.

One way to find out these coordinates is to keep reverting back to the 'room' and hovering your mouse over the grid. As you do this some digits in the bottom left of the screen will tell you the nearest grid point X and Y to where your mouse is hovering. You could make a mental note, then revert back to the timeline and input the digits.

Personally, I find this annoying and fiddly.

So, to save me some annoyance, and speed up my development, I have produced a couple of game screen coordinate reference grids that help me. All you do is print them out and keep them handy.

My guess is that if they help me, they might help you, in which case you can download the game screen coordinate reference grids in PDF format here.

Please note these are released under a creative commons license.

Happy game developing.

Getting used to code free game development

Not too long ago I began a games design course to formalise and extend my knowledge and skill in this area of interactive media. The interactive media of my earlier career has evolved over the last decade into what I recognise are two distinct areas. While web design has been around for longer than that, it's earlier "1.0" incarnation was barely able to support what might be termed "interactive media", which back then was pretty much the sole domain of CD ROMs. With the development of Broadband, faster computers, and browser technology, what used to be delivered on CD or DVD is now easily obtained online - so that now interactive media = web design (to a great degree). The other direction of the interactive media industry then, still delivered on hard media, is Games. Since I know web design and Flash fluently, I decided to make the move in the direction of game.

The introductory part of the course, like many courses, assumes little or no knowledge. So we are using Yoyo's Game Maker as the initial authoring tool to learn basic development concepts. Powerful though Game Maker is, I do find the "code free" development slightly frustrating. I finally find myself at the other end of the ladder than I was 13 years ago. Back then I would have given anything to be able to build games, or any complex interactive media, without having to write a line of code. Since then I have got down to it and learned a great deal of ActionScript and such like over the years, and now find the coding aspect logical and sensible. Now I am forced to use a GUI to drag icons around to make "code" I find it frustrating, but am getting used to it.

Take this example for instance:

The visual equivalent took a bit more thought to drag together, than the ActionScript based syntax I am now used to. It's partly because of being unfamiliar with where to look for the draggable items, and partly because it would just be quicker to type.

I laugh to myself because now I finally understand what my coding whiz brother, and others like him, were thinking when I took delight in code free authoring environments all those years ago. They found them slow in comparison to coding by hand. And now... so do I.

Does this mean I have arrived?

Meanwhile, I am getting used to Game Maker, and I understand I am able to code by hand if I want to so I am happy to recommend this excellent product. Tally ho!

Normal Maps of Coins Part 2

In my last post I produced a normal map of the side of a British pound coin. It was an early attempt at following this normal map tutorial, and the results were passable. But on evaluating the results I also identified some fine tuning I could make to my own technique at the photograph stage to make the edges of the raised areas sharper. This was the result.

On this occasion I did increase the angle of the light, holding it higher above the coin to reduce the shadow length, and as you can see this results in much sharper edges. The benefits of a sharper normal map are instantly visible in the 3D render below.

Unlike the pound coins, which needed a grime effect adding to help define the grooves, the ten pence texture is a shiny metal, with details visible purely from the shape information held in the normal map. Every scratch, dent and line you see here is from the normal map, making it look much more real.

In this image the two pence coin uses the same photos the normal map was generated from, though put through a different process, to create dirty areas and reflective areas on the coin to mimic age and wear.

Full instructions in a future post (when I have more time).

Normal Maps from Photos

Normal mapping is a vital part of 3D modelling and rendering these days. In some cases it take hours off your modelling time, and in others hours off your rendering time (and sometimes both).

A while ago I came across this tutorial about making normal maps from photos. I finally got round to trying it.

Introducing the fruits of my labours - this example of mine is the side of a well worn pound coin.

You don't need Photoshop to do this, and to prove it I used the GIMP image manipulation program to make the normal map, and then applied and rendered in Carrara below.

You can see from this render that it works, but some of the edges need to be sharper.

A brief critique of this attempt shows the angle of the light source was too low when photographing the coin, making long shadows, and positioning the light source slightly higher would shorten the shadows and give sharper less buttery results, but having tested it using the 3D preview mode in the GIMP Normal Map Filter, it isn't half bad, and much quicker than trying to build a high res mesh, or digitally painting a height map for conversion to a normal map using tools like the Nvidia Normal Map Filter.

For some objects you really should give this a try.

Of course, even this early attempt is usable if supported by other channels such as shine and highlight (specular) using a grayscale map based on the same photos as the normal map. I also used the same grayscale map to mix two shades of coin colour to show a diffrence where dirt gets ingrained and where it gets rubbed off and used the same map again to give two levels of reflection because dirt is not as reflective as metal. Combining all these with the normal map brings a whole different level of realism.

I'll explain how I used the same photos as the normal map to make the grayscale specular map that I also used for reflection and grime in a future post.