animation effect on a click problem

[bexphones]

hi,

I'm trying to have a animation and when i click this animation stop.

https://jsfiddle.net/espace3d/5b8yqrez/

The problem is after x click the tween seems to be launch several times at the same time.

However i think this snippet does not allow this....where is my error ?

have you a another idea to have this behavior ? Thanks

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload:preload, create: create });

function preload() {
	game.load.image('circle', 'https://s3.postimg.org/bb4aql1lf/touch.png');
}

var _tw_name=[]
var flag=true
var circle
var delay_circle_timer = 1500

//tween
tw = (obj,tw_action,tw_name,f) => {
	f=true
	tw_action(obj,tw_name)
}

// declaration of tw_action
tw_action= (obj,tw_name) =>{
	obj.alpha=.5
	obj.scale.setTo(.1,.1)
	tw_name[0]= game.add.tween(obj.scale).to({x:1.5,y:1.5},1000,Phaser.Easing.Linear.None,true,delay_circle_timer,-1)
	tw_name[0] = game.add.tween(obj).to({alpha:0.1},1000,Phaser.Easing.Linear.None,true,delay_circle_timer,-1)
	tw_name[0].onStart.add(()=> {obj.visible=true})
}

//stop tween
stop_tw = (tw_name,f,obj) => {
	if(f){
		obj.visible=false		
	        game.tweens.remove(tw_name[0])
		f=false
	}
}

function create() {
	circle=game.add.sprite(200,200,'circle')
	circle.anchor.setTo(.5)

	//initiate first tween
	tw(circle,tw_action,_tw_name,flag)

	//simulate a click
	//stop animation and then relaunch animation
	simulate_click=() =>{	
		game.time.events.loop( game.rnd.integerInRange(400,2200),() => {stop_tw(_tw_name,flag,circle);tw(circle,tw_action,_tw_name,flag)})
	}
	game.time.events.add( 2200,simulate_click)
}

 

[bexphones]

it's always interesting to reproduce little example

i see that my function is ok ...the mistake is somewhere else in my code....

https://jsfiddle.net/espace3d/muh57trm/

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload:preload, create: create, update : update });

function preload() {
	game.load.image('circle', 'https://s3.postimg.org/bb4aql1lf/touch.png');
}

var circle
var tw_name
var tap_ready = true
var flag=true
var delay_circle_timer = 1500

//tween on the circle
start_tw = (obj,tw_action,tw_name,f) => {
	tap_ready = true
	f=true
	tw_action(obj,tw_name)
}

// declaration of tw_action
tw_action= (obj,tw_name) =>{
	obj.alpha=.5
	obj.scale.setTo(1,1)
	tw_name= game.add.tween(obj.scale).to({x:1.5,y:1.5},700,Phaser.Easing.Linear.None,true,delay_circle_timer,-1)
	tw_name = game.add.tween(obj).to({alpha:0},700,Phaser.Easing.Linear.None,true,delay_circle_timer,-1)
	tw_name.onStart.add(()=> {obj.visible=true})
}

//stop tween
stop_tw = (tw_name,f,obj) => {
	if(f){
		obj.visible=false		
	        game.tweens.remove(tw_name)
		f=false
	}
}

tap = (th) => {
	game.input.onTap.add(onTap,th);

	function onTap(pointer, doubleTap) {
			if (!doubleTap && tap_ready){
				//protect the function onTap to avoid double tap
				tap_ready=false
				//stop the tween on the circle
				stop_tw(tw_name,flag,circle)
				// initiate another tap_ready randomly
				game.time.events.add(game.rnd.integerInRange(400,2200),() => {start_tw(circle,tw_action,tw_name,flag)})
			}
	}
}

function create() {
	circle=game.add.sprite(400,300,'circle')
	circle.anchor.setTo(.5)
	circle.inputEnabled = true

	//initiate first tween
	start_tw(circle,tw_action,tw_name,flag)
}
function update() {
tap(circle)
}

 

[bexphones]

finded i use an array to store the tween

tw_name[0]=....

or it's not necessary because i coudl use one tw_name with 2 different action (alpha and scale). it could be help someone....