Learning the basics

Getting to know the interface

The Firebox framework is written in JavaScript and runs in the browser.
Its a programming interface for the HTML Canvas Element. The HTML Canvas Element
is a HTML Element which lets the programmer create drawings in the HTML
document. Drawings in the canvas are written in JavaScript. Firebox tries to
make coding as simple as possible and yet preserve a lot of power for
creativity. The goal is to keep the amount of code as small as possible and yet
be powerful enough to make cool projects. In this chapter we will go through the
key concepts and the Firebox interface which is where we will create Firebox apps.
Before we dive into the programming we can look into the Firebox interface.

Getting started

To get access to the Firebox editor and start coding apps, you can simply go to
firebox.no and you will see the editor where Firebox
scripts are written and Firebox apps are created. If you want to save you app and
continue coding later you will have to click the save button and follow the sign
in or sign up instructions.
You can also go to Sign In or Create Account and when logged in continue or save
your work.

Figure 1-1

The Firebox editor interface

  • Editor: This is where the Firebox app scripts will be written

  • Display: This is where the display elements will show when they are active.

  • Tab area
    • Console: error messages, output messages through print(msg: String) will
      appear in this area.
    • Emojis: The emoji menu gives a quick access to available emojis to use
    • Sounds: A list of selected sounds
    • Settings: Firebox app settings
  • Menu bar: The menu is where you can run the app, select code snippets,
    select colors and save the app

Figure 1-2

Lets take a closer look at each section of the editor.

Editor

The code editor is where you write your scripts of code to create your app. The
available Firebox Application Programming Interface (API) is
documented in the Firebox documentation available from the main menu above the
code editor.

The Firebox code library includes multiple categories of code to use. Each
category has its own functionality and use cases. Here are a brief explanation
of the code libraries:

  • display.*
    The display.* code is used when objects called Element should be placed
    in the display for drawing. The elements can be primitives like rectangle,
    circle, ellipse, line and polygon. Or it can be shapes like cloud, star or
    heart. There is even an Element of the type emoji.
  • random.*
    The random.* code is used when you need some randomness in your app.
    Examples of random functionality are number range, position in display and
    element size.
  • timer.*
    The timer.* code is used when you need timed events in your app. Example of
    timer events that can be used are timer every millisecond, timer repeat number
    of times and timer after a given millisecond pause.
  • color.*
    The color.* code is used to define colors to use in your app. Elements can
    be given a color and border color. The colors can be defined with red, green
    and blue or hue, saturation and brightness.
  • physics.*
    The physics.* code is used when you want elements to get physics
    abilities like mass, velocity, etc. And when you want to apply force or
    impulse to the elements you use functionality in the physics library.
  • input.*
    The input.* code is used when you want to handle keyboard, mouse or touch
    inputs. This code is used to control the movement of elements.
  • world.*
    The world.* code is used when you want to define how big the Firebox world
    should be. The world is navigated with a camera system which can follow other
    elements inside the world.
  • camera.*
    The camera.* code is used the navigate the world which is defined in the
    world code library.
  • Element
    The Element code is a type in the Firebox which all display.* methods
    return. When you call on the display methods you get an element which you can
    interact with through the Element API. Methods like
    #pointTo(other: Element), #move(distance: Number) and the libraries
    mentioned above are methods you will get familiar with later in this book.

Display

The display is like a painters canvas. Where you can see all the visual elements
of your app. Programs in Firebox is called apps. An app consists of scripts
which you write with code in the code editor and using the Element API. When you
run an app the result is displayed in the display section. The display is 960
points wide in the horizontal direction, or X axis and 640 points high in the
vertical direction, or Y axis. When you want to position an element in the
display you use a type called Point which holds the X and Y values, or
coordinates of an Element.

When you want to run an app in the display you need to enter valid code into the
code editor and press the green play button above the code editor. The script
is validated and if its valid and no errors show up it runs and displays the
output in the display. You can stop the script from running by selecting the
code editor again.

Console

The Console tab is the first tab in the tab area below the display. When you enter
the Firebox editor the Console is filled with an ASCII art representation of
the string “Firebox”. You can write messages to the Console with
print(msg: String) statements. Any error encountered in the running of the app
scripts are also outputted in this area.

Emojis

The Emojis tab is the second tab in the tab area below the display. There you
can find an emoji to use. They er divided into the following categories:

  • Smileys & Emotion
  • People & Body
  • Component
  • Animals & Nature
  • Food & Drink
  • Travel & Places
  • Activities
  • Objects
  • Symbols
  • Flags

When you click an emoji in a category the the emoji will be copied into the
clipboard and the emoji can be pasted into the code editor.

Example of usage of an emoji copied from the emoji selection.

1

display.emoji("😀")

Summary

The Firebox functionality described in this chapter is what this book is all
about and will be explained in greater details in the next chapters when you
start writing your own code and apps. In this chapter we have gone through the
following functionality of the Firebox editor interface and code libraries:

  • Code editor
  • Code libraries to use
  • Tab area
    • Console
    • Emoji menu
  • The display
  • Menu

In the next chapter we will start writing code and look at the Element type.
After that you will have the basics knowledge about Firebox and we will start
writing simple games.

Previous
Intro Next
Meet the Element