Search the Community

I'm getting back into researching / learning Phaser 3 and how scenes operate. Today I have learned that if we place the 'this' keyword ' in front of a label, it allows us to reference data across the create() and update() methods. For example.... gameScene.create = function() { this.enemy1 = this.add.sprite(250, 180, 'enemy'); } gameScene.update = function() { if (this.enemy1.scaleX <= 2) { this.enemy1.scaleX += 0.01; this.enemy1.scaleY += 0.01; } } With that code, I can see my enemy slowly increasing in size until he reaches twice his size. But from a coding perspective is there an alternative approach to sharing enemy1 across various methods, rather than using 'this' in front it everywhere? I'm going have a lot of labels created and loaded through out various scenes, and would love to know if there is a cleaner name spacing convention that can be taken. I would love to remove the 'this' keyword completely, and get back into using 'let' or 'var'. But I don't see any way of doing such, especially if I want to share data across methods... Thanks!

Good morning guys! I've created a class to manage my sliders in Phaser 2.6.2 with Typescript. I create an object slider like this in file a.ts: let slider = new Slider(game, x, y, width, height, mycallback); mycallback is like that: export function mycallback(value: number): void { usedvalue = value; } My slider class is like that: export class Slider extends Phaser.Group { protected value : number; constructor ( game : Phaser.Game, x : number, y : number, width : number, height : number, onClickCallback : Function ) { super(game); console.log(this); } setParameter(sender) { this.value = sender.width - sender.x; console.log(sender); console.log(this); this.onClickCallback(this.value); sender.onClickCallback(this.value); } } Ok, now both this.onClickCallback(this.value); and sender.onClickCallback(this.value); return an error "onClickCallback is not a function". The first console.log(this), the one inside the constructror, give me the right log writing Slider and all his values. The second console.log(this) and console.log(sender), the ones in setParameter, return me game. What is my error? How can I resolve this?

Hi, friends, what is context in this code "game.add.button(x, y, name, callback, context) " and why this is used in place of context in this code "this.muteButton = game.add.button(20, 20, 'mute', this.toggleSound, this);

Hello every body I have question about using variables and "this". I am autodidact and I really like code and last 2 week I am trying make "simple" game but I am stuck. Here is my question : If I create js file and make there function: function Box(scene){ this.scene = scene; this.box = BABYLON.Mesh.CreateBox("box", 0.32, this.scene); this.boxMat = new BABYLON.StandardMaterial("mat",this.scene); this.boxMat.diffuseColor = new BABYLON.Color3(10,1,1); this.box.material = this.boxMat; }; And I have other js file whit other function which contains mesh like a sphere for example and now I want to use "this.box.position.x " in function where is the sphere. Is it possible ? I tried like function call() but it didn´t worked. I treid search in google some exampels and without success. Sorry for my bad English. Have a nice evening .

hi, i would understand the difference between example 1 and example 2 with the usage of "this.posx" and simply "posx" is it the same ? why in some code i see the usage of this.something ? //example 1 object_physics = function(game,posx,posy,im,Group){ this.posx=posx this.posy=posy Phaser.Sprite.call(this,game,this.posx,this.posy,im) game.physics.arcade.enable(this) this.body.velocity.y=10 Group.add(this) } object_physics.prototype = Object.create(Phaser.Sprite.prototype) object_physics.prototype.constructor = object_physics //example 2 object_physics = function(game,posx,posy,im,Group){ Phaser.Sprite.call(this,game,posx,posy,im) game.physics.arcade.enable(this) this.body.velocity.y=10 Group.add(this) } object_physics.prototype = Object.create(Phaser.Sprite.prototype) object_physics.prototype.constructor = object_physics

hi, i want to work with external module and i would use the correct usage of "this". this snippet works : https://jsfiddle.net/espace3d/hmv7kzqu/ var P= P || {} P.draw = function(game,posx,posy){ var e={} e.character=game.add.sprite(posx,posy,'circle') e.fall=function(){ e.character.y+=1 } return e } P= P || {} var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload,create: create, update: update, render: render }); var player var opponent function preload() { game.load.image('circle', 'https://s13.postimg.org/xjhlzmiev/disc_png.png'); } function create() { player=P.draw(game,100,100) opponent=P.draw(game,200,200) } function update() { player.fall() opponent.fall() } function render() { } but when i would use "this", the opponent don't fall. why ? https://jsfiddle.net/espace3d/rjybz54d/ var P= P || {} P.draw = function(game,posx,posy){ this.character=game.add.sprite(posx,posy,'circle') this.fall=function(){ this.character.y+=1 } return this } P= P || {} var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload,create: create, update: update, render: render }); var player var opponent function preload() { game.load.image('circle', 'https://s13.postimg.org/xjhlzmiev/disc_png.png'); } function create() { player=P.draw(game,100,100) opponent=P.draw(game,200,200) } function update() { player.fall() //don't work opponent.fall() } function render() { }

hi, i'm beginnin with js and phaser and I have some questions related to this snippet "the game.js" ( it's based on a tutorial from Emmanuel Ferrato). var theGame = function(game){ spriteNumber = null; number = 0; workingButtons = true; higher = true; } theGame.prototype = { create: function(){ number = Math.floor(Math.random()*10); spriteNumber = this.game.add.sprite(160,240,"numbers"); var higherButton = this.game.add.button(160,100,"higher",this.clickedHigher,this); higherButton.anchor.setTo(0.5,0.5); clickedHigher: function(){ higher=true; this.tweenNumber(true); }, tweenNumber: function(higher){ } }, } normally when we declare a variable we write : var myVariable = somestuff here,it's write spriteNumber = null; without var and with = null > why ? for wich reason ? next the clickedHigher : function() wath is the signification of this ? what does it refer ? thanks for your lights

Hello guys, I have been a long-time lurker on this forum. Most of my time spent here I wasn't even logged in but I have always enjoyed a ton of great answers here and even more interesting questions asked. Anyways, I don't want to waste your time with introducing myself and will allow myself to ask a question for the first time! I am confused by the usage of "this." vs. "this.game". It seems that I can use both interchangeably without any errors popping up in the console and the same results on the screen. Here is an example: var MyGame = {}; MyGame.game = new Phaser.Game(800, 600, Phaser.AUTO, ''); MyGame.Boot = function() {}; MyGame.Boot.prototype = { preload: function() {}, create: function() { this.game.stage.backgroundColor = '#FFFFFF'; this.game.physics.startSystem(Phaser.Physics.ARCADE); this.state.start('Preload'); }, update: function() {} }; The three lines in the "create" method can all be written beginning with "this.game" or just "this." For example: this.game.stage.backgroundColor = '#FFFFFF'; this.stage.backgroundColor = '#FFFFFF'; this.game.physics.startSystem(Phaser.Physics.ARCADE); this.physics.startSystem(Phaser.Physics.ARCADE); this.game.state.start('Preload'); this.state.start('Preload'); They work just fine in both ways. How come that is so? When do I use "this.game" and when only "this."? I have been following along these tutorials which is also where I got the above code snippets from: SpaceHipster Tutorial: https://gamedevacademy.org/html5-phaser-tutorial-spacehipster-a-space-exploration-game/ BunnyDefender YT Series: link

I am a new joiner and meet following issue need help, many thx. I have following coding in my update: function( ){ } function, if (bid_ending_flag == true){ //countdown console.log('[On update]:started.'); countdown_timer = 10; timerEvent = this.time.events.loop(this.game.Timer.SECOND, this.updateTimer);in my updateTimer function is like this: updateTimer: function(){ countdown_timer -= 1; if(countdown_timer === -1) { this.time.events.remove(timerEvent); <--error happened here setTimeout(countDownText.destroy(), 1000); } else { countDownText.setText(countdown_timer); <-- this worked properly }},Once bid_ending_flag is true, the countdown could be work count from 9 to 0, but the problem happened, always popup error message say : [Error] TypeError: 'undefined' is not an object (evaluating 'this.time.events') in my updateTimer function. I have no idea and hope to get any expert's help. thanks advance again.

Hi all. I am wondering why there is such extensive usage of the "this" keyword in the "Full Screen Mobile" project template (included with Phaser, I am using v2.4.4). Code sample from 'Full Screen Mobile' project template: BasicGame.Boot.prototype = { init: function () { this.input.maxPointers = 1; this.stage.disableVisibilityChange = true; this.stage.backgroundColor = '#000000'; if (this.game.device.desktop) { this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.scale.setMinMax(160, 240, 640, 960); this.scale.pageAlignHorizontally = true; this.scale.pageAlignVertically = true; } else { this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.scale.setMinMax(160, 240, 640, 960); this.scale.pageAlignHorizontally = true; this.scale.pageAlignVertically = true; this.scale.forceOrientation(true, false); this.scale.setResizeCallback(this.gameResized, this); this.scale.enterIncorrectOrientation.add(this.enterIncorrectOrientation, this); this.scale.leaveIncorrectOrientation.add(this.leaveIncorrectOrientation, this); } }Code sample from phaser.io 'examples': var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });function preload() { game.load.atlasJSONHash('bot', 'assets/sprites/running_bot.png', 'assets/sprites/running_bot.json');}var s;function create() { s = game.add.sprite(game.world.centerX, game.world.centerY, 'bot'); s.anchor.setTo(0.5, 0.5); s.scale.setTo(2, 2); s.animations.add('run'); s.animations.play('run', 10, true);}What difference does this make? Why do I have to use it? Is it considered 'best practice'? Does it affect anything if I don't include it?

Hi, I'm trying to create a small javascript app which loads a JSON url and displays some html and divs based on the JSON data. It's got to be as small as possible so without using a frameworks like Phaser and jQuery. The javascript scope of variables is a bit tricky, and I'm having some trouble getting it to work properly. My question is, how can create the MyGame class with an imageShapes image and then reference that imageShapes in the onreadystatechange method of XMLHttpRequest? Here is my code:// namespacevar MyGame = MyGame || { gamedata: [], test123: 'This is a test value 123'};// game objectMyGame.start = function (jsonfilename) { // initialise image this.imageShapes = new Image(); // add gamedata and populate by loading json this.gamedata = []; this.test123 = 'This is a test value 123'; this.loadJSON( jsonfilename, this.onJSONsuccess, // <- function to call on successfully loaded JSON this.onJSONerror );}MyGame.start.prototype = { // load a JSON file loadJSON: function(path, success, error) { console.log('TESTING loadJSON : test123='+this.imageBackground); var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === XMLHttpRequest.DONE) { if ((xhr.status === 200) || (xhr.status === 0)) { // status 0 = local file testing if (success) success(JSON.parse(xhr.responseText)); // <- how to reference back to "MyGame" ? } else { if (error) error(xhr); } } }; xhr.open("GET", path, true); xhr.send(); }, // handle load json events onJSONerror: function(xhr) { console.log('MyGame.js - onJSONerror error loading json file'); console.error(xhr); }, onJSONsuccess: function(data) { // load data from JSON this.gamedata = data; console.log('TESTING -- data.imgshapes='+data.imgshapes+' test123='+MyGame.test123+' imageShapes='+this.imageShapes); // this.imageShapes is also undefined MyGame.imageShapes.src = 'img/mybackground.png'; // <- problem is here, imageShapes is undefined..? }};var test = new MyGame.start('js/mydatafile.json');When I try the code above, it fails in onJSONsuccess. The imageShapes cannot reference and it is undefined, even though I defined it earlier in the MyGame class. This is the error: Uncaught TypeError: Cannot set property 'src' of undefined test123.js:58

Hi guys I'm still really new in this whole JS thing so I get easily confused while writing down my ideas. Currently I'm stuck with writing tween correctly. Would be great if someone can see my code and tell me what's wrong this.readyText = new Phaser.BitmapText(this.game, this.game.width/2 - 100, 500, 'littera', 'R E A D Y', 42);this.readyTween = this.game.add.tween(this.readyText).to( { y: this.game.height/2 }, 500, Phaser.Easing.Linear.None, true);this.readyTween.onComplete.addOnce(function(){ this.readyText.text = 'SET'; // want to change the text, but it won't work this.readyTween.to( { y: 600 }, 500, Phaser.Easing.Linear.None, true); // try to tween it but won't work either });Seems like I'm lost in this whole 'this' scope thingy in JS. I'd really grateful if someone could point me to the right direction. I'm using Phaser 2.2.2. Thanks in advance!