Tutorial - Editor Window

The Editor

The editor is composed of a main window where you can type your code, a bottom/left project list panel, to create and open projects, a top/left current project panel, to edit project, add scenes to project, add sources files to scene, a bottom bar with tools/commands and an hidden right-hand menu.
Each project is composed of one or more scenes and each scene is composed of one or more source files.
A scene is a part of a project that is displayed to user. Typical project could have for example a menu scene, a game scene that is called repeatedly with different datas for each level, an hi-score scene etc...
Scenes are managed by at least one source basic file, although you can organize the code of each scene in multiples sources.
Also added to the project are sprite packages, sound packages and plugins.
To load sprites, sounds or executes plugins code within a scene of a project, those plugins/packages must have imported into the project.


Sprite Basic Editor

Project List Panel

On clicking on the '+' sign, you are able to create a new project (disabled for a guest account).
You'll find here a list of the projects attached to your account and by clicking on a project, you will open it in the current project panel.

Project List Panel
Current Project Panel

Current Project Panel

On this panel, you will find the current project and the packages imported in the project. To import a package in a project, you will use either the right hand menu (see below).
Project are organized as a 3 levels tree. At the root of a project, you'll find the project name. As children of a project, you'll find the scenes attached to the project. As children of scenes, you'll find the sources files executed in each scene.
You can double click on project level to show/hide scenes and double click on scenes to show/hide source files.

Project Contextual menus

By double clicking on project, scene or source file (or making a long press on mobile application), you will open their respective contextual menus
You will be able to rename, delete (can't be undone!), copy/paste project elements
You'll also be able to debug or run a particular scene within the project, as well as setting the main scene of the project. The main scene is the one that is launched first when running/debugging a project. To launch other scenes, you will have to load them explicetely from code.


Sprite Basic IDE    Sprite Basic IDE    Sprite Basic IDE

By hoovering the middle/right 3 lines button, you will display the right hand side menu.
You'll be able to create/edit/import in your project personal sprites and sound packages. You'll also be able to browse/impot in your projects community packages provided by Sprite Basic users.
The asset store will allow you to buy or sell (you get 70% of generated revenues, paid monthly by Paypal) packages and projects, as well as getting plugins for, by example, serving ads in your packaged mobile applications or selling in-app purchases.
From there you'll be able to export/publish project that can be packaged freely into applications for iOS, Android, Windows Phone, Windows 10, Chrome OS, Web App using Intel XDK
Applications created with Sprite Basic are entirely yours and you are free to distribute/sell them without any fees/royalties from our side.
Note: at the time of writing some features like the Asset Store and Project Publishing are still under heavy development and will be released in the coming weeks.

Right Side Menu

Sprite Basic Menu

The Bottom Bar

Bottom bar allow you to debug or run a project. Debugging means running but in addition, opening a logging window allowing your program to display log infos while running, which is very useful for debugging. You can place logs anywhere in your program, if you choose to run instead of debugging a project, log instructions will be simply ignored by compiler, so wont have any cost on speed of execution. Same apply for packaged projects.
You'll also find tools for splitting editor window (useful to compare files), a color picker that allows you to easily choose colors and get the result under the form of hexadecimal value or rgb() function.
You are also able to do search/replace within sources files as well as toggling comments of selected lines.


Sprite Basic Tool Bar