Highlighted

"Pseudo" swiping in createjs/Animate CC

Contributor ,
Oct 11, 2019

Copy link to clipboard

Copied

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.

 

Views

39

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

"Pseudo" swiping in createjs/Animate CC

Contributor ,
Oct 11, 2019

Copy link to clipboard

Copied

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.

 

Views

40

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 11, 2019 0
bhnh LATEST
Contributor ,
Oct 15, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 15, 2019 0