Renamed zone > map

src/components/gameMaster/mapEditor/mapPartials/MapEventTiles.vue

@@ -0,0 +1,118 @@
+<template>
+  <Image v-for="tile in mapEditorStore.map?.mapEventTiles" v-bind="getImageProps(tile)" />
+</template>
+
+<script setup lang="ts">
+import { MapEventTileType, type MapEventTile } from '@/application/types'
+import { uuidv4 } from '@/application/utilities'
+import { getTile, tileToWorldX, tileToWorldY } from '@/composables/mapComposable'
+import { useMapEditorStore } from '@/stores/mapEditorStore'
+import { Image, useScene } from 'phavuer'
+import { onMounted, onUnmounted } from 'vue'
+
+const scene = useScene()
+const mapEditorStore = useMapEditorStore()
+
+const props = defineProps<{
+  tilemap: Phaser.Tilemaps.Tilemap
+}>()
+
+function getImageProps(tile: MapEventTile) {
+  return {
+    x: tileToWorldX(props.tilemap, tile.positionX, tile.positionY),
+    y: tileToWorldY(props.tilemap, tile.positionX, tile.positionY),
+    texture: tile.type,
+    depth: 999
+  }
+}
+
+function pencil(pointer: Phaser.Input.Pointer) {
+  // Check if map is set
+  if (!mapEditorStore.map) return
+
+  // Check if tool is pencil
+  if (mapEditorStore.tool !== 'pencil') return
+
+  // Check if draw mode is blocking tile or teleport
+  if (mapEditorStore.drawMode !== 'blocking tile' && mapEditorStore.drawMode !== 'teleport') return
+
+  // Check if left mouse button is pressed
+  if (!pointer.isDown) return
+
+  // Check if shift is not pressed, this means we are moving the camera
+  if (pointer.event.shiftKey) return
+
+  // Check if there is a tile
+  const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
+  if (!tile) return
+
+  // Check if event tile already exists on position
+  const existingEventTile = mapEditorStore.map.mapEventTiles.find((eventTile) => eventTile.positionX === tile.x && eventTile.positionY === tile.y)
+  if (existingEventTile) return
+
+  // If teleport, check if there is a selected map
+  if (mapEditorStore.drawMode === 'teleport' && !mapEditorStore.teleportSettings.toMapId) return
+
+  const newEventTile = {
+    id: uuidv4(),
+    mapId: mapEditorStore.map.id,
+    map: mapEditorStore.map,
+    type: mapEditorStore.drawMode === 'blocking tile' ? MapEventTileType.BLOCK : MapEventTileType.TELEPORT,
+    positionX: tile.x,
+    positionY: tile.y,
+    teleport:
+      mapEditorStore.drawMode === 'teleport'
+        ? {
+            toMapId: mapEditorStore.teleportSettings.toMapId,
+            toPositionX: mapEditorStore.teleportSettings.toPositionX,
+            toPositionY: mapEditorStore.teleportSettings.toPositionY,
+            toRotation: mapEditorStore.teleportSettings.toRotation
+          }
+        : undefined
+  }
+
+  mapEditorStore.map.mapEventTiles = mapEditorStore.map.mapEventTiles.concat(newEventTile as MapEventTile)
+}
+
+function eraser(pointer: Phaser.Input.Pointer) {
+  // Check if map is set
+  if (!mapEditorStore.map) return
+
+  // Check if tool is pencil
+  if (mapEditorStore.tool !== 'eraser') return
+
+  // Check if draw mode is blocking tile or teleport
+  if (mapEditorStore.eraserMode !== 'blocking tile' && mapEditorStore.eraserMode !== 'teleport') return
+
+  // Check if left mouse button is pressed
+  if (!pointer.isDown) return
+
+  // Check if shift is not pressed, this means we are moving the camera
+  if (pointer.event.shiftKey) return
+
+  // Check if there is a tile
+  const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
+  if (!tile) return
+
+  // Check if event tile already exists on position
+  const existingEventTile = mapEditorStore.map.mapEventTiles.find((eventTile) => eventTile.positionX === tile.x && eventTile.positionY === tile.y)
+  if (!existingEventTile) return
+
+  // Remove existing event tile
+  mapEditorStore.map.mapEventTiles = mapEditorStore.map.mapEventTiles.filter((eventTile) => eventTile.id !== existingEventTile.id)
+}
+
+onMounted(() => {
+  scene.input.on(Phaser.Input.Events.POINTER_DOWN, pencil)
+  scene.input.on(Phaser.Input.Events.POINTER_MOVE, pencil)
+  scene.input.on(Phaser.Input.Events.POINTER_DOWN, eraser)
+  scene.input.on(Phaser.Input.Events.POINTER_MOVE, eraser)
+})
+
+onUnmounted(() => {
+  scene.input.off(Phaser.Input.Events.POINTER_DOWN, pencil)
+  scene.input.off(Phaser.Input.Events.POINTER_MOVE, pencil)
+  scene.input.off(Phaser.Input.Events.POINTER_DOWN, eraser)
+  scene.input.off(Phaser.Input.Events.POINTER_MOVE, eraser)
+})
+</script>

src/components/gameMaster/mapEditor/mapPartials/MapObject.vue

@@ -0,0 +1,45 @@
+<template>
+  <Image v-if="gameStore.getLoadedAsset(props.mapObject.object.id)" v-bind="imageProps" />
+</template>
+
+<script setup lang="ts">
+import type { AssetDataT, PlacedMapObject } from '@/application/types'
+import { loadTexture } from '@/composables/gameComposable'
+import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/mapComposable'
+import { useGameStore } from '@/stores/gameStore'
+import { Image, useScene } from 'phavuer'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  tilemap: Phaser.Tilemaps.Tilemap
+  mapObject: PlacedMapObject
+  selectedMapObject: PlacedMapObject | null
+  movingMapObject: PlacedMapObject | null
+}>()
+
+const gameStore = useGameStore()
+const scene = useScene()
+
+const imageProps = computed(() => ({
+  alpha: props.movingMapObject?.id === props.mapObject.id ? 0.5 : 1,
+  tint: props.selectedMapObject?.id === props.mapObject.id ? 0x00ff00 : 0xffffff,
+  depth: calculateIsometricDepth(props.mapObject.positionX, props.mapObject.positionY, props.mapObject.object.frameWidth, props.mapObject.object.frameHeight),
+  x: tileToWorldX(props.tilemap, props.mapObject.positionX, props.mapObject.positionY),
+  y: tileToWorldY(props.tilemap, props.mapObject.positionX, props.mapObject.positionY),
+  flipX: props.mapObject.isRotated,
+  texture: props.mapObject.object.id,
+  originY: Number(props.mapObject.object.originX),
+  originX: Number(props.mapObject.object.originY)
+}))
+
+loadTexture(scene, {
+  key: props.mapObject.object.id,
+  data: '/assets/objects/' + props.mapObject.object.id + '.png',
+  group: 'objects',
+  updatedAt: props.mapObject.object.updatedAt,
+  frameWidth: props.mapObject.object.frameWidth,
+  frameHeight: props.mapObject.object.frameHeight
+} as AssetDataT).catch((error) => {
+  console.error('Error loading texture:', error)
+})
+</script>

src/components/gameMaster/mapEditor/mapPartials/MapObjects.vue

@@ -0,0 +1,248 @@
+<template>
+  <SelectedMapObject v-if="selectedMapObject" :mapObject="selectedMapObject" :movingMapObject="movingMapObject" @move="moveMapObject" @rotate="rotateMapObject" @delete="deleteMapObject" />
+  <MapObject v-for="mapObject in mapEditorStore.map?.mapObjects" :tilemap="tilemap" :mapObject :selectedMapObject :movingMapObject @pointerup="clickMapObject(mapObject)" />
+</template>
+
+<script setup lang="ts">
+import type { PlacedMapObject as MapObjectT } from '@/application/types'
+import { uuidv4 } from '@/application/utilities'
+import SelectedMapObject from '@/components/gameMaster/mapEditor/partials/SelectedMapObject.vue'
+import MapObject from '@/components/gameMaster/mapEditor/mapPartials/MapObject.vue'
+import { getTile } from '@/composables/mapComposable'
+import { useMapEditorStore } from '@/stores/mapEditorStore'
+import { useScene } from 'phavuer'
+import { onMounted, onUnmounted, ref, watch } from 'vue'
+
+const scene = useScene()
+const mapEditorStore = useMapEditorStore()
+const selectedMapObject = ref<MapObjectT | null>(null)
+const movingMapObject = ref<MapObjectT | null>(null)
+
+const props = defineProps<{
+  tilemap: Phaser.Tilemaps.Tilemap
+}>()
+
+function pencil(pointer: Phaser.Input.Pointer) {
+  // Check if map is set
+  if (!mapEditorStore.map) return
+
+  // Check if tool is pencil
+  if (mapEditorStore.tool !== 'pencil') return
+
+  // Check if draw mode is object
+  if (mapEditorStore.drawMode !== 'object') return
+
+  // Check if there is a selected object
+  if (!mapEditorStore.selectedObject) return
+
+  // Check if left mouse button is pressed
+  if (!pointer.isDown) return
+
+  // Check if shift is not pressed, this means we are moving the camera
+  if (pointer.event.shiftKey) return
+
+  // Check if alt is pressed, this means we are selecting the object
+  if (pointer.event.altKey) return
+
+  // Check if there is a tile
+  const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
+  if (!tile) return
+
+  // Check if object already exists on position
+  const existingObject = mapEditorStore.map?.mapObjects.find((object) => object.positionX === tile.x && object.positionY === tile.y)
+  if (existingObject) return
+
+  const newObject = {
+    id: uuidv4(),
+    mapId: mapEditorStore.map.id,
+    map: mapEditorStore.map,
+    objectId: mapEditorStore.selectedObject.id,
+    object: mapEditorStore.selectedObject,
+    depth: 0,
+    isRotated: false,
+    positionX: tile.x,
+    positionY: tile.y
+  }
+
+  // Add new object to mapObjects
+  mapEditorStore.map.mapObjects = mapEditorStore.map.mapObjects.concat(newObject as MapObjectT)
+}
+
+function eraser(pointer: Phaser.Input.Pointer) {
+  // Check if map is set
+  if (!mapEditorStore.map) return
+
+  // Check if tool is eraser
+  if (mapEditorStore.tool !== 'eraser') return
+
+  // Check if draw mode is object
+  if (mapEditorStore.eraserMode !== 'object') return
+
+  // Check if left mouse button is pressed
+  if (!pointer.isDown) return
+
+  // Check if shift is not pressed, this means we are moving the camera
+  if (pointer.event.shiftKey) return
+
+  // Check if alt is pressed, this means we are selecting the object
+  if (pointer.event.altKey) return
+
+  // Check if there is a tile
+  const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
+  if (!tile) return
+
+  // Check if object already exists on position
+  const existingObject = mapEditorStore.map.mapObjects.find((object) => object.positionX === tile.x && object.positionY === tile.y)
+  if (!existingObject) return
+
+  // Remove existing object
+  mapEditorStore.map.mapObjects = mapEditorStore.map.mapObjects.filter((object) => object.id !== existingObject.id)
+}
+
+function objectPicker(pointer: Phaser.Input.Pointer) {
+  // Check if map is set
+  if (!mapEditorStore.map) return
+
+  // Check if tool is pencil
+  if (mapEditorStore.tool !== 'pencil') return
+
+  // Check if draw mode is object
+  if (mapEditorStore.drawMode !== 'object') return
+
+  // Check if left mouse button is pressed
+  if (!pointer.isDown) return
+
+  // Check if shift is not pressed, this means we are moving the camera
+  if (pointer.event.shiftKey) return
+
+  // If alt is not pressed, return
+  if (!pointer.event.altKey) return
+
+  // Check if there is a tile
+  const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
+  if (!tile) return
+
+  // Check if object already exists on position
+  const existingObject = mapEditorStore.map.mapObjects.find((object) => object.positionX === tile.x && object.positionY === tile.y)
+  if (!existingObject) return
+
+  // Select the object
+  mapEditorStore.setSelectedObject(existingObject)
+}
+
+function moveMapObject(id: string) {
+  // Check if map is set
+  if (!mapEditorStore.map) return
+
+  movingMapObject.value = mapEditorStore.map.mapObjects.find((object) => object.id === id) as MapObjectT
+
+  function handlePointerMove(pointer: Phaser.Input.Pointer) {
+    if (!movingMapObject.value) return
+
+    const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
+    if (!tile) return
+
+    movingMapObject.value.positionX = tile.x
+    movingMapObject.value.positionY = tile.y
+  }
+
+  scene.input.on(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
+
+  function handlePointerUp() {
+    scene.input.off(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
+    movingMapObject.value = null
+  }
+
+  scene.input.on(Phaser.Input.Events.POINTER_UP, handlePointerUp)
+}
+
+function rotateMapObject(id: string) {
+  // Check if map is set
+  if (!mapEditorStore.map) return
+
+  mapEditorStore.map.mapObjects = mapEditorStore.map.mapObjects.map((object) => {
+    if (object.id === id) {
+      return {
+        ...object,
+        isRotated: !object.isRotated
+      }
+    }
+    return object
+  })
+}
+
+function deleteMapObject(id: string) {
+  // Check if map is set
+  if (!mapEditorStore.map) return
+
+  mapEditorStore.map.mapObjects = mapEditorStore.map.mapObjects.filter((object) => object.id !== id)
+  selectedMapObject.value = null
+}
+
+function clickMapObject(mapObject: MapObjectT) {
+  selectedMapObject.value = mapObject
+
+  // If alt is pressed, select the object
+  if (scene.input.activePointer.event.altKey) {
+    mapEditorStore.setSelectedObject(mapObject.object)
+  }
+}
+
+onMounted(() => {
+  scene.input.on(Phaser.Input.Events.POINTER_DOWN, pencil)
+  scene.input.on(Phaser.Input.Events.POINTER_MOVE, pencil)
+  scene.input.on(Phaser.Input.Events.POINTER_DOWN, eraser)
+  scene.input.on(Phaser.Input.Events.POINTER_MOVE, eraser)
+  scene.input.on(Phaser.Input.Events.POINTER_DOWN, objectPicker)
+})
+
+onUnmounted(() => {
+  scene.input.off(Phaser.Input.Events.POINTER_DOWN, pencil)
+  scene.input.off(Phaser.Input.Events.POINTER_MOVE, pencil)
+  scene.input.off(Phaser.Input.Events.POINTER_DOWN, eraser)
+  scene.input.off(Phaser.Input.Events.POINTER_MOVE, eraser)
+  scene.input.off(Phaser.Input.Events.POINTER_DOWN, objectPicker)
+})
+
+// watch mapEditorStore.objectList and update originX and originY of objects in mapObjects
+watch(
+  () => mapEditorStore.objectList,
+  (newObjects) => {
+    if (!mapEditorStore.map) return
+
+    const updatedMapObjects = mapEditorStore.map.mapObjects.map((mapObject) => {
+      const updatedObject = newObjects.find((obj) => obj.id === mapObject.object.id)
+      if (updatedObject) {
+        return {
+          ...mapObject,
+          object: {
+            ...mapObject.object,
+            originX: updatedObject.originX,
+            originY: updatedObject.originY
+          }
+        }
+      }
+      return mapObject
+    })
+
+    // Update the map with the new mapObjects
+    mapEditorStore.setMap({
+      ...mapEditorStore.map,
+      mapObjects: updatedMapObjects
+    })
+
+    // Update selectedObject if it's set
+    if (mapEditorStore.selectedObject) {
+      const updatedObject = newObjects.find((obj) => obj.id === mapEditorStore.selectedObject?.id)
+      if (updatedObject) {
+        mapEditorStore.setSelectedObject({
+          ...mapEditorStore.selectedObject,
+          originX: updatedObject.originX,
+          originY: updatedObject.originY
+        })
+      }
+    }
+  },
+  { deep: true }
+)
+</script>

src/components/gameMaster/mapEditor/mapPartials/MapTiles.vue

@@ -0,0 +1,227 @@
+<template>
+  <Controls :layer="tileLayer" :depth="0" />
+</template>
+
+<script setup lang="ts">
+import config from '@/application/config'
+import type { AssetDataT } from '@/application/types'
+import Controls from '@/components/utilities/Controls.vue'
+import { createTileArray, getTile, placeTile, setLayerTiles } from '@/composables/mapComposable'
+import { useGameStore } from '@/stores/gameStore'
+import { useMapEditorStore } from '@/stores/mapEditorStore'
+import { useScene } from 'phavuer'
+import { onMounted, onUnmounted, watch } from 'vue'
+
+const emit = defineEmits(['tileMap:create'])
+
+const scene = useScene()
+const gameStore = useGameStore()
+const mapEditorStore = useMapEditorStore()
+const tileMap = createTileMap()
+const tileLayer = createTileLayer()
+
+/**
+ * A Tilemap is a container for Tilemap data.
+ * This isn't a display object, rather, it holds data about the map and allows you to add tilesets and tilemap layers to it.
+ * A map can have one or more tilemap layers, which are the display objects that actually render the tiles.
+ */
+function createTileMap() {
+  const mapData = new Phaser.Tilemaps.MapData({
+    width: mapEditorStore.map?.width,
+    height: mapEditorStore.map?.height,
+    tileWidth: config.tile_size.x,
+    tileHeight: config.tile_size.y,
+    orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
+    format: Phaser.Tilemaps.Formats.ARRAY_2D
+  })
+
+  const newTileMap = new Phaser.Tilemaps.Tilemap(scene, mapData)
+  emit('tileMap:create', newTileMap)
+
+  return newTileMap
+}
+
+/**
+ * A Tileset is a combination of a single image containing the tiles and a container for data about each tile.
+ */
+function createTileLayer() {
+  const tilesArray = gameStore.getLoadedAssetsByGroup('tiles')
+
+  const tilesetImages = Array.from(tilesArray).map((tile: AssetDataT, index: number) => {
+    return tileMap.addTilesetImage(tile.key, tile.key, config.tile_size.x, config.tile_size.y, 1, 2, index + 1, { x: 0, y: -config.tile_size.y })
+  }) as any
+
+  // Add blank tile
+  tilesetImages.push(tileMap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 1, 2, 0, { x: 0, y: -config.tile_size.y }))
+  const layer = tileMap.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer
+
+  layer.setDepth(0)
+  layer.setCullPadding(2, 2)
+
+  return layer
+}
+
+function pencil(pointer: Phaser.Input.Pointer) {
+  // Check if map is set
+  if (!mapEditorStore.map) return
+
+  // Check if tool is pencil
+  if (mapEditorStore.tool !== 'pencil') return
+
+  // Check if draw mode is tile
+  if (mapEditorStore.drawMode !== 'tile') return
+
+  // Check if there is a selected tile
+  if (!mapEditorStore.selectedTile) return
+
+  // Check if left mouse button is pressed
+  if (!pointer.isDown) return
+
+  // Check if shift is not pressed, this means we are moving the camera
+  if (pointer.event.shiftKey) return
+
+  // Check if there is a tile
+  const tile = getTile(tileLayer, pointer.worldX, pointer.worldY)
+  if (!tile) return
+
+  // Place tile
+  placeTile(tileMap, tileLayer, tile.x, tile.y, mapEditorStore.selectedTile)
+
+  // Adjust mapEditorStore.map.tiles
+  mapEditorStore.map.tiles[tile.y][tile.x] = mapEditorStore.selectedTile
+}
+
+function eraser(pointer: Phaser.Input.Pointer) {
+  // Check if map is set
+  if (!mapEditorStore.map) return
+
+  // Check if tool is pencil
+  if (mapEditorStore.tool !== 'eraser') return
+
+  // Check if draw mode is tile
+  if (mapEditorStore.eraserMode !== 'tile') return
+
+  // Check if left mouse button is pressed
+  if (!pointer.isDown) return
+
+  // Check if shift is not pressed, this means we are moving the camera
+  if (pointer.event.shiftKey) return
+
+  // Check if alt is pressed
+  if (pointer.event.altKey) return
+
+  // Check if there is a tile
+  const tile = getTile(tileLayer, pointer.worldX, pointer.worldY)
+  if (!tile) return
+
+  // Place tile
+  placeTile(tileMap, tileLayer, tile.x, tile.y, 'blank_tile')
+
+  // Adjust mapEditorStore.map.tiles
+  mapEditorStore.map.tiles[tile.y][tile.x] = 'blank_tile'
+}
+
+function paint(pointer: Phaser.Input.Pointer) {
+  // Check if map is set
+  if (!mapEditorStore.map) return
+
+  // Check if tool is pencil
+  if (mapEditorStore.tool !== 'paint') return
+
+  // Check if there is a selected tile
+  if (!mapEditorStore.selectedTile) return
+
+  // Check if left mouse button is pressed
+  if (!pointer.isDown) return
+
+  // Check if shift is not pressed, this means we are moving the camera
+  if (pointer.event.shiftKey) return
+
+  // Check if alt is pressed
+  if (pointer.event.altKey) return
+
+  // Set new tileArray with selected tile
+  setLayerTiles(tileMap, tileLayer, createTileArray(tileMap.width, tileMap.height, mapEditorStore.selectedTile))
+
+  // Adjust mapEditorStore.map.tiles
+  mapEditorStore.map.tiles = createTileArray(tileMap.width, tileMap.height, mapEditorStore.selectedTile)
+}
+
+// When alt is pressed, and the pointer is down, select the tile that the pointer is over
+function tilePicker(pointer: Phaser.Input.Pointer) {
+  // Check if map is set
+  if (!mapEditorStore.map) return
+
+  // Check if tool is pencil
+  if (mapEditorStore.tool !== 'pencil') return
+
+  // Check if draw mode is tile
+  if (mapEditorStore.drawMode !== 'tile') return
+
+  // Check if left mouse button is pressed
+  if (!pointer.isDown) return
+
+  // Check if shift is not pressed, this means we are moving the camera
+  if (pointer.event.shiftKey) return
+
+  // Check if alt is pressed
+  if (!pointer.event.altKey) return
+
+  // Check if there is a tile
+  const tile = getTile(tileLayer, pointer.worldX, pointer.worldY)
+  if (!tile) return
+
+  // Select the tile
+  mapEditorStore.setSelectedTile(mapEditorStore.map.tiles[tile.y][tile.x])
+}
+
+watch(
+  () => mapEditorStore.shouldClearTiles,
+  (shouldClear) => {
+    if (shouldClear && mapEditorStore.map) {
+      const blankTiles = createTileArray(tileMap.width, tileMap.height, 'blank_tile')
+      setLayerTiles(tileMap, tileLayer, blankTiles)
+      mapEditorStore.map.tiles = blankTiles
+      mapEditorStore.resetClearTilesFlag()
+    }
+  }
+)
+
+onMounted(() => {
+  if (!mapEditorStore.map?.tiles) {
+    return
+  }
+
+  // First fill the entire map with blank tiles using current map dimensions
+  const blankTiles = createTileArray(mapEditorStore.map.width, mapEditorStore.map.height, 'blank_tile')
+
+  // Then overlay the map tiles, but only within the current map dimensions
+  const mapTiles = mapEditorStore.map.tiles
+  for (let y = 0; y < mapEditorStore.map.height; y++) {
+    for (let x = 0; x < mapEditorStore.map.width; x++) {
+      // Only copy if the source tiles array has this position
+      if (mapTiles[y] && mapTiles[y][x] !== undefined) {
+        blankTiles[y][x] = mapTiles[y][x]
+      }
+    }
+  }
+
+  setLayerTiles(tileMap, tileLayer, blankTiles)
+
+  scene.input.on(Phaser.Input.Events.POINTER_MOVE, pencil)
+  scene.input.on(Phaser.Input.Events.POINTER_MOVE, eraser)
+  scene.input.on(Phaser.Input.Events.POINTER_DOWN, paint)
+  scene.input.on(Phaser.Input.Events.POINTER_DOWN, tilePicker)
+})
+
+onUnmounted(() => {
+  scene.input.off(Phaser.Input.Events.POINTER_MOVE, pencil)
+  scene.input.off(Phaser.Input.Events.POINTER_MOVE, eraser)
+  scene.input.off(Phaser.Input.Events.POINTER_DOWN, paint)
+  scene.input.off(Phaser.Input.Events.POINTER_DOWN, tilePicker)
+
+  tileMap.destroyLayer('tiles')
+  tileMap.removeAllLayers()
+  tileMap.destroy()
+})
+</script>