Question on Writing Clean Code with PIXI

[KamiFightingSpirit]

Hey! I have a question about writing clean and DRY code. Do people generally just have one file for a single page app and put everything within their loader.load(setup) function? Or is splitting stuff off from that and using modules better?

Some of the code that I have written so far and currently cleaning up: 

https://github.com/KamiFightingSpirit/pixi-particles/blob/master/test/pixi-v5-iife/isometryTest.js

 

If you could point out anything glaringly bad I would appreciate the feedback! I want to improve!!

Edited March 27, 2020 by KamiFightingSpirit
small change

[ivan.popelyshev]

I think I pointer you to my example: https://codesandbox.io/s/app-architecture-3-j0di5 

Basic idea is to separate app "facets" and link them all through app, using runners to send global events between them. Facets can access each other functions - so it really isn't some kind of reactive programming, its just basic separation.

[KamiFightingSpirit]

Would this be the same for a website? Is there some sort of dynamic router that I can use if I am linking everything through a single PIXI.app?

Edited March 28, 2020 by KamiFightingSpirit

[KamiFightingSpirit]

I'm going through your app, can you help me understand these runners? 

in app.js you declare your runners:

    // Application components
    this.runners = {
      init: new PIXI.Runner("init", 0),
      load: new PIXI.Runner("load", 0),
      beforeAdd: new PIXI.Runner("beforeAdd", 1)
    };

Then in assets.js, after loading up your image assets, you kick off a runner using the .run() method:

loader.load(() => {

this.app.runners.load.run();

});

but I don't understand what this is doing now? What is it executing? I read through the documentation and looked up the runner class in the source code but it is confusing how this is working.

 

Does it call the load() function found within models.js? If so, after completing models.js does the computer go back to line 39 in app.js?

this.addComponent((this.phys = new Phys(this)));

 

Edited March 28, 2020 by KamiFightingSpirit

[KamiFightingSpirit]

Accidental repost - ignore

Edited March 28, 2020 by KamiFightingSpirit
accidental repost

[KamiFightingSpirit]

Are the runners kicking off the init() functions in each of the different files? So they are kind've like a set of switches, that each time a file is opened, they try to run certain functions? In your example case those function names are:

this.runners = {

init: new PIXI.Runner("init", 0),

load: new PIXI.Runner("load", 0),

beforeAdd: new PIXI.Runner("beforeAdd", 1)

};

And this is kicked off for each file via:

this.addComponent((this.assets = new Assets(this)));

this.addComponent((this.phys = new Phys(this)));

this.addComponent((this.mouse = new Mouse(this)));

this.addComponent((this.shaders = new Shaders(this)));

 

this.addComponent((this.models = new Models(this)));

this.addComponent((this.level = new Level(this)));

}

 

addComponent(comp) {

for (let key in this.runners) {

let runner = this.runners[key];

runner.add(comp);

}

}

 

 

 

[ivan.popelyshev]

9 hours ago, KamiFightingSpirit said:

Would this be the same for a website? Is there some sort of dynamic router that I can use if I am linking everything through a single PIXI.app?

Scene manager? Its somewhere here: https://exponenta.games/games/game-pack/?v=4  but i dont have unobfuscated version.

> So they are kind've like a set of switches, that each time a file is opened, they try to run certain functions

What file?

1 hour ago, KamiFightingSpirit said:

Are the runners kicking off the init() functions in each of the different files? So they are kind've like a set of switches, that each time a file is opened, they try to run certain functions? In your example case those function names are

Yes. But the way you describing it like some magic means you did not open pixi runner source. I'm disappointed. I thought you already cloned pixi and can search through classes. Its here: https://github.com/pixijs/pixi.js/blob/dev/packages/runner/src/Runner.ts

[KamiFightingSpirit]

14 hours ago, ivan.popelyshev said:

Scene manager? Its somewhere here: https://exponenta.games/games/game-pack/?v=4  but i dont have unobfuscated version.

> So they are kind've like a set of switches, that each time a file is opened, they try to run certain functions

What file?

Yes. But the way you describing it like some magic means you did not open pixi runner source. I'm disappointed. I thought you already cloned pixi and can search through classes. Its here: https://github.com/pixijs/pixi.js/blob/dev/packages/runner/src/Runner.ts

I fully appreciate your help! And I did go through the source code  (I have pixi.js always open and go through classes all the time now). It's just hard to understand when you're pretty new and have no one around to ask but online! It is often easier for me to get an intuitive sense for the code and then go in and figure out the details for confirmation.

 

For instance, reading through what you linked, I have questions on the _variableName. I know the "_" designates private variables, but how this all works and their correct usage is still pretty confusing to me (what makes something private? is it just when it can't be accessed without a get function? are there are areas that are correct usage for it?)

Also, this syntax:

  for (let i = 0, len = items.length; i < len; i++)
        {
            items[i][name](a0, a1, a2, a3, a4, a5, a6, a7);
        }

We have an array within an array, but how does the whole (x,y,z, ....) work? I have to look that up...

 

This is why it is tough for someone new, I have a single question that I want an answer to, but in order to get the answer for that question I may have to study several other things for a few hours which would be a distraction (although needed eventually). 

Edited March 29, 2020 by KamiFightingSpirit

[ivan.popelyshev]

>  I know the "_" designates private variables

It means its kinda private but languages both js and ts dont have proper modifiers for them. For example, if I want to add a field in Sprite but users might use it too - I add "_" so sudden pixijs version update wont break their code. Its just a warning "do not touch unless you saw whats its doing in source code".