Tutorial 3: The Logic Editor
The Logic Editor View
When you open or create a project from the Dashboard you will enter the Logic Editor desktop. In this workspace layout you can create the logic of your game. This working area is the core of your HTML5 games, here you will be able to develop all the actions and behaviors for the elements of your game.
You will have several panels containing the features that allow you to create and manage the scripts, behaviors and actions of your game. Let´s have a look to these panels:
In this panel you will be able to create all the logic scripts for your game. Here you can drag and drop Blackboxes containing the actions, rules and behaviors for your game.
You can browse through the scripts by double clicking inside or outside them in order to enter the script to see its Blackboxes or going to the upper level. You can also drag and drop the Connectors, Parameters and Properties that you will need to create the scripts filling the Blackboxes needed parameters and connecting them with others.
You have more detailed information about the Visual Scripting in the Logic Chart and the use of Blackboxes in the Tutorial 5. You can also check the technical documentation of the Blackboxes in this page.
In the Logic Chart you will find several Buttons, tabs and panels. We will analyze the most important ones.
Properties, Connectors, Blackboxes and Parameters Tabs.
These tabs show the information and resources needed for creating the logic of your HTML5 game. Depending on the selected tab you will find a different kind of information. You can turn on the show/hide Tab button to fix the visibility of these tabs, or, if you turn it off, the tabs will be shown and hidden depending of the position of your mouse.
This tab shows the properties of the selected item in the Logic Chart. For instance, if you select a MouseListener Blackbox you will see the properties of this Blackbox (name and details of the mouse buttons or features). If you select a String Parameter you will see this Parameter properties, as name, value, type, instances where it is used, etc. You can fill the value data for Parameters in this tab.
Connectors are events that you can use for connecting scripts. When you drag and drop a connector in a script, it is shown in the upper level as an activator or a trigger in the script box depending on nature of the connector. Once a connector is linked, the programming flow will continue to following script. Currently you have 3 types of connectors: onLoaded, OutputConnector and InputConnector, which you can rename.
In these images you can see a sample of connectors (in1 and out2) inside a script and in an upper level.
In this tab you will find all the Blackboxes available for creating the logic of your HTML5 game.
The Blackboxes are grouped in 7 categories. Each of these categories includes the Blackboxes that you can drag from the tab and drop in the Logic Chart panel. The categories are the following:
2D. These Blackboxes are related with the managing of the graphical resources used in your games. You can transform, clone, delete objects, manage texts, scenes, etc.
Audio. With these Blackboxes you can manage your sound resources.
- BasicActions. It contains the ActionOnParam Blackbox, one of the most powerful Blackboxes.
Collections. The Collection Blackboxes manage groups, or collections of parameters. They are usually used for managing arrays.
Devices. These Blackboxes manage the input from several devices, as Mouse, Keyboard or Touchable screens.
Labels. With these Blackboxes you can manage your resources tagged under certain labels. It is a kind of managing resources in a collective way.
Sprite. These are special Blackboxes for managing the Sprites you can create in the Scene Editor View.
- Virtual Goods. They manage the Virtual Goods of the game in order to monetize it.
You can check the technical documentation of Blackboxes to obtain a more detailed information.
From the Parameters tab you can drag any parameter and drop into any Blackbox Output or Input Parameter. You should check before dragging the parameter if the target Blackbox supports the same type of parameter you have selected. If the type of the parameter you are dragging over the target Blackbox input/parameter matches with the required type of the input/output parameter of the Blackbox, the parameter turns yellow and you can drop it.
You can also use collections instead of simple parameters just by dragging the right icon of every parameter.
Shared Parameters Area
If you want to use parameters between several Scripts you can put these parameters in the top area of the Logic Chart. This way you will have these parameters available in other levels of the Logic Chart. You will also see these parameters inside the Blackboxes in the upper levels of your Logic Chart. You can use the E and S buttons located in the left side of this area in order to filter the incoming parameters and the outcoming parameters of the script you are working with.
After explaining in detail the Logic Chart panel we are going back to the main panels in the Logic Editor View.
In the Logic Tree panel you can create the structure for organizing your visual scripts located in the Logic Chart. It is a kind of layer structure that allows you to easily manage the visual scripts you are working with. You can create a new ‘script’ to set up a new group of Blackboxes or create a new ‘Level’ to contain several scripts. It is also a way of managing the scenes or levels or your video game. You can create levels in order to load or unload visual scripts and also the resources (images and sounds) used in these levels.
With this panel you can visualize the structure of your assets (images and sounds, but also the layers and scenes) that you have created in the Scene Editor. From this panel you will be able to drag and drop these assets into the Blackboxes input/output parameters, for example when you need to define 2D Object type parameter in your Blackbox. In this panel you have 2 buttons in the bottom area. The first button allows you to go to the Scene Editor. The second button allows you to upload, download and list your sound resources.
In this panel you can use 2 buttons: play to preview the project and stop to stop the preview. When the preview is running, you will see a green line surrounding the panel, and a purple one when the preview is stopped. You have to stop the preview if you want to change some parameters in your Blackboxes. You have also 2 colored charts in the bottom left corner that shows you the frames per second (purple) and the memory used in the project (red).
Maybe you can confuse this panel with the Scene View from the Scene Editor Area. They are different panels. In this one you can preview the whole game including all scenes and, which is more important, including the visual scripting applied to your graphical and sound resources. On the other hand, the Scene Editor is used for designing and composing your scenes.
Back to Help14/02/2014 / 3 Comments