Phaser & Backend Questions

[Cyborg_Ean]

Hey everyone, I spectate these forums all of the time so this a very late intro.  I'm very excited to begin making games with Phaser but since I'm new to Web Development technologies (especially the backend) I'm certainly in need of some direction.  I have a few beginner questions so please excuse my rudimentary knowledge of Web Dev.

Aside from learning Phaser I'm picking up Flask to develop knowledge of the backend, that also means learning template rendering.  I'm struggling with Hello Phaser, and I believe it has something to do with the distinction of loading Phaser assets and loading Flask assets.  The problem is I'm not sure how to use Jinja to access the Phaser api (or rather 'game.load.Image' atm)? I also tried this setup with little luck. Any help here would be greatly appreciated! I've spent the last couple days reading tons about jinja, flask, phaser, html, and even found myself looking through the pixi api, but I just don't know enough about web dev or these apis in general to pinpoint exactly what I'm looking for at this point in time.

Also, can someone point me in a good direction towards quality learning material for server side programming for gamedev. Advice on how to approach the topic would be very useful!  I'm focusing on Flask at the moment, but soon after I'll try my hand at Django and other Web frameworks as soon as I develop a comfort zone and a project or two.  Or there more convenient routes for learning the back-end that I can take?  I accept that I have tons to learn but I'm so excited for Phaser that I'm willing to learn as much as it would take to do it right!

(I have some experience with Python, Js, and Java.  Also GameMaker, for what it's worth)

[TickleMeElmo]

the most simple thing to learn is nodejs websocket. watch this for example, if you can't get on from there then I suggest looking at more tutorials. If you are experienced in Java then you also might think about making the backend there, but I guess doing it all in javascript is a better way to go for a beginner.

[mattstyles]

Phaser is solely a client-side lib for making primarily client side games, as such there is no server tech knowledge requirements for Phaser and, actually, the 2 never mingle. Sure, you can write an app that requires backend smarts as well as client smarts but Phaser isn't designed for it and you can only use Phaser on the client (whilst I'm sure you might be able to mangle it to run using node you need a canvas element, so it would mean shimming that, and then, whats the point?).

Python, Node, Java, their respective frameworks, like Flask, or Express, or whatever Java might use, their sole task for a Phaser-based game is simply to serve the front-end, as such they are totally superfluous for a 'standard' Phaser game. Generally there are no smarts in pushing out some static assets, just nginx, varnish or even Apache, a 'dumb' server is faster, more reliable and much easier and you need nothing more.

All the template engine does is take some data, take an opinionated template (it has its own rules, or opinions, about how the data gets used), mush the two together using a set of well-defined rules and pushes the result out, usually as a string, in this case a string representing html. That string of html is presented to the browser, interpreted there et voila, your site. Its only useful to do so if the data the template takes is changing, if it is not then simply serve up the static html and forego the expense of template compilation and render.

The corollary to all this is that it is perfectly viable to create an app with Phaser that requires server intervention at runtime, such as a multi-player game, its just that Phaser does not help you here, its not designed to.

I'm sure you're probably aware of most of the following, just lacking confidence, but Web Development (very generally) happens in two places (rather than the traditional one). There is a server process, which is connected to the internet, a request comes in, the server processes it and returns a response, i.e "Give me HTML with this uri", "Ok, here you go", from this connection many things can happen, but, in short, the browser gets some HTML, interprets it and proceeds from there, quite possibly making more requests to the server for more assets and quite possibly executing some JS from scripts (once the server has sent a response to a request for those assets). So, in this terse example the server is dumb, its just sending out assets in response to requests (urls), the magic (possibly) happens in the browser, the 2nd place of web dev.

The browser executes JS (in addition to numerous other tasks) via the JS engine. This is sandboxed. Very limited communication protocols, which is good. You can't access the host machine (much) and you have to make requests to a server for info. You can create a duplex stream, via WebSockets for example, to allow the server to communicate with the client (browser) but other than that (i.e. ordinarily) the server can not push stuff at the browser (check out HTTP/2 though, already supported in modern browsers, mostly).

So you have a server environment which can access whatever file system it is on and a sandboxed browser environment.

Phaser runs in the sandboxed browser environment. If your app, which uses Phaser, needs more info from the server about how to proceed then you open up a TCP socket and ask for whatever stuff you want (you ask, you can not demand, and you can't really stick a deadline on it either), this is usually another request over the network (check out AJAX and Fetch) but could also be a web socket (which is basically the same thing, it just stays open rather than closing when the browser gets a response).

Jinja should not, and I'm pretty sure can not, access any Phaser info, its can't execute JS for a start. But it can sure create some HTML that maybe includes some JS that the browser can use to access all that lovely Phaser api goodness.

If you don't mind, I'd just like to chip-in some advice, don't start with a multi-player game (not that you're suggesting it), they're crazy hard, even if you have a rock solid framework for it (I think unity 4 has a few things to facilitate this, but nothing web, I don't think, and whilst there are libs that try this in JS-land, they're all toilet, they solve some problems but none in a very nice way, its that complex and use-cases too varied). By all means create a simple Python or JS static asset server, its good practise, but focus firstly on Phaser code and use your static server (there are many many open source off-the-shelf versions but, it is good practise) to serve up your client assets and create a rock solid single player Phaser game. Then move on to something more complex, honestly, a single player game is complex enough to get up and going, and as soon as you get one up and running you'll want to create another that is even better.

[Cyborg_Ean]

 

4 hours ago, TickleMeElmo said:

the most simple thing to learn is nodejs websocket. watch this for example, if you can't get on from there then I suggest looking at more tutorials. If you are experienced in Java then you also might think about making the backend there, but I guess doing it all in javascript is a better way to go for a beginner.

I plan to learn nodejs eventually (i use the terminal to run simple scripts which is probably trivial), but I wish to learn Flask 1st because I really love Python and my capacity to learn is greater (or more efficient rather) when I'm enthusiastic about something.  With that said I'm looking for the best learning experience rather than the most simple.  Thanks for the link, I'll try to run that later today!

 

 

17 minutes ago, mattstyles said:

By all means create a simple Python or JS static asset server, its good practise, but focus firstly on Phaser code and use your static server (there are many many open source off-the-shelf versions but, it is good practise) to serve up your client assets and create a rock solid single player Phaser game. Then move on to something more complex, honestly, a single player game is complex enough to get up and going, and as soon as you get one up and running you'll want to create another that is even better.

Thank you so much for all the quality advice!  This is certainly something I'll come to back to refer to.  I was worried about aiming for something a little too complicated for a 1st project and this pretty much solidifies it.  I'll be sure to come back after making that single player game for more advice. In the meantime I'll be studying and practicing the use of static server since I now have a much better idea what the problem is.