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 save your work.

Figure 1-1

The Firebox editor interface

  • Code 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
    • Docs: The Firebox documentation

  • 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.

Code editor

The code editor is where you write your scripts of code to create your app. The available Firebox Framework 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 and heart. There is event 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 code. 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 code for using the emoji will be copied into the pasteboard and the code can be pasted into the code editor.

Example of code for an emoji copied from the emoji selection.

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.