CM2030 Graphics Programming

Angry Birds Clone

Play Angry Birds Clone


Continue to supporting documentation

The Brief

This project was about implementing an interactive physics simulation, as well as dealing with composite objects, and object constraints that change. The Angry Birds clone was one of four project submitted as the midterm submission to "CM2030 Graphics Programming".

The experience

The angry bird's clone is structured similarly to the origional game of the same name, angry bird's. The user has the goal to knock all the green blocks (pigs) off the screen before the timer runs out. If the user succeeds, the user has won the game. If they don't, the user has lost. To achieve the goal the user is given several tools such as:

  • A red Ball attached to a spring for launching.
  • Veriable speed/direction proppeller for hitting balls.
  • White balls for throwing or being launched with the propeller.
Unlike in the origional application the user can also click and throw green blocks off the screen manually.

Building Blocks

This web application relied on two main JavaScript libraries to construct the functionality of the game. The two libraries were:

  • matter.js
  • p5.js
P5.js was used to create the canvas, where all objects would be drawn. It also handled the processing of the animation environment. Matter.js was the physics engine that handled interactions between objects, and the properties of the world such as, gravity and friction.

For objects within the game to easily interact with each other, an instance of the physics engine was required to be instantiated. 

engine = Engine.create();  // create a matter.js engine
This became the framework for the world properties. It was then required to add all objects to the world before drawing them too the screen. This allowed the engine to understand the shape of the objects, and the expected responses required from collisions. 
	
		//creates a bird object and adds it to the world
		function setupBird()
		{
			var bird = Bodies.circle(mouseX, mouseY, 20, {friction: 0,
				restitution: 0.95 });
			Matter.Body.setMass(bird, bird.mass*10);
			World.add(engine.world, [bird]);
			birds.push(bird);
		}
Because matter.js handled applying forces such as, acceleration, friction, gravity, and collisions. Construction of game mechanics was streamlined, as separate classes describing each game object was no longer required. It was still necessary to construct classes that controlled game play elements, such as the timer element and win/loss rules but by comparison these were far less involved.

Layout/Styling

As this application was primarily a web-based experience, the layout and styling of page elements such as, the canvas; was controlled with CSS 3 styling and HTML 5 layout tags. This allows for a common experience amongst most users of the application.

Tech Stack

JavaScript

Core programming language used in desiging this application.

p5.js

JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else.

matter.js

JavaScript 2D rigid body physics engine for the web

HTML 5

HTML 5 is the standard markup language for documents designed to be displayed in a web browser.

CSS 3

Style sheet language for describing the presentation of documents written in HTML.

Simulation layout

The user is given a basic 2D world with a single ball floating in the air and constrained with a spring, a small motionless propeller, and a tower of green blocks. The floating ball can be drag in any direction to a certain limit. When the ball is released, it will travel in the opposite direction of the drag. If the ball collides with another object on the screen, a collision will occur with a response. After the ball has been fired, a new ball can be spawned by pressing the B key, which spawns a unconstraind ball, or the R key, which spawns a new spring constrained ball, like the initial one. The propeller can be activated with the left and right arrow keys, which dictates the speed the propeller rotates. The more a direction is pressed, the faster the propeller will spin; the propeller will collide with balls and blocks.

User Interaction

The user interacts with the experience by clicking on the different objects in the world with the mouse. All objects can be clicked on with the exception of the propeller, which is controlled with the keyboard.

Conclusion

This project was a way of exploring physics engines and how they can add creative ways to expand an interactive idea. It also served as a way of exploring the limitations of physics engines, such as tunneling. Tunneling is where an object moves too quickly, causing it to appear to pass through other objects without touching them. This occurs because of the draw cycle occuring slower then the calculation of movement, making the updated location be outside the interaction zone. This project was the third of four worked on as the midterm submission for the manditory course Graphics Programming.

Supporting Documentation

Angry Birds Clone Demo Video

Game Demo

Try Angry Birds clone yourself!

Github

Direct link to the github repository containing the submitted code

Back

Top of Page

Next