Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    May 2010
    Location
    Bathurst, Australia
    Posts
    180
    Thanks
    1
    Thanked 22 Times in 22 Posts

    Canvas animation

    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?
    Disclaimer: I'm hungover 70% of the time i'm on here, any information given may not be correct, or even legible.

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,109
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Exclamation

    Quote Originally Posted by BulletTimeBill View Post
    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.

  • #3
    Regular Coder
    Join Date
    May 2010
    Location
    Bathurst, Australia
    Posts
    180
    Thanks
    1
    Thanked 22 Times in 22 Posts
    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?
    Last edited by BulletTimeBill; 07-13-2011 at 10:25 AM.
    Disclaimer: I'm hungover 70% of the time i'm on here, any information given may not be correct, or even legible.

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,109
    Thanks
    38
    Thanked 498 Times in 492 Posts
    Show some code or post a link to your concept attempts.

  • #5
    Regular Coder
    Join Date
    May 2010
    Location
    Bathurst, Australia
    Posts
    180
    Thanks
    1
    Thanked 22 Times in 22 Posts
    Well at time of posting I hadn't started animation. But basic idea is something like this.
    Code:
    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.
    Disclaimer: I'm hungover 70% of the time i'm on here, any information given may not be correct, or even legible.

  • #6
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,109
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Question

    Quote Originally Posted by BulletTimeBill View Post
    Well at time of posting I hadn't started animation. But basic idea is something like this.
    Code:
    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?

  • #7
    Regular Coder
    Join Date
    May 2010
    Location
    Bathurst, Australia
    Posts
    180
    Thanks
    1
    Thanked 22 Times in 22 Posts
    I don't think it's the loop, here's a recursive test
    Code:
    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.
    Disclaimer: I'm hungover 70% of the time i'm on here, any information given may not be correct, or even legible.

  • #8
    Regular Coder
    Join Date
    May 2010
    Location
    Bathurst, Australia
    Posts
    180
    Thanks
    1
    Thanked 22 Times in 22 Posts
    Ah no, that's all good. Can't call functions like that,
    Code:
    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.
    Disclaimer: I'm hungover 70% of the time i'm on here, any information given may not be correct, or even legible.

  • #9
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •