Jump to content

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


notalentgeek
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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 

Link to comment
Share on other sites

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.
lwvuF7Wf_o.png

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

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

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)
H5QLkTne_o.png

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 by jonforum
Link to comment
Share on other sites

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

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

22 hours ago, notalentgeek said:

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

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

Link to comment
Share on other sites

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 by jonforum
Link to comment
Share on other sites

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 by jonforum
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...