josha
/
cljs-tiled
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

shitty tileset code

Browse Source
master
Josha von Gizycki 6 years ago
parent 71f8759bd5
commit edcfd29de8
12 changed files with 906 additions and 63 deletions
Show Stats Download Patch File Download Diff File

2
project.clj
Unescape View File

@ -18,7 +18,7 @@
:builds [{
:id "default"
:source-paths ["src/cljs"]
:figwheel true
:figwheel {:on-jsload "topdown2d.core/fig-reload"}
:compiler {
:main topdown2d.core
:output-to "resources/public/js/cljsbuild-main.js"

3
resources/public/index.html
Unescape View File

@ -7,9 +7,10 @@
<div style="display:none">
<img src="img/walkcycle/hero-awesome.png" id="demo-player">
<img src="img/maps/CastleExample_3.png" id="demo-background">
<img src="map/PokemonLike.png" id="demoscene-tileset">
</div>
<canvas id="gamecanvas" height="400" width="600"
<canvas id="gamecanvas" height="500" width="1200"
style="border: 1px solid black"></canvas>
<script src="js/cljsbuild-main.js"></script>
</body>

BIN
resources/public/map/PokemonLike.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

299
resources/public/map/map.json
Unescape View File

@ -0,0 +1,299 @@
{ "height":16,
"infinite":false,
"layers":[
{
"data":[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
"height":16,
"id":4,
"name":"Hintergrund",
"opacity":1,
"type":"tilelayer",
"visible":false,
"width":20,
"x":0,
"y":0
},
{
"data":[43, 43, 41, 42, 42, 41, 43, 43, 81, 81, 82, 82, 81, 0, 0, 0, 0, 0, 0, 0, 42, 43, 43, 43, 43, 41, 42, 43, 82, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 82, 81, 81, 81, 43, 43, 42, 41, 82, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 81, 43, 43, 43, 41, 81, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 81, 42, 43, 42, 41, 81, 0, 0, 0, 0, 0, 0, 0, 0, 7, 8, 9, 0, 0, 0, 82, 43, 42, 41, 42, 82, 615, 615, 615, 0, 0, 0, 0, 0, 47, 48, 49, 0, 0, 0, 82, 41, 43, 41, 43, 81, 0, 0, 0, 0, 328, 334, 335, 336, 0, 0, 0, 0, 0, 0, 82, 43, 43, 41, 43, 81, 0, 0, 0, 0, 328, 0, 0, 0, 0, 0, 0, 0, 0, 0, 82, 82, 82, 82, 698, 81, 0, 0, 0, 0, 328, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 328, 0, 0, 0, 0, 0, 328, 0, 0, 0, 0, 0, 0, 367, 367, 367, 367, 367, 367, 367, 368, 367, 367, 367, 367, 367, 368, 369, 369, 369, 369, 369, 369, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 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":16,
"id":5,
"name":"Dekoration",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":20,
"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, 486, 487, 488, 489, 490, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 526, 527, 528, 529, 530, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 566, 567, 568, 569, 570, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 776, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 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":16,
"id":7,
"name":"Vordergrund",
"opacity":1,
"type":"tilelayer",
"visible":false,
"width":20,
"x":0,
"y":0
}],
"nextlayerid":9,
"nextobjectid":33,
"orientation":"orthogonal",
"renderorder":"right-down",
"tiledversion":"2018.09.12",
"tileheight":16,
"tilesets":[
{
"columns":40,
"firstgid":1,
"image":"PokemonLike.png",
"imageheight":640,
"imagewidth":640,
"margin":0,
"name":"pokelike",
"spacing":0,
"terrains":[
{
"name":"Base",
"tile":0
},
{
"name":"Gras",
"tile":1
},
{
"name":"Feld",
"tile":40
},
{
"name":"Sand",
"tile":200
},
{
"name":"Dreck",
"tile":44
},
{
"name":"Buschwerk",
"tile":80
}],
"tilecount":1600,
"tileheight":16,
"tiles":[
{
"id":1,
"terrain":[1, 1, 1, 1]
},
{
"id":2,
"terrain":[1, 1, 1, 1]
},
{
"id":40,
"terrain":[2, 2, 2, 2]
},
{
"id":41,
"terrain":[2, 2, 2, 2]
},
{
"id":42,
"terrain":[2, 2, 2, 2]
},
{
"id":44,
"terrain":[4, 4, 4, 4]
},
{
"id":45,
"terrain":[4, 4, 4, 4]
},
{
"id":80,
"terrain":[5, 5, 5, 5]
},
{
"id":81,
"terrain":[5, 5, 5, 5]
},
{
"id":200,
"terrain":[3, 3, 3, 3]
},
{
"id":201,
"terrain":[3, 3, 3, 3]
},
{
"id":333,
"objectgroup":
{
"draworder":"index",
"name":"",
"objects":[
{
"height":16,
"id":1,
"name":"",
"rotation":0,
"type":"",
"visible":true,
"width":16,
"x":0,
"y":0
}],
"opacity":1,
"type":"objectgroup",
"visible":true,
"x":0,
"y":0
}
},
{
"id":334,
"objectgroup":
{
"draworder":"index",
"name":"",
"objects":[
{
"height":16,
"id":3,
"name":"",
"rotation":0,
"type":"",
"visible":true,
"width":16,
"x":0,
"y":0
}],
"opacity":1,
"type":"objectgroup",
"visible":true,
"x":0,
"y":0
}
},
{
"id":335,
"objectgroup":
{
"draworder":"index",
"name":"",
"objects":[
{
"height":16,
"id":1,
"name":"",
"rotation":0,
"type":"",
"visible":true,
"width":16,
"x":0,
"y":0
}],
"opacity":1,
"type":"objectgroup",
"visible":true,
"x":0,
"y":0
}
},
{
"id":488,
"objectgroup":
{
"draworder":"index",
"name":"",
"objects":[
{
"height":0,
"id":1,
"name":"",
"rotation":0,
"type":"",
"visible":true,
"width":16,
"x":0,
"y":0
}],
"opacity":1,
"type":"objectgroup",
"visible":true,
"x":0,
"y":0
}
},
{
"id":527,
"objectgroup":
{
"draworder":"index",
"name":"",
"objects":[
{
"height":16,
"id":2,
"name":"",
"rotation":0,
"type":"",
"visible":true,
"width":0,
"x":16,
"y":0
}],
"opacity":1,
"type":"objectgroup",
"visible":true,
"x":0,
"y":0
}
},
{
"animation":[
{
"duration":250,
"tileid":775
},
{
"duration":250,
"tileid":776
},
{
"duration":250,
"tileid":777
},
{
"duration":250,
"tileid":778
}],
"id":778
},
{
"animation":[
{
"duration":250,
"tileid":816
},
{
"duration":250,
"tileid":817
},
{
"duration":250,
"tileid":818
},
{
"duration":250,
"tileid":819
}],
"id":819
}],
"tilewidth":16
}],
"tilewidth":16,
"type":"map",
"version":1.2,
"width":20
}

BIN
resources/public/map/map.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

126
resources/public/map/map.tmx
Unescape View File

@ -0,0 +1,126 @@
<?xml version="1.0" encoding="UTF-8"?>
<map version="1.1" tiledversion="2018.09.12" orientation="orthogonal" renderorder="right-down" width="20" height="16" tilewidth="16" tileheight="16" infinite="0" nextlayerid="9" nextobjectid="33">
<tileset firstgid="1" name="pokelike" tilewidth="16" tileheight="16" tilecount="1600" columns="40">
<image source="PokemonLike.png" width="640" height="640"/>
<terraintypes>
<terrain name="Base" tile="0"/>
<terrain name="Gras" tile="1"/>
<terrain name="Feld" tile="40"/>
<terrain name="Sand" tile="200"/>
<terrain name="Dreck" tile="44"/>
<terrain name="Buschwerk" tile="80"/>
</terraintypes>
<tile id="1" terrain="1,1,1,1"/>
<tile id="2" terrain="1,1,1,1"/>
<tile id="40" terrain="2,2,2,2"/>
<tile id="41" terrain="2,2,2,2"/>
<tile id="42" terrain="2,2,2,2"/>
<tile id="44" terrain="4,4,4,4"/>
<tile id="45" terrain="4,4,4,4"/>
<tile id="80" terrain="5,5,5,5"/>
<tile id="81" terrain="5,5,5,5"/>
<tile id="200" terrain="3,3,3,3"/>
<tile id="201" terrain="3,3,3,3"/>
<tile id="333">
<objectgroup draworder="index">
<object id="1" x="0" y="0" width="16" height="16"/>
</objectgroup>
</tile>
<tile id="334">
<objectgroup draworder="index">
<object id="3" x="0" y="0" width="16" height="16"/>
</objectgroup>
</tile>
<tile id="335">
<objectgroup draworder="index">
<object id="1" x="0" y="0" width="16" height="16"/>
</objectgroup>
</tile>
<tile id="488">
<objectgroup draworder="index">
<object id="1" x="0" y="0" width="16"/>
</objectgroup>
</tile>
<tile id="527">
<objectgroup draworder="index">
<object id="2" x="16" y="0" height="16"/>
</objectgroup>
</tile>
<tile id="778">
<animation>
<frame tileid="775" duration="250"/>
<frame tileid="776" duration="250"/>
<frame tileid="777" duration="250"/>
<frame tileid="778" duration="250"/>
</animation>
</tile>
<tile id="819">
<animation>
<frame tileid="816" duration="250"/>
<frame tileid="817" duration="250"/>
<frame tileid="818" duration="250"/>
<frame tileid="819" duration="250"/>
</animation>
</tile>
</tileset>
<layer id="4" name="Hintergrund" width="20" height="16">
<data encoding="csv">
1,1,1,1,1,1,1,1,1,1,1,1,1,3,2,3,2,3,3,3,
1,1,1,1,1,1,1,1,1,3,2,3,3,2,2,3,2,2,2,3,
1,1,1,1,1,1,1,1,1,2,2,3,2,3,2,2,2,3,3,2,
2,2,2,1,1,1,1,1,1,2,3,3,1,1,1,1,1,2,3,3,
3,2,3,1,1,1,1,1,1,2,2,3,1,1,1,1,1,1,1,1,
2,3,2,1,1,1,1,1,1,3,2,3,1,1,1,1,1,1,1,1,
2,2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,
2,3,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,
2,3,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,
3,3,3,3,3,2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,
2,2,2,3,3,3,3,3,2,3,2,2,3,3,2,3,2,2,3,2,
2,2,2,2,2,3,2,3,3,3,2,3,3,2,3,2,2,2,3,3,
3,3,3,2,2,3,2,2,2,2,3,3,3,2,2,3,2,3,2,2,
3,3,2,3,3,2,3,3,3,2,3,3,3,2,3,3,3,2,2,2,
2,3,2,3,2,3,2,3,2,2,3,3,2,2,3,3,2,2,2,3
</data>
</layer>
<layer id="5" name="Dekoration" width="20" height="16">
<data encoding="csv">
43,43,41,42,42,41,43,43,81,81,82,82,81,0,0,0,0,0,0,0,
42,43,43,43,43,41,42,43,82,0,0,0,0,0,0,0,0,0,0,0,
82,81,81,81,43,43,42,41,82,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,81,43,43,43,41,81,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,81,42,43,42,41,81,0,0,0,0,0,0,0,0,7,8,9,
0,0,0,82,43,42,41,42,82,615,615,615,0,0,0,0,0,47,48,49,
0,0,0,82,41,43,41,43,81,0,0,0,0,328,334,335,336,0,0,0,
0,0,0,82,43,43,41,43,81,0,0,0,0,328,0,0,0,0,0,0,
0,0,0,82,82,82,82,698,81,0,0,0,0,328,0,0,0,0,0,0,
0,0,0,0,0,0,0,328,0,0,0,0,0,328,0,0,0,0,0,0,
367,367,367,367,367,367,367,368,367,367,367,367,367,368,369,369,369,369,369,369,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,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>
</layer>
<layer id="7" name="Vordergrund" width="20" height="16">
<data encoding="csv">
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,486,487,488,489,490,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,526,527,528,529,530,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,566,567,568,569,570,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,776,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,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>
</layer>
</map>

299
resources/public/map/map2.json
Unescape View File

@ -0,0 +1,299 @@
{ "height":16,
"infinite":false,
"layers":[
{
"data":[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
"height":16,
"id":4,
"name":"Hintergrund",
"opacity":1,
"type":"tilelayer",
"visible":false,
"width":20,
"x":0,
"y":0
},
{
"data":[43, 43, 41, 42, 42, 41, 43, 43, 81, 81, 82, 82, 81, 0, 0, 0, 0, 0, 0, 0, 42, 43, 43, 43, 43, 41, 42, 43, 82, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 82, 81, 81, 81, 43, 43, 42, 41, 82, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 81, 43, 43, 43, 41, 81, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 81, 42, 43, 42, 41, 81, 0, 0, 0, 0, 0, 0, 0, 0, 7, 8, 9, 0, 0, 0, 82, 43, 42, 41, 42, 82, 615, 615, 615, 0, 0, 0, 0, 0, 47, 48, 49, 0, 0, 0, 82, 41, 43, 41, 43, 81, 0, 0, 0, 0, 328, 334, 335, 336, 0, 0, 0, 0, 0, 0, 82, 43, 43, 41, 43, 81, 0, 0, 0, 0, 328, 0, 0, 0, 0, 0, 0, 0, 0, 0, 82, 82, 82, 82, 698, 81, 0, 0, 0, 0, 328, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 328, 0, 0, 0, 0, 0, 328, 0, 0, 0, 0, 0, 0, 367, 367, 367, 367, 367, 367, 367, 368, 367, 367, 367, 367, 367, 368, 369, 369, 369, 369, 369, 369, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 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":16,
"id":5,
"name":"Dekoration",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":20,
"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, 486, 487, 488, 489, 490, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 526, 527, 528, 529, 530, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 566, 567, 568, 569, 570, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 776, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 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":16,
"id":7,
"name":"Vordergrund",
"opacity":1,
"type":"tilelayer",
"visible":false,
"width":20,
"x":0,
"y":0
}],
"nextlayerid":9,
"nextobjectid":33,
"orientation":"orthogonal",
"renderorder":"right-down",
"tiledversion":"2018.09.12",
"tileheight":16,
"tilesets":[
{
"columns":40,
"firstgid":1,
"image":"PokemonLike.png",
"imageheight":640,
"imagewidth":640,
"margin":0,
"name":"pokelike",
"spacing":0,
"terrains":[
{
"name":"Base",
"tile":0
},
{
"name":"Gras",
"tile":1
},
{
"name":"Feld",
"tile":40
},
{
"name":"Sand",
"tile":200
},
{
"name":"Dreck",
"tile":44
},
{
"name":"Buschwerk",
"tile":80
}],
"tilecount":1600,
"tileheight":16,
"tiles":[
{
"id":1,
"terrain":[1, 1, 1, 1]
},
{
"id":2,
"terrain":[1, 1, 1, 1]
},
{
"id":40,
"terrain":[2, 2, 2, 2]
},
{
"id":41,
"terrain":[2, 2, 2, 2]
},
{
"id":42,
"terrain":[2, 2, 2, 2]
},
{
"id":44,
"terrain":[4, 4, 4, 4]
},
{
"id":45,
"terrain":[4, 4, 4, 4]
},
{
"id":80,
"terrain":[5, 5, 5, 5]
},
{
"id":81,
"terrain":[5, 5, 5, 5]
},
{
"id":200,
"terrain":[3, 3, 3, 3]
},
{
"id":201,
"terrain":[3, 3, 3, 3]
},
{
"id":333,
"objectgroup":
{
"draworder":"index",
"name":"",
"objects":[
{
"height":16,
"id":1,
"name":"",
"rotation":0,
"type":"",
"visible":true,
"width":16,
"x":0,
"y":0
}],
"opacity":1,
"type":"objectgroup",
"visible":true,
"x":0,
"y":0
}
},
{
"id":334,
"objectgroup":
{
"draworder":"index",
"name":"",
"objects":[
{
"height":16,
"id":3,
"name":"",
"rotation":0,
"type":"",
"visible":true,
"width":16,
"x":0,
"y":0
}],
"opacity":1,
"type":"objectgroup",
"visible":true,
"x":0,
"y":0
}
},
{
"id":335,
"objectgroup":
{
"draworder":"index",
"name":"",
"objects":[
{
"height":16,
"id":1,
"name":"",
"rotation":0,
"type":"",
"visible":true,
"width":16,
"x":0,
"y":0
}],
"opacity":1,
"type":"objectgroup",
"visible":true,
"x":0,
"y":0
}
},
{
"id":488,
"objectgroup":
{
"draworder":"index",
"name":"",
"objects":[
{
"height":0,
"id":1,
"name":"",
"rotation":0,
"type":"",
"visible":true,
"width":16,
"x":0,
"y":0
}],
"opacity":1,
"type":"objectgroup",
"visible":true,
"x":0,
"y":0
}
},
{
"id":527,
"objectgroup":
{
"draworder":"index",
"name":"",
"objects":[
{
"height":16,
"id":2,
"name":"",
"rotation":0,
"type":"",
"visible":true,
"width":0,
"x":16,
"y":0
}],
"opacity":1,
"type":"objectgroup",
"visible":true,
"x":0,
"y":0
}
},
{
"animation":[
{
"duration":250,
"tileid":775
},
{
"duration":250,
"tileid":776
},
{
"duration":250,
"tileid":777
},
{
"duration":250,
"tileid":778
}],
"id":778
},
{
"animation":[
{
"duration":250,
"tileid":816
},
{
"duration":250,
"tileid":817
},
{
"duration":250,
"tileid":818
},
{
"duration":250,
"tileid":819
}],
"id":819
}],
"tilewidth":16
}],
"tilewidth":16,
"type":"map",
"version":1.2,
"width":20
}

9
src/cljs/topdown2d/collision.cljs
Unescape View File

@ -3,11 +3,10 @@
(defn in? [obj container]
(let [{:keys [x y w h]} obj
{cx :x cy :y cw :w ch :h} container]
(and
(> x cx)
(> y cy)
(< (+ x w) (+ cx cw))
(< (+ y h) (+ cy ch)))))
(and (> x cx)
(> y cy)
(< (+ x w) (+ cx cw))
(< (+ y h) (+ cy ch)))))
(defn collide? [obj obj2]
(let [{:keys [x y w h]} obj

39
src/cljs/topdown2d/core.cljs
Unescape View File

@ -1,14 +1,14 @@
(ns topdown2d.core
(:require
[topdown2d.demoscene :as demoscene]
[topdown2d.input :as input]))
(:require [topdown2d.demoscene :as demoscene]
[topdown2d.input :as input]
[topdown2d.dom :refer [by-id]]))
(enable-console-print!)
(def gamestate
{:canvas (.getElementById js/document "gamecanvas")
:ctx (.getContext (.getElementById js/document "gamecanvas") "2d")
:target-fps 40
{:canvas (by-id "gamecanvas")
:ctx (.getContext (by-id "gamecanvas") "2d")
:target-fps 60
:continue? true
:timing {;; msecs of previous frame
:prev 0
@ -19,8 +19,8 @@
;; difference between prev and now in seconds
:elapsed 0}
;; width and height of the canvas
:dimensions {:w 600
:h 400}
:dimensions {:w 1200
:h 500}
:input {:dir :?}
;; currently active scene
:scene :demo
@ -28,6 +28,8 @@
:draw demoscene/draw-scene
:init demoscene/init}}})
(def reloaded (atom false))
(defn set-timing
"sets the current time at the given key"
[state timingkey]
@ -137,12 +139,13 @@
[gamestate]
(let [newstate (update-step gamestate)]
(draw-step newstate)
(.setTimeout js/window
(fn []
(.requestAnimationFrame
js/window
#(mainloop newstate)))
(timeout newstate))))
(when-not @reloaded
(.setTimeout js/window
(fn []
(.requestAnimationFrame
js/window
#(mainloop newstate)))
(timeout newstate)))))
(defn init-scenes
"initiates the scene data maps using their respective init functions"
@ -154,4 +157,12 @@
(assoc carr key ((:init scene) gamestate scene)))
{} %)))
(defn fig-reload []
(reset! reloaded true)
(.setTimeout js/window
(fn []
(reset! reloaded false)
(mainloop (init-scenes)))
1000))
(mainloop (init-scenes))

92
src/cljs/topdown2d/demoscene.cljs
Unescape View File

@ -1,37 +1,37 @@
(ns topdown2d.demoscene
(:require
[topdown2d.collision :as collision]
[topdown2d.input :as input]
[topdown2d.sprites :as sprites]))
(:require [topdown2d.collision :as collision]
[topdown2d.input :as input]
[topdown2d.sprites :as sprites]
[topdown2d.dom :refer [by-id]]
[topdown2d.tileset :as tileset]
[clojure.walk :as walk]))
(def map-def (atom nil))
(defn init [gamestate scenestate]
(-> (.fetch js/window "map/map.json")
(.then #(.json %))
(.then #(reset! map-def (js->clj %))))
(merge
scenestate
{:player {:x (- (/ (get-in gamestate [:dimensions :w]) 2) 32)
{:tileset {:images {:pokelike (by-id "demoscene-tileset")}
:def nil}
:player {:x (- (/ (get-in gamestate [:dimensions :w]) 2) 32)
:y (- (/ (get-in gamestate [:dimensions :h]) 2) 32)
:w 64 :h 64
:d :s
:sprite
{:image (.getElementById js/document "demo-player")
:size 64
:rows {:w 1 :e 3
:n 0 :s 2
:? 2}
:cycle {:pos 0
:from 1
:count 8
:last-cycle 0
;; cycles per second
:cps 10}}}
:viewport {:image (.getElementById js/document "demo-background")
:keep-in {:x 0 :y 0
:animation {:ids {:s 778 :n 778
:e 819 :w 819}
:last-cycle 0
:curr-id 778
:tileset :pokelike}}
:viewport {:keep-in {:x 0 :y 0
:w 2239 :h 2235}
:tileset :pokelike
:x 1 :y 1
:d :?
;; pixels per second
:pps 150
:w (get-in gamestate [:dimensions :w])
:h (get-in gamestate [:dimensions :h])}}))
:h (get-in gamestate [:dimensions :h])
;; pixels per second
:pps 150}}))
(defn update-player [gamestate player dir]
(let [old-dir (:d player)
@ -48,22 +48,44 @@
(:keep-in viewport)
(collision/pps->px gamestate viewport)))
(defn map-tileset-size [tileset]
(-> tileset
(assoc :tiles-x (:columns tileset))
(assoc :tiles-y (/ (:tilecount tileset)
(:columns tileset)))))
(defn init-map-def [scenestate]
(if (and (not (get-in scenestate [:tileset :def]))
(some? @map-def))
(assoc-in scenestate
[:tileset :def]
(update (walk/keywordize-keys @map-def)
:tilesets
(fn [tilesets]
(map map-tileset-size tilesets))))
scenestate))
(defn update-scene [gamestate scenestate]
(let [player (:player scenestate)
viewport (:viewport scenestate)
dir (get-in gamestate [:input :dir])]
(assoc scenestate
:player (update-player gamestate player dir)
:viewport (update-viewport gamestate viewport dir))))
(-> scenestate
init-map-def
(assoc :player (update-player gamestate player dir)
:viewport (update-viewport gamestate viewport dir)))))
(defn draw-scene [gamestate scenestate]
(let [viewport (:viewport scenestate)
{:keys [x y w h background]} viewport]
(.drawImage
(:ctx gamestate)
(:image viewport)
x y w h
0 0 w h))
(sprites/draw
(:ctx gamestate)
(:player scenestate)))
(when (get-in scenestate [:tileset :def])
(tileset/draw-viewport (:tileset scenestate)
(:ctx gamestate)
viewport))
#_(.drawImage
(:ctx gamestate)
(:image viewport)
x y w h
0 0 w h))
#_ (sprites/draw
(:ctx gamestate)
(:player scenestate)))

4
src/cljs/topdown2d/dom.cljs
Unescape View File

@ -0,0 +1,4 @@
(ns topdown2d.dom)
(defn by-id [id]
(.getElementById js/document id))

82
src/cljs/topdown2d/tileset.cljs
Unescape View File

@ -0,0 +1,82 @@
(ns topdown2d.tileset
(:require [topdown2d.collision :as coll]))
(def ^:dynamic tileset)
(defn next-animation-cycle [animation curr-cycle]
(let [curr-ix (.indexOf animation curr-cycle)
next-ix (inc curr-ix)
next-ix (if (> next-ix (count animation))
0 next-ix)]
(nth animation next-ix)))
(defn map-def->tileset [map-def tileset-id]
(->> (:tilesets map-def)
(filter #(= (name tileset-id) (:name %)))
first))
(defn tick-animation [tileset-def anim-def now]
(let [map-def (:def tileset-def)
{:keys [ids last-cycle curr-id tileset]} anim-def
animation (->> (map-def->tileset map-def tileset)
:tiles
(filter #(= curr-id (:id %)))
first
:animation)
curr-cycle (filter #(= curr-id (:tileid %)) animation)
trigger-cycle? (> (- now last-cycle)
(:duration curr-cycle))
next-cycle (and trigger-cycle?
(next-animation-cycle animation curr-cycle))]
(if trigger-cycle?
(assoc anim-def
:last-cycle now
:curr-id (:tileid next-cycle))
anim-def)))
(defn ix->coords [ix width height]
(let [x (rem ix width)]
[(dec x)
(/ (- ix x) width)]))
(defn layer->dest [layer tileset data]
(map-indexed
(fn [ix tile]
(let [{:keys [width height]} layer
[dxc dyc] (ix->coords ix width height)
{:keys [tilewidth tileheight]} tileset]
{:tile tile
:x (* dxc tilewidth)
:y (* dyc tileheight)
:w tilewidth
:h tileheight}))
data))
(defn draw-tile [ctx tileset image tileid dest]
(let [{:keys [tileheight tilewidth
tiles-x tiles-y]} tileset
[x y] (ix->coords tileid tiles-x tiles-y)
sx (* x tilewidth)
sy (* y tileheight)]
(.drawImage ctx image
sx sy tilewidth tileheight
(:x dest) (:y dest)
tilewidth tileheight)))
(defn draw-viewport [map-def ctx viewport]
(let [{:keys [images def]} map-def
{:keys [tileheight tilewidth
height width layers]} def
tileset-id (:tileset viewport)
image (tileset-id images)
tileset (map-def->tileset def (:tileset viewport))]
(doseq [layer layers
:let [destinations (->> (:data layer)
(layer->dest layer tileset)
(filter #(not= 0 (:tile %))))]]
(doseq [dest destinations
:let [dx (- (:x dest) (:x viewport))
dy (- (:y dest) (:y viewport))]]
(draw-tile ctx tileset image
(:tile dest)
{:x dx :y dy})))))
Write Preview
Loading…
Cancel
Save