Help with using the Phaser3 Framework

[quemarco]

So I'm unfortunately very confused as to what to do with the framework that you download on the phaser website. I'm able to get it through git, download the zip, etc, but I don't really know what to do from there. Should I download it in a specific folder? How do I use the framework? Do I need to save my projects in the same folder as the framework, or do I need to reference it somehow? How do I reference the modules, does it just know inherently? I'm relatively new to actually programming (I've made a bunch of games on a TI calculator, have made Macros for excel, and done a very very basic pure Javascript version of breakout. I've also done some online courses like Codecadamy for python and Codefights on c#, but never actually developed from a computer...)

If it helps, I'm running some version of Ubuntu ( not sure which. Using xfce desktop if that helps), and can navigate bash decently. I just don't know what exactly to do! The tutorials don't really explain it.

Also, I'm using the python simple http server (python -m SimpleHTTPServer) to 'host' my games, if that helps.

[prob]

Getting started with Phaser 3

[samme]

https://gist.github.com/samme/ec38e4ac7b27422d3dcbdfb559ba84a5

The minimum you need is one HTML file, the main Phaser script (phaser.js), and (usually) your own game script.

People usually make a new folder for the project and put all of these inside.

my-project/
├── app.js
├── index.html
└── phaser.js

or (if you copy unzipped phaser folder)

my-project/
├── app.js
├── index.html
└── phaser-3.9.0
    ├── dist
    │   ├── phaser.js

The locations don't really matter; you just need to use the correct paths to the scripts in the HTML file.

The main Phaser script has to be loaded before your game script. Then you can use Phaser.Game (or anything else in Phaser.*) in your game script.

[quemarco]

@samme Thank you very much, that makes a lot of sense. I'm pretty new to html, but this, this is understandable! It also explains why you can just use the phaser.js file without the whole thing. If you don't mind me asking, is the rest of it documentation, or some other thing? I'm going to take a dive into it to see what I can figure out.

Thanks again for your help!!!

[samme]

There are docs (README, CHANGELOG) and then everything else is to build your own phaser from source (src), in case you want to do that.

Do read the README if you haven't yet.

[Ad4m]

On 6/6/2018 at 8:21 PM, samme said:

The minimum you need is one HTML file, the main Phaser script (phaser.js), and (usually) your own game script.

People usually make a new folder for the project and put all of these inside.

my-project/
├── app.js
├── index.html
└── phaser.js

Hey @samme, sorry for the noob question but can you or someone else explain me a way to split the app.js into multiple files?

[Derail]

@Ad4m Probably the most popular way to achieve this is to create your game using an approach like this one: https://github.com/nkholski/phaser3-es6-webpack

But it has a bit of a learning curve for JS and programming beginners for sure.

Easy starter template: https://github.com/photonstorm/phaser3-project-template

[Ad4m]

Hey @Derail thanks for the answer, as a matter of facts these days I've been learning the Webpack's concepts and I already made my first steps with it. Several days ago I found that approach -like you said-  but I didnt took a look at it due to I had never used a module bundler before, now I will do it. Webpack isn't that hard to understand even for a beginner like me in some aspects of programming. I think I will make a blog about all the things I will learn when learning phaser.