The Code Editor is, as the name implies, where you do all of your coding!

On the left of the Editor are the files within your project. Click on the 'scenes' folder to expand it. Double-click any file in this file list to open it. At the top of the file list are icons to create a new file, create a new folder and to collapse all open sub-folders.

For now, let's take a look at the code. The default project consists of a single Phaser Scene file called Start.js. Make sure the 'scenes' folder is expanded by clicking it, then double-click the Start.js file to open it.

In here you'll find a small sample that consists of a background, bouncing logo and animated sprite. Want to see it in action? Just click on the 'Play' icon in the top-middle of the Editor toolbar.

This will open the Game View window, with the sample project seen above running within it. It will also open the Dev Tools window, which can be used to debug your game. If you're on a Mac the Dev Tools window may open inside of the game, making your game appear really tiny. You can 'undock' it by pressing ⇧ ⌘ D (see this page for a full list of Web Inspector keyboard short-cuts).

So we've got our sample running! Let's modify it a little. You can leave the game running and return to the Editor window. Find the code that says:

targets: logo,

It should be on line 35. Now, edit it so that instead of the Logo bouncing up and down, we'll make the ship move instead. Change the code to:

targets: ship,

Press CMD+S on Mac, or CTRL+S on Windows to save your change and the Game View will immediately refresh, only this time the logo will be static and the ship will be bobbing up and down. Let's do one final tweak. Find the code in the update method that scrolls the background:

this.background.tilePositionX += 2;

And change that value from 2 to something else! You could try 32 to make it scroll at a really fast rate. Or try -8 to have it scroll in the opposite direction. The name of the game is to just experiment and keep pressing CTRL+S to save and instantly see the results.

Of course, it's helpful to know what code you can use in Phaser. So to help with that, you can click the Documentation icon on the toolbar to open the full Phaser docs in your default browser. We've also configured the Editor so it will give you code-completion and code-insight for the whole of the Phaser API. You can explore this for yourself by putting the cursor into the editor, within the create function and type in ship. and you'll see all of the methods and properties that the Ship sprite has available to it.

We've hundreds of tutorials on our site you can learn from and thousands of code examples too! Finally, let's explore the Media Browser.