What's the best "style" to structure your project?

Phaser 3
1

I am having problems using examples because they tend to use various styles.
I thought they were interchangable, but seemingly they don’t work together.

Style 1) from the tutorial “demo_plattformer”
var config = { stuff }
var game = new Phaser.Game(config);
function preload (){this.load.image(‘sky’, ‘assets/sky.png’);}

Style 2) see example here: https://github.com/photonstorm/phaser-examples/blob/master/examples/display/generate%20texture%20from%20graphics.js
What I like here is, that you don’t write “this”, but “game”

var game = new Phaser.Game(800, 600, Phaser.CANVAS, ‘phaser-example’, { create: create, update: update });
function create() {game.load.image(‘sky’, ‘assets/sky.png’):wink:

Style 3) has “:” and “,” that the other styles have not
var SceneA = new Phaser.Class({
Extends: Phaser.Scene,
create: function ()
{other stuff},

Perhaps there are even more styles.
But I would like to know if one of them is the “recommended” one.

2

What doesn’t work:

var game = new Phaser.Game(config);
var SceneA = new Phaser.Class({

    Extends: Phaser.Scene,

    initialize: function SceneA ()
    {
        Phaser.Scene.call(game, { key: 'sceneA' });
    },

If using this I get a blackscreen. ( but strangely no error)

3

Hi,
Examples are just examples, made by many js developers with each their habits.
I suggest you to look this template:

1 Like
4

That’s EXACTLY what I mean.
I take the code from that example and when I add it I get the error “phaser.js:80097 Uncaught TypeError: Cannot read property ‘sys’ of undefined”

What is the difference in declaring “game” at the beginning and the end?
And why does he declare game and config as “const” and not “var” like in all examples?

That’s the code I used for the error:

const config = {
  type: Phaser.AUTO,
  parent: "phaser-example",
  width: 800,
  height: 600,
  scene: [ SceneA, SceneEnd ]
};

const game = new Phaser.Game(config);

var SceneA = new Phaser.Class({
Extends: Phaser.Scene,
initialize: function SceneA ()
{
    Phaser.Scene.call(this, { key: 'sceneA' });
},

preload: function ()
{ Stuff }
5

It is also of interest for me because I think the “this” is sometimes varying.

Like here: This works, but if you put the IF-statement around the code you get the error “phaser.js:162626 Uncaught TypeError: Cannot read property ‘x1’ of undefined
at Function.Rotate (phaser.js:162626)”

create: function ()
{
    
    //if(level==5)
    //{
        graphics = this.add.graphics();

        line = new Phaser.Geom.Line(260, 200, 450, 450);

        circle = new Phaser.Geom.Circle(300, 400, 60);

        graphics.lineStyle(2, 0x00ff00);
        graphics.strokeLineShape(line);
        graphics.lineStyle(2, 0xffff00);
        graphics.strokeCircleShape(circle);

        this.input.on('pointermove', function (pointer) {

            circle.x = pointer.x;
            circle.y = pointer.y;

        });
    //}
1 Like
6

I suspect your error is because you use that graphics reference somewhere else?

And about ‘this’ in javascript:

1 Like
7

I use it in the update function, too. It’s the exact code from this example: https://labs.phaser.io/edit.html?src=src/geom\intersects\line%20to%20circle.js

if(level == 5)
        {
            Phaser.Geom.Line.Rotate(line, 0.02);

        graphics.clear();
        graphics.lineStyle(2, 0x00ff00);
        graphics.strokeLineShape(line);

        if (Phaser.Geom.Intersects.LineToCircle(line, circle))
        {
            graphics.lineStyle(2, 0xff0000);
        }
        else
        {
            graphics.lineStyle(2, 0xffff00);
        }

        graphics.strokeCircleShape(circle);
    }
8

Yeah, but now neither line or graphics has been created.

line = new Phaser.Geom.Line(260, 200, 450, 450);

9

That’s Phaser 2 code, it won’t work in Phaser 3.

If you want to avoid this, see

3 Likes
10

I don’t understand. I have an “if(level ==5)” in both cases. So if I am in level 5 it should be created … Or am I overlooking something?

11

I wasn’t aware of that. Thanks for the hint. I will look into that.

12

In the first section you have:

graphics = this.add.graphics();
line = new Phaser.Geom.Line(260, 200, 450, 450);
circle = new Phaser.Geom.Circle(300, 400, 60);

If they never get called, you can’t use them somewhere else.

13

I thought the create() Method would be called when I start my level 5. And after that the update() method.
So when I understand you correctly this is not the case…

But without the “if(level ==5)” the things already happen in level 1. And I don’t want that.
I had the plan to make a function for each level (that differ from the starting levels) and place them into the create function this way …

14

Put the declaration outside the if statement.
Your code just needs to know what ‘graphics, line, and circle’ are.
Then only use them in level 5.

1 Like
15

Okay. Declarations outside of “If” or “switch-case” blocks.
Noted.

16

And what about the different styles to write a function?
Are they all equally valid? I thought only the first one should exist…

  1. function preload ()
    {}
  2. preload: function ()
    {}
  3. preload ()
    {}
17

For an extensive explanation read this, and this for a quick answer.

I don’t use javascript myself, only Typescript (or Haxe) for web things. I hardly ever use the keyword ‘function’ :slight_smile:
It might be a good idea to learn ES6 or Typescript instead of the old javascript ways. It makes things somewhat easier and cleaner.

1 Like
18

Hi,
I agree with Milton, and your questions are js related and not specific to phaser, es5 and es6 class have different syntax, es6 syntax is clearer imo, i suggest you to start a javascript tutorial about es6 classes and check the difference with es5 classes, you will better understand the examples after that. Phaser is class oriented (object oriented programation to be precise) so it’s essentiel to be confortable with classes.
https://www.javascripttutorial.net/es6/ for example. It’s the first that came on google, there is probably better ones

1 Like
19

Thanks. I have already learned a little bit about Ecma Script, because the rest of JavaScript seemed very unstructured to me.
I will look into this. Thanks for the link :slight_smile: .

edit: now I know another way: arrow functions …

20

the ‘this’ is indeed quite varying in javascript , its not quite at the same level as “let” and “var” scopes but it amounts to the same thing

in most examples, Leonie, “this” will mainly refer to the current scene, however when used from an object (any one) for instantce a sprite with a click detection on it, then it will pass the actual clicked sprite to the called function and “this” will refer to the sprite that was clicked (while executing (“in”) that function , if you go down the code in the same script then after the function has executed “this” might refer to the scene again (or something else depending on the spaghetti - nesting lol)

if this (this") is an issue i would personally suggest you do some serious googling on variable scopes and “the this keyword in javascript” and try to figure out . Don’t feel like a nitwit this is not really prepschool stuff lol , hang in there but its kinda hard to explain on different examples from different programmes since everyone keeps their own fingerprint or style as you say (because it feels more comfortable)

google is your friend (in this case) , caffeine maybe too lol

good luck

(the best style would be “what feels right” i guess)

1 Like