Getting Started Again with JavaScript and PixiJS, I Need Your Feedback

notalentgeek · December 26, 2019

Hello guys, it has been long time since I visit this forum actually. Just right to the point, I want to get started again with PixiJS and general JavaScript development (last time, it was like three years ago with PhaserJS).

I just done reading all chapters in https://github.com/kittykatattack/learningPixi. I just made a simple circular gradiented white circle that has its alpha decrease and increase over time. Here are the codes:

// Aliases
let Application = PIXI.Application
let Graphics = PIXI.Graphics
let Loader = PIXI.Loader

// Instantiating PixiJS Web Application
let app = new Application({
    width: 640,
    height: 480,
    antialias: true,
});

// Instantiating PixiJS Loader
let loader = new Loader();

// Attaching the `<canvas>` as the latest element in the `<body>`
document.body.appendChild(app.view);

let state;

let simpleCloud,
    simpleCloudAlphaRes;

// Once the assets are loaded (we don't have any assets for this application), run the `setup()` function.
loader.load(setup);

function setup() {
    let canvas = document.createElement('canvas');
    canvas.width = 150;
    canvas.height = 150;

    let ctx = canvas.getContext('2d');

    let x = 75,
        y = 75,
        // Radius of the white glow
        innerRadius = 1,
        outerRadius = 75,
        // Radius of the entire circle
        radius = 75;

    let gradient = ctx.createRadialGradient(x, y, innerRadius, x, y, outerRadius);
    gradient.addColorStop(0, "#FFFFFF66");
    gradient.addColorStop(1, "#FFFFFF00");
    
    ctx.arc(x, y, radius, 0, 2 * Math.PI);
    ctx.fillStyle = gradient;
    ctx.fill();

    simpleCloud = new PIXI.Sprite(PIXI.Texture.from(canvas));
    simpleCloud.x = app.renderer.width/2;
    simpleCloud.y = app.renderer.height/2;
    simpleCloud.anchor.set(0.5, 0.5);
    app.stage.addChild(simpleCloud);

    state = main;

    // Run the PixiJS Application
    app.ticker.add(delta => state(delta));
}

function loop(delta) {
    state();
}

function main(delta) {
    if (simpleCloud.alpha >= 1) {
        simpleCloudAlphaRes = -0.005
    }
    else if (simpleCloud.alpha <= 0) {
        simpleCloudAlphaRes = 0.005
    }

    console.log("simpleCloud.alpha: " + simpleCloud.alpha);

    simpleCloud.alpha += simpleCloudAlphaRes;
}

Here is the HTML:

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Web Application</title>
  <meta name="description" content="Web Application">
  <meta name="author" content="notalentgeek">
</head>

<body>
  <script src="pixi.js"></script>
  <script src="20191226_app.js"></script>
</body>
</html>

I work daily as a Go and Python developer. As I just started with PixiJS and JavaScript seems really odd to me, if you look at glance, at my codes above, what could be done better?

Additionally, how would you structurize your PixiJS folder? What other framework I should use to complement PixiJS (TypeScript, Babel, PixiJS + ReactJS, etc.)? What are recommended VS Code extensions for JavaScript and PixiJS development?

In the end, I want to know the best practice and recommendation when developing JavaScript and PixiJS web application. I hope this is not too much... thank you so much.

ivan.popelyshev · December 26, 2019

Invest time to understand browser devtools.

Typescript must know, everything else is not important.

As for folders and app structure, here's one of my sandboxes with basic app: https://codesandbox.io/s/app-architecture-3-j0di5 Its basic physics with PixiJS and p2. p2 is built from their repo, not from npm (npm is backwards a bit and author is gone somewhere).

The idea is to separate app to components that are referenced from Application and connect them with Runner's (basically, eventEmitter but for one event).

Entities also can have components like Pixi component and physics component.

If you need multiplayer for it, structure will be different, I'm working on new sandbox for it

jonforum · December 26, 2019

There are a lot of ways to work in javascript, and each one has their structure preference.
It will also depend on your objective, (website, games, plugin, app ...)
On my side for a gameProjet with nwjs
I have a preference for the sugar classes which makes it easy to manage pixijs.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes
Ex: of pixi.app with sugar classes.

It allow you to more readability and control methods,scopes,statics....ext

For html and loader i prefer to keep clear html file and do all inside a main

My files and folders structure is rather strange, but I prefer to use an ASYNC injector rather than putting them all in html. (dev only)

From what i see in your code, you use let everywhere, but (let) should be used only in context you need a dynamic variable.
In most case you should use (const)
https://tylermcginnis.com/var-let-const/

Also take a look on ivan example upper, it also a very good way to work, maybe more than me !.
I not try yet the import system maybe i should take a look one day when i will have time !

Edited December 26, 2019 by jonforum

ivan.popelyshev · December 26, 2019

I use imports because its codesandbox. The same architecture can be achieved with concatenation. I'm not fan of packers, the only thing I can use for imports is parcel, I prefer to just concat files like typescript does it.

notalentgeek · December 26, 2019

Alright guys... thank you for your reply. So:

Browser DevTools (I think, I am quite familiar with this)
Use TypeScript
Sugar Classes (not sure what it is meant, but I will learn along the way)
Using const (are there any cases we would still use var?)
Possibility of using WebPack ---> Is this necessary (help my development workflow by significant margin)?

8Observer8 · December 27, 2019

22 hours ago, notalentgeek said:

Browser DevTools (I think, I am quite familiar with this)

VSCode: https://code.visualstudio.com/
http-server: https://www.npmjs.com/package/http-server

22 hours ago, notalentgeek said:

Use TypeScript

Yes, of course.

22 hours ago, notalentgeek said:

Sugar Classes (not sure what it is meant, but I will learn along the way)

+ enum, generics, union-types, interface and more.

22 hours ago, notalentgeek said:

Using const (are there any cases we would still use var?)

Use const for consts and let for variables (do not use var any more)

22 hours ago, notalentgeek said:

Possibility of using WebPack ---> Is this necessary (help my development workflow by significant margin)?

I do not like WebPack, Gulp and Grunt. It is require a lot of time to learning and a lot of space on my hard drive. I use VSCode's plugin "Chrome" + RequireJS for debugging and Browserify + UglifyJS for production. You can read my step-by-step instruction on GitHub: https://github.com/8Observer8/getting-started-with-pixijs-and-typescript

jonforum · December 27, 2019

On 12/26/2019 at 2:16 PM, notalentgeek said:

Alright guys... thank you for your reply. So:
Sugar Classes (not sure what it is meant, but I will learn along the way)

oups yes sorry , the language barrier sometimes makes translation difficult!
i was meaning Sugar Coding

By definition, Thats can mean in javascript,, more visibility and ergonomie, but cost more performance resources.
However not everyone shares the same opinion and it is a personal topic I think.

Example for me

use ternary instead if
use ...spreads
use of Template strings instead Strings
use of Classes instead Function
use forEach instead for
use inline method (chains) with return.
Object Destructuring (very rare and cost a lot but less codes)

... maybe i forget somes..
You can maybe find more good articles about Sugar codie on google. try keys "js sugar code"
https://www.freecodecamp.org/news/js-diabetes-and-understanding-syntax-sugar-5de249ee9ebc/

Edited December 27, 2019 by jonforum

ivan.popelyshev · December 27, 2019

> use inline method (chains) with return.

Obligatory comment: chains aka "fluent interface" is subpar to "builder" aka "metafunction as parameter" aka "with (obj)" that exists in other languages. Don't over-use it.

jonforum · December 27, 2019

1 hour ago, ivan.popelyshev said:

> use inline method (chains) with return.

Obligatory comment: chains aka "fluent interface" is subpar to "builder" aka "metafunction as parameter" aka "with (obj)" that exists in other languages. Don't over-use it.

Yes , i use this kind of stuff only in some special Utility Objects and method. ex: audio, transforms ...

Ex: Instead to write all code like this !

        const c = new PIXI.Container();
        c.name = "master";
        c.position.set(x,y);
        c.setZero();
        const a = $audio._sounds.BT_A.play("BT_A00");
        a.setVolume(1);
        a.setSpeed(1);
        a.Loop(true);

I do not know if it is a question of habit or a bad habit, but I find this bottom code much more readable and functional. They all return self. (this) for allow chains.,

        const c = new PIXI.Container().setName("master");
        c.position.set(x,y).setZero();
        $audio._sounds.BT_A.play("BT_A00").setVolume(1).setSpeed(1).Loop(true);

Edited December 27, 2019 by jonforum

Sign In

Getting Started Again with JavaScript and PixiJS, I Need Your Feedback

Recommended Posts

notalentgeek

Link to comment

Share on other sites

ivan.popelyshev

Link to comment

Share on other sites

jonforum

Link to comment

Share on other sites

ivan.popelyshev

Link to comment

Share on other sites

notalentgeek

Link to comment

Share on other sites

8Observer8

Link to comment

Share on other sites

jonforum

Link to comment

Share on other sites

ivan.popelyshev

Link to comment

Share on other sites

jonforum

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members

Browse

Activity