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
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.
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.
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.
__________________
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.
Last edited by Old Pedant; 12-06-2012 at 01:57 AM..
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?
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
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???
Quote:
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.
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.
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.
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?
Before you post, read our: 
