Space Invaders – 3D Pixel Art

space-invaders-pixel-artIn this blog post we will use Glowscript to create a 3D animation of a space invader.

2D Graphics used in retro arcade games consist of pixels. A 2D graphic can be described as a grid of pixels of different colours.
space-invaders-pixels

In programming we can use a 2D array data structure to represent a graphic. In Python, 2D arrays are implemented using a list of lists.

In our code (see below) we have declared a 2D array called pixels to store the value of each pixel used to represent one of the space invaders.

pixels   =   [[0,0,1,0,0,0,0,0,1,0,0]]
pixels.append([0,0,0,1,0,0,0,1,0,0,0])
pixels.append([0,0,1,1,1,1,1,1,1,0,0])
pixels.append([0,1,1,0,1,1,1,0,1,1,0])
pixels.append([1,1,1,1,1,1,1,1,1,1,1])
pixels.append([1,0,1,1,1,1,1,1,1,0,1])
pixels.append([1,0,1,0,0,0,0,0,1,0,1])
pixels.append([0,0,0,1,1,0,1,1,0,0,0])

Using a 2 nested loops we then looped through each row and each column of this array to retrieve the value of each pixel in order to create the cubes needed to create a 3D model of a space invader.

We then create a compound object to join these cubes together in a single object. Finally using an infinite while loop we animate/rotate our invader around itself.

Here is our 3D animation: (Use Google Chrome to preview this animation)


Right Click on the animation to change the view point (rotate camera angle).

Find out more…


To learn more about all the instructions you can use in GlowScript/VPython, use this on-line documentation.

Your task:


space-invaders
Create and animate all the different Space Invaders.

From 2D to 3D: Crossy Road Chicken


This technique of creating 2D graphics can also be used for 3D graphics. In this case a 3D array is used to store the pixels alongside 3 dimensions: x, y and z.

Let’s look at the code below used to create a 3D model of the chicken from the Crossy Road game:
crossy-road-chicken

Check in the code below to see how a list of lists of lists is used in Python to create a 3D array.

Also look at how, using 3 nested loops we can iterate through each “pixel” of the 3D array.

We have also used a 1D array called palette to store all the colours to be used in our 3D model.

Can you think of other games that might use 3D arrays?
mine-craft-block

Did you like this challenge?

Click on a star to rate it!

Average rating 3.3 / 5. Vote count: 13

No votes so far! Be the first to rate this post.

As you found this challenge interesting...

Follow us on social media!

Tagged with: , , , , ,