diff --git a/examples/imgs/Attribution.txt b/examples/imgs/Attribution.txt index 3b7b6504..59c9c94d 100644 --- a/examples/imgs/Attribution.txt +++ b/examples/imgs/Attribution.txt @@ -6,6 +6,7 @@ CC0 1.0 Universal Assets from: http://opengameart.org/content/platformer-tiles + https://opengameart.org/content/classic-hero https://www.kenney.nl/assets/ui-pack https://www.kenney.nl/assets/topdown-tanks-redux diff --git a/examples/imgs/oldHero.png b/examples/imgs/oldHero.png new file mode 100644 index 00000000..669fc248 Binary files /dev/null and b/examples/imgs/oldHero.png differ diff --git a/examples/spriteSheet/margin.html b/examples/spriteSheet/margin.html new file mode 100644 index 00000000..2cab6a12 --- /dev/null +++ b/examples/spriteSheet/margin.html @@ -0,0 +1,65 @@ + + + + Animation Sprite + + + + + + + + \ No newline at end of file diff --git a/examples/tileEngine/margin/marginTiles.json b/examples/tileEngine/margin/marginTiles.json index a13c6057..6cad2fd1 100644 --- a/examples/tileEngine/margin/marginTiles.json +++ b/examples/tileEngine/margin/marginTiles.json @@ -1,9 +1,35 @@ -{ "height":25, +{ "compressionlevel":-1, + "height":25, "infinite":false, "layers":[ { - "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 153, 151, 151, 151, 151, 151, 151, 151, 151, 154, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 180, 210, 210, 210, 210, 210, 210, 210, 210, 180, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 180, 266, 266, 266, 266, 266, 266, 266, 266, 180, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 180, 325, 325, 325, 325, 325, 325, 325, 325, 180, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 180, 325, 325, 325, 325, 325, 325, 325, 325, 180, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 180, 325, 325, 325, 325, 325, 325, 325, 325, 180, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 180, 325, 325, 325, 325, 325, 325, 325, 325, 181, 151, 151, 151, 151, 151, 151, 154, 0, 0, 0, 0, 0, 0, 0, 0, 180, 325, 325, 325, 325, 325, 325, 325, 325, 209, 210, 210, 211, 210, 210, 210, 180, 0, 0, 0, 0, 0, 0, 0, 0, 180, 325, 325, 325, 325, 325, 325, 325, 325, 265, 266, 266, 267, 266, 266, 266, 180, 0, 0, 0, 0, 0, 0, 0, 0, 180, 325, 325, 325, 325, 325, 325, 325, 325, 325, 325, 325, 325, 325, 325, 325, 180, 0, 0, 0, 0, 0, 0, 0, 0, 180, 325, 325, 325, 325, 325, 325, 325, 325, 325, 150, 151, 151, 151, 151, 151, 183, 0, 0, 0, 0, 0, 0, 0, 0, 180, 325, 325, 325, 325, 325, 325, 325, 325, 325, 209, 210, 210, 210, 210, 210, 180, 0, 0, 0, 0, 0, 0, 0, 0, 180, 325, 325, 325, 325, 325, 325, 325, 325, 325, 265, 266, 266, 266, 266, 266, 180, 0, 0, 0, 0, 0, 0, 0, 0, 180, 325, 325, 325, 325, 325, 325, 325, 325, 325, 325, 325, 325, 325, 325, 325, 180, 0, 0, 0, 0, 0, 0, 0, 0, 180, 325, 325, 325, 325, 325, 325, 325, 325, 325, 325, 325, 325, 325, 325, 325, 180, 0, 0, 0, 0, 0, 0, 0, 0, 181, 151, 151, 151, 151, 151, 151, 151, 151, 151, 151, 151, 151, 151, 151, 151, 182, 0, 0, 0, 0, 0, 0, 0, 0, 205, 206, 206, 206, 206, 206, 206, 206, 206, 206, 206, 206, 206, 206, 206, 206, 208, 0, 0, 0, 0, 0, 0, 0, 0, 261, 262, 262, 262, 262, 262, 262, 262, 262, 262, 262, 262, 262, 262, 262, 262, 264, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], + "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 158, 156, 156, 156, 156, 156, 156, 156, 156, 159, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 186, 217, 217, 217, 217, 217, 217, 217, 217, 186, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 186, 275, 275, 275, 275, 275, 275, 275, 275, 186, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 186, 336, 336, 336, 336, 336, 336, 336, 336, 186, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 186, 336, 336, 336, 336, 336, 336, 336, 336, 186, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 186, 336, 336, 336, 336, 336, 336, 336, 336, 186, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 186, 336, 336, 336, 336, 336, 336, 336, 336, 187, 156, 156, 156, 156, 156, 156, 159, 0, 0, 0, 0, + 0, 0, 0, 0, 186, 336, 336, 336, 336, 336, 336, 336, 336, 216, 217, 217, 218, 217, 217, 217, 186, 0, 0, 0, 0, + 0, 0, 0, 0, 186, 336, 336, 336, 336, 336, 336, 336, 336, 274, 275, 275, 276, 275, 275, 275, 186, 0, 0, 0, 0, + 0, 0, 0, 0, 186, 336, 336, 336, 336, 336, 336, 336, 336, 336, 336, 336, 336, 336, 336, 336, 186, 0, 0, 0, 0, + 0, 0, 0, 0, 186, 336, 336, 336, 336, 336, 336, 336, 336, 336, 155, 156, 156, 156, 156, 156, 189, 0, 0, 0, 0, + 0, 0, 0, 0, 186, 336, 336, 336, 336, 336, 336, 336, 336, 336, 216, 217, 217, 217, 217, 217, 186, 0, 0, 0, 0, + 0, 0, 0, 0, 186, 336, 336, 336, 336, 336, 336, 336, 336, 336, 274, 275, 275, 275, 275, 275, 186, 0, 0, 0, 0, + 0, 0, 0, 0, 186, 336, 336, 336, 336, 336, 336, 336, 336, 336, 336, 336, 336, 336, 336, 336, 186, 0, 0, 0, 0, + 0, 0, 0, 0, 186, 336, 336, 336, 336, 336, 336, 336, 336, 336, 336, 336, 336, 336, 336, 336, 186, 0, 0, 0, 0, + 0, 0, 0, 0, 187, 156, 156, 156, 156, 156, 156, 156, 156, 156, 156, 156, 156, 156, 156, 156, 188, 0, 0, 0, 0, + 0, 0, 0, 0, 212, 213, 213, 213, 213, 213, 213, 213, 213, 213, 213, 213, 213, 213, 213, 213, 215, 0, 0, 0, 0, + 0, 0, 0, 0, 270, 271, 271, 271, 271, 271, 271, 271, 271, 271, 271, 271, 271, 271, 271, 271, 273, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], "height":25, + "id":1, "name":"Tile Layer 1", "opacity":1, "type":"tilelayer", @@ -11,10 +37,35 @@ "width":25, "x":0, "y":0 - }, + }, { - "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 89, 0, 0, 163, 168, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 117, 0, 0, 191, 196, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 86, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 7, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 141, 0, 35, 0, 0, 0, 0, 141, 0, 0, 0, 90, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 169, 0, 0, 0, 0, 0, 0, 169, 0, 0, 0, 118, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 31, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 115, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], + "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 92, 0, 0, 168, 173, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 121, 0, 0, 197, 202, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 89, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 7, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 146, 0, 36, 0, 0, 0, 0, 146, 0, 0, 0, 93, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 175, 0, 0, 0, 0, 0, 0, 175, 0, 0, 0, 122, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 32, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 119, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], "height":25, + "id":2, "name":"Tile Layer 2", "opacity":1, "type":"tilelayer", @@ -23,18 +74,28 @@ "x":0, "y":0 }], + "nextlayerid":3, "nextobjectid":1, "orientation":"orthogonal", "renderorder":"right-down", - "tiledversion":"1.1.6", + "tiledversion":"1.10.2", "tileheight":16, "tilesets":[ { + "columns":29, "firstgid":1, - "source":"roguelikeDungeon_transparent.json" + "image":"roguelikeDungeon_transparent.png", + "imageheight":315, + "imagewidth":502, + "margin":5, + "name":"roguelikeDungeon_transparent", + "spacing":1, + "tilecount":522, + "tileheight":16, + "tilewidth":16 }], "tilewidth":16, "type":"map", - "version":1, + "version":"1.10", "width":25 } \ No newline at end of file diff --git a/examples/tileEngine/margin/marginTiles.tmx b/examples/tileEngine/margin/marginTiles.tmx index 483d6e95..bd146e8f 100644 --- a/examples/tileEngine/margin/marginTiles.tmx +++ b/examples/tileEngine/margin/marginTiles.tmx @@ -1,54 +1,59 @@ - - - + + + + + + + + 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, -0,0,0,0,153,151,151,151,151,151,151,151,151,154,0,0,0,0,0,0,0,0,0,0,0, -0,0,0,0,180,210,210,210,210,210,210,210,210,180,0,0,0,0,0,0,0,0,0,0,0, -0,0,0,0,180,266,266,266,266,266,266,266,266,180,0,0,0,0,0,0,0,0,0,0,0, -0,0,0,0,180,325,325,325,325,325,325,325,325,180,0,0,0,0,0,0,0,0,0,0,0, -0,0,0,0,180,325,325,325,325,325,325,325,325,180,0,0,0,0,0,0,0,0,0,0,0, -0,0,0,0,180,325,325,325,325,325,325,325,325,180,0,0,0,0,0,0,0,0,0,0,0, -0,0,0,0,180,325,325,325,325,325,325,325,325,181,151,151,151,151,151,151,154,0,0,0,0, -0,0,0,0,180,325,325,325,325,325,325,325,325,209,210,210,211,210,210,210,180,0,0,0,0, -0,0,0,0,180,325,325,325,325,325,325,325,325,265,266,266,267,266,266,266,180,0,0,0,0, -0,0,0,0,180,325,325,325,325,325,325,325,325,325,325,325,325,325,325,325,180,0,0,0,0, -0,0,0,0,180,325,325,325,325,325,325,325,325,325,150,151,151,151,151,151,183,0,0,0,0, -0,0,0,0,180,325,325,325,325,325,325,325,325,325,209,210,210,210,210,210,180,0,0,0,0, -0,0,0,0,180,325,325,325,325,325,325,325,325,325,265,266,266,266,266,266,180,0,0,0,0, -0,0,0,0,180,325,325,325,325,325,325,325,325,325,325,325,325,325,325,325,180,0,0,0,0, -0,0,0,0,180,325,325,325,325,325,325,325,325,325,325,325,325,325,325,325,180,0,0,0,0, -0,0,0,0,181,151,151,151,151,151,151,151,151,151,151,151,151,151,151,151,182,0,0,0,0, -0,0,0,0,205,206,206,206,206,206,206,206,206,206,206,206,206,206,206,206,208,0,0,0,0, -0,0,0,0,261,262,262,262,262,262,262,262,262,262,262,262,262,262,262,262,264,0,0,0,0, +0,0,0,0,158,156,156,156,156,156,156,156,156,159,0,0,0,0,0,0,0,0,0,0,0, +0,0,0,0,186,217,217,217,217,217,217,217,217,186,0,0,0,0,0,0,0,0,0,0,0, +0,0,0,0,186,275,275,275,275,275,275,275,275,186,0,0,0,0,0,0,0,0,0,0,0, +0,0,0,0,186,336,336,336,336,336,336,336,336,186,0,0,0,0,0,0,0,0,0,0,0, +0,0,0,0,186,336,336,336,336,336,336,336,336,186,0,0,0,0,0,0,0,0,0,0,0, +0,0,0,0,186,336,336,336,336,336,336,336,336,186,0,0,0,0,0,0,0,0,0,0,0, +0,0,0,0,186,336,336,336,336,336,336,336,336,187,156,156,156,156,156,156,159,0,0,0,0, +0,0,0,0,186,336,336,336,336,336,336,336,336,216,217,217,218,217,217,217,186,0,0,0,0, +0,0,0,0,186,336,336,336,336,336,336,336,336,274,275,275,276,275,275,275,186,0,0,0,0, +0,0,0,0,186,336,336,336,336,336,336,336,336,336,336,336,336,336,336,336,186,0,0,0,0, +0,0,0,0,186,336,336,336,336,336,336,336,336,336,155,156,156,156,156,156,189,0,0,0,0, +0,0,0,0,186,336,336,336,336,336,336,336,336,336,216,217,217,217,217,217,186,0,0,0,0, +0,0,0,0,186,336,336,336,336,336,336,336,336,336,274,275,275,275,275,275,186,0,0,0,0, +0,0,0,0,186,336,336,336,336,336,336,336,336,336,336,336,336,336,336,336,186,0,0,0,0, +0,0,0,0,186,336,336,336,336,336,336,336,336,336,336,336,336,336,336,336,186,0,0,0,0, +0,0,0,0,187,156,156,156,156,156,156,156,156,156,156,156,156,156,156,156,188,0,0,0,0, +0,0,0,0,212,213,213,213,213,213,213,213,213,213,213,213,213,213,213,213,215,0,0,0,0, +0,0,0,0,270,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,273,0,0,0,0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 - + 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, -0,0,0,0,0,0,89,0,0,163,168,0,0,0,0,0,0,0,0,0,0,0,0,0,0, -0,0,0,0,0,0,117,0,0,191,196,0,0,0,0,0,0,0,0,0,0,0,0,0,0, +0,0,0,0,0,0,92,0,0,168,173,0,0,0,0,0,0,0,0,0,0,0,0,0,0, +0,0,0,0,0,0,121,0,0,197,202,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, -0,0,0,0,0,0,0,0,0,0,86,0,0,0,0,0,0,0,0,0,0,0,0,0,0, +0,0,0,0,0,0,0,0,0,0,89,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,7,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, -0,0,0,0,0,141,0,35,0,0,0,0,141,0,0,0,90,0,0,0,0,0,0,0,0, -0,0,0,0,0,169,0,0,0,0,0,0,169,0,0,0,118,0,0,0,0,0,0,0,0, +0,0,0,0,0,146,0,36,0,0,0,0,146,0,0,0,93,0,0,0,0,0,0,0,0, +0,0,0,0,0,175,0,0,0,0,0,0,175,0,0,0,122,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, -0,0,0,0,0,0,0,0,0,0,31,0,0,0,0,0,0,0,0,0,0,0,0,0,0, +0,0,0,0,0,0,0,0,0,0,32,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, -0,0,0,0,0,0,0,115,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, +0,0,0,0,0,0,0,119,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, diff --git a/examples/tileEngine/margin/roguelikeDungeon_transparent.png b/examples/tileEngine/margin/roguelikeDungeon_transparent.png index 5d1bc646..859dd36a 100755 Binary files a/examples/tileEngine/margin/roguelikeDungeon_transparent.png and b/examples/tileEngine/margin/roguelikeDungeon_transparent.png differ diff --git a/src/animation.js b/src/animation.js index d22df30e..b15e3119 100644 --- a/src/animation.js +++ b/src/animation.js @@ -38,7 +38,12 @@ import { getContext } from './core.js'; */ class Animation { constructor({ spriteSheet, frames, frameRate, loop = true, name }) { - let { width, height, margin = 0 } = spriteSheet.frame; + let { + width, + height, + spacing = 0, + margin = 0 + } = spriteSheet.frame; Object.assign(this, { /** @@ -91,7 +96,14 @@ class Animation { height, /** - * The space between each frame. Taken from the [frame margin value](api/spriteSheet#frame) of the sprite sheet. + * The space between each frame. Taken from the [frame spacing value](api/spriteSheet#frame) of the sprite sheet. + * @memberof Animation + * @property {Number} spacing + */ + spacing, + + /** + * The border space around the sprite sheet image. Taken from the [frame margin value](api/spriteSheet#frame) of the sprite sheet. * @memberof Animation * @property {Number} margin */ @@ -222,8 +234,8 @@ class Animation { context.drawImage( this.spriteSheet.image, - col * this.width + (col * 2 + 1) * this.margin, - row * this.height + (row * 2 + 1) * this.margin, + this.margin + col * this.width + (col * 2 + 1) * this.spacing, + this.margin + row * this.height + (row * 2 + 1) * this.spacing, this.width, this.height, x, diff --git a/src/spriteSheet.js b/src/spriteSheet.js index 4179aa79..c5a6776f 100644 --- a/src/spriteSheet.js +++ b/src/spriteSheet.js @@ -85,7 +85,8 @@ function parseFrames(consecutiveFrames) { * @param {HTMLImageElement|HTMLCanvasElement} properties.image - The sprite sheet image. * @param {Number} properties.frameWidth - The width of a single frame. * @param {Number} properties.frameHeight - The height of a single frame. - * @param {Number} [properties.frameMargin=0] - The amount of whitespace between each frame. + * @param {Number} [properties.spacing=0] - The amount of whitespace between each frame. + * @param {Number} [properties.margin=0] - The amount of whitespace border around the entire image. * @param {Object} [properties.animations] - Animations to create from the sprite sheet using [Animation](api/animation). Passed directly into the sprite sheets [createAnimations()](api/spriteSheet#createAnimations) function. */ class SpriteSheet { @@ -93,7 +94,8 @@ class SpriteSheet { image, frameWidth, frameHeight, - frameMargin, + spacing, + margin, animations } = {}) { // @ifdef DEBUG @@ -117,20 +119,21 @@ class SpriteSheet { this.image = image; /** - * An object that defines properties of a single frame in the sprite sheet. It has properties of `width`, `height`, and `margin`. + * An object that defines properties of a single frame in the sprite sheet. It has properties of `width`, `height`, `spacing`, and `margin`. * - * `width` and `height` are the width of a single frame, while `margin` defines the amount of whitespace between each frame. + * `width` and `height` are the width of a single frame, while `spacing` defines the amount of whitespace between each frame, and `margin` defines the amount of whitespace border around the image. * @memberof SpriteSheet - * @property {{width: Number, height: Number, margin: Number}} frame + * @property {{width: Number, height: Number, spacing: Number, margin: Number}} frame */ this.frame = { width: frameWidth, height: frameHeight, - margin: frameMargin + spacing, + margin }; // f = framesPerRow - this._f = (image.width / frameWidth) | 0; + this._f = ((image.width - margin) / frameWidth) | 0; this.createAnimations(animations); } diff --git a/src/tileEngine.js b/src/tileEngine.js index a1e604de..c5f7c5cf 100644 --- a/src/tileEngine.js +++ b/src/tileEngine.js @@ -62,7 +62,8 @@ function getCol(x, tilewidth) { * @param {Object[]} properties.tilesets - Array of tileset objects. * @param {Number} properties..firstgid - First tile index of the tileset. The first tileset will have a firstgid of 1 as 0 represents an empty tile. * @param {String|HTMLImageElement} properties..image - Relative path to the HTMLImageElement or an HTMLImageElement. If passing a relative path, the image file must have been [loaded](api/assets#load) first. - * @param {Number} [properties..margin=0] - The amount of whitespace between each tile (in pixels). + * @param {Number} [properties..spacing=0] - The amount of whitespace between each tile (in pixels). + * @param {Number} [properties..margin=0] - The amount of whitespace border around the entire tileset image (in pixels). * @param {Number} [properties..tilewidth] - Width of the tileset (in pixels). Defaults to properties.tilewidth. * @param {Number} [properties..tileheight] - Height of the tileset (in pixels). Defaults to properties.tileheight. * @param {String} [properties..source] - Relative path to the source JSON file. The source JSON file must have been [loaded](api/assets#load) first. @@ -689,14 +690,22 @@ class TileEngine { } } - let { image, margin = 0, firstgid, columns } = tileset; + let { + image, + spacing = 0, + margin = 0, + firstgid, + columns + } = tileset; + let offset = tile - firstgid; - let cols = columns ?? (image.width / (tilewidth + margin)) | 0; + let cols = columns ?? (image.width / (tilewidth + spacing)) | 0; let x = (index % width) * tilewidth; let y = ((index / width) | 0) * tileheight; - let sx = (offset % cols) * (tilewidth + margin); - let sy = ((offset / cols) | 0) * (tileheight + margin); + let sx = margin + (offset % cols) * (tilewidth + spacing); + let sy = + margin + ((offset / cols) | 0) * (tileheight + spacing); // @ifdef TILEENGINE_TILED if (rotated) { diff --git a/test/typings/spriteSheet.ts b/test/typings/spriteSheet.ts index be61bf7a..2308030b 100644 --- a/test/typings/spriteSheet.ts +++ b/test/typings/spriteSheet.ts @@ -22,7 +22,8 @@ kontra.SpriteSheet({ image: new Image(), frameWidth: 32, frameHeight: 32, - frameMargin: 32, + margin: 32, + spacing: 2, animations: { walk: { frames: 1, diff --git a/test/unit/animation.spec.js b/test/unit/animation.spec.js index 82373c56..a62724d4 100644 --- a/test/unit/animation.spec.js +++ b/test/unit/animation.spec.js @@ -18,7 +18,8 @@ describe('animation', () => { frame: { width: 5, height: 5, - margin: 0 + margin: 0, + spacing: 0 } } }); @@ -40,6 +41,7 @@ describe('animation', () => { expect(animation.height).to.equal(5); expect(animation.loop).to.equal(true); expect(animation.margin).to.equal(0); + expect(animation.spacing).to.equal(0); expect(animation.isStopped).to.equal(false); }); }); @@ -239,5 +241,90 @@ describe('animation', () => { ) ).to.be.true; }); + + it('should render the spriteSheet with spacing', () => { + let context = { drawImage: sinon.stub() }; + + animation._f = 2; + animation.spacing = 1; + + animation.render({ + x: 10, + y: 10, + context + }); + + expect(context.drawImage.called).to.be.true; + expect( + context.drawImage.calledWith( + animation.spriteSheet.image, + 8, + 8, + 5, + 5, + 10, + 10, + 5, + 5 + ) + ).to.be.true; + }); + + it('should render the spriteSheet with margin', () => { + let context = { drawImage: sinon.stub() }; + + animation._f = 2; + animation.margin = 5; + + animation.render({ + x: 10, + y: 10, + context + }); + + expect(context.drawImage.called).to.be.true; + expect( + context.drawImage.calledWith( + animation.spriteSheet.image, + 10, + 10, + 5, + 5, + 10, + 10, + 5, + 5 + ) + ).to.be.true; + }); + + it('should render the spriteSheet with spacing and margin', () => { + let context = { drawImage: sinon.stub() }; + + animation._f = 2; + animation.spacing = 1; + animation.margin = 5; + + animation.render({ + x: 10, + y: 10, + context + }); + + expect(context.drawImage.called).to.be.true; + expect( + context.drawImage.calledWith( + animation.spriteSheet.image, + 13, + 13, + 5, + 5, + 10, + 10, + 5, + 5 + ) + ).to.be.true; + }); }); }); diff --git a/test/unit/spriteSheet.spec.js b/test/unit/spriteSheet.spec.js index 0a589d53..a06c0db0 100644 --- a/test/unit/spriteSheet.spec.js +++ b/test/unit/spriteSheet.spec.js @@ -28,13 +28,15 @@ describe('spriteSheet', () => { image: new Image(100, 200), frameWidth: 10, frameHeight: 10, - frameMargin: 10 + margin: 10, + spacing: 20 }); expect(spriteSheet.frame.width).to.equal(10); expect(spriteSheet.frame.height).to.equal(10); expect(spriteSheet.frame.margin).to.equal(10); - expect(spriteSheet._f).to.equal(10); + expect(spriteSheet.frame.spacing).to.equal(20); + expect(spriteSheet._f).to.equal(9); }); it('should create animations if passed an animation object', () => { diff --git a/test/unit/tileEngine.spec.js b/test/unit/tileEngine.spec.js index 300a663c..bc70d3d7 100644 --- a/test/unit/tileEngine.spec.js +++ b/test/unit/tileEngine.spec.js @@ -937,6 +937,148 @@ describe( expect(fn).to.not.throw(); }); + it('draws layer with tile spacing', () => { + let tileEngine = TileEngine({ + tilewidth: 10, + tileheight: 10, + width: 5, + height: 5, + tilesets: [ + { + spacing: 1, + firstgid: 1, + image: new Image(), + columns: 5 + } + ], + layers: [ + { + name: 'test', + data: [13] + } + ] + }); + + let r = tileEngine._r.bind(tileEngine); + let ctx; + tileEngine._r = function overrideR(layer, context) { + ctx = context; + sinon.stub(context, 'drawImage').callsFake(noop); + r(layer, context); + }; + + tileEngine.renderLayer('test'); + + expect( + ctx.drawImage.calledWith( + tileEngine.tilesets[0].image, + 22, + 22, + 10, + 10, + 0, + 0, + 10, + 10 + ) + ).to.be.true; + }); + + it('draws layer with tile margin', () => { + let tileEngine = TileEngine({ + tilewidth: 10, + tileheight: 10, + width: 5, + height: 5, + tilesets: [ + { + margin: 10, + firstgid: 1, + image: new Image(), + columns: 5 + } + ], + layers: [ + { + name: 'test', + data: [13] + } + ] + }); + + let r = tileEngine._r.bind(tileEngine); + let ctx; + tileEngine._r = function overrideR(layer, context) { + ctx = context; + sinon.stub(context, 'drawImage').callsFake(noop); + r(layer, context); + }; + + tileEngine.renderLayer('test'); + + expect( + ctx.drawImage.calledWith( + tileEngine.tilesets[0].image, + 30, + 30, + 10, + 10, + 0, + 0, + 10, + 10 + ) + ).to.be.true; + }); + + it('draws layer with tile spacing and margin', () => { + let tileEngine = TileEngine({ + tilewidth: 10, + tileheight: 10, + width: 5, + height: 5, + tilesets: [ + { + margin: 10, + spacing: 1, + firstgid: 1, + image: new Image(), + columns: 5 + } + ], + layers: [ + { + name: 'test', + data: [13] + } + ] + }); + + let r = tileEngine._r.bind(tileEngine); + let ctx; + tileEngine._r = function overrideR(layer, context) { + ctx = context; + sinon.stub(context, 'drawImage').callsFake(noop); + r(layer, context); + }; + + tileEngine.renderLayer('test'); + + expect( + ctx.drawImage.calledWith( + tileEngine.tilesets[0].image, + 32, + 32, + 10, + 10, + 0, + 0, + 10, + 10 + ) + ).to.be.true; + }); + if (testContext.TILEENGINE_TILED) { it('rotates a tile horizontally', () => { let tileEngine = TileEngine({