At last we can begin working !

But these previous pieces of information will be precious for a better understanding in the next steps ( yes, they will ! )

If you have impatiently launched your editor waiting for this, you may have noticed the Entities menu :tuto_menu_entities

There you have a list of all types of entity you can create. They are basically extended from Phaser, as explained above, so you may recognize them. Let’s add a sprite! It will be create at the center of your editor camera.

You should see this : none

Yup, that is your sprite ! Well, it will have no texture in the game yet. For that you’ll have to load an image first.

So let’s go to “Assets > Images”. You should now see this: tuto_images

Remember the “/images” folder in the “/assets”? All the pictures you have put in will be listed here, so that you can load them separately. Their names follow the hierarchy of the folders in your project from “/images”.

For example, the dude sprite is located in “/images/example/dude.png”. So its name is example-dude. This is a quick way to sort your images.

The file “dude.png” is actually a spritesheet, containing 9 frames sized 32*48 px. We need to inform this frame size before we load our image. Type the value then click “Load”. It should turn red and say “Unload”, meaning the loading is successful.

Close this window, and we are back to the editor. Then click on the “attributes” panel to open/close it. It should display a series of tabs : General | Display | Physics | Behaviours

If you see the “No entity selected” message above these tabs, it means you didn’t select your sprite ( just click on it ).

The Display tab is the one of interest for us. The Image field lets you select an image for your sprite. You can see that only the “example-dude” is available here… because we only loaded this one !

Be sure to click “Apply” to see the effect ! 

You can even change the frame of your sprite if you want to. tuto_first_sprite