diff --git a/project.clj b/project.clj
index 2067d97..0b05b45 100644
--- a/project.clj
+++ b/project.clj
@@ -3,22 +3,22 @@
   :url "http://example.com/FIXME"
   :license {:name "Eclipse Public License"
             :url "http://www.eclipse.org/legal/epl-v10.html"}
-            
+
   :dependencies [
     [org.clojure/clojure "1.8.0"]
     [org.clojure/clojurescript "1.9.521"]
   ]
-  
+
   :plugins [
     [lein-cljsbuild "1.1.7"]
     [lein-figwheel "0.5.14"]
   ]
-  
+
   :cljsbuild {
     :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"
@@ -28,13 +28,13 @@
       }
     }]
   }
-  
+
   :figwheel {
     :css-dirs ["resources/css"]
   }
-  
+
   ;:hooks [leiningen.cljsbuild]
-  
+
   :main ^:skip-aot topdown2d.core
   :target-path "target/%s"
   :profiles {:uberjar {:aot :all}})
diff --git a/resources/public/index.html b/resources/public/index.html
index 497c2eb..5f20a80 100644
--- a/resources/public/index.html
+++ b/resources/public/index.html
@@ -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>
diff --git a/resources/public/map/PokemonLike.png b/resources/public/map/PokemonLike.png
new file mode 100644
index 0000000..5781084
Binary files /dev/null and b/resources/public/map/PokemonLike.png differ
diff --git a/resources/public/map/map.json b/resources/public/map/map.json
new file mode 100644
index 0000000..e1373d7
--- /dev/null
+++ b/resources/public/map/map.json
@@ -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
+}
diff --git a/resources/public/map/map.png b/resources/public/map/map.png
new file mode 100644
index 0000000..66858a1
Binary files /dev/null and b/resources/public/map/map.png differ
diff --git a/resources/public/map/map.tmx b/resources/public/map/map.tmx
new file mode 100644
index 0000000..c8e603f
--- /dev/null
+++ b/resources/public/map/map.tmx
@@ -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>
diff --git a/resources/public/map/map2.json b/resources/public/map/map2.json
new file mode 100644
index 0000000..e1373d7
--- /dev/null
+++ b/resources/public/map/map2.json
@@ -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
+}
diff --git a/src/cljs/topdown2d/collision.cljs b/src/cljs/topdown2d/collision.cljs
index 3864d2e..606a853 100644
--- a/src/cljs/topdown2d/collision.cljs
+++ b/src/cljs/topdown2d/collision.cljs
@@ -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
diff --git a/src/cljs/topdown2d/core.cljs b/src/cljs/topdown2d/core.cljs
index de8feec..c3e55f7 100644
--- a/src/cljs/topdown2d/core.cljs
+++ b/src/cljs/topdown2d/core.cljs
@@ -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))
diff --git a/src/cljs/topdown2d/demoscene.cljs b/src/cljs/topdown2d/demoscene.cljs
index fc75dbe..c216bc8 100644
--- a/src/cljs/topdown2d/demoscene.cljs
+++ b/src/cljs/topdown2d/demoscene.cljs
@@ -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)))
diff --git a/src/cljs/topdown2d/dom.cljs b/src/cljs/topdown2d/dom.cljs
new file mode 100644
index 0000000..36dc43c
--- /dev/null
+++ b/src/cljs/topdown2d/dom.cljs
@@ -0,0 +1,4 @@
+(ns topdown2d.dom)
+
+(defn by-id [id]
+  (.getElementById js/document id))
diff --git a/src/cljs/topdown2d/tileset.cljs b/src/cljs/topdown2d/tileset.cljs
new file mode 100644
index 0000000..cdfdf0a
--- /dev/null
+++ b/src/cljs/topdown2d/tileset.cljs
@@ -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})))))