Tutorial 2: The Scene Editor
This is the second tutorial showing how to create HTML5 games with WiMi5.
The Scene Editor View
As we explained in Tutorial 1, the Scene Editor desktop is one of the two main views of the WiMi5 Creation Tool. Here you will learn all about the panels located in the Scene Editor View.
In this panel you can create and manage the Scenes and Layers you need for your project. To create game objects in the selected layer of the Asset Manager, you have to drag and drop your image resources from the Images panel to the Scene View. Doing that you will see new object instances in the Asset Manager tree.
By clicking on the three dots icon located in every element you can make certain operations over it as delete it, clone it or create other child elements (new layers, empty 2D objects or texts, depending on the element type this operation applies to). You can also block the element and it’s children edition using the lock button and hide them in the scene view using the eye icon.
It is possible to move the layers and change their positions by dragging and dropping them. For arranging layers you should know that the bottom layer correspond to the top position in the Scene View. So if you want to bring an image to front in the Scene View you should have its object layer in the bottom of the Asset Manager.
In this panel you can drag and drop your graphical resources in order to create your game scene. You can manually move, resize or rotate any of them so that you compose a great game scene. If you want to change a game element with more precision you can always use the Properties panel to modify manually its property values. When any scene element is selected, you can delete or clone it by pressing the right mouse button over it. Located at the panel’s top-left corner there is a tool for setting a reference grid witch may help you for positioning the scene objects easily.
This panel serves to upload images or sounds to your WiMi5 cloud storage space. To do that, use the button on the bottom right corner of the panel or drag them from your file system over the editor window. A pop-up window showing your available image and audio resources will be shown. You do not have any limitations regarding file extensions for your images or sounds. Just keep in mind the specific file extensions that the browsers are supporting. You currently have a limitation of 100 MB in your WiMi5 cloud storage space.
Using this panel you can upload images and sounds to your cloud storage and arrange them in folders. These resources will be available for all you projects. In order to use these resources in your project you need to select them and click on the ‘Add to project’ button.
In this panel you can easily create animated objects. You will need a sprite sheet image downloaded into the Images panel. To start creating the sprite just click on the button that is in the right bottom of the panel or drag and drop an image from the images panel into this panel. By doing this you will create a new sprite named as the image with a default animation in it. You can change the sprite’s name double clicking on it. The 3 dots button in the element allows you to delete and clone the sprite or to create new animations in it. After creating the sprite you can configure different sprite’s properties in the Properties panel (image, default animation, etc.). Selecting each animation you may also configure it’s properties if needed (height, width, fps, frame number, etc.) in the Properties panel.
With this panel you can configure all the options of your graphic resources located in the Scene View panel. You can adjust the settings for x or y position, the scale, visibility, alpha, etc. You can also define some of your layers features as visibility or alpha. Finally, you can also manage the labels for the several groups of images or animations you want to use.
In this panel you create and manage labels. With labels you can group a set of resources and use this group for any purpose. For example you have a group of Blackboxes for using objects depending on their labels.
Back to Help11/02/2014 / 5 Comments