logologologologo
  • home
  • learn to code
    • Space Invaders – Beginner’s Course
    • Asteroids – Beginner’s Level 2
    • Snake – a Beginner’s Challenge
  • learn to make
    • Arduino Tutorials
  • blog
    • Computer Science
    • Coding
      • Collision Detection
    • Retro Gaming
    • Computer Games for Vision Therapy
  • contact me
Learn to Code Space Invaders – Lesson 25 – Level Up!
17th November 2019
Simulating velocities with vectors code tutorial
Learn to Code Asteroids – Lesson 2 – Moving With Vectors
19th December 2019
Published by Bob at 18th December 2019
Categories
  • Learn to Code Asteroids
Tags
Drawing Vector Shapes Code Tutorial

Asteroids Lesson 1 – Drawing Vector Shapes

Asteroids uses a very different way of drawing the game objects on the screen. Instead of using bitmap sprites, each of the game objects is drawn as a series of lines. This is called vector graphics.

I’ve purposely chosen a game based on vector graphics to give us an extra challenge in developing our software. We’ll have to work out a way to model, draw and move our player ship, asteroids and any other game items in our code without the luxury of any built-in functions that will render or rotate or animate them for us.

In this lesson we’ll design our data objects so we can model vector shapes as a series of points. We’ll then write some code that will turn this point information into a series of lines that we can then draw on the screen. At this point will be able to define a shape such as a player ship and render it at any position on the screen. But we also need to be able to rotate the ship so that it can point in any direction.

To rotate our shape will need to use a little bit of mathematics to give us an equation that lets us take the coordinates of a point and rotate them by a known angle around the origin. The equation will be using is shown in the diagram below.

rotating a point around the origin

To fit this into our code will need to write a special function that accepts two parameters. One will be the coordinates of the point we want to rotate. The other will be the angle we need to rotate it by. This function will then return us an object containing the new X and Y coordinates of our rotated point.

Once we got this code running we’ll test it by adding the left and right rotation keys into our code and hooking them up so that we can press them to rotate the vector graphic of our player ship.

As we go through the lesson I’ll explain the theory behind each part of our code but then give you the chance to write your own solution. Simply pause the video, have a go for yourself and then restart the video so they can take you through my solution on screen.

All the source code for the finished version of this lesson is available below.

Code for Lesson 1

Download the code for this lesson
Share
2
Bob
Bob

Related posts

Lesson 9
11th April 2020

Learn to Code Asteroids – Lesson 11 – Alien Missiles Incoming


Read more
Lesson 9
29th March 2020

Learn to Code Asteroids – Lesson 10 – Alien Ships Sighted


Read more
Lesson 9
5th February 2020

Learn to Code Asteroids – Lesson 9 – Speeding Up The Code


Read more

Comments are closed.

  • Privacy Policy
  • Contact Me
© 2020 Bytes N Bits
We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.Ok