Although the engine is the crucial component, the editor is an essential addition to it. The editor is responsible for generating the file which contains all the information about your game, the so called game file.

The editor is composed by a couple of movable (sub)windows that you can attach to the main window. These (sub)windows can be moved around the main window or removed (hidden) from it.
If you close any of the (sub)windows by accident, you can always bring them back by going to the View menu and checking the one you want to view again.

Scene view

Here you'll be able to see and manage all the {objects} in the {scene} selected in the {Scenes' window}.
Some {actions} have an effect on the {scene}, so you'll be able to see a (temporary) change as long as the action is selected.

Scenes' window

This window is responsible for managing your {scenes}. It shows you a list of items, each one representing a {scene}. These items can be removed and reordered using the respective buttons above.
It should be noted that when selecting a different {scene}, the {Scene View}, {Actions' Window} and the {Properties' Editor} will change aswell.

Resources' window

This window lets you create {resources} that afterwards can be deployed to a {scene}.
You can choose any of the {resources} that are available for creation under the tab New Resource and after double-clicking it, it should switch to the tab Resources and select the resource you just created. Before adding it to a {scene} with a double-click, you can edit the {resource} using the right click menu and choosing the Edit option.
When you add a resource to a {scene}, the {scene} gets a copy of the resource and not the resource itself. So if you edit objects on the {scene}, the {resources} will stay the same.

Properties' Editor window

The Properties' Editor allows you to modify certain properties of the selected element. The selected elements can be either {scenes}, {objects} or {actions}.

Action Catalog window

This is just a simple window that allows you to create {actions} and automatically append them to the current {scene}.

Actions' window

This is the place to manage the {actions} of the currently selected {scene}. To create new {actions}, use the action catalog window.
In here you can use the traditional {context menu} with copy, cut and paste. To move {actions} around you can use the drag-n-drop feature to drop the {actions} where you want them.
You can also delete {actions} by using the {context menu} or pressing the delete key from your keyboard.

Belle's engine uses the common web technologies, like {HTML}(5), {CSS} and {Javascript}. This doesn't mean it's required to have knowledge of these technologies to get anything, simple or complex, running. That's why the editor was also developed, so it will do some technical work for you.
For now the engine basically just runs the game like it was defined in the editor and doesn't provide any kind of in-game configuration. So there's no pause screen and no save game functionality yet.
You can use the engine with any popular modern browser and since version 0.3 older browsers are also supported (including Internet Explorer 7 and 8). However using older browsers may limit your game's experience and some features might not be available.

Fonts

Fonts are a delicate issue since font support varies from browser to browser and from system to system. There are two types of fonts you can rely on: system fonts and custom fonts.

System fonts are fonts already available in the system running the game and you just need to write their names in order to use them. However you can probably imagine that not all systems have the same fonts installed, so relying on system fonts is not very safe. In case the browser can't find the (system) font you specified, it should always fallback to a supported font, but that will make your game look different in different systems.
Also note that if you're streaming a game, the behaviour is exactly the same, because the browser loads the fonts from the system where it is installed.

The other alternative is custom fonts. This is the safest way if you want to make sure the text in your game will have the exact appearence you pretend. However there are still some aspects to be aware of.
The most important aspect is the font support. Most modern browsers support TrueType fonts (*.ttf), but some older ones, like Internet Explorer 7 and 8, support only other font formats. That said, if you want to support as many browsers as possible, you'll have to provide at least TrueType, Embedded OpenType (for Internet Explorer 7 and 8) and svg fonts (for iOS Safari versions prior to 4.2).
Please check here, here and here for more information on which browser supports what.

Audio

Like fonts, audio may also be problematic since audio support varies from browser to browser, so different browsers support different audio formats (e.g. mp3, ogg vorbis, etc). You can check here to know which browsers support what.
You have the following formats available:

• {Vorbis} (used with .ogg or .webm files)
• {MP3} (used with .mp3 files)
• {PCM} (used with .wav files)

The recommended audio format would be Ogg Vorbis (or WebM Vorbis) because it's patent-free, royality-free and has a similar or better quality per size than the MP3 format. The MP3 format on the other hand it's a patented format and may require payment of a fee in commercial games. Unfortunatly if you want to support as many browsers as possible you'll have to supply at least MP3 and Ogg/WebM Vorbis for each sound file you use. Alternatively you can use WAV and that will work in all major modern browsers except for Internet Explorer (which is odd since Microsoft developed WAV). However although the WAV format will have better quality (by not compressing the audio) it will also have a bigger size.

Video

Video is not yet supported, but it will be in future versions. Just like the audio, video support also varies from browser to browser. You can check here to know which browsers support what.
The main video formats supported on the web are the following:

• {H.264} (usually used with .mp4 files)
• {VP8} (usually used with .webm files)
• {Theora} (usually used with .ogg files)

The H.264 is for video what the MP3 is for audio, it's a patented format and may require payment of fees in commercial games. The other two (VP8 and Theora), on the other hand, are patent-free and royality-free formats. VP8 is especially good for the web because of it's quality per size.
Unfortunatly, if you want to support as many browsers as possible you'll have to provide both MP4 (with H264) and WebM (with VP8 or Theora) for each video you use.