Setting up Eclipse to work with Phaser (HOW TO)

[ecv]

SUMMARY:

• This post: HOW TO
• 2nd post: Original question that originated this post
• 3rd post: Research log concerning some problems and workarounds pertinent to this how-to

 

THIS HOW-TO IS IN AN UNUSABLE STATE, AND HAS BEEN NOW ABANDONED. SORRY FOR THE NOISE.

 

Okay, so after some hours of research here's what I came up with, in case anyone's interested or as a future reference for myself.

These are the configuration steps to set up a Phaser project in Eclipse Mars.2 (4.5.2). I guess these might change from version to version, but remain essentially similar. You'll need to set up a local web server, but this is beyond the scope of these instructions. In my case I installed a WAMP (Windows-Apache-MySQL-PHP).

1. Head to http://phaser.io/download/stable and click on "clone". In my case this took me to: https://github.com/photonstorm/phaser/tree/v2.4.8

2. Click on "Clone or download". A dialog unfolds with the git repository URL. Copy to clipboard. In my case it was: https://github.com/photonstorm/phaser.git

3. Go to Eclipse and: Window->Perspective->Open perspective->Other->Git->Ok

4. Select to clone a Git repository. Paste in URI field->Next

5. Select All. Theoretically IIUC you should only need the "Master" branch. But I selected all just in case.->Next

6. It will want to clone in some default directory. It's okay like that, just copy the directory path to the clipboard for later.->Finish

7. Go tease you favorite pet/mate while the repository is cloning.

8. Window->Preferences->JavaScript->Include Path->User Libraries->New->Enter "Phaser" as the library name->Add folder->Paste in the "folder" field->Ok

9. Still in Preferences->General->Web Browser->Use external web browser->Select your html5 browser. In my case I left it at "Default system web browser", which is Chrome.

10. Still in Preferences->Server->Runtime Environments->Add->Basic->HTTP Server->Next->Enter your HTTP local server's web directory in the "Publishing Directory" field. In my case this was: "C:\wamp\www"->Finish->Ok

11. Window->Perspective->Open perspective->Other->Web->Ok

12. File->New->Static Web Project->Enter your project's name in the "Project name" field->Select HTTP Server in Target runtime->Finish

13. Right click on your project->Properties->JavaScript->Include Path->Libraries->Add a JavaScript Library->User Library->Select Phaser->Finish->Ok

14. Download https://github.com/photonstorm/phaser/raw/master/resources/tutorials/01%20Getting%20Started/hellophaser.zip or head to http://phaser.io/tutorials/getting-started/part6 and look for the hello phaser example if the previous link didn't work->Unzip in a temporary folder and drag the contents to your project's "WebContent" folder in Eclipse.->Copy files->Ok

15. Right click on WebContent->Import->General->File System->Next->Browse to your git root directory\phaser\build->Select it->Ok->Check phaser.min.js->Finish->Overwrite?:Yes --- OR --- Use your system browser to open the aforementioned directory and drag phaser.min.js to your WebContent on Eclipse and overwrite.

16. Reformat your code from this:

var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update, render: render });

function preload () {
}
function create () {
}
function update () {
}
function render () {
}

to this:

var state = new Phaser.State();
state.preload=preload;
state.create=create;
state.update=update;
state.render=render;

var game = new Phaser.Game(800, 600, Phaser.AUTO, '', state);

function preload () {
}
function create () {
}
function update () {
}
function render () {
}

(More info about this in 3rd post)

17. Right click on your project->Run As->1 Run on Server->Basic->HTTP Server->Next->You might need to change your HTTP Port if your server doesn't default to listening on port 80->Finish

Your project should have opened in your browser.

NOTE:

1. I have no idea if step 14 is correct, or whether you need to include other files in your project's web content directory.

2. If Content Assist (that's what's called the feature I was calling autocomplete) doesn't pop up, hit CTRL+Spacebar. It should work and display Phaser's API documentation.

3. For following new projects you just need to follow steps: 12 to 17, as long as you don't switch your workspace, of course.

4. I will edit this post to reflect changes if you point out any errors in the procedure, etc.

Cheers,
Eneko

P.S.: Setting up IDEs is always a nightmare, isn't it? Unless you got some template...

[ecv]

Original thread topic: "Context help, autocompletion, javadocs, editor?"

 

Hello, 

Very new to Phaser, just fiddled with the online examples and the hello example.

I'd like to use it on Eclipse. Cloned git repository but I don't know what to do next.

Installed WAMP and tried the hello example, used the online examples as a reference and seems to work fine, but I used Notepad++ for editing and AFAIK there's no context help / autocompletion there. Well, there's actually autocompletion for whatever you've written before, but this is not what I'm looking for. I want suggestions when I type a dot, telling me the available methods, etc. and some description.

I'd like to either, preferably, edit from Eclipse, setting up for autocompletion and automatic deployment to the local server, or less preferably, set-up any other editor/IDE with autocompletion. Also, I have no idea what .js files I'm supposed to manually move to the server for deployment in such case, or how to set up a new project base for that matter.

Thanks for any help.

[ecv]

Edit: Content Assist doesn't seem to work with instanced classes, so this was a waste of time and effort. Gotta find me a decent IDE. *shrugs* Being forced to use different IDEs for different stuff is way too uncool. 

 

Update: Actually, it only fails to resolve the appropriate context help for instances when both following circumstances are met:

• When the variable's been assigned in the body of a callback function assigned onto window.onload (or probably inside the body of any callback function being directly defined and asigned).
• When the current function the variable is being accessed from is one of Phaser's state functions passed onto the Phaser's Game constructor (or whatever this is called in JS. I don't suppose there are real classes anyways): preload, create, update, etc.

Therefore, there's no way of accessing an instance of Game, when you need to assign it in the "global scope" of the window.onload callback function in the first place, because you can certainly not assign it in any of Phaser's state functions, the callbacks of which are in turn passed onto the Game constructor, unless you're a master of wormholish time-travel, hehe. Consequently, you can't access any of Game's children properties, like input, etc. Note that this paragraph refers to documentation only, thus where I say "access" I mean access the contextual documentation.

Now it's time to find the culprit and figure out a work around...

BTW, in the meantime I've been trying Visual Studio Code and if setting up Eclipse is hard, I can't even start to imagine how hard could be to set this one up. I mean, you apparently "need" to install several external tools, mostly command line ones to set up different things for your project, etc. This is a no-no for me. I don't want a myriad of tools scattered and cluttering the environment variables (I know it's no problem but I like things NEAT).

 

Update: Neither will it display any context help for any of the standard JS library classes instances accessed in the state functions when instanced/assigned outside. On the other hand, they can be accessed from within any no such function, just like Phaser's. This makes me think there's something Eclipse doesn't like about the way Phaser's state functions are passed onto Phaser's Game constructor. I'll investigate this further.

 

Update: Finally a workaround:

Instancing a State object prior to calling Game constructor and passing the state variable instead of the inline object definition with the state function names, seems to be something both Eclipse and Phaser like. Therefore, you'd need to transform the usual:

var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update, render: render });

function preload () {
}
function create () {
}
function update () {
}
function render () {
}

into this:

var state = new Phaser.State();
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', state);

state.preload=function () {
};
state.create=function () {
};
state.update=function () {
};
state.render=function () {
};

or this, which I prefer:

var state = new Phaser.State();
state.preload=preload;
state.create=create;
state.update=update;
state.render=render;

var game = new Phaser.Game(800, 600, Phaser.AUTO, '', state);

function preload () {
}
function create () {
}
function update () {
}
function render () {
}

Unfortunately, using calls like:

var game = new Phaser.Game(800, 600, Phaser.AUTO, '', new Phaser.State({preload: preload, create: create, update: update}));
or
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', Object.create(Phaser.State, {preload: preload, create: create, update: update}));

won't work. 

Tomorrow I'll rework the format of this thread to make it a bit more readable and useful. For now, I just wanna try a few things in Phaser on Eclipse and get some sleep

 

Update: Finished the reformatting. I've also included a missing step (15) to (hopefully) use the last version of Phaser instead of the one shipped with the example zip file.

 

Update: ...And... after pasting some new code from examples and performing the relevant changes, I did something that spoiled the whole Content Assist feature for me. I've been trying for minutes to figure out where I went wrong or how to fix it to no avail. So I'm adding a "work in progress" status line on the header of the first post. Geez... it's taking forever to get this straight. I could definitely use some help.

 

Update: Following the subsequent conversation with plicatibu, I have decided to give up on this how-to and stick with Netbeans for development. I've changed the first post header to reflect this decision. Sorry for the noise.

 

[plicatibu]

I completely understand why you want to use Eclipse. It's a great IDE.

But I think that for html5 development, Netbeans is far better.

1 - there is no need to install a server. When you click in the run button (F6) it will run your game from a "Netbeans webserver " and open it in your browser (Chrome, by default).

2 - You can debug your code easily

3 - It can import your game source and you just start developing.

As a long time Eclipse user I know how awkward is to just think about replacing Eclipse by Netbeans as main tool but believe me, you won't regret this decision.

If you decide to give a try to Netbeans, pick the version that comes with HTML/PHP support.

Happy coding.

[ecv]

LOL. Thank you plicatibu. Actually, that's really funny, cause right after my last post update I started looking into working with Notepad++ (such is my frustration level) and then (when faced with the difficulty of such) Netbeans, and I had already downloaded it. Were it not for the headache I've had for the whole day, I'd have already tried it  Headache most likely caused by investing so much time and effort in this seemingly fruitless cause, haha. 

Anyways, sure, I don't have a problem in trying Netbeans. I'm pretty sure I've used both of them in the past, and I'm not all that picky  It's just that I've set up other libGDX projects in eclipse, and I'd prefer to have everything in one place. At the very least, and although JS isn't too demanding about this, Netbeans is another IDE, which I think is always better than just an editor, and the built-in server sure sounds good. But most importantly the ability to set up new projects easily and have a suggesitons/autocomplete feature.

I'll get back to you after I've tried it and comment, and in case I can't set up a Phaser project I'll appreciate any help.

Cheers.

[ecv]

So, I've been banging my head for a while about setting up the autocomplete feature for Phaser on Netbeans until I found this old thread: 

That was a great help.

I'm giving up on this how to.

Thanks again plicatibu

[PhaserEditor2D]

Hi @ecv

Maybe you can try with Phaser Editor, it is based on Eclipse but with lots of features dedicated to Phaser.

I think your frustrations are solved in Phaser Editor:

• No need to install a web server, it has a built-in one, and is very easy to launch your game.
• No need to download and configure Phaser, it comes with Phaser and is well configured. Actually you have a Phaser project wizard with lot of templates based on the Phaser examples and others, like those based on the Phaser tutorials and game explorer mechanics.
• The smart coding just works (of course, it does not make magic, JS is a dynamic language but if you keep using certain pattern it works pretty well). In addition to Phaser API completion it provides assets name, easing and other completions, even you can preview lot of things in the JS editor, like the assets and the easing literas (it show you a small ball animated with the easing).
• JSDoc hints also work.
• In relation with the doc, it has a Chains tool to discover Phaser API and examples. And the Help have a Phaser offline documentation.
• But it has much more, it has an asset manager, a texture packer, an audio sprites packer, and in the last version it has a visual game level editor.

If you like Eclipse, I am pretty sure you will like Phaser Editor  because it is fully based on it.

I recommend you to start:

• Read the blog: http://phasereditor.boniatillo.com/blog
• Watch the last video: 
• Read the first steps: http://phasereditor.boniatillo.com/blog/quick-start/010-first-steps

 

You can follow us in twitter:

http://twitter.com/boniatillo_com