Kent Wood

Members
  • Content count

    8
  • Joined

  • Last visited

  1. don't you think AnimationManager shoud be shareable

    thanks guys,at last i found the problem is i run "makeParticles" too frequently and incorrect, particles are born more and more, made a memory leak. the effect i want make is i need my star has an explosion when it get touched, and the star has its own color, there is no way to change the particle instance to play definely animation, so i just make it once one color star reached and do it again when get another color star. at last, i write a custom emitter extends from Phaser.Particles.Arcade.Emitter,and also,i modified Phaser.Particles.Arcade.Emitter,and add 2 methods -- beforeParticleEmit and afterParticleEmit, when one star particle emmited, i just change its color at first. coz used the exisit particle, no memory wasted my code like this ExpandEmitter.js /** * override emitParticle,add 2 methods,beforeParticleEmit and afterParticleEmit */ Phaser.Particles.Arcade.Emitter.prototype.emitParticle = function (x, y, key, frame) { if (x === undefined) { x = null; } if (y === undefined) { y = null; } var particle = this.getFirstExists(false); if (particle === null) { return false; } var rnd = this.game.rnd; if (key !== undefined && frame !== undefined) { particle.loadTexture(key, frame); } else if (key !== undefined) { particle.loadTexture(key); } var emitX = this.emitX; var emitY = this.emitY; if (x !== null) { emitX = x; } else if (this.width > 1) { emitX = rnd.between(this.left, this.right); } if (y !== null) { emitY = y; } else if (this.height > 1) { emitY = rnd.between(this.top, this.bottom); } particle.reset(emitX, emitY); particle.angle = 0; particle.lifespan = this.lifespan; if (this.particleBringToTop) { this.bringToTop(particle); } else if (this.particleSendToBack) { this.sendToBack(particle); } if (this.autoScale) { particle.setScaleData(this.scaleData); } else if (this.minParticleScale !== 1 || this.maxParticleScale !== 1) { particle.scale.set(rnd.realInRange(this.minParticleScale, this.maxParticleScale)); } else if ((this._minParticleScale.x !== this._maxParticleScale.x) || (this._minParticleScale.y !== this._maxParticleScale.y)) { particle.scale.set(rnd.realInRange(this._minParticleScale.x, this._maxParticleScale.x), rnd.realInRange(this._minParticleScale.y, this._maxParticleScale.y)); } if (frame === undefined) { if (Array.isArray(this._frames)) { particle.frame = this.game.rnd.pick(this._frames); } else { particle.frame = this._frames; } } if (this.autoAlpha) { particle.setAlphaData(this.alphaData); } else { particle.alpha = rnd.realInRange(this.minParticleAlpha, this.maxParticleAlpha); } particle.blendMode = this.blendMode; var body = particle.body; body.updateBounds(); body.bounce.copyFrom(this.bounce); body.drag.copyFrom(this.particleDrag); body.velocity.x = rnd.between(this.minParticleSpeed.x, this.maxParticleSpeed.x); body.velocity.y = rnd.between(this.minParticleSpeed.y, this.maxParticleSpeed.y); body.angularVelocity = rnd.between(this.minRotation, this.maxRotation); body.gravity.y = this.gravity; body.angularDrag = this.angularDrag; //add this line,for child Emitter class to override this.beforeParticleEmit(particle); particle.onEmit(); //add this line,for child Emitter class to override this.afterParticleEmit(particle); return true; }; //add these 2 methods Phaser.Particles.Arcade.Emitter.prototype.beforeParticleEmit=function(particle) { } Phaser.Particles.Arcade.Emitter.prototype.afterParticleEmit=function(particle) { } (i strongly recommend to add these 2 methods in the offcial code) Star.ts class StarEmitter extends Phaser.Particles.Arcade.Emitter { currentColor = 'blue'; //override start method,support color change start(explode?, lifespan?, frequency?, quantity?, forceQuantity?, color?) { if (color != undefined) { this.currentColor = color; } return super.start(explode, lifespan, frequency, quantity, forceQuantity); }; beforeParticleEmit(particle) { //just add these lines,in order to call changeColor for normal StarParticle. (no need to do with RandomStarParticle instances) if (particle instanceof StarParticle) { if (!(particle instanceof RandomStarParticle)) { particle.changeColor(this.currentColor); } } } } export class StarParticle extends Phaser.Particle { constructor(game: Phaser.Game, x: number, y: number, key?: any, frame?: any) { super(game, x, y, 'star'); this.anchor = new Phaser.Point(0.5, 0.5); var self = this; Star.colors.forEach(key => { self.animations.add(key, Star.starsFramesAni[key]); }) this.visible = false; } changeColor(color) { this.animations.play(color, 5, true); this.visible = true; } } export class RandomStarParticle extends StarParticle { constructor(game: Phaser.Game, x: number, y: number, key?: any, frame?: any) { super(game, x, y); this.changeColor(Star.colors[game.rnd.integerInRange(0, 7)]); } } export class Star extends Phaser.Sprite { static starsFramesAni: any; static colors: any = ['blue', 'cyan', 'green', 'orange', 'purple', 'red', 'yellow']; static getColorIndex(color) { return Star.colors.indexOf(color); } color: string; constructor(game: any, x?: number, y?: number, color?: string) { super(game, x, y, 'star'); if (color == null) color = Star.colors[this.game.rnd.integerInRange(0, 7)]; this.anchor = new Phaser.Point(0.5, 0.5); this.color = color; //do some staff like "Phaser.Animation.generateFrameNames(key,0,7,'',4)", but cached the frames in a static variable if (Star.starsFramesAni == null) { var starsFrameData: Phaser.FrameData = this.game.cache.getFrameData('star'); var starsFramesAni: any = {}; starsFrameData.getFrames().forEach((value, index) => { var key = value.name.match(/(.+?)0\d+/)[1]; if (starsFramesAni[key] == null) starsFramesAni[key] = []; else starsFramesAni[key].push(index); }) Star.starsFramesAni = starsFramesAni; } //add animations for each star instance, ofcourse, load frames from the cache above var self = this; Star.colors.forEach(key => { self.animations.add(key, Star.starsFramesAni[key]); }) this.animations.play(color, 5, true); //define one only particle emitter, for star explosion, there are many stars,but just one emitter,if some star need a explosion,just move the emitter location to that star if (Star.exploEmitter == null) { Star.exploEmitter = new StarEmitter(this.game, 0, 0, 400); this.game.add.existing(Star.exploEmitter); //use the custome particle class Star.exploEmitter.particleClass = StarParticle; //make particle instance inside the emitter Star.exploEmitter.makeParticles(); Star.exploEmitter.setAlpha(1, 0.1, 2000, Phaser.Easing.Cubic.In); Star.exploEmitter.setScale(1, 0, 1, 0, 1000, Phaser.Easing.Cubic.In); Star.exploEmitter.gravity = 500; } } static exploEmitter: StarEmitter; explosion() { Star.exploEmitter.x = this.body.x; Star.exploEmitter.y = this.body.y; //make an explosion,and set a color,'coz i just override the start method Star.exploEmitter.start(true, 2000, null, 10, true, this.color); this.destroy(); } update() { if ((this.y - 300) > this.game.camera.view.bottom) { this.destroy(); } } } and check the demo effect http://d2z4fez41b07b4.cloudfront.net/game/index.html
  2. don't you think AnimationManager shoud be shareable

    suppose i have a star spritesheet (like the attachment show. also inclde the frames jsonarray) i import it and create a animation dictionary from these code //in main.ts //load sprite sheet and jsonarray this.game.load.atlasJSONArray('star','./assets/stars.png',null,'./assets/stars.json') //in Star.ts //just record all the frame data in a static variable //that is a table, which has each color as the key,and the frame as that color's animation frames if(Star.starsFramesAni==null) { var starsFrameData:Phaser.FrameData=this.game.cache.getFrameData('star'); var starsFramesAni:any={}; starsFrameData.getFrames().forEach((value,index)=>{ var key=value.name.match(/(.+?)0\d+/)[1]; if(starsFramesAni[key]==null) starsFramesAni[key]=[]; else starsFramesAni[key].push(index); }) Star.starsFramesAni=starsFramesAni; } //for each star instance,i should find thouth that animation table,and add the frames to this star instance var self=this; Object.keys(Star.starsFramesAni).forEach(key=>{ self.animations.add(key,Star.starsFramesAni[key]); }) //so that,at last,i can play this specific color's animation this.animations.play(color,5,true); if it is only star,program can handle that,even though it is still a little jam. but when i try to make the star be a particle, like a star explosion effect.the program is totally crashed, just because i have to add anmations again in each star particle instance that's why i think the animation should be shared or just seprated from the sprite. define somewhere,sprite just reference to the animations instance,and use it. no need to add it in each sprite constrator stars.json
  3. Hello everyone i was wonder is there a way to make the AnimationManager instance shareable. so that when i create a new instance of my sprite,i don't need to add animations once a Sprite instance create . //this is the current way class Player extends Phaser.Sprite { contractor(game) { super(game,0,0,'player'); this.animations.add('walk',[0,1,2,3]); this.animations.add('run',[4,5,6,7]); } } that's a waste of memory,and if i create a lot sprite instances same time,a big JAM would happen so, i wanna this way var animationManager=new Phaser.AnimationManager(); //add animations animationManager.add('walk',[0,1,2,3]); animationManager.add('run',[4,5,6,7]); //then i create 2 players var playerA=new Player(game) playerA.animations=animationManager; var playerB=new Player(game) playerB.animations=animationManager; //////////////even thought that animationManger instance shoud be a static variable and declare inside of the Player class/////////////// class Player extends Phaser.Sprite { static animationManager; contractor(game) { super(game,0,0,'player'); if(Player.animationManager==null) { //register animations here } this.animations=Player.animationManager; } }
  4. thanks rich so the priority setting is a global setting? i thought it is only compare the object in the same container,and the top objects always have high priority appreciate again
  5. Hi, world --popUpsGroup --someCardsIncludePanel --cardSprite --tableGroup --cardSprite suppose the stage structure like above displayed. there are 2 cards.one is placed inside a popup panel,and another is place on the table.both are inputEnable=true suppose i am going to do some interactive to the cards in the popups. however,the card on the table interrupt the mouse interactive,and it looks that the interactive area of card on the table is over the card in popups,even it is exactly placed behind in view why that happen? how to avoid that? thanks for your attention and anwser
  6. tween accumulation when reuse it

    Hey guys I found a bug in the official tween example http://examples.phaser.io/embed.php?f=tweens/single+tween+reuse.js that is a 5 tweens, and chain by onComplete event handle, open chrome inspector,add a break point in one tween handle,and you will found that the tween is accumulation more and more.(the time cost to arrive the break point is longer as the loop times accumulation ) and also you can found that the timeline in the tween in more and more that is to bad
  7. tween accumulation when reuse it

    Hey guys I found a bug in the official tween example http://examples.phaser.io/embed.php?f=tweens/single+tween+reuse.js that is a 5 tweens, and chain by onComplete event handle, open chrome inspector,add a break point in one tween handle,and you will found that the tween is accumulation more and more.(the time cost to arrive the break point is longer as the loop times accumulation ) and also you can found that the timeline in the tween in more and more that is to bad