Archive for tag: gamification

NOVEMBER 2012

Happy November everyone!

This month we have a pick 'n' mix of tricks and treats in store for you.

The end of October marked another Signals anniversary! Congratulations to Alastair, our Client Services Director, on a whopping 15 years (not to mention the work experience years) of ensuring Signals is full of life! He celebrated with a bit of Bond and we cracked open the bon bons.

But forget traditional party games; we're getting our kicks with some retro gamification.....

Nov2012

CODE: The Signals ‘Paper Plane’ mini game

Courtesy of Andy Lloyd

PlaneGameWe really enjoy producing interactive work so during a review of our website we felt that something could be done to increase interactivity and add to the overall user experience on the home page.

As the animated Flash banner already included paper planes, we decided to extend this idea into a casual game, where the visitor could "pick up and throw" a paper plane across a virtual office.

CHALLENGE: Integrating a Speedometer for some visual feedback of the mouse movement speed.

CODE:

var needle:Sprite = ; 
var flying:Boolean = true;
var oldX:Number = 0;
var oldY:Number = 0;

if (flying)
{
TweenMax.to(needle, 0.3, {rotation:(xSpeed / 100) * 180});

return;
}
else
{
var updateSpeed:Number = ms.getXSpeed();

	if (updateSpeed <= 0)
	{
		needle.rotation = 0;

		return;
	}

	TweenMax.to(needle, 0.3, {rotation:(updateSpeed / 100) * 180});
}

private function calculateMouseSpeed(e:Event)
{
	newY = mouseY;
	ySpeed = newY - oldY;
	oldY = newY;
			
	newX = mouseX;
	xSpeed = newX - oldX;
	oldX = newX;
}

public function getXSpeed():Number
{
	return xSpeed;
}

 

Firstly, we created a variable called "flying" that is set to true when the plane is released. While this is false the speed of the plane is related to the movement of the mouse and calculated in the getXSpeed function, however once it is true the variable "xSpeed" is calculated every frame by applying some very basic physics.

After calculating a value for our movement speed, it is time to rotate the needle of the speedometer. To do this we used the "Tweenmax.to" method and the formula (speed/100) * 180 to determine the angle.

There was still one issue left: the needle will not rotate further than 180 degrees (hard right), but if the speed becomes negative (if we were to drag the mouse backwards for example) the needle could move past its ‘0' starting position. In order to prevent this from happening, we need to make sure that if the "updateSpeed" variable is ever less than 0 the needles rotation is fixed to 0 too. This is done using the second "if" statement above.

 

There'll be more code from Signals next month.

Select the CODE tag to see more of our free code blog posts.