Seperate Javascript functions

[proyb2]

In index.html, default.js and subfunction.js has been added in the head.

In default.js sc is declared as global variable:

var sc=new PIXI.DisplayObjectContainer();

sub();

In subfunction.js:

function sub(){

var t=new PIXI.BitmapText("Test",{font:"61px Arial"});

t.position.x=32;

t.position.y=32;

sc.addChild(t); ???

}

The Bitmap text wont render anything to the scene when I separate the functions into 2 files, debug shown the BitmapText structure has all the info.

 

[hubert]

1. try passing the sc argument to the function

function sub(sc){//..... your code};

3. at what order are they included and is the other one wrapped up un a function as well. Javascript scoping is based on functions so there might be something undefined or invisible to the scope you are using.

 

3. Using global namespaces for all of your functions is a very bad practice, eventually you'll end up cluttering your memory wich is very precious in browser and especially in mobile, try looking into a mediator pattern.

 

4. Could you please make a fiddle to play around with it?!

 

http://www.sevenative.com

[omarojo]

Hi @hubert it would be vey useful if you could post a best practice pattern to accommodate files for functions and object models in javascript for PIXIjs. My game is getting all spaghetti ugly because I have everything in one file and it would be very useful to understand how to separate a game into scenes and files. (We don't get to see this best practices in the PIXI tutorials) 

 

Something like this, but for PIXI: http://perplexingtech.weebly.com/software-blog/using-states-in-phaserjs-javascript-game-developement

[xerver]

Pixi works very hard to not force you into any organizational structure for your project.

 

I recommend looking into CommonJS, Browserify, and NPM. You can split your code across files and use require() to share code across them.