Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

modulizng js files


Recommended Posts

inside your game's preload() you use game.load.script() like below:

function preload(){	game.load.script('player.js', 'lib/game/sprites/player.js');}

then here's the player.js file (Player is an extension of Phaser.Sprite):

game.load.spritesheet('playersheet', 'media/player01.png', 64, 64);Player = function(game, x, y){	Phaser.Sprite.call(this, game, x, y, 'playersheet');	this.anAttribute = 'whatever';	this.anotherAttribute = 20;}Player.prototype = Object.create(Phaser.Sprite.prototype);Player.prototype.constructor = Player;

(for convenience i include relevant asset loading inside the respective code file, like in line 1 of player.js. you don't have to do this obviously)

Link to comment
Share on other sites

Rungo, this is just how I chose to do it. You are free to do it other ways if you want. Rich has stated many times that they decided not to enforce any sort of forced modularity so you're free to do it however you want. 


the game.load.script() command will load the script by making a new <script> element in the document's HEAD and appending it. So it's very similar to having an index.html file look like this:

<html><head>  <script src='phaser.js'></script>  <script src='game.js'></script>  <script src='player.js' comment="more or less this is how it works, for all intents and purposes of this explanation anyway"></script></head><html>etc....

You wouldn't put a separate update/preload inside player.js because Player, in this example, is an extension of Sprite, and Sprite objects don't have an update/create/preload.


You now have a Player object that you can create instances of elsewhere in the code like you would any other sprite.


If the prototype stuff is unclear to you, i suggest reading up on how javascript can be made to do inheritance via prototypes.

Link to comment
Share on other sites

Ok, so basically it's a way of separaring concepts like player, enemy, etc... But what i think the answer to @rungo73 was asking is that you cant use update/create/preload...in this script, it's juste a way of organising the concept of the app.

Feel free to correct me if i'm wrong.

Link to comment
Share on other sites

  • 2 months later...

Hello, I have been looking at this for a few hours now, the loading of a separate script resource works fine but I cannot figure out how to reference the running game object from within the script.


Here is a contrived example of what I am struggling with. I suspect because I am using game states, the running game object is only available on the current state's scope. The browser debug console does not show me a reference to the running game reference.


I will appreciate any hints to solving this issue :)


seperate.js file loaded in preload with:

	preload: function () {        this.game.load.script('seperate', 'seperate.js');	},
BasicGame.SomeObject = {};BasicGame.SomeObject.SomeList = ['foo', 'bar', 'baz'];BasicGame.SomeObject.SomeResult = [];BasicGame.SomeObject.Fluctuate = function Fluctuate() {    // I need to access the game rnd object here    this.SomeResult.push(this.SomeList[BasicGame.rnd.integerInRange(0, 3)]);    return this.SomeResult;}
Link to comment
Share on other sites

  • 3 months later...

For me there's the problem that I cannot debug the script in Chrome when it's added via 


I can jump into the code from my main game.js, and then the script shows up as some VM2039 (or some other number) and then I can go through it, but it doesn't show up in the sources.



Found a hacky solution for that.

When inserting a `console.log('js/myfile.js')` in the beginning of each file I can see it in the console and jump from there to the file.

Link to comment
Share on other sites


  • Recently Browsing   0 members

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