I was just wandering if I am able to rotate my tiles 90 degrees. I haven’t looked to much into this program, so forgive me if its easy. It will make it better for me not having to design a million sprites for every possible wall combination on my sprite sheet.
Hello, legoindie, i’m not here to answer you, i need something like it. To rotate you just need to press the keyword “Z”, its very useful, but my question is how to use this on canvas? when i export to javascript its come like this:
{ “height”:150,
“layers”:[
{
“data”:[2684354561, 1, 1, 1, 1, 1, 1, 1, 291, 291, 291, 291, 2684354562…
these strangers big numbers are the tileds rotated, but how can i use this? i have no idea!
I don’t know either… I am using tiled to make my top down 2d maps for unity, because unity’s terrible with map making.
Information on handling the “big numbers” you see from rotated and flipped
tiles is written up in the docs on the TMX format :
http://doc.mapeditor.org/reference/tmx-map-format/#layer
Mike
1 Like
That information is to hard, lol, but helped me a lot. I don’t know how to work with bits, but i did this:
if(tileId>3221225470){ // if the tile was rotated 180º
tileId-=3221225472;
context.translate(colSource * 32 + pos.X+32, rowSource * 32 + pos.Y+32);
context.rotate(180 * Math.PI / 180);
}
else if(tileId>2684354560){ //if the tile was rotated 90º
tileId-=2684354560;
context.translate(colSource * 32 + pos.X+32, rowSource * 32 + pos.Y);
context.rotate(90 * Math.PI / 180);
}
else{ //if the tile was rotated 270º
tileId-=1610612736;
context.translate(colSource * 32 + pos.X, rowSource * 32 + pos.Y+32);
context.rotate(270 * Math.PI / 180);
}
if you know something better than that, please tell me, but its working fine.
Hmm, well that certainly is some interesting piece of code. Maybe it works (too late to check now), but especially the last “else” case looks wrong. Where is the non-rotated case? Also the comments don’t seem to match with the code.
There’s also the thing that Tiled does not only support rotation, but also flipping. In fact, the three bits used to store the orientation of the tile are only storing flipping information. Horizontal, vertical and anti-diagonal flipping.
Now, an anti-diagonal flip is the same as rotating 90 degrees clockwise and then doing vertical flip. So in order to encode a 90-degree rotation, Tiled sets the anti-diagonal flip bit, and the vertical flip bit (the result is 90-degree rotate + vertical flip + vertical flip, and since the latter two negate each other, you’re left with only the 90-degree rotation).
Btw those numbers look a lot easier on the eye in hex notation:
const int FlippedHorizontallyFlag = 0x80000000;
const int FlippedVerticallyFlag = 0x40000000;
const int FlippedAntiDiagonallyFlag = 0x20000000;
3221225472 is
0xC0000000 is
0x40000000 | 0x80000000 is
FlippedVerticallyFlag | FlippedHorizontallyFlag
(and flipping both vertically and horizontally is indeed the same as an 180 degree rotation)
1 Like
You’re right, the comments was wrong, but the last “else” case is ok, its work. 
This piece of code just run if the tile need to be rotated, so the non-rotated don’t need to be here.
Yeh, ok, not so easy.
You’re not rotating, very interesting. I’ll try do this with “scale” method, i don’t know if have an other way.
New question: Im making my spritesheet in photoshop, and I want it so when I place a tile with a certain portion of it unfilled (say I make a table; only the parts of the tile with the table on it will show up, the rest of the tile have nothing filled, just the plain grey and white tile(no texture)texture) I want to be able to place that table on top of a ground tile that is completely filled in, so if I place a table tile on a grass tile, I can still see the grass tile behind it. If I place the table tile now, I see the table with a grey background. I don’t want to go online to find pre made tiles, I want to make my game myself. Is there a way I can make my tiles like the ones on this video https://www.youtube.com/watch?v=U2DU7sH1GxI? If There isn’t, than try to answer my original question. this is my spritesheet. 
Nevermind, I figured it out!
I din’t see your video, but i can show you what i did:
Like the Tiled Editor, i work with layers, each layer is a vector, first i place the layer 0 and then i come back from 0 to place the up layer:
for (var layerNumber = 0; layerNumber < 2; layerNumber++) { //layerNumber start with the layer 0 and when i finish to place the 0 layer i start the second layer.
for (var rowSource = 0; rowSource < 150; rowSource++) {
for (var colSource = 0; colSource < 150; colSource++) {
var tileId = matrix[layerNumber].layer[rowSource][colSource] - 1;
...
}
}
}Well, just note that you can’t do an anti-diagonal flip using just scaling, unless you tell it to scale on a diagonal, but then you’re also rotating. Alternatively, if you’re rendering using vertices, an anti-diagonal flip just means swapping the top-right and bottom-left corners. So when you construct the geometry yourself, there is no need for transformation matrices.
For next time: new question, new thread. :-)
So i’ll left the “rotate” there until i find something better.