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 its
APIs 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 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 on an emoji it is copied into the clipboard and you can
paste it into the code editor.
Example of displaying an emoji code
1
display.emoji("👽")
Try selecting an emoji from the emoji library and paste into the code
display.emoji("{HERE}").
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,
green and blue (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. Navigating 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.