Section 3: Silverlight Game

Sprites are the main objects in a 2D game; they can be implemented either as a 2D image or animation. Sprites are primarily designed to move and animate, simulating real-world physics. We need some simple math to manipulate our game sprites, but more sophisticated games need more advanced math. The paddle, ball, and bricks are the sprites used in our game. We implemented each sprite as a Canvas element. We used the Canvas container to group smaller UI elements and access the location, width, and height of the sprite as a group. The following example shows how we defined the ball sprite:

	<Canvas x:Name="Ball" Width="23.6728" Height="23.2224" 
	    Canvas.Left="365" Canvas.Top="526.778">
	  <Ellipse x:Name="Ellipse" Width="23.2224" Height="23.2224" 
	      Canvas.Left="0.308624" Canvas.Top="0" Stretch="Fill">
	    <Ellipse.Fill>
	      <RadialGradientBrush RadiusX="0.951946" RadiusY="0.951947" 
	        Center="0.5,0.10233" GradientOrigin="0.5,0.10233">
	        <GradientStop Color="#FEFFFFFF" Offset="0"/>
	        <GradientStop Color="#FE191919" Offset="0.444915"/>
	        <GradientStop Color="#FFAAAAAA" Offset="0.792373"/>
	      </RadialGradientBrush>
	    </Ellipse.Fill>
	    </Ellipse>
	</Canvas>

The following example shows how we can move the ball sprite:

	//Manipulate ball location through JavaScript
	var ball = control.content.findName("Ball");
	ball["Canvas.Top"] = ball["Canvas.Top"] + 10;

3.1.3.1Vector/Movement

It is essential to introduce the term vector since a group of our Sparkle Ball game’s sprites will be animated. A vector is a pair of numerical values that tells the sprite where to move on the screen. A vector of (5,7) means that from the current position of a sprite, move 5 units on the X axis consequently, 7 on the Y axis.

Vectors math is fairly simple addition. A vector (3,9) and (7,3) produces the total of (10,12), which is, of course, another valid vector value. So far we can tell the sprite to which point to move to exactly, and the sprite knows how fast it will move. Velocity in physics is a vector quantity that carries both speed and direction values. So a sprite’s velocity is simply another pair of values; for example, our sprite that moves with vector (5,7) can have a velocity vector of (0,1). The first value is how fast the sprite will move on the X axis and the second value is how fast it will move on the Y axis.

Now, let’s do the simple vector math; a sprite going with vector (5,7) with speed of (0,1) will have a velocity vector of (5,7)+ (0,1) = (5,8). In other words, if we keep adding a speed vector of (0,1) every second, this means that our sprite will be moving down the screen 1 pixel per second.

3.1.3.2Collision detection

Collision detection is used to determine if two game objects intersect and respond according to game physics; for example, if the ball intersects with a brick, the brick should explode and the ball rebounds with an angle determined by the point of impact with the brick.

The simplest way to do collision detection is to treat the two sprites as two rectangles and check if they intersect. The problem with this approach is that this algorithm tends to over-detect collisions, which is annoying throughout game play. A common solution for this problem is to test the collision against smaller dimensions than the actual sprite size, usually by a factor of 0.8. The approach we used in the game depends on measuring the distance between the center of the ball and the center of the brick, and check if it is smaller than the sum of ball diameter/2, and half the width and half the height of the rectangle. The following example shows such implementation:

	function checkCollisonWithPaddle(ball){
	    var paddle = control.content.findName("Paddle");
	    var bottom = ball["Canvas.Top"] + ball.Height;
	    var left = ball["Canvas.Left"] + ball.Width / 2;
	    var centerX = ball["Canvas.Left"] + ball.Width / 2;
	    var centerY = ball["Canvas.Top"] + ball.Height/2;
	    if (
	  Math.abs(centerX - (paddle["Canvas.Left"] + paddle.width/2)) < 
	  ((paddle.width/2 + ball.width/2) * 0.9) && 
	  Math.abs(centerY - (paddle["Canvas.Top"]+paddle.height/2)) < 
	  (paddle.height/2 + ball.height/2*1.1)) {
	        return true;
	    }
	}

We use the factors 0.9 and 1.1 to limit the over-detection of collisions.