JoBase Home Examples Reference

Drawing Things

The last example explained how to render text on the screen. In a proper game, though, we are likely to want to add more than plain text. In the example below, we will start by drawing a rectangle.

from JoBase import *

box = Rectangle()

def loop():
    box.draw()

run()
            

You should now see a default black square on the screen. We can turn it into a rectangle by changing its size.

from JoBase import *

box = Rectangle(width = 100, height = 30)

def loop():
    box.draw()
            

We can also position the rectangle.

from JoBase import *

box = Rectangle(x = -150, y = 0, width = 100, height = 30)

def loop():
    box.draw()
            

As you can see, the code is getting a bit long. We can shorten it by getting rid of the keyword labels.

from JoBase import *

box = Rectangle(-150, 0, 100, 30)

def loop():
    box.draw()
            

In the example above, we removed the word labels to shorten the code. Remember that when removing the labels, you need to keep the numbers in the right order. When creating rectangles, the numbers go in the order of x, y, width, height, angle and color.

Now let's rotate our rectangle with the angle attribute.

from JoBase import *

box = Rectangle(-150, 0, 100, 30, 50)

def loop():
    box.draw()
            

Let's add a circle.

from JoBase import *

box = Rectangle(-150, 0, 100, 30, 50)
circle = Circle(diameter = 80, color = GOLD)

def loop():
    box.draw()
    circle.draw()

run()
            

This will draw a circle in the middle of the screen. Like before we can position our circle and remove the labels.

from JoBase import *

box = Rectangle(-150, 0, 100, 30, 50)
circle = Circle(150, 0, 80, GOLD)

def loop():
    box.draw()
    circle.draw()

run()
            

Remember the attributes of a circle go in the order of x, y, diameter and color.

We can make our demo even more exciting by inventing our own custom shapes.

box = Rectangle(-150, 0, 100, 30, 50)
circle = Circle(150, 0, 80, GOLD)

shape = Shape(((-50, -20), (0, 50), (20, 0)), color = LIGHT_BLUE)

def loop():
    box.draw()
    circle.draw()
    shape.draw()

run()
            

In the code above, we create our own shape by defining a set of three positions. This makes a blue triangle in the middle of the screen. The great thing about custom shapes is that you can make them as complex as you like.

from JoBase import *

box = Rectangle(-150, 0, 100, 30, 50)
circle = Circle(150, 0, 80, GOLD)

shape = Shape((
    (0, 50), (15, 15),
    (50, 0), (15, -15),
    (0, -50), (-15, -15),
    (-50, 0), (-15, 15)), color = LIGHT_BLUE)

def loop():
    box.draw()
    circle.draw()
    shape.draw()

run()
            

Now you can draw things in JoBase! Experiment with different combinations and add them to your next game.