how can i extend Sprite using ES6

[DonFrag]

i extended the sprite class using ES6 and the update method is not called

class Block extends Phaser.Sprite{			constructor(xPos,Ypos,n)	{	     super(game, xPos,Ypos, 'block');     this.n=n;	  }  update() {    	console.log('upda');    	}}

funny thing i made the same eith Groups and update from groups works...

 

 

[Skeptron]

You don't pass game in your constructor, thus I guess you pass undefined to the super().

[DonFrag]

game is not undefined inside block

i made a console.log  before and after super and shows the game object

in fact i can use the game object with no problems.

 

all this works, the sprite are created and shown in screen. Just the update is ignored.

"use strict";var BlockGroup= require('./BlockGroup.js')var BLOCK_SIZE=64;var MAX_DISTANCE=64;var FALL_SPEED=20; var DIRECTIONS={UP:0,RIGHT:1,DOWN:2,LEFT:3};var STATES={NORMAL:0,DESTROY:1,TREMBLING:2,FALLING:3};var Origin=null;class Block extends Phaser.Sprite{			constructor(xPos,Ypos,n)	{			     super(game, xPos,Ypos, 'block');	     	     this.AddBody(); 	     	              //set COLOR and DATA     this.color=game.rnd.integerInRange(1,4);     this.tint=this.GetColor(this.color);                this.n=n;     this.myGroup=null;      this.type='block';     this.state=STATES.NORMAL;     this.linked=false;      this.overMe=null;          this.FALL_SPEED=16;                              game.add.existing(this);          //just for debug     var style = { font: "16px Arial", fill: "#000", wordWrap: true, wordWrapWidth: this.width, align: "center" };     this.text=game.add.text(0,0,'n:'+this.n+' c:'+this.color+'\n'+this.linked,style);     this.addChild(this.text);          this.inputEnabled = true;     this.events.onInputDown.add(this.DestroySignal, this);     	}    AddBody() {    game.physics.enable(this, Phaser.Physics.ARCADE);    this.body.collideWorldBounds = true;    this.body.immovable =true;    this.body.allowGravity =false;    this.body.checkCollision.right=false;    this.body.checkCollision.left=false;    this.body.gravity.y=16;    this.body.setSize(BLOCK_SIZE-4,BLOCK_SIZE,2,0);    }    CollideBlocks(me,block) {    	    	return;    	    if(this.myGroup!=block.myGroup)    {        this.myGroup.StopFalling();        ///rejoin groups        this.CheckAround();    }}    CheckAround() {    var center={x:(this.x+(BLOCK_SIZE*0.5)),y:(this.y+(BLOCK_SIZE*0.5))};    var checker=game.add.sprite(center.x,center.y,'block');    checker.width=BLOCK_SIZE*0.5;    checker.height=BLOCK_SIZE*0.5;    checker.anchor.setTo(0.5);    checker.tint='#110000';    checker.alpha=0.1;    game.physics.arcade.enable(checker);    checker.body.allowGravity=false;    //if(this.color!=1)return;    //check up first    checker.body.y-=BLOCK_SIZE;    game.physics.arcade.overlap(checker,game.gm.blocksList,function(me,block){        this.Relink(me,block,DIRECTIONS.UP);    },null,this);    //check up left    checker.body.reset(center.x,center.y);    checker.body.x-=BLOCK_SIZE;    game.physics.arcade.overlap(checker,game.gm.blocksList,function(me,block){        this.Relink(me,block,DIRECTIONS.LEFT);    },null,this);    //check  right    checker.body.reset(center.x,center.y);    checker.body.x+=BLOCK_SIZE;    game.physics.arcade.overlap(checker,game.gm.blocksList,function(me,block){        this.Relink(me,block,DIRECTIONS.RIGHT);    },null,this);    //check  down    checker.body.reset(center.x,center.y);    checker.body.y+=BLOCK_SIZE;    game.physics.arcade.overlap(checker,game.gm.blocksList,function(me,block){        this.Relink(me,block,DIRECTIONS.DOWN);    },null,this);    checker.destroy();}    CheckDistance() {    if(game.physics.arcade.distanceBetween(this,this.overMe)>MAX_DISTANCE)    {        //send signal to group above to fall        if(this.overMe!=null)            this.overMe.myGroup.CallFall();    }}///this is called first when the map is created    CheckLinks(origin) {    Origin=origin;    var center={x:(this.x+(BLOCK_SIZE*0.5)),y:(this.y+(BLOCK_SIZE*0.5))};    var checker=game.add.sprite(center.x,center.y,'block');    checker.width=BLOCK_SIZE*0.5;    checker.height=BLOCK_SIZE*0.5;    checker.anchor.setTo(0.5);    checker.tint='#110000';    checker.alpha=0.1;    game.physics.arcade.enable(checker);    checker.body.allowGravity=false;    //check up first    checker.body.y-=BLOCK_SIZE;    game.physics.arcade.overlap(checker,game.gm.blocksList,function(me,block){        this.FindLink(me,block,DIRECTIONS.UP);    },null,this);    //check up left    checker.body.reset(center.x,center.y);    checker.body.x-=BLOCK_SIZE;    game.physics.arcade.overlap(checker,game.gm.blocksList,function(me,block){        this.FindLink(me,block,DIRECTIONS.LEFT);    },null,this);    //check  right    checker.body.reset(center.x,center.y);    checker.body.x+=BLOCK_SIZE;    game.physics.arcade.overlap(checker,game.gm.blocksList,function(me,block){        this.FindLink(me,block,DIRECTIONS.RIGHT);    },null,this);    //check  down    checker.body.reset(center.x,center.y);    checker.body.y+=BLOCK_SIZE;    game.physics.arcade.overlap(checker,game.gm.blocksList,function(me,block){        this.FindLink(me,block,DIRECTIONS.DOWN);    },null,this);    checker.destroy();}//check if there is any block above    CheckUp() {    if(this.state==STATES.NORMAL)    {        var center={x:(this.x+(BLOCK_SIZE*0.5)),y:(this.y+(BLOCK_SIZE*0.5))};        var checker=game.add.sprite(center.x,center.y,'block');        checker.width=BLOCK_SIZE*0.5;        checker.height=BLOCK_SIZE*0.5;        checker.anchor.setTo(0.5);        checker.tint='#110000';        checker.alpha=0.1;        game.physics.arcade.enable(checker);        checker.body.allowGravity=false;        this.overMe=null;        checker.body.y-=BLOCK_SIZE;        game.physics.arcade.overlap(checker,game.gm.blocksList,function(me,block){            if(this.color!=block.color)            {                this.overMe=block;            }        },null,this);        checker.destroy();    }}//this is called by BlockGroup.js    Destroy() {    //send signal to group above to fall    if(this.overMe!=null)        this.overMe.myGroup.CallFall();  //  this.destroy();    this.kill();    var index = game.gm.blocksList.indexOf(this);    if (index > -1) {        game.gm.blocksList.splice(index, 1);    }}    DestroySignal() {    game.gm.DestroyBricks(this);    this.inputEnabled = false;//prevent multiple calls}///this is called first when the map is created.//Called by this.CheckLinks    FindLink(checker,block,direction) {    if(!block.linked)    {        if(this.color==block.color)        {            if(Origin.myGroup==null)            {                Origin.myGroup=new BlockGroup(game);                Origin.myGroup.add(Origin);                Origin.myGroup.name=this.n;                game.gm.groupList.push(Origin.myGroup);            }            this.linked=true;            Origin.linked=true;            Origin.myGroup.add(block);            block.myGroup=Origin.myGroup;            block.CheckLinks(Origin);        }        else//reference to up block        {            switch(direction)            {                case DIRECTIONS.UP:                    this.overMe=block;                    break;            }        }    }}    GetColor(iColor) {    var color;    switch(iColor)    {        case 1: color='#FF0000';break;//red        case 2: color='#FFFF00';break;//green        case 3: color='#0000FF';break;//blue        case 4: color='#FF00FF';break;//purple    }    return Phaser.Color.hexToRGB(color);}    FallSignal() {}    Relink(checker,block,direction) {    if(this.color==block.color)    {        //replace/join groups        if(block.myGroup!=this.myGroup)        {            console.log('change group called');            var tmpGroup=block.myGroup;            tmpGroup.setAll('myGroup',this.myGroup);            tmpGroup.moveAll(this.myGroup);            //destroy old group            game.gm.RemoveGroup(tmpGroup);        }    }    game.gm.AttachBlocksUp();}    SetFalling() {    	    if(this.state!=STATES.FALLING)    {         this.state=STATES.FALLING;        this.body.immovable=false;    }}    SetNormal() {    this.state=STATES.NORMAL;    this.body.velocity.set(0,0);    this.body.immovable=true;}    update() {    	console.log('upda');    					    switch(this.state)		    {				        case STATES.FALLING:		        	console.log('callblcoj update');				            if(this.overMe)		                this.CheckDistance();				            		            this.body.velocity.y=FALL_SPEED;				            game.physics.arcade.overlap(this, game.gm.player.sprite,null,null,this);		            game.physics.arcade.overlap(this, game.gm.blocksList,this.CollideBlocks,null,this);								            break;		   }		    ///debug		    var over='';		    if(this.overMe)		        over=this.overMe.n;		    else		        over='';						    this.text.text='N:'+this.n +' G:'+this.myGroup.name+' O:'+over;		    				}}module.exports=Block;

[DonFrag]

well ES6 does't work in most browsers so i will not use it anyway

thank you

[chg]

well ES6 does't work in most browsers so i will not use it anyway

thank you

Isn't the common solution to this to use Closure to transpile ES6 down to ES5 / ES3 ?

[DonFrag]

Isn't the common solution to this to use Closure to transpile ES6 down to ES5 / ES3 ?

im sorry i didn't get that

could you explain this?

[chg]

im sorry i didn't get that

could you explain this?

There are tools you can use that transform ES6 code into ES5 (or earlier) compatible JavaScript. I mentioned Closure, but googling just now it seems like Babel might have the best support for ES6... there's a live tool you can play with here:

https://babeljs.io/repl/

I haven't used any of the ES6 transpilers, but it's a similar concept to Typescript or CoffeeScript; with the possible advantage over these that you can use the ES6 code directly in an ES6 compatible browser without transpilation, and only run the transpiler on the code when you want to test on another device or browser that does not have ES6 support.

[Skeptron]

If you don't transpile your ES6, you should definitely have a look at that Phaser boilerplate : https://github.com/belohlavek/phaser-es6-boilerplate

 

Really awesome to get started.

[DonFrag]

thank you