Page 1 of 1
Html5/JS rotating image and place it on a canvas.
Posted: Tue May 21, 2013 5:27 pm
by Darius
As a little side project, I'm remaking Ceasar III in Html5/JS. I have >600 tile images like this:
But I can't manage to draw them onto the canvas without having white space.
The images themselves are 58x30 pixels.
So the tile itself is a cube sized 32.6pixels.
How could I draw it onto a canvas (rotated)?
I've tried it with rotating the canvas itself ... but the white space between the tiles always is drawn.
Re: Html5/JS rotating image and place it on a canvas.
Posted: Wed May 22, 2013 3:19 am
by Jackolantern
Are you wanting an isometric view? If so, perhaps you could look at a_bertrand's game
here.
Re: Html5/JS rotating image and place it on a canvas.
Posted: Wed May 22, 2013 8:26 am
by a_bertrand
Can you show us the white spaces you say? If you do it well, isometric tiles works perfectly with JS. I would say it's purely an issue on your side, but as you don't give any example, or sources to check I can't help more.
Re: Html5/JS rotating image and place it on a canvas.
Posted: Wed May 22, 2013 9:07 am
by Jackolantern
Very true. If you could post the code and pictures, we could help further.
Re: Html5/JS rotating image and place it on a canvas.
Posted: Fri May 24, 2013 4:58 pm
by Darius
there is a tile in the OP. (the black image)
http://i.imgur.com/Jh5KwDa.png
As for code, pretty straight forward:
Code: Select all
//this.engine.getContext().rotate(45*Math.PI/180);
for(var i = 0; i < this.engine.mapData.length; i++){
for(var y = 0; y < this.engine.mapData[i].length; y++){
var img = this.engine.loadImage("images/" + this.engine.mapData[i][y].sprite);
this.engine.getContext().drawImage(img, i*32.6, y*32.6);
}
}
//this.engine.getContext().rotate(-45*Math.PI/180);
the load image:
Code: Select all
this.loadImage = function (name) {
var image = new Image();
image.src = name;
return image;
}
Re: Html5/JS rotating image and place it on a canvas.
Posted: Fri May 24, 2013 6:14 pm
by a_bertrand
Your code would draw in a grid like while for ISO maps you need to have odd and even lines on different X positions. Therefore each 2 rows add an offset which should be 16 pixels for you.
Re: Html5/JS rotating image and place it on a canvas.
Posted: Fri May 24, 2013 10:52 pm
by Jackolantern
Have you checked out Bertrand's
excellent JS isometric tutorial? You could look on the 2nd page and he has the current progress uploaded, so you can see if it would help you.
Re: Html5/JS rotating image and place it on a canvas.
Posted: Sat May 25, 2013 9:37 am
by Darius
Oh great thanks.
To bad there is no reputation or "thanks"/"like" button, else I'd give you both some rep++
.
Re: Html5/JS rotating image and place it on a canvas.
Posted: Sat May 25, 2013 9:17 pm
by Jackolantern
Thanks hehe
I have always liked not having any kind of reputation, though, since it becomes a popularity contest, and can also be used to shame people.
