Game Design with Crafty.js – Part 5

Intro

This is Week 5 of our Crafty.js series.

We’ve made games with Kodu and Scratch. We learned to write code with Webmaker.org. Now we’re making games writing code in JavaScript.

Pre-Questions:

  • What is a variable?
  • How do you win the game Frogger?
  • Last time we learned 3 different Control Structures, Ifs, If-elses, and Whiles. Which of these could we use to trigger a You Win! message?

Introducing Sprites

A sprite is a graphic that is used in a video game. It could be a character; it could be an item.

Our Entities will have Sprites applied to them.

Sprites are often contained in a single image called a Sprite Sheet.

Frogger Sprite Sheet

Sprite Sheet for the game ‘Frogger’

Using Sprites

Now, let’s get back to our game of Frogger and add Sprites! Use this pen to get started.

Create a Sprite

Crafty.sprite("http://learn43.me/wp-content/uploads/2014/08/everything.png", {Frog:[66,19,12,9]});

Add the Sprite to the Entity

Crafty.e('2D, DOM, Color, Fourway, Collision, Frog')
.attr({x: 250, y: 300, w: 12, h: 9})
.fourway(3)
.collision();

You should see the Sprite applied to the Frog!

Create a Sprite for the Traffic

Crafty.sprite("http://learn43.me/wp-content/uploads/2014/08/trucks.png", {YellowCar:[5,5,15,15]});

These 4 Numbers represent the Sprite’s  X, Y, Width, and Height.

Add the Sprite to the Traffic Entity

Crafty.e('2D, DOM, Color, Fourway, Collision, YellowCar')
.attr({x:200, y:250, w: 15, h: 15})
.fourway(3)
.collision();

Change the Car Sprite by changing the Coordinates

Each car Sprite has its own coordinates on the Sprite Sheet. For example the coordinate for the second car is about 30, 7.

Use the following guide to change the Sprite for the car entity.

The XY coordinates for each vehicle.

The XY coordinates for each vehicle.

Post-Questions

  • What is a Sprite?
  • What is an Entity?
  • In the line of code that creates the Sprite, What is the URL?
  • How important are X-Y coordinates for making video games?