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

14
project.clj
Unescape View File

@ -3,22 +3,22 @@
:url "http://example.com/FIXME" :url "http://example.com/FIXME"
:license {:name "Eclipse Public License" :license {:name "Eclipse Public License"
:url "http://www.eclipse.org/legal/epl-v10.html"} :url "http://www.eclipse.org/legal/epl-v10.html"}
:dependencies [ :dependencies [
[org.clojure/clojure "1.8.0"] [org.clojure/clojure "1.8.0"]
[org.clojure/clojurescript "1.9.521"] [org.clojure/clojurescript "1.9.521"]
] ]
:plugins [ :plugins [
[lein-cljsbuild "1.1.7"] [lein-cljsbuild "1.1.7"]
[lein-figwheel "0.5.14"] [lein-figwheel "0.5.14"]
] ]
:cljsbuild { :cljsbuild {
:builds [{ :builds [{
:id "default" :id "default"
:source-paths ["src/cljs"] :source-paths ["src/cljs"]
:figwheel true :figwheel {:on-jsload "topdown2d.core/fig-reload"}
:compiler { :compiler {
:main topdown2d.core :main topdown2d.core
:output-to "resources/public/js/cljsbuild-main.js" :output-to "resources/public/js/cljsbuild-main.js"
@ -28,13 +28,13 @@
} }
}] }]
} }
:figwheel { :figwheel {
:css-dirs ["resources/css"] :css-dirs ["resources/css"]
} }
;:hooks [leiningen.cljsbuild] ;:hooks [leiningen.cljsbuild]
:main ^:skip-aot topdown2d.core :main ^:skip-aot topdown2d.core
:target-path "target/%s" :target-path "target/%s"
:profiles {:uberjar {:aot :all}}) :profiles {:uberjar {:aot :all}})

5
resources/public/index.html
Unescape View File

@ -7,9 +7,10 @@
<div style="display:none"> <div style="display:none">
<img src="img/walkcycle/hero-awesome.png" id="demo-player"> <img src="img/walkcycle/hero-awesome.png" id="demo-player">
<img src="img/maps/CastleExample_3.png" id="demo-background"> <img src="img/maps/CastleExample_3.png" id="demo-background">
<img src="map/PokemonLike.png" id="demoscene-tileset">
</div> </div>
<canvas id="gamecanvas" height="400" width="600" <canvas id="gamecanvas" height="500" width="1200"
style="border: 1px solid black"></canvas> style="border: 1px solid black"></canvas>
<script src="js/cljsbuild-main.js"></script> <script src="js/cljsbuild-main.js"></script>
</body> </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] (defn in? [obj container]
(let [{:keys [x y w h]} obj (let [{:keys [x y w h]} obj
{cx :x cy :y cw :w ch :h} container] {cx :x cy :y cw :w ch :h} container]
(and (and (> x cx)
(> x cx) (> y cy)
(> y cy) (< (+ x w) (+ cx cw))
(< (+ x w) (+ cx cw)) (< (+ y h) (+ cy ch)))))
(< (+ y h) (+ cy ch)))))
(defn collide? [obj obj2] (defn collide? [obj obj2]
(let [{:keys [x y w h]} obj (let [{:keys [x y w h]} obj

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

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

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

@ -1,37 +1,37 @@
(ns topdown2d.demoscene (ns topdown2d.demoscene
(:require (:require [topdown2d.collision :as collision]
[topdown2d.collision :as collision] [topdown2d.input :as input]
[topdown2d.input :as input] [topdown2d.sprites :as sprites]
[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] (defn init [gamestate scenestate]
(-> (.fetch js/window "map/map.json")
(.then #(.json %))
(.then #(reset! map-def (js->clj %))))
(merge (merge
scenestate 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) :y (- (/ (get-in gamestate [:dimensions :h]) 2) 32)
:w 64 :h 64
:d :s :d :s
:sprite :animation {:ids {:s 778 :n 778
{:image (.getElementById js/document "demo-player") :e 819 :w 819}
:size 64 :last-cycle 0
:rows {:w 1 :e 3 :curr-id 778
:n 0 :s 2 :tileset :pokelike}}
:? 2} :viewport {:keep-in {:x 0 :y 0
: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
:w 2239 :h 2235} :w 2239 :h 2235}
:tileset :pokelike
:x 1 :y 1 :x 1 :y 1
:d :?
;; pixels per second
:pps 150
:w (get-in gamestate [:dimensions :w]) :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] (defn update-player [gamestate player dir]
(let [old-dir (:d player) (let [old-dir (:d player)
@ -48,22 +48,44 @@
(:keep-in viewport) (:keep-in viewport)
(collision/pps->px gamestate 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] (defn update-scene [gamestate scenestate]
(let [player (:player scenestate) (let [player (:player scenestate)
viewport (:viewport scenestate) viewport (:viewport scenestate)
dir (get-in gamestate [:input :dir])] dir (get-in gamestate [:input :dir])]
(assoc scenestate (-> scenestate
:player (update-player gamestate player dir) init-map-def
:viewport (update-viewport gamestate viewport dir)))) (assoc :player (update-player gamestate player dir)
:viewport (update-viewport gamestate viewport dir)))))
(defn draw-scene [gamestate scenestate] (defn draw-scene [gamestate scenestate]
(let [viewport (:viewport scenestate) (let [viewport (:viewport scenestate)
{:keys [x y w h background]} viewport] {:keys [x y w h background]} viewport]
(.drawImage (when (get-in scenestate [:tileset :def])
(:ctx gamestate) (tileset/draw-viewport (:tileset scenestate)
(:image viewport) (:ctx gamestate)
x y w h viewport))
0 0 w h)) #_(.drawImage
(sprites/draw (:ctx gamestate)
(:ctx gamestate) (:image viewport)
(:player scenestate))) 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