Problem with function for create in update

[Mizukage]

In UPDATE I have a function who check player.exp if is enought call another function who should create image on the game screen with congratilations and fadeout after few sec, but this function is in CREATE and i have error afer call it from UPDATE 

Uncaught ReferenceError: showInfo is not defined

CREATE

        function showInfo() {            gratz = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY, 'gratz');            gratz.anchor.setTo(0.5, 0.5);        }

UPDATE

        function lvlUpCheck(player) {            if (player.exp <= 500) {                console.log('still lvl 1');            } else if (player.exp <= 1000) {                player.lvl = 2;                showInfo();            }        }

[chongdashu]

perhaps move the showInfo method out of the create method and into the state object?

 

e.g., 

function create() {  // ...  this.showInfo();}function update() {  // ...  this.lvlUpCheck(this.player);}function showInfo() {  gratz = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY, 'gratz');  gratz.anchor.setTo(0.5, 0.5);}function lvlUpCheck(player) {  if (this.player.exp <= 500) {     console.log('still lvl 1');  } else if (this.player.exp <= 1000) {     player.lvl = 2;     this.showInfo();   }}

[Mizukage]

I cant move code, maybe I show all construction

var theGame = function (game) {    this.upKey;    this.downKey;    this.leftKey;    this.rightKey;    this.playerCanMove = true;    this.map;    this.layer;    this.layer2;    this.cursors;    this.gratz;    this.playerSprite;    this.enemy1Sprite;    this.enemies;    this.speed = 300;}theGame.prototype = {    create: function () {        this.player = {            name: 'Kirito',            lvl: 1,            lvl2: false,            lvl3: false,            hp: 100,            attack: 10,            exp: 10,            card: 1,            gold: 0        }        this.monsterLvl1 = {            name: 'Rat',            hp: 50,            attack: 5,            exp: 50,            gold: 5        }        map = this.game.add.tilemap('MyTerrain');        map.addTilesetImage('tiles', 'tiles');        //map.addTilesetImage('tile2','tile2');        //map.addTilesetImage('tile3','tile3');        //map.setCollision(400);        layer = map.createLayer('MyTerrain');        layer.resizeWorld();        //layer.wrap false - mapa sie nie powiela przy za duzym oknie gry        layer.wrap = false;        //Kolizja ze wszystkim na warstwie topLayer w zmiennej layer2        //map.setCollisionBetween(1, 10000, true, layer2);        playerSprite = this.game.add.sprite(500, 850, 'player');        enemy1Sprite = this.game.add.sprite(680, 150, 'enemy1');        //monsterLvl1Sprite = this.game.add.sprite(500,500, 'monsterLvl1');        //Skalowanie 1.4 dla grafik postaci 32x32        //monsterLvl1Sprite.scale.setTo(1.4);        playerSprite.scale.setTo(1.4);        enemies = this.game.add.group();        for (var i = 0; i < 16; i++) {            enemies.create(360 + Math.random() * 200, 120 + Math.random() * 200, 'monsterLvl1');            enemies.scale.setTo(1.4);        }        //Fizyka Start        this.game.physics.startSystem(Phaser.Physics.ARCADE);        this.game.physics.arcade.enable(playerSprite);        //this.game.physics.arcade.enable(monsterLvl1Sprite);        playerSprite.body.collideWorldBounds = true;        //monsterLvl1Sprite.body.collideWorldBounds = true;        //Kolicje mozliwosci        this.game.physics.enable([playerSprite, enemy1Sprite], Phaser.Physics.ARCADE);        //this.game.physics.enable([playerSprite, layer2], Phaser.Physics.ARCADE);        this.game.physics.enable([playerSprite, enemies], Phaser.Physics.ARCADE);        cursors = this.game.input.keyboard.createCursorKeys();        upKey = this.game.input.keyboard.addKey(Phaser.Keyboard.W);        downKey = this.game.input.keyboard.addKey(Phaser.Keyboard.S);        leftKey = this.game.input.keyboard.addKey(Phaser.Keyboard.A);        rightKey = this.game.input.keyboard.addKey(Phaser.Keyboard.D);        this.game.camera.follow(playerSprite, Phaser.Camera.FOLLOW_PLATFORMER);        //Laduje muzyke do gry        this.gameMusic = this.add.audio('gameMusic', 0.04, true);        this.gameMusic.play();        //player_hp_bar = this.game.add.text(this.game._width-30, 50, this.player.hp, { fontSize: '25px', fill: '#fff' });      },    //	enterNumber: function(){    //		workingButtons=true;    //		if((higher && spriteNumber.frame<number)||(!higher && spriteNumber.frame>number)){    //			this.game.state.start("GameOver",true,false,score);	    //		}    //		else{      //			score++;    //			number = spriteNumber.frame;    //		}	    //	}    update: function () {        //KOLIZJE        //        //kolizja gracza z przeciwnikiem         this.game.physics.arcade.overlap(playerSprite, enemy1Sprite, collisionHandler, null, this);        this.game.physics.arcade.overlap(playerSprite, enemies, pve, null, this);        this.game.physics.arcade.collide(playerSprite, enemies);        //Kolicja gracza z obietami mapy warstwa top, na pozniej         //this.game.physics.arcade.overlap(playerSprite, layer2, mapObjectColision, null, this);        function collisionHandler(obj1, obj2) {            //wylacza muzyka z instancji gry            this.gameMusic.stop();            //Instancja bitwy            this.game.state.start("Lvl1room");        };        //Bedzie na kolizje z obiektami zadajacymi dmg         function mapObjectColision() {            //Do testow            console.log('kolicja z obiektem mapy');        };        function pve(player, enemy) {            console.log('Kolizja PVE');            this.player.exp += this.monsterLvl1.exp;            console.log('Gain ' + this.monsterLvl1.exp + ' experience points')                //enemies.destroy();            enemy.kill();            console.log('Monster destroyed');            lvlUpCheck(this.player);            //zrobic algorytm walki turowej na podstawie statow gracza i monstera        };        function lvlUpCheck(player) {            console.log('lvlUpCheck(player)');            if (player.exp <= 500) {                console.log('still lvl 1');            } else if (player.exp <= 1000) {                //dzwiek lvl up i napis na srodku ekranu czasowy                console.log('Congratulations lvl 2 now');                player.lvl = 2;                lvlUp(player);                console.log(player.lvl);                //showInfo();            }        }        function showInfo() {            gratz = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY, 'gratz');            gratz.anchor.setTo(0.5, 0.5);        }        function lvlUp(player) {            if (player.lvl2 == false) {                player.hp += (player.hp / 10);                player.attack += (player.attack / 10);                player.lvl2 = true;            } else if (player.lvl2 == true && player.lvl3 == false) {                player.hp += (player.hp / 10);                player.attack += (player.attack / 10);                player.lvl3 = true;            }        }        //Sterowanie Postacia        //        //Stoi w miejscu        playerSprite.body.velocity.y = 0;        playerSprite.body.velocity.x = 0;        if (upKey.isDown) {            playerSprite.body.velocity.y = -this.speed;        } else if (downKey.isDown) {            playerSprite.body.velocity.y = this.speed;        }        if (leftKey.isDown) {            playerSprite.body.velocity.x = -this.speed;        } else if (rightKey.isDown) {            playerSprite.body.velocity.x = this.speed;        }    },    render: function () {        this.game.debug.text('Name: ' + this.player.name, 30, 30);        this.game.debug.text('Hp: ' + this.player.hp, 30, 50);        this.game.debug.text('Att: ' + this.player.attack, 30, 70);        this.game.debug.text('Lvl: ' + this.player.lvl, 180, 30);        this.game.debug.text('Exp: ' + this.player.exp, 280, 30);        //this.game.debug.bodyInfo(playerSprite, 32, 320);    }}

[chongdashu]

I am not really familiar with placing methods within methods - I personally think it makes it confusing as to what exactly "this" will refer to when one goes several leves deep. (i.e., you are placing showInfo() and lvlUpCheck() within the update() method, which is in the prototype of the myGame object. Thus, when you call showInfo within lvlUpCheck(), it will never be able to reach showInfo since the context is not clear.

 

There might be a way to make it work, but as I mentioned, I'm not very familiar with using such a paradigm.

 

Here is a jsFiddle that fixes the problem: https://jsfiddle.net/chongdashu/Lsoe48t7/

 

It uses  my suggestion of moving those methods out into the game state instead. The reason for doing so is that you can be sure of what  method and the context you are calling it with.

 

To help level up quickly, just hold down SPACEBAR.

 

Hope it helps.

[Mizukage]

Thanks, now It's working

 

So when Phaser need "this" before variable or function and when not?  Im not realy understand... 

[chongdashu]

So when Phaser need "this" before variable or function and when not?  Im not realy understand... 

 

 

"this" is very tricky, not just in Phaser, but Javascript in general. The problem is that this refers to the caller of the function - and this often changes depending on who is calling the method and in what context. For me, I generally place all fields and methods at the state level (e.g., on the same level as update(), preload(), render()). Thus, "this" will almost always refer to the Phaser.State object. So, always use "this" before a variable and method if it belongs to the Phaser.State object, and avoid "this" when referring to a locally created variable.

 

Also, avoid anonymous inner functions where possible (or any inner function for that matter), as it can mess up what "this" refers to.