Skip to main content
Inspiring
October 11, 2019
Question

"Pseudo" swiping in createjs/Animate CC

  • October 11, 2019
  • 1 reply
  • 1923 views

I've been working on a project wherein I wanted to be able to rotate a game object by swiping while running on a tablet/mobile device.  So far as I know, there isn't yet a dedicated method to do swiping in Createjs Touch mode, but I've cooked up something of a hack to work around it...

var active = false;
var firstX, runningX, dx;
var star = this.star;

createjs.Touch.enable(stage);
stage.preventSelection = false;
this.stage.addEventListener("stagemousedown", initActive); 
this.stage.addEventListener("stagemousemove", swiping);
this.stage.addEventListener("stagemouseup", endActive); 

function initActive(){
	this.active = true;
	this.firstX = stage.mouseX;
	
}

function swiping(){
	if(this.active){
		this.runningX = stage.mouseX;
		this.dx = this.firstX - this.runningX;
		star.rotation = this.dx;
	}	
}

function endActive(){
	this.active = false;
}

 

Here's the code in action... http://www.e-nimation.com/HTML5/swipeCode/Swiping.html

I had originally included a tick function...

createjs.Ticker.addEventListener("tick", rotating);
function rotating(){
	console.log("star rotation = "+star.rotation);
	if(this.active) star.rotation = this.dx;
}

but it doesn't seem to be necessary.

 

I hope someone finds this useful.  Feel free to amend, change, comment, throw out the window, etc.

 

    This topic has been closed for replies.

    1 reply

    bhnhAuthor
    Inspiring
    October 15, 2019

    REVISION:

    I noticed that, with the above code, the rotating object (star in this case) jumps back to a rotation of zero each time the stagemousedown function is called.  Here's the corrected code...

    var active = false;
    var firstX, runningX, dx, startRotation;
    var star = this.star;
    
    createjs.Touch.enable(stage);
    stage.preventSelection = false;
    this.stage.addEventListener("stagemousedown", initActive); 
    this.stage.addEventListener("stagemousemove", swiping);
    this.stage.addEventListener("stagemouseup", endActive); 
    
    function initActive(){
    	this.active = true;
    	this.firstX = stage.mouseX;
            this.startRotation = star.rotation;	
    }
    
    function swiping(){
    	if(this.active){
    		this.runningX = stage.mouseX;
    		this.dx = this.firstX - this.runningX;
    		star.rotation = this.dx + this.startRotation;
    	}	
    }
    
    function endActive(){
    	this.active = false;
    }

    This takes into account the rotating object's new rotation rather than resetting it to zero.