Jump to content

Confused about best practice for modular code and loading separate files


Recommended Posts

I've read through just about all of this guide (https://github.com/kittykatattack/learningPixi). I think I have a grasp of how to switch stages/scenes. There's one part that doesn't make sense to me however. 

If I wanted to create a separate .js file for every class and every scene's code, what's the best practice for loading those files? I've seen examples where the index.html file just includes all of the scripts, but isn't that possibly a slow and/or bad experience? A previous flow I read about was loading the bare minimum (a background, logo, and loading graphic) and then loading all other images and javascript files. 

Is there a best practice to load these separate javascript files through the Pixi loader so the splash screen comes up instantly and show a loading bar while I pull in all these extra assets? 


Link to comment
Share on other sites

Modularity doesnt mean all those files are loaded by browser. You have to concatenate your files or build them with webpack/browserify/rollup/whatever_you_want. Code separation is a difficult problem that should not be considered as "everyone does it", and it is not required even for big applications.

There are no examples about pixi and modular assets, its one of things that everyone manages on their own, because there are many ways to do it. 

Are you sure that you need it? In my cases, just using TypeScript + extra pixi loader for each stage works.

Link to comment
Share on other sites

Personally I don't work directly in javascript, I use typescript and requirejs. In dev mode I output all my ts classes/modules as unique files (easier to debug) and let requirejs load whatever needs to be loaded (talking about js here). In prod mode I output only one file (.js) which in typescript is convenient since it only picks the file that the app really needs and nothing more. Browsers are usually loading .js file sequentially so you don't gain anything by breaking a js file down into smaller chunk unless you have something like requirejs to do the job once the page is done loading.

Now for assets (other than .js files) it's a different matter, don't think all loading is the same, js is one thing, assets are another. You shouldn't need to preload everything your app is gonna need. I have a html5 app with 400M of assets, none are preloaded, instead every view loads what it needs when they show on display and clean up when they are removed. It's a more dynamic approach, there's no wait time for user and we save on bandwidth since we only load what is needed.

But just for the javascript part look into typescript and requirejs, this will already make your work a lot easier and the insertion in the page very easy.

Link to comment
Share on other sites

There are a few links to boilerplates in https://github.com/pixijs/pixi.js/wiki/Boilerplate . Personally I recommend not to use webpack and other tools before you have time to understand them. 

You can also look at https://github.com/rpgtkoolmv/corescript , its rpgmaker mv runtime, it compiles directories in corresponding files with grunt script - one of easiest configurations that work good.

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.

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.


  • Recently Browsing   0 members

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