rungo73 Posted December 6, 2013 Share Posted December 6, 2013 Hi All, Im looking for examples on how to modulize my code. I want to have separate js files for player, powerup, enemy etc. Woiuld be great to see how this is done, so I dont have all my code inthe single game file. Cheers Link to comment Share on other sites More sharing options...
jcs Posted December 6, 2013 Share Posted December 6, 2013 I'm sure there are other examples, but feel free to take a look at the sample in the nadion add-on/library (https://github.com/jcd-as/nadion). it is organized in much the same manner as my game project (from which it was refactored) Link to comment Share on other sites More sharing options...
mavericknl Posted December 6, 2013 Share Posted December 6, 2013 I think you should look at AMD/commonJs, see http://addyosmani.com/writing-modular-js/ Link to comment Share on other sites More sharing options...
jcs Posted December 6, 2013 Share Posted December 6, 2013 amd is indeed a fine thing, but a bit overkill if all you're looking to do is keep your source code in separate files Link to comment Share on other sites More sharing options...
@99golems Posted December 8, 2013 Share Posted December 8, 2013 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) shawnbless, Mike and 7HzG 3 Link to comment Share on other sites More sharing options...
rungo73 Posted December 11, 2013 Author Share Posted December 11, 2013 @99golems thank you for this, seems to be what I'm after. Can you explain the player.js file in a bit more detail? Do I put all player related code, movement, animation etc in the Player function? And should it be structured with create and update functions? Link to comment Share on other sites More sharing options...
@99golems Posted December 11, 2013 Share Posted December 11, 2013 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 More sharing options...
Zaidar Posted December 11, 2013 Share Posted December 11, 2013 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 More sharing options...
gvas Posted December 11, 2013 Share Posted December 11, 2013 The Sprite-derived class's update() method is invoked during World.update(), see the "extending sprite demo 1" example. Zaidar 1 Link to comment Share on other sites More sharing options...
Zaidar Posted December 12, 2013 Share Posted December 12, 2013 Thanks gvas fort the example, so basically I van do this in the player.js script : Player.prototype.update = function() { // do things};Is it on sync with the world.update()? Link to comment Share on other sites More sharing options...
gvas Posted December 12, 2013 Share Posted December 12, 2013 That's correct. Link to comment Share on other sites More sharing options...
kbmonkey Posted February 15, 2014 Share Posted February 15, 2014 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 More sharing options...
justGoscha Posted June 6, 2014 Share Posted June 6, 2014 For me there's the problem that I cannot debug the script in Chrome when it's added via game.load.script()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. EDITFound 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 More sharing options...
Recommended Posts