Meet the Element

In chapter one we looked at the Firebox interface and some of its features. In this chapter we take a closer look at the Element type and use some of the libraries to change its properties. The Firebox Element is the fundamental building block in the Firebox display. They follow the code that you provide in the code editor. In the section that follows you will learn how to add an Element and change the background of the Firebox display with the Firebox library. You will also learn how to change and update the the Element with your own code.

Elements

Firebox Elements are objects that are displayed in Firebox display. You perform actions on Elements by calling methods through the code you write. Everything you want an Element to do you will have to tell it to do through calling methods in code. You can read about the methods to call in the Firebox documentation available by clicking on the Docs button in the Firebox interface and find the Element type in the types section. Or you can follow the link to the documentation.

Element types

There are multiple Element types to use. To see which are available see the display.* section of the documentation. Some of the Element types include:

  • Rectangle
  • Circle
  • Polygon
  • Line
  • Ellipse

Lets try to draw some elements and see how they look. Visit the Firebox Editor by going to firebox.no.

Here is an example of a couple of Element types and how to draw them.

1
2
3
4
5

display.rect(100, 100, 100, 100)
display.circle(200, 100, 50)
display.polygon(300, 100, 50, 5)
display.line(400, 100, 400, 200)
display.ellipse(100, 200, 40, 60)

Try entering one or multiple of the lines of code to display an elements. Click the green play button to run the code.

Emojis

In Firebox you can also display emojis. Emojis is a special kind of Element and there is a dedicated emoji tab in the tab section of the editor. Located below the display the emoji library is were you can scroll through all the available emojis. If you click one the code for displaying that emoji is copied into the clipboard and you can paste the code into the code editor.

Example of copied emoji code

1

display.emoji("👽")

Try selecting an emoji from the emoji library and paste the code into the editor.

Shapes

Firebox also have some base shapes which can be used to draw basic shapes to the display. Some of these shapes include: - star - heart - cloud

Here is examples of code to display basic shapes

1
2
3

display.star(100, 100, 40)
display.heart(200, 200, 40)
display.cloud(300, 300, 40)

Try entering one or multiple of the lines of code to display a shape. Click the green play button to run the code. If you remove a line of code and then run the app again the element is removed from the display.

Colors

The Firebox Elements can have different colors by setting the color and borderColor properties.

Colors can be created with the hue, saturation and brightness (HSB) or red, blue and green (RGB). All examples in this book use HSB colors. How to use RGB colors can be found in the Firebox documentation.

Here is an example of setting the color, borderColor and borderWidth of a rectangle.

1
2
3
4
5

elem = display.rect(100, 100, 100, 100)

elem.color = color.hsb(119, 75, 25)
elem.borderColor = color.hsb(119, 55, 95)
elem.borderWidth = 15

Setting the color property of the display sets the background color.

Example of setting the background color

1

display.color = color.hsb(197, 42, 92)

Its possible to update the background from anything you like in you're code. Here is an example of a rotating element were we set the color of the background based on the elements angle.

1
2
3
4
5
6
7
8
9

display.color = color.hsb(0, 42, 92)

elem = display.emoji("👽")

update(() => {
  elem.rotate(1)

  display.color.hue = elem.angle
})

Moving an Element

An element can be moved by calling the #move method.

Example of moving an element

1
2
3

elem = display.emoji("👽")

elem.move(5)

Putting the move call inside an update loop makes it continue to move.

Example of moving an element inside an update loop

1
2
3
4
5

elem = display.emoji("👽")

update(() => {
  elem.move(5)
})

The element quickly ends up outside of the display. You can check if the element is on the edge of the screen by calling the #onEdge method. If true we can move the element to the other side.

Example of checking if element is on the edge and moving it

1
2
3
4
5
6
7
8
9

elem = display.emoji("👽")

update(() => {
  elem.move(5)

  if (elem.onEdge()) {
    elem.goTo(75, 320)
  }
})

There are more than one way of moving and instructing the elements to get the same result. Learning how to navigate the documentation will help you find new ways of instructing the elements.

Example of moving with rotation and color change

1
2
3
4
5
6
7
8
9
10
11
12
13
14

display.color = color.hsb(197, 42, 92)

elem = display.emoji("👽")

update(() => {
  elem.rotate(2)
  elem.x += 5 // elem.x = elem.x + 5

  if (elem.onEdge()) {
    elem.x = 37.5
  }

  display.color.hue = elem.angle
})

Lets draw something more complicated

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

background(color.white)

fill(color.black)
stroke(color.black)

display.circle(100, 230, 10)
display.circle(200, 230, 10)
display.line(100, 310, 200, 310)

fill(color.white)

display.rect(142, 318, 15, 10)
display.rect(158, 318, 15, 10)
display.circle(150, 260, 130)
display.ellipse(80, 110, 40, 100)
display.ellipse(220, 110, 40, 100)

Summary

In this chapter, you learned about the fundamental building block in Firebox: the Element. From the code you write the elements receive instructions of what to do. We looked at how we can set the color and move elements around.

There are many types of elements and most of them can have their color set which distinguish them from each other.

We also looked at how to set the background color and that we can change the background color based on another elements properties.

After looking at the interface, elements and background in this chapter you now have the basic knowledge you need to start creating Firebox games which we will start looking at in the next chapter.