Newbie Phaser questions (Unity & Construct 2 background)

[Vallar]

Hello everyone, 

Background:

I have been looking around for a good engine/framework to use to build HTML5 games. Since I know Unity and am familiar with the engine (plus I know my around C# a bit) I wanted to use to create HTML5 games, however the WebGL isn't quite up to par not to mention that it doesn't work on mobile browsers. So I went ahead and switched to Construct 2, now I am quite familiar with it and have used it for a long time before the switch (in fact I started with Construct 2 and then switched to Unity for making non-HTML5 games). 

While Construct 2 is perfect for me (since I am more of a designer than a programmer), I figured that to do this seriously I can't escape learning to code  specially that my goal is to transition to multiplayer games (where Construct 2 fails to have an authoritative server setup and sticks to the P2P setup -- but that leagues away from where I am now). Deciding that, I spent the past 2 days looking at code and comparing frameworks and I've settled that so far Phaser seems to be the best free engine and has the most support in the HTML5 game development scene (unless I am missing something). So I started using that and followed the first platformer tutorial, which needless to say while good, left me lost and note sure what is going on with a few things.

As mentioned I come from a background with Visual Studio in terms of coding, so I'd like to keep Intellisense-kind of feature. I heard of Phaser Editor and I tried to give it a spin but unfortunately it didn't offer the level I had with Visual Studio (and I am not putting any blame here, it is an incredible tool and perhaps I am using it wrong -- I guess that would be more akin to the truth). That and the fact that I can't fork $30 for it at the current moment. 

The main problem:

I would like to use VS 2015 Community edition and get the intellisense I get with Unity (now I understand that there may not be a solution for this and it might not work 100% as Unity's but I'll settle for anything at the moment that actually helps with the Phaser API rather than just Javascript code -- I don't need VS to complete "var" or "function" for me). What I have done is that I looked into the VS plugin market and found a Phaser template that uses JS and I downloaded that. However when I open a new project using that template and then start typing something like var Game = new Phaser.Game(blah, blah); it doesn't recognize anything beyond "var". 

I only found a way on the internet if I use Typescript (which I would rather avoid so I can learn JS and later on be able to pickup Node.JS instead of having to learn Typescript then start learning JS with Node.JS). So my question is, how can I use JS with VS and Phaser while VS2015 having intellisense active with Phaser related stuff?

Secondary problem:

I am searching for tutorials similar to that on the Unity Learning website. Something that does a lot of hand holding with a few small KISS games and then moves into advanced stuff while still explaining what is going on. So far what I have seen is either tutorials that has no steps and just go "Here is the code I used" or others that provide steps but general explanation and no "real learning" could occur from there. Like I said, I am not a coder and need a bit of hand holding at the start till I have built a few example games and then start doing my own. Where can I find such tutorials? 

 

TLDR:

I'd like t use VS2015 with Phaser for intellisense but code in JS not Typescript. Also would like some tutotrials that actually explain what is going on and teach rather than just dump information on you -- tutorials that go through making game with hand holding and then scale up as we move on. 

 

Sorry for the long post and thank you so much in advance!

[rich]

There's no code completion for JavaScript, it's too dynamic a language and most IDEs just can't cope with it. Sounds like you'd be far better off with TypeScript instead, for which there are Phaser definitions available in the repo, and tutorials on GameFromScratch.com that start with the basics and go from there.

[Tom Atom]

Hi, there is no need to be afraid of Typescript. It is superset of JS and you can take JS code and put it into TS file ... and it works. If you are used to C# then TS will be closer to your habits than JS ... btw father of both C# and Typescript is Andres Hejlsberg (https://en.wikipedia.org/wiki/Anders_Hejlsberg) . Whatever you can do in JS you can do in TS, including calling other JS libraries. In TS you get type checking so you can catch lot of errors during development and intellisense increases productivity.

[Vallar]

8 hours ago, rich said:

There's no code completion for JavaScript, it's too dynamic a language and most IDEs just can't cope with it. Sounds like you'd be far better off with TypeScript instead, for which there are Phaser definitions available in the repo, and tutorials on GameFromScratch.com that start with the basics and go from there.

 

5 hours ago, Tom Atom said:

Hi, there is no need to be afraid of Typescript. It is superset of JS and you can take JS code and put it into TS file ... and it works. If you are used to C# then TS will be closer to your habits than JS ... btw father of both C# and Typescript is Andres Hejlsberg (https://en.wikipedia.org/wiki/Anders_Hejlsberg) . Whatever you can do in JS you can do in TS, including calling other JS libraries. In TS you get type checking so you can catch lot of errors during development and intellisense increases productivity.

Thank you very much for replying and the suggestion. In all honesty, the guy on that website doesn't explain things well. For example the part where he started checking the Update() and how long it ran... took me a while to realize he is talking theory rather than something related to Phaser itself. Besides, that one tutorial and 1 other based on Physics that is pretty simple as well are about the only ones I have found from looking for 2-3 hours on the internet. 

@rich I think I know what do you mean by intellisense won't work well. I was following this tutorial  using Sublime Text 3 and it took me 3 hours to debug why my snake doesn't move at all. I eventually quit as I couldn't find what I did wrong and Sublime Text 3 doesn't detect mistakes (despite following the configuration threads for it). 

@Tom Atom does that mean that I can just follow the Javascript tutorials and put code that is literally Javascript into the Typescript file and it works and I don't have to worry about anything else? While that sounds powerful and extremely good. Probably helps too with tutorials being next to non-existent, I doubt it would be helpful with debugging. 

From some reason I feel I have to choose between a couple of tutorials and no debugger and intellisense (Javascript) + more support considering most people are using it and rare tutorials with debugger and intellisense + next to no support since not many people are using Typescript. Have I been spoiled too much by Unity + VS' environment where the slightest mistake is being reported and you can just find it with double click?

[rich]

Here, this set of tutorials, if you go through in sequence, explains the majority of Phaser really:

http://www.gamefromscratch.com/page/Adventures-in-Phaser-with-TypeScript-tutorial-series.aspx

It uses a slightly out of date version of Phaser, but not massively, most things are still the same.

[symof]

You could also consider http://atomicgameengine.com/ it used to be paid but it changed to MIT in recent months, however their documentation is lacking.

You should also consider netbeans IDE for javascript https://netbeans.org/ . I personally use netbeans and I am very satisfied with it and it's autocomplete feature.

[Vallar]

5 hours ago, rich said:

Here, this set of tutorials, if you go through in sequence, explains the majority of Phaser really:

http://www.gamefromscratch.com/page/Adventures-in-Phaser-with-TypeScript-tutorial-series.aspx

It uses a slightly out of date version of Phaser, but not massively, most things are still the same.

Thank you very much. That is actually the series I was following, beyond that it doesn't seem to be anything else out there. I'll keep looking though, perhaps I could find something here or there.

58 minutes ago, symof said:

You could also consider http://atomicgameengine.com/ it used to be paid but it changed to MIT in recent months, however their documentation is lacking.

You should also consider netbeans IDE for javascript https://netbeans.org/ . I personally use netbeans and I am very satisfied with it and it's autocomplete feature.

That looks interesting and looks a lot like Unity and Superpowers. I am downloading it right now to check it out. My main concern and fear (and main reason I chose Phaser over something else) is that I wanted to use an engine that has a large community -- I am still new and I am not quite the good coder so I'll probably need help at one point or the other. Phaser felt that it could provide that, for example Quintus seems complicated in comparison to Phaser code wise and seems to have a smaller community than Phaser. I also thought of Defold, it uses Lua and a year or so ago I gave Love2D a spin and I learned Lua a bit which was a very good interesting language (reminded me of Python and now that I know Javascript feels similar to it in structure). 

Since you mention Netbeans, does it support debugging Phaser? Would I for example get "Hey you are stupidity caused the game not to load because you see, you forgot a comma like VS 2015 does?" or does it just stop at autocomplete? That is mainly my current problem with Sublime Text 3, Atom and VS Code (yes, I tried all of them for hours).

 

EDIT: Atomic Engine seems to export WebGL only (unless I misunderstood) which means the games won't play well on mobile devices or even at all on others. It is quite similar to what Unity has.

Edited September 5, 2016 by Vallar

[symof]

7 hours ago, Vallar said:

Since you mention Netbeans, does it support debugging Phaser? Would I for example get "Hey you are stupidity caused the game not to load because you see, you forgot a comma like VS 2015 does?" or does it just stop at autocomplete? That is mainly my current problem with Sublime Text 3, Atom and VS Code (yes, I tried all of them for hours).

Neatbeans has a really powerfull debug suite as far as javascript goes. https://netbeans.org/features/html5/index.html

 

You can also do usb debuging right into android from the ide in real time without the need to upload to a custom server.

It also features plugins.

http://plugins.netbeans.org/PluginPortal/

http://plugins.netbeans.org/plugin/49666/js-css-minify-compress

[PhaserEditor2D]

@Vallar As Rich said, JS is not easy to assist, if you want to get better code assistance in Phaser Editor you should follow certain coding patterns.

If you send us your scripts we can help you on make the inference engine to do a better job.

Also you can try with this sublime text plugin.

Good luck!

[Vallar]

First thank you very much everyone for replying to this thread, I do appreciate all your help and I am getting to understand things I wasn't aware of before.

@symof If Netbeans can offer debugging as in when I run the project/file it would tell me if there is something wrong. I would gladly use it. It would save me loads of time while trying to decipher the kind of stupidity I have managed to do. 

@Arian Fornaris I completely understand it is hard; I can imagine from how hard time I am getting bouncing from 1 tutorial to the other and people using different methods to code. That said, I did try to follow some of the coding patterns. My test was to do something like this:

Phaser.Game.add.sprite( and wait for the popup to come up on each time I press a "." but it never worked. Now I understand that line of code might be wrong (I have never found it like that), my gripe is:

1- All editors allow me to write any code anyway even if it is wrong. That is a major issue. 

2- All editors (except with Sublime Text 3) doesn't offer suggestions well and guides. 

Thanks for the plugin, I had already installed it and it worked like a charm with autocomplete but unfortunately it stopped working after a while. I uninstalled it now and used the portable version and it works like a charm again. I just wish there is a way to know what is wrong when something doesn't work appropriately a simple "Syntax Error at line 12" for example is more than enough for me to wade through the code and fix my problem. 

[PhaserEditor2D]

@Vallar jshint, eshint etc.. are tools that will help you to find syntax and semantic errors in your javascript code. Probably the are sublime text plugins for it.

[Tom Atom]

17 hours ago, Vallar said:

does that mean that I can just follow the Javascript tutorials and put code that is literally Javascript into the Typescript file and it works and I don't have to worry about anything else? While that sounds powerful and extremely good. Probably helps too with tutorials being next to non-existent, I doubt it would be helpful with debugging.

 Yes, you can definitely follow JS tutorials without any problem. Some time ago I wrote short TS tutorial - creting game Dron Shooter: http://sbcgamesdev.blogspot.cz/2015/05/phaser-tutorial-dronshooter-simple-game.html TS compiles your code into JS (you can decide which version). Below are three files original TS, JS and JS ES6. Look at differences. Especially in TS x JS ES6 are minimal:

app.ts

app.js

app_es6.js

 For example if in JS you write:

function something(some_input) {...}

 you can do the same in TS. Or you can add types:

function something(some_input: number): void {...}

 and then code is checked to pass only numbers into function and it cannot return any value, because its return type is void... simply you can use JS code, because all types are "any" by default.

 

 This is what you get with TS + VS - nice intellisense help:

 and type checking - for example, you accidently set position = 100, instead of position.x = 100. In JS it is perfectly valid, but in TS, you get error:

 

 Beside this there are other nice features in VS, like very good support for Apache Cordova and for one client I also created Universal Windows 10 app from our HTML5 app to be published on Windows Store.

 Netbeans is also great tool and in old J2ME times it was my number one. I did not like VS 2010 those days. But now, I am trying to simplify my development to reduce number of IDEs and languages and VS 2015 with its features is great choice (I also play with Unity ... again VS, and did some small playing with Windows WPF ... again VS)

[Vallar]

Thank you very much guys for your replies and assistance! 

@Arian Fornaris I did try the Lint option but it produces all Phaser related code as errors so it doesn't help much. Since I am new I am unsure if I am doing something wrong or am I missing something. But I'll try again development with Sublime and see if I can advance further. 

@Tom Atom I did try VS with Typescript and it was really good. I felt literally as if I am back in Unity (without the drag drop editor part). However, there are only 2 tutorials available as far as I know in TS; yours (which I found by mere chance) and the one from GamesFromScratch and the latter is a bit weird to follow, I didn't I am understanding much with following him around. 

If I follow the tutorials written in JS and write in JS I lose both intellisense (now that I know it is hard I am willing to just forget about it) and discovering where my errors are (which as far as I know isn't supported by VS in JS) so I am back to square 1. Not to mention that I'll end up not learning TS and will only learn JS if I follow the JS tutorials. 

I think my level might be too low for these advanced stuff and that is why I am clinging to all the help I can get from the IDE and editors, so I am now thinking of a solution outsides the box, perhaps something less low and level and more hand-holding friendly than Phaser. At least temporarily till I can feel I have enough experience/confidence to tackle the more low level stuff.

Edited September 5, 2016 by Vallar