We the passionate developers usually are open to new languages and technologies, but it is not the same when we talk about the tool to code the programs, like editors and IDEs.

In the Phaser community or the HTML5 community I think the majority of the developers prefer just "plain" editors like Sublime Text, Brackets or online editors, to mention some of them.

In this article I want to show you how you can keep coding in your lovely editor and take advantage of the many Phaser Editor features, specially the assets manager.

In addition you can watch this video.

When you develop your games using text editors the most common way to load the assets is to writing a preload method like this:

this.preload = function () {
    this.load.path = 'assets/';
    this.load.bitmapFont('fat-and-tiny');
    this.load.bitmapFont('interfont');
    this.load.images([ 
        'logo', 'bubble1', 'bubble2', 'fish', 
        'hook', 'undersea', 'worm1', 'worm2', 
        'cave', 'bones', 'back' 
    ]);
};

It is fine when you have few assets in your games or you are writing a lesson or demo but Phaser has another (but not so popular I guess) way to load the assets: a manifest file known as the Asset Pack. It is a JSON file that you load in the preload method and it automatically loads all the assets defined in the file:

this.preload = function () {
   this.load.pack("level", "assets/pack.json");
};

In Phaser Editor we encourage to use the pack file and we provide a visual editor to manage the assets. Because it follows all Phaser standards (no extra plugins) this visual tool is something you can use very well and at the same time you can keep coding in an external editor like Sublime Text.

Linking with Phaser Editor

So let's say this is the Sublime Text project of your game:

Sublime Text Project structure

As you can see the images and fonts files are inside the assets folder so this is the folder we should link to Phaser Editor.

To do this we open Phaser Editor and create a new project. Just select the Empty template because we really don't need the code generated by Phaser Editor, and gives a name to the project, like TheGameAssets. What we need is just to keep the folder structure of the project, so we delete all the files and keep the Design and WebContent folder.

Remember the Design folder is where we can put the extra files, those files we use to create the art of the game but they are not part of the game itself, like Inkscape SVG files, Illustrator projects, etc... The WebContent folder is where we place the files that are part of the game, like those of the assets folder.

Phaser Editor empty project

Now we have an empty Phaser Editor project. To link it with the the Sunlime Text project is very simple, we just have to create an assets folder that is a soft link to the assets folder of the Sublime Text project:

Right click on the WebContent folder and select the New > Folder wizard:

Select New Folder wizard

In the Folder wizard, click on the Advanced button to show the extra options. From the list of options select Link to alternate location (Linked Foler) and put the absolute path to the assets folder of your game, then click Finish and the link is created.

Link folder in Folder wizard

The Phaser Editor project now has an assets folder that is a link to the real folder. You can look the images and fonts below that link.

Phaser Editor project linked with the game assets

Create the asset pack

Now you are ready to create the asset pack file just like you used to do. In few words, you right click on the assets folder and select the New > Asset Pack File wizard. It opens the Asset Pack dialog so put the name of the file, like pack and press Finish. The pack file is created and an specialized editor is opened, so you can start adding the assets to the pack. To know more about how this pack editor works read the Asset Manager (the pack file) section of the Quick Start guide.

Back to Sublime Text and code the game

Now that you created the asset pack file (pack.json) you can return to Sublime Text and continue coding the game. Look in the assets folder you should find the pack.json file generated by Phaser Editor.

So next time you need to load new assets or modify one of the current assets, you switch to the Phaser Editor window and do the modifications. Both Phaser Editor and Sublime Text detect the changes of the project files and refresh the UI to reflect the modifications.

Bottom line

To finish, you can take a look to this video, there we show step by step all that we explained in this article. In addition it shows how you can take advantage of other Phaser Editor tools like the texture atlas generator. Remember you also can use the other tools like the PNG optimizer, the preview windows and the audio sprites editor.