MWX Posted September 27, 2016 Share Posted September 27, 2016 Hi Guys, I am new to interactive HTML5 stuff, so I'm hoping you good folks can help me with this. I'm no professional developer, but I am a professional audio editor. I have a little bit of experience with HTML code and javascript/c# and enjoy working on small projects as a sideline. To make my first interactive/game-like project a bit easier, I decided to try Google Web Designer. I had some problems with the first attempt, so this time, I coded the CSS content and some other bits myself. The problem I am stuck on now is where I want a spritesheet animation to change play direction with a click event. I recreated the problem in a small project: This is the outcome When Reverse is clicked, I created a function event which adds reverseplay="" to the element which is a boolean attribute. When I add this in the HTML, then run it, it works, it changes the direction of the animation. But when I change it dynamically, it doesn't work. So how do you guys work around this kind of screen/GUI update problem? To test if changing a different attribute works, I dynamically change loopcount="1" to loopcount="2", which works fine. So the Loop = 2 button makes the animation loop twice. I appreciate any help with this; If you need to know anything else about the project, just ask. Thanks Quote Link to comment Share on other sites More sharing options...
harrywatson Posted September 29, 2016 Share Posted September 29, 2016 Not sure what google web designer does. You could always try a True - False statement within your function. function if reverse == true. go in reverse else if foward == true. go forward. But you'll need some variables first; here is something I wrote for opening and closing a door; var door1open = false; var ghostly = true; door1.on("click", function(event){ createjs.Tween.get(uparrow) .wait(1800) .to({alpha: .5}, 100); if (ghostly == true){ createjs.Tween.get(ghost1) .wait(800) .to({scaleX: 3, scaleY: 3, x: 300, y: 200}, 800) .wait(800) .to({alpha: 0}, 500);} ghostly = false; if(door1open == false){ createjs.Tween.get(door1) .to({scaleX: -.3}, 1000); createjs.Sound.play("creak"); door1open = true;}else if(door1open == true){ createjs.Tween.get(door1) .to({scaleX: 1}, 1000); createjs.Sound.play("creak"); door1open = false;} Now we've got two variables; ghostly and door1. In your case set your own two variables to something like reverse and forward. So if you've played your forward animation, your reverse animation is false and if you play your reverse animation your forward animation is false. Very simple, very useful. You'll need to strip out my own commands to replace them with your own and it's framework neutral so you can ignore 'createjs.tween' etc '==' means compares true to false and = tells a variable what to do, so if you say 1 = 2 then that's a certainty and if you say 1==2 that compares one to two. It'd be nice to see how you get on. MWX 1 Quote Link to comment Share on other sites More sharing options...
none-9999 Posted October 4, 2016 Share Posted October 4, 2016 pure js: function Animation(radio){ this.direction=true; //clock / anticlock this.cutY=0;//position in spritesheet this.cutX=0; this.maxCutY=13;// last sprite position this.adder=0;//to prevent that animation run much quickly this.changer=0;//in this point chnage cut in sprite this.center={x:0,y:0};//position center by star this.pos={x:0,y:0};//position to draw star this.radio=radio; this.width=this.radio*2; this.height=this.radio*2; this.isInDisplay=false; } Animation.prototype.set = function(dir,posX,posY) { // body... this.direction=dir;//need boolean value from arguments if(this.direction){ //if clock direction this.cutY=0; }else{ //if anti-clock direction this.cutY=this.maxCutY; } this.adder=0; this.isInDisplay=true;//to procces in loop, optimization ;) this.center.x=posX; this.center.y=posY; //asign coordinates to draw this.pos.x=this.center.x - this.radio; this.pos.y=this.center.y - this.radio; }; Animation.prototype.update = function() { if(!this.isInDisplay)return; this.adder+=1; if(this.adder > this.changer){ this.adder=0; if(this.direction){ this.cutY+=1;//in direction of clock if(this.cutY > this.maxCutY){ //this.cutY=0;//if loop this.isInDisplay=false;//if loop comment this } }else{ this.cutY-=1; if(this.cutY < 0){ //this.cutY=this.maxCutY; if loop this.isInDisplay=false;//if loop comment this } } } }; Animation.prototype.paint = function() { if(!this.isInDisplay)return;//to optimization ctx.drawImage(imageStar, this.cutX*this.width, this.cutY*this.height, this.width, this.height, this.pos.x, this.pos.y this.width, this.height ); }; MWX 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.