Canvas animation

[BulletTimeBill]

Anyone got any suggestions on techniques? The main one I find is to use translate to move the canvas around, which just seems odd to me. I don't even fully understand how it works. But the one I was looking at used clearRect. In examples given looked as though it had to redraw the canvas every frame.
I'm just mucking around with a simple poker game, figured i'd have the table in one layer and anything that moves on a top layer? By doing that I could only clear each card as it moved around...yes? Anyone know of a better way of doing things?

[jmrker]

Originally Posted by BulletTimeBill

Anyone got any suggestions on techniques? The main one I find is to use translate to move the canvas around, which just seems odd to me. I don't even fully understand how it works. But the one I was looking at used clearRect. In examples given looked as though it had to redraw the canvas every frame.
I'm just mucking around with a simple poker game, figured i'd have the table in one layer and anything that moves on a top layer? By doing that I could only clear each card as it moved around...yes? Anyone know of a better way of doing things?

Post a simple attempt at what you are trying to do.
Does not need to be the whole poker program, just the image displays and motions desired.

For canvas drawing, it is not uncommon to redraw the images for every movement.
May make the animaiton a bit jerky depending upon the amount of redrawing required.

Another method would be to use "sprites" or images with different z-index values to create the layer effect.
Then the redrawing is replaced with top and left settings of the elements to create motions.

[BulletTimeBill]

By doing that I could only clear each card as it moved around...yes?

That was the idea, to redraw each card. But then I had another thought during work today(I work in retail...i mostly just let my mind wonder on to more important things) If i use clearRect to remove the old card, it may remove some of the other cards near by...sigh. So I imagine I'd have to use some of these compositing attributes?
And yes, using divs and images and css etc would be a lot easier, but that would defeat the purpose of learning canvas Or did you mean each card on it's own canvas?

[jmrker]

Show some code or post a link to your concept attempts.

[BulletTimeBill]

Well at time of posting I hadn't started animation. But basic idea is something like this.

function animTest(ctx, obj, x, y){
	currX = obj.dx_;
	currY = obj.dy_;
	incr = 1; 
	while(currX <= x){
		ctx.clearRect(currX, currY, DIS_WIDTH, DIS_HEIGHT);
		currX += incr;
		setTimeout(obj.position({x:currX, y:0}),500);
	}
}

Seems to work...to an extent. It get's moved across the screen, just...instantly. I tested by chucking an alert in my loop. It's moving across fine at 1px. Is there something i'm forgetting here with setTimeout? Or is something freaking out somewhere else? It is my first real attempt at some oop so that's pretty likely.

[jmrker]

Originally Posted by BulletTimeBill

Well at time of posting I hadn't started animation. But basic idea is something like this.

function animTest(ctx, obj, x, y){
	currX = obj.dx_;
	currY = obj.dy_;
	incr = 1; 
	while(currX <= x){
		ctx.clearRect(currX, currY, DIS_WIDTH, DIS_HEIGHT);
		currX += incr;
		setTimeout(obj.position({x:currX, y:0}),500);
	}
}

Seems to work...to an extent. It get's moved across the screen, just...instantly. I tested by chucking an alert in my loop. It's moving across fine at 1px. Is there something i'm forgetting here with setTimeout? Or is something freaking out somewhere else? It is my first real attempt at some oop so that's pretty likely.

The problem, as I see it with you minimum of code, is that you are in a while loop until the currX reaches x. It does not exit that loop until the destination is reached.
The loop is probably faster than the 1/2 second you have allotted for the timeout to occur, so the action you see is an immediate jump to the final x destination.

I would have a different (additional) question. What movement is to happen when currX is greater than the final x location. What the above code you will get no movement.

Also, you are only controlling the currX location with that code. What about any movement in the vertical directions, like: currY?

[BulletTimeBill]

I don't think it's the loop, here's a recursive test

function animTest(ctx, obj, x, y){
	currX = obj.dx_;
	currY = obj.dy_;
	incr = 1; 
	if(currX <= x){
		ctx.clearRect(currX, currY, DIS_WIDTH, DIS_HEIGHT);
		currX += incr;
		obj.position({x:currX, y:0})
		setTimeout(animTest(ctx, obj, x, y),500);
	}
}

Same deal. And no it doesn't have all the other directions. This is simply a test at the moment.

[BulletTimeBill]

Ah no, that's all good. Can't call functions like that,

setTimeout(animTest(ctx, obj, x, y),500);

That's just me and my misunderstanding of fundamental programming rules. Have to make it method or something. Anyway, back to the main problem of things like clearRect erasing parts of other cards/chips/whatever happens to be in the way.

[vinceshanez643]

hello..


Recessed Lighting - Taos ski valley - Taos Real estate