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.
Page 4 of 5 FirstFirst ... 2345 LastLast
Results 46 to 60 of 71

Thread: Canvas Problem

  1. #46
    Regular Coder
    Join Date
    Jun 2010
    Posts
    133
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by devnull69 View Post
    You could use another, smaller canvas on top of the other, so you'd only have to manipulate that canvas (clear, redraw, move).
    I could, but obviously you can't use <canvas><canvas></canvas></canvas>

    So would you position the second with css?

  2. #47
    New Coder donna1's Avatar
    Join Date
    Nov 2012
    Location
    london
    Posts
    99
    Thanks
    9
    Thanked 4 Times in 4 Posts
    Quote Originally Posted by pdiddles03 View Post
    So ok, let's say I have my map all written out and generated.

    Next, i put my character on top, how would I go about clearing just the character when I move him, and not the map?
    As Mr Old Pedant has been explaining it to me I will share - you can print things on top in a higher layer so when you move them away the map still shows. (It doesnt require two canvas's you just set the z layer higher to the objects you want in front)
    My problem was drawing a character over a background. You have to use a GIF rather than a JPEG to set the unwanted pixels to transparent so the background shows through any white space around your graphic
    Last edited by donna1; 12-06-2012 at 04:31 PM.

  3. #48
    Regular Coder
    Join Date
    Jun 2010
    Posts
    133
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by donna1 View Post
    As Mr Old Pendant has been explaining it to me I will share - you can print things on top in a higher layer so when you move them away the map still shows. (It doesnt require two canvas's you just set the z layer higher to the objects you want in front)
    My problem was drawing a character over a background. You have to use a GIF rather than a JPEG to set the unwanted pixels to transparent so the background shows through any white space around your graphic
    I figured it out, instead of usint canvas.width=canvas.width, let say my character is called "hero" I just used hero.width=hero.width and that worked perfect.

  4. #49
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,151
    Thanks
    80
    Thanked 4,557 Times in 4,521 Posts
    Quote Originally Posted by pdiddles03 View Post
    So ok, let's say I have my map all written out and generated.

    Next, i put my character on top, how would I go about clearing just the character when I move him, and not the map?
    Well, the obvious answer is to *NOT* change the map, *AT ALL*.

    Instead, just make your character *SEPARATE* from the map, with a z-index higher than the map, so he ends up appearing in front of the map.

    But what is the big deal about swapping the character image for one of the map images and then, when he moves, swapping the map image back in???

    That's trivial, though it won't look as good as having the character as a separate image (a ".png" or ".gif" image, with transparencey!) that moves smoothly from one square to the next instead of having the ugly double replacement.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  5. #50
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,151
    Thanks
    80
    Thanked 4,557 Times in 4,521 Posts
    *** HERE ***

    A live demo. I am using a single image as the background instead of an array of images, but that doesn't impact the overlay idea.

    Movement here is random instead of directed by user, but it shows all the concepts.

    http://www.mywhizbang.com/demoOverlay.html

    VIEW-->>SOURCE there to see how it is working.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  6. #51
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,151
    Thanks
    80
    Thanked 4,557 Times in 4,521 Posts
    And one more:
    http://mywhizbang.com/demoMover2.html

    To move the overlay image, you click on any "square" (50x50 pixel region) that is *adjacent* to the current position. The image then moves there. Smoothly.

    The squares, per se, are invisible. With a grid of images, they wouldn't need to be. You could put a thin border on each image to delineate the cells.
    Last edited by Old Pedant; 12-06-2012 at 02:57 AM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  7. #52
    New Coder donna1's Avatar
    Join Date
    Nov 2012
    Location
    london
    Posts
    99
    Thanks
    9
    Thanked 4 Times in 4 Posts
    thats very clever, looks good.

    btw What does old pedant mean? I mistakenly called you old pendant before sorry. now curious what pedant means - is it something to do with your railway avatar?

  8. #53
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    afaik a "pedant" is someone who puts a lot of emphasis on details and who also expects that from others.

  9. #54
    New Coder donna1's Avatar
    Join Date
    Nov 2012
    Location
    london
    Posts
    99
    Thanks
    9
    Thanked 4 Times in 4 Posts
    ok, anyway clever Pedant, would you be able to post the code for your last example, where it moves to the next cell? I like how thats done.
    Also which package did you use to make your GIF with transparent border?
    I have downloaded GIMP Paint now but havent worked out how do make the white transparent

  10. #55
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,151
    Thanks
    80
    Thanked 4,557 Times in 4,521 Posts
    Quote Originally Posted by donna1 View Post
    ok, anyway clever Pedant, would you be able to post the code for your last example, where it moves to the next cell? I like how thats done.
    Bring up the page and click on VIEW menu of your browser and then on SOURCE or PAGE SOURCE menu item. Or right click on the page and choose VIEW ==>> [PAGE] SOURCE from the context menu.

    Are you telling me you never have done that with other pages???

    Also which package did you use to make your GIF with transparent border?
    I have downloaded GIMP Paint now but havent worked out how do make the white transparent
    I used a very old version of PhotoShop (version 6) which no longer runs on my current machine.

    I haven't yet tried doing that with GIMP. It should be possible.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  11. #56
    Regular Coder
    Join Date
    Jun 2010
    Posts
    133
    Thanks
    0
    Thanked 3 Times in 3 Posts
    I took a look at your code. What is the bare bones code to get a character to move 50px, but do it in a smooth animation. I tried to cheat at it with jquery but jquery doesn't seem easy to use in canvas.

  12. #57
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,151
    Thanks
    80
    Thanked 4,557 Times in 4,521 Posts
    You can't DO smooth movement using a canvas (at least not easily).

    If you want the smooth movement, you should do as I did and use an overlay image.

    Trying to do it using ONLY a canvas would be a horrible waste of resources. Ugly ugly ugly code and very slow to boot.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  13. #58
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,151
    Thanks
    80
    Thanked 4,557 Times in 4,521 Posts
    What is the bare bones code to get a character to move 50px, but do it in a smooth animation.
    Ummm...the code I showed?

    Or use jQuery, which I don't use.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  14. #59
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,151
    Thanks
    80
    Thanked 4,557 Times in 4,521 Posts
    Quote Originally Posted by devnull69 View Post
    afaik a "pedant" is someone who puts a lot of emphasis on details and who also expects that from others.
    Heh! That's a *REALLY* kind definition.

    Usually, "pedant" is used in a derogatory sense, meaning somebody is anal retentive about every little thing. That's probably closer to the truth for me. <grin/> (Or, as my wife would say, "yeah, about everything that doesn't matter.")
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  15. #60
    New Coder donna1's Avatar
    Join Date
    Nov 2012
    Location
    london
    Posts
    99
    Thanks
    9
    Thanked 4 Times in 4 Posts
    Quote Originally Posted by Old Pedant View Post
    Bring up the page and click on VIEW menu of your browser and then on SOURCE or PAGE SOURCE menu item. Or right click on the page and choose VIEW ==>> [PAGE] SOURCE from the context menu.

    Are you telling me you never have done that with other pages???
    I did know how to do that from a PC but I was playing with it on my iPad and theres no right click on that, so I dont know how to view source from iPad.

    Theres been a few things Ive needed right click for on my iPad in the past, is there a workaround?


 
Page 4 of 5 FirstFirst ... 2345 LastLast

Posting Permissions

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