DroSup - First time javascript and Phaser

[SeelenGeier]

Hi there,

 

I am fairly new to game development but I am entirely new to Javascript and Phaser.

I am working as a PHP developer with little to no contact with Javascript so I wanted to get some knowledge by coding a few games.

Most of the time I am thinking about games and how to design them but I find little time to actually code them.

Now, I have finally brought my first game to a playable final state.

 

I made this with some Phaser and some really ugly javascript which I learned just for this (where are my classes and privates and why does some stuff happen asynchronous Oo?).

Well I wanted to post this and get a few opinions of more experienced Phaser and Javascript users.

So here is what I want you to do:

1. check out the game in the link below (no ads or anything else, it's just the game there)

2. check out the code in the javascript files (see attached zip file)

3. tell me what were my biggest mistakes or where to improve first (I know I made a lot of beginner (duh) mistakes, but you gotta start somewhere ^^)

4. praise me, for this is my first time finishing a game and writing javascript (probably ten times more than what I did at work already)

uuhhh...scratch that, points 1 to 3 are more than enough ^^

 

DroSup:

http://seelengeier.free-hosting.org/

If the turrets don't shoot and no health bars are visible, reload the page.

I haven't figured out why this happens, but it does everytime on the first load of the page.

I also get image conversion errors when using AUTO or WEBGL instead of CANVAS.

 

For debugging purposes I left this in:

left mouse: add an enemy

right mouse: add a turret

 

Thanks an cheers,

SeelenGeier

DroSup_201704290033.zip

[mattstyles]

8 hours ago, SeelenGeier said:

I made this with some Phaser and some really ugly javascript which I learned just for this (where are my classes and privates and why does some stuff happen asynchronous Oo?)

JS is prototypical, not classical, so it has no classes (yes, there is now class syntax but its not really a class), ditto for privacy, JS does not expose different levels of access to stuff, other than through scoping (hence you could hack in 'private' variables using closure or by using symbols + closure, but, its not a language-level feature).

Async stuff is sign-posted by having functions that accept callback functions as their arguments, such as `element.addEventListener` (which is an entry-point to browser API's rather than JS core), node takes this a little step further by ensuring that async functions accept `error` and `callback` handlers, in that order and always. JS also has promises, generators and async/await, all of which are now supported in the latest browsers.

What other stuff are referring to in JS that happens async? Sounds like it caught you out somewhere?

[SeelenGeier]

With async stuff I mostly meant the event based callbacks I encountered in a lot of classes from phaser (input, animation, physics, etc.).

I also did not get to look at that Tween thingy.

It appears to me that this would also be desynched from the standard update loop, but that could be just my imagination.

That came up a lot when I was looking into how to fix some of my animations.

 

Even if that's the case, that won't be anything to stop me from learning it.

I am not complaining, it's just new to me

[SeelenGeier]

I just saw that it does not work in IE.

It seems that IE can not handle default values for function parameters Oo.

Does this not exist in Javascript?

[mattstyles]

IE is not a modern browser and supports very little, in contrast, Edge support for newer syntax is superb.

Default values do now exist in JS (you can check compatibility at kangax, css and some other compatibility is tracked well at caniuse), but, again, IE doesn't support it, not sure what the exact MS plan for IE is but given Edge is a great browser (I think, I'm a Mac) I imagine IE is effectively dead.

There are lots of oddities in JS that catch people out for sure, although these are generally ironed out with newer syntax, for some stuff that remains a decent linter can help, it won't eliminate the oddities but it does help throw up a warning in your editor (i.e. before it hits execution) so you can deal with it. I'd recommend adding a standardjs plugin to your editor of choice, standard is config for eslint, which does the actual linting, if you don't like the rules there are other off-the-shelf linting configs out there (such as xo) or you can configure them yourself, it generally isn't advisable to create your own those, these off-the-shelf ones aren't just there for style, the rules they use are added to encourage good code, of course they can not enforce it, but, it does help.

If you want to support IE you'll have to turn new syntax into old syntax. The most popular transpiler to do this is babel which (amongst other things) will turn all your juicy new syntax stuff (like default params, arrow functions, generators etc) into es5 (or even es3 in some cases, not that you want to do that) syntax understandable by older browsers such as IE. Babel is again config powered, the easiest way is to use a preconfigured config, set it up, and forget about it, there are many many guides available.

But, now we hit on the real 'pleasure' of modern JS, we've taken something really simple (like JS) and added many many layers of complexity, yes, you get advantages from this complexity, but, still, there is a lot to learn just to get going which is the antithesis of what JS should be. Some of this is brought about by the browser fragmentation problem (which is easing every day) and partly by the rapid development of JS as a language, and partly by requests for JS to 'do more stuff'.

If you want to use newer syntax AND want to support older browsers then you must transpile, which means you need a build, which adds complexity.

If you're doing this for fun and learning (which sounds like you are) then drop support for older browsers, use the newer syntax you want (check compatibility, not everything in spec is supported) and drop the build step, leave that for later.

The real elephant is es6 modules which have just landed in Safari (and FF and Edge nightlies). These are a little complex as it encompasses new syntax and a module loading mechanism, its very exciting but many existing modules (or which there are lots in the JS world) probably won't play too nice, but, lots of devs have been tackling this issue in preparation for browser support, which is now a thing.

[SeelenGeier]

Wow that sounds...complex

Well for now I will try to get something that runs in Firefox, Chrome and IE in the newest versions.

I don't want to learn a lot of meta stuff before building a game.

My focus will be on the game mechanics.

If something only works with the newest tech that isn't supported by those three, I won't use/learn it for now.

Standard JS is new enough, no need to make it even more confusing

 

I added a beta version with touch support (undocumented), if someone is interested:

http://seelengeier.free-hosting.org/beta/

 

[SeelenGeier]

I would still love to get some feedback on the game and design itself.

Especially on where to improve the most.

This time I tried to get the game done first so there was little focus on the code.

My next game I would like to first try to do everything in Phaser with as little native javascript as possible.

[samid737]

The code looks interesting and to me it was a good example of showing how prototyping can be used in Phaser. Some minor issues I encountered:

-The HP meters were not visible during first play (something to do with : Phaser.Cache.addImage: Image "blank" hasn't been retrieved yet  phaser.min.js:3:555651 Phaser.Frame: Frame "undefined" has a width or height of zero)
- I could not get the canvas debugger in Firefox to work with the game in .CANVAS mode to inspect draw calls(that might be my pc , so maybe you could test it yourself). It does work in .WEBGL mode.

My only feedback/remark when looking at the code in general (I did not check the source in detail):

EntityManager.prototype.draw = function(){
	//draw every turret
	game.world.bringToTop(groups.turret.hp);
	game.world.bringToTop(groups.turret.base);
	game.world.bringToTop(groups.turret.gun);
	
	//draw every enemy
	game.world.bringToTop(groups.enemy.hp);
	game.world.bringToTop(groups.enemy.alien);
	
	//draw every explosion
	game.world.bringToTop(groups.explosion);
	
	//draw all projectiles
	game.world.bringToTop(groups.projectile);
}

I was wondering why you are calling this function within update ? Are you trying to keep you sprites in the right drawing order? If so: When you add sprites/groups in the create function within Phaser, the render order is determined by the order in which they are added to the game:

http://examples.phaser.io/_site/view_full.html?d=groups&f=display+order.js&t=display order

Here is an example to clearify it more:

vs:

You can do the same thing without groups , so with individual sprites. So it might not be necesarry to use .draw() if you add your objects to the game in the right order. I might be missing out on the key purpose of .draw() though.  At any rate, good work!

[SeelenGeier]

Thanks for the detailed analysis.

Quote

-The HP meters were not visible during first play

The hp bar was causing most of my bugs and I did not figure out how to fix the "first play no hp or bullets" bug.

Although it works on the second load, so I didn't focus on that for now.

 

The "redrawing" had to be done because otherwise the hp bar would constantly draw itself when I moved it, which I don't know why.

I think using a graphic for the hp bar was not the best decision.

At least it was causing more problems than simply using an image.

 

I will try to work more with groups next time since I only implemented them for the draw order later.

[samid737]

I remember someone had a similar problem:

Here is an example of such a  progress bar. If you look into the script and comment the radialProgressBar.clear(), you will see that it will redraw on top of the original loading bar. Your problem seems similar. I don't know what command this would be in PIXI, but I think there should be a way to clear your graphics:

https://phaser.io/docs/2.6.2/PIXI.Graphics.html#clear