Paul59 Posted June 20, 2018 Share Posted June 20, 2018 Hello Total newcomer to Phaser 3 and Javascript here so please bear with me! I've been fiddling around with the very first example (the bouncing logo) just to get a feel for how things work (code below, set to use local copy of phaser.js as a test and with a pointless 2D array!). It seems pretty straightforward so far but I have two questions... Is it usual to declare variables outside of functions (as in my code), rather than say declaring in preload() or create() and passing them around? And secondly, how do I go about splitting a program into logical chunks/modules/files and retain access to variables or constants that will be required throughout the program? Thank you! Paul <!DOCTYPE html> <html> <head> <!-- <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.min.js"></script> --> <script src="phaser.js"></script> </head> <body> <script> var config = { type: Phaser.AUTO, width: 800, height: 600, physics: { default: 'arcade', arcade: { gravity: { y: 2000 } } }, scene: { preload: preload, create: create, update: updatathon } }; var game = new Phaser.Game(config); var cursors; var logo; var emitter; var arrayText; var test = [ [1, 1, 1, 1, 1], [1, 0, 0, 0, 1] ]; function preload () { this.load.setBaseURL('http://labs.phaser.io'); this.load.image('sky', 'assets/skies/space3.png'); this.load.image('logo', 'assets/sprites/phaser3-logo.png'); this.load.image('red', 'assets/particles/red.png'); } function create () { this.add.image(400, 300, 'sky'); var particles = this.add.particles('red'); emitter = particles.createEmitter({ speed: 600, scale: { start: 0.75, end: 0 }, blendMode: 'ADD', angle : 90 }); // player controlled logo-flavoured spaceship logo = this.physics.add.image(400, 400, 'logo'); logo.setCollideWorldBounds(true); emitter.startFollow(logo); //set up cursor keys cursors = this.input.keyboard.createCursorKeys(); //text to display a pointless array index arrayText = this.add.text(16, 16, '', { fontSize: '32px', fill: '#FFFFFF' }); } function updatathon() { logo.setVelocity(0); if (cursors.up.isDown) { logo.setVelocityY(-100); logo.setScale(0.95); logo.setVelocityX(Phaser.Math.FloatBetween(-100, 100)); emitter.setAngle(Phaser.Math.FloatBetween(60, 120)); emitter.on = true; } else { emitter.on = false; logo.setScale(1); } if (cursors.left.isDown) { logo.setVelocityX(-100); } if (cursors.right.isDown) { logo.setVelocityX(100); } arrayText.setText('Array [0][1]: ' + test[0][1]); } </script> </body> </html> Link to comment Share on other sites More sharing options...
Paul59 Posted June 21, 2018 Author Share Posted June 21, 2018 Seems that scenes are what I'm looking for with regard to splitting code into files but still not sure about variable scope... Link to comment Share on other sites More sharing options...
samme Posted June 22, 2018 Share Posted June 22, 2018 That's a fine way to handle variable scope to start. It's the simplest. A common way is to save values as properties of the current state: this.logo = this.add.logo(/*...*/); It does mean if you call your own methods or pass callbacks, you have to manage the calling context (this) as well. JavaScript modules are a long story: https://hacks.mozilla.org/2015/08/es6-in-depth-modules/ Paul59 1 Link to comment Share on other sites More sharing options...
Paul59 Posted June 22, 2018 Author Share Posted June 22, 2018 Thanks samme, I'll experiment with that and the export/import explained in that link. Paul Link to comment Share on other sites More sharing options...
Recommended Posts