MapEditor

Editor de mapas

El generador de mapas está diseñado para que los desarrolladores de juegos simplifiquen el desarrollo y mejoren la eficiencia.

Uso en línea

Visualización en línea: https://alsritter.gitee.io/map-editor-online

Esta herramienta no se adapta al terminal móvil.

Funciones básicas

¿Importar y exportar datos?

¿Elige el mosaico a utilizar?

Seleccione el ladrillo utilizado actualmente

¿Seleccionar la capa?

De forma predeterminada (puede analizar los datos a su manera):

1. Fondo: una capa de fondo que no interactúa con el jugador.
2. Colisión: capa de colisión
3. Trampas: capa de trampas
4. Primer plano: ocluye la capa delante del personaje.

Establecer tamaño del mapa

¿Seleccionar herramienta de dibujo?

¿Para qué sirven estas herramientas?

• Herramienta Pluma: la herramienta Pluma predeterminada, dibuja un cuadrado a la vez
• Herramienta Dibujar área: dibuja un bloque de cuadrados
• Herramienta Rellenar TODO: herramienta Bote de pintura, utilizada para cubrir capas
• Herramienta Rellenar área: se utiliza para rellenar los huecos.
• Herramienta Reemplazar mosaicos: Reemplazar mosaicos
• Herramienta Borrar: Borra el cuadrado actual
• Herramienta Borrar área: borrar un bloque

Establecer punto de nacimiento y punto final

¿Cómo funciona? ?

A continuación se muestran algunos principios de funcionamiento. Aquellos que no estén interesados ​​en esta parte pueden omitirla directamente ~

Dibujar cuadrícula

 < style >
  canvas {
    border: 1px solid black;
  }
</ style >

< canvas width =" 500 " height =" 500 " id =" testCanvas " > </ canvas >

< script type =" text/javascript " >
  function draw ( ) {
    const canvas = document . getElementById ( 'testCanvas' )
    const ctx = canvas . getContext ( '2d' ) //取得2d 画布上下文

    const _cols = 16
    const _rows = 16

    // 先获取每个图形格子的大小
    const _space = canvas . width / _cols
    
    // 绘制线条
    for ( let i = 0 ; i < _cols ; i ++ ) {
      ctx . beginPath ( ) ; // 开启路径，设置不同的样式
      ctx . moveTo ( _space * i - 0.5 , 0 ) ; // -0.5是为了解决像素模糊问题
      ctx . lineTo ( _space * i - 0.5 , canvas . height ) ;
      ctx . setLineDash ( [ 1 , 2 ] ) ; //绘制虚线
      ctx . strokeStyle = "#2a2a2a" ; // 设置每个线条的颜色
      ctx . stroke ( ) ;
    }
    // 同理y轴
    for ( let i = 0 ; i < _rows ; i ++ ) {
      ctx . beginPath ( ) ; // 开启路径，设置不同的样式
      ctx . moveTo ( 0 , _space * i - 0.5 ) ;
      ctx . lineTo ( canvas . width , _space * i - 0.5 ) ;
      ctx . strokeStyle = "#2a2a2a" ;
      ctx . stroke ( ) ;
    }
  }
  window . addEventListener ( 'load' , draw , false )
</ script >

Color del dibujo del ratón

Nota: Hay tres información de coordenadas que se pueden obtener mediante eventos del mouse; aquí se debe usar el desplazamiento para la página, el desplazamiento y el cliente; de ​​lo contrario, se producirá un error.

 console . log ( 'page: ' , e . pageX , e . pageY )
console . log ( 'offset: ' , e . offsetX , e . offsetY )
console . log ( 'client: ' , e . clientX , e . clientY ) 

 const map = [ ]
 // 先初始化 map
 for ( let y = 0 ; y < _rows ; y ++ ) {
   const temp = [ ]
   for ( let x = 0 ; x < _cols ; x ++ ) {
     temp . push ( 0 )
   }
   map . push ( temp )
 }

 // 监听鼠标事件，判断当前点击了哪个格子
 canvas . onmousedown = ( e ) => {
   const x = Math . floor ( e . offsetY / _space )
   const y = Math . floor ( e . offsetX / _space )
   // 点击更新该区域的编号
   map [ y ] [ x ] = 1
   // 刷新画布
   for ( let y = 0 ; y < _rows ; y ++ ) {
     for ( let x = 0 ; x < _cols ; x ++ ) {
       if ( map [ x ] [ y ] !== 0 ) {
         // 绘制
         ctx . fillRect ( x * _space , y * _space , _space , _space )
       }
     }
   }
 } 

selector de color

Atlas de corte

La forma más eficaz de almacenar Tileset es un atlas o una hoja de sprites. Estos son todos los mosaicos necesarios agrupados en un solo archivo de imagen. Cuando es necesario dibujar fichas, solo una pequeña parte de esta imagen más grande se presenta en el lienzo del juego. El siguiente RPGMaker es el Tileser utilizado

Aquí está el conjunto de mosaicos utilizado en el tutorial.

El primer paso es cortar este atlas (aquí hay una demostración directa de cómo obtener los datos y comenzar a usarlos en la siguiente sección)

 function draw ( ) {
  let ctx = document . getElementById ( 'canvas' ) . getContext ( '2d' )
  let img = new Image ( )
  img . onload = ( ) => {

    let tileColsNum = 5 ; // 图的宽度，以列表示
    let tileRowsNum = 1 ; // 图的高度，以行为中

    let sWidth = img . width / tileColsNum ; // 切图的宽度
    let sHeight = img . height / tileRowsNum ; // 切图的高度

    for ( let col = 0 ; col < tileColsNum ; col ++ ) {
      for ( let row = 0 ; row < tileRowsNum ; row ++ ) {

        ctx . drawImage ( img , 
          col * sWidth , // 开始切的 X 位置
          row * sHeight , // 开始切的 Y 位置
          sWidth , sHeight , // 切的高度和宽度
          col * ( sWidth + 10 ) ,  row * sHeight , // 显示的位置
          sWidth , sHeight ) // 显示的高度和宽度

      }
    }
  }

  img . src = './src/img/tiles.png'
}

window . addEventListener ( 'load' , draw , false )

El efecto de dibujo es el siguiente.

Mapa obtener posición de cuadrícula

 // 根据鼠标点击取得格子
canvas . onmousedown = ( e ) => {
  console . log ( map [ Math . floor ( e . offsetY / _space ) ] [ Math . floor ( e . offsetX / _space ) ] )
}

Dibuja un fondo a cuadros

  /**
   * 绘制背景方格
   * @param {CanvasRenderingContext2D} ctx 传入 canvas 的 Context
   * @param {Number} width 画布的宽度
   * @param {Number} height 画布的高度
   */
  static drawBackground ( ctx , width , height ) {
    let emptyBox = ctx . createImageData ( width , height )
    let emptyBoxData = emptyBox . data

    // 通过 canvas宽高 来遍历一下 canvas 上的所有像素点
    for ( let i = 0 ; i < height ; i ++ ) {
      for ( let j = 0 ; j < width ; j ++ ) {
        let point = ( i * width + j ) << 2 // << 相当于 * 4
        let rgbData = ( ( i >> 2 ) + ( j >> 2 ) ) & 1 ? 204 : 255 // >> 2 相当于 / 4 取整， & 1相当于 % 2
        emptyBoxData [ point ] = rgbData
        emptyBoxData [ point + 1 ] = rgbData
        emptyBoxData [ point + 2 ] = rgbData
        emptyBoxData [ point + 3 ] = 255
      }
    }

    ctx . putImageData ( emptyBox , 0 , 0 )
  }

Datos de ubicación de almacenamiento

Para almacenar los datos del gráfico, puede utilizar una clase personalizada.

 /**
 * 单个 Tile 在图片的位置
 */
class Tile {
  /**
   * Tile 在贴图里面的位置，以及保存它的路径偏移量（贴图位置和路径偏移量无关，后者是保存它显示在屏幕的位置）
   * @param {Number} x Tile 在贴图里的起始 x
   * @param {Number} y Tile 在贴图里的起始 y
   */
  constructor ( x , y ) {
    this . x = x
    this . y = y
  }
}

/**
 * TileImage 里面的 Tile
 */
export class TileMap {
  /**
   *
   * @param {Number} cols Tile贴图的宽度（一列有多少个 Tile）
   * @param {Number} rows Tile贴图的高度（一行有多少个 Tile）
   * @param {HTMLImageElement} img 这里传入的 Tile 贴图，必须放在 onload 里面执行
   */
  constructor ( cols , rows , img ) {
    this . cols = cols
    this . rows = rows
    this . img = img

    this . tiles = [ ]
    this . sWidth = 0 // 每个单元格的宽度
    this . sHeight = 0 // 每个单元格的高度

    this . sWidth = this . img . width / this . cols // 切图的宽度
    this . sHeight = this . img . height / this . rows // 切图的高度

    for ( let col = 0 ; col < this . cols ; col ++ ) {
      for ( let row = 0 ; row < this . rows ; row ++ ) {
        this . tiles . push ( new Tile ( col * this . sWidth , row * this . sHeight ) )
      }
    }
  }
  /* 省略一堆 getter */
}

Ratón para obtener el mosaico

Es necesario implementar un mouse para moverse a un mosaico determinado y obtener el número de mosaico correspondiente.

Nota: Hay tres información de coordenadas que se pueden obtener mediante eventos del mouse; aquí se debe usar el desplazamiento para la página, el desplazamiento y el cliente; de ​​lo contrario, se producirá un error.

 console . log ( 'page: ' , e . pageX , e . pageY )
console . log ( 'offset: ' , e . offsetX , e . offsetY )
console . log ( 'client: ' , e . clientX , e . clientY )

Estos tres eventos se utilizan principalmente: onmouseup, onmouseout, onmousedown

 // 监听鼠标事件，松手时刷新画布
canvas . onmouseup = ( e ) => {
  ctx . clearRect ( 0 , 0 , canvas . width , canvas . height )
  DrawUtility . drawAllTile ( ctx , map , posList )
}

// 移出画布也刷新
canvas . onmouseout = ( e ) => {
  ctx . clearRect ( 0 , 0 , canvas . width , canvas . height )
  DrawUtility . drawAllTile ( ctx , map , posList )
}

// 监听鼠标事件，判断当前点击了哪个区域
canvas . onmousedown = ( e ) => {
  for ( let index = 0 ; index < map . getTiles ( ) . length ; index ++ ) {
    if (
      ctx . isPointInPath (
        posList . getTilePosOfArray ( index ) . path ,
        e . offsetX ,
        e . offsetY
      )
    ) {
      console . log ( `点击了 ${ index } ` )
      DrawUtility . drawDarkTile ( ctx , posList , index )
    }
  }
} 

¿Función de evento?

Debido a que hay muchos cambios de estado involucrados, como cambiar la capa, importar nuevos datos, cambiar el modo de visualización, etc., es necesario usar eventos para desacoplarlos, y la capa de control solo necesita monitorear la ocurrencia de un tiempo determinado. .

Por ejemplo, se debe emitir un evento de actualización cuando un determinado estado ha cambiado

 // 监听显示模式（这里对 Vuex 的值进行监听）
$store . watch (
  ( ) => $store . state . isShowAllLayer ,
  val => {
    isShowAll = new Boolean ( val ) . valueOf ( ) ;
    window . dispatchEvent ( new CustomEvent ( "refreshData" ) ) ; // 通知更新数据
  }
) ;

Y monitorear y actualizar este evento en la capa de control.

 // 定义一个刷新事件的监听
window . addEventListener ( "refreshData" , ( ) => {
  // 这里进行刷新操作
} ) ; 

retirar

Este retiro es en realidad un proceso de apilamiento y extracción, por lo que usted mismo puede mantener una pila.

 import Grid from "./VO/Grid" ;

/**
 * 自定义的栈结构，主要用来维护 画布数据
 */
export default class MapStack {
  private arr : Array < { layer : number ; map : Grid [ ] [ ] } > ;

  constructor ( ) {
    this . arr = [ ] ;
  }

  /**
   * 压栈操作
   * @param { { layer: number, map: Grid[][] }} mapInfo
   */
  push ( mapInfo : { layer : number ; map : Grid [ ] [ ] } ) : void {
    this . arr . push ( mapInfo ) ;
  }

  /**
   * 退栈操作
   */
  pop ( ) : { layer : number ; map : Grid [ ] [ ] } {
    return this . arr . pop ( ) as { layer : number ; map : Grid [ ] [ ] } ;
  }
  /**
   * 获取栈顶元素
   */
  top ( ) : { layer : number ; map : Grid [ ] [ ] } {
    return this . arr [ this . arr . length - 1 ] ;
  }
  /**
   * 清空栈
   */
  clear ( ) : boolean {
    this . arr = [ ] ;
    return true ;
  }
}

Empuje a la pila a tiempo después de cada escritura

Y luego monitorear en la capa de control Ctrl + Z

 // 监听撤回键（使用栈）
document . onkeydown = e => {
  if ( e . ctrlKey == true && e . key == "z" ) {
    // 如果栈内不为空才撤回
    if ( recallMap . size ( ) !== 0 ) {
      // 弹栈
      const temp = recallMap . pop ( ) ;
      gridManagerArray [ temp . layer ] . setMap ( temp . map ) ;
      window . dispatchEvent ( refreshEvent ) ; // 通知更新数据
    }
  }
} ; 

Actualización regional

Si actualiza todos los datos en cada cuadro, se desperdiciará mucho rendimiento y hay múltiples capas de datos que lo empeoran.

Cree un cacheMap para registrar la ubicación modificada, se actualizará en el siguiente cuadro

 import BasePos from "./VO/BasePos" ;

export default class CacheMap {
  private cols : number ;
  private rows : number ;
  private map : boolean [ ] [ ] ;

  constructor ( cols : number , rows : number ) {
    this . cols = cols ;
    this . rows = rows ;

    this . map = [ ] ;

    // 每个数组都需要先初始化 默认是 false
    for ( let i = 0 ; i < rows ; i ++ ) {
      const temp : boolean [ ] = [ ] ;
      for ( let j = 0 ; j < cols ; j ++ ) {
        temp . push ( false ) ;
      }
      this . map . push ( temp ) ;
    }
  }

  /**
   * 返回被修改的位置
   * @returns {ModifiedPos[]} 里面是被修改的位置，需要被更新
   */
  getChange ( ) : BasePos [ ] {
    const list : BasePos [ ] = [ ] ;

    // 如果有被修改的则把这个位置添加到 List 里面
    for ( let i = 0 ; i < this . rows ; i ++ ) {
      for ( let j = 0 ; j < this . cols ; j ++ ) {
        if ( this . map [ i ] [ j ] ) {
          list . push ( new BasePos ( i , j ) ) ;
        }
      }
    }

    return list ;
  }

  /**
   * 标识这个地方被修改了
   * @param x 被修改的 x 坐标
   * @param y 被修改的 y 坐标
   */
  setChange ( x : number , y : number ) : void {
    this . map [ x ] [ y ] = true ;
  }

  /* ............. */

  /**
   * 当更新完成之后要归零
   */
  cleanChange ( ) : void {
    for ( let i = 0 ; i < this . rows ; i ++ ) {
      for ( let j = 0 ; j < this . cols ; j ++ ) {
        this . map [ i ] [ j ] = false ;
      }
    }
  }
}

Y después de actualizar los datos en cada cuadro, solo se volverán a representar después de que se cambie la caché.

 // 局部刷新
    const modif = cacheMap . getChange ( ) ;

for ( let i = 0 ; i < modif . length ; i ++ ) {
  // 先清空指定的位置
  DrawTools . clearTile (
    ctx ,
    space ,
    gridManagerArray [ layer ] . getGrid ( modif [ i ] . x , modif [ i ] . y ) . x ,
    gridManagerArray [ layer ] . getGrid ( modif [ i ] . x , modif [ i ] . y ) . y
  ) ;
  // 因为有多层数据，所以这里遍历刷新每一层的这个位置
  for ( let j = 0 ; j < gridManagerArray . length ; j ++ ) {
   RendererTools . changeTile (
     gridManagerArray ,
     j ,
     modif ,
     i ,
     tileManager ,
     ctx ,
     space
   ) ;
  
}

// 更新完成后要归零
cacheMap . cleanChange ( ) ; 

Algoritmo de llenado

De hecho, el cubo de pintura en PS se utiliza generalmente para colorear. Por ejemplo, al hacer clic en el círculo pintado se rellenará automáticamente sin salir.

Aquí se utiliza el algoritmo 4-unicom.

Nota: 8-Unicom y 4-Unicom solo se diferencian en el número de juicios. El azul es 4 Unicom y el rojo es el efecto de 8 Unicom.

 // 4联通要判断的方向
const direction_4 = [
  { offsetX : - 1 , offsetY : 0 } ,
  { offsetX : 1 , offsetY : 0 } ,
  { offsetX : 0 , offsetY : - 1 } ,
  { offsetX : 0 , offsetY : 1 } ,
]

// 8联通要判断的方向
const direction_8 = [
  { offsetX : 0 , offsetY : - 1 } ,
  { offsetX : 0 , offsetY : 1 } ,
  { offsetX : - 1 , offsetY : 0 } ,
  { offsetX : 1 , offsetY : 0 } ,
  { offsetX : - 1 , offsetY : 1 } ,
  { offsetX : - 1 , offsetY : - 1 } ,
  { offsetX : 1 , offsetY : 1 } ,
  { offsetX : 1 , offsetY : - 1 } ,
]

Algoritmo de llenado por inundación

Esto se puede utilizar para lograr el reemplazo de color.

El algoritmo de llenado por inyección no tiene el concepto de límite, solo reemplaza el color especificado en el área Unicom.

 function floodSeedFill ( map , x , y , oldValue , newValue , maxX , minX , maxY , minY ) {

  // 要做边界值判断
  if (
    x > maxX ||
    x < minX ||
    y > maxY ||
    y < minY ) {
    return
  }

  // 递归条件就是某个方向上指定的位置为旧值
  if ( map [ x ] [ y ] == oldValue ) {
    map [ x ] [ y ] = newValue
    for ( let i = 0 ; i < direction_4 . length ; i ++ ) {
      const newX = x + direction_4 [ i ] . offsetX
      const newY = y + direction_4 [ i ] . offsetY
      floodSeedFill ( map , newX , newY , oldValue , newValue , maxX , minX , maxY , minY )
    }
  }
}

Algoritmo de relleno de límites

Esto es diferente de la dirección de la inyección y el llenado anteriores. Se trata más sobre el límite (el color especificado es el límite), que reemplazará todos los valores dentro del límite especificado.

 function BoundarySeedFill ( map , x , y , boundaryValue , newValue , maxX , minX , maxY , minY ) {
  // 要做边界值判断
  if (
    x > maxX ||
    x < minX ||
    y > maxY ||
    y < minY ) {
    return
  }

  if ( map [ x ] [ y ] !== boundaryValue && map [ x ] [ y ] !== newValue ) {

    map [ x ] [ y ] = newValue
    for ( let i = 0 ; i < direction_4 . length ; i ++ ) {
      const newX = x + direction_4 [ i ] . offsetX
      const newY = y + direction_4 [ i ] . offsetY
      BoundarySeedFill ( map , newX , newY , boundaryValue , newValue , maxX , minX , maxY , minY )
    }
  }
} 

Referencia ~

• CGA填充算法之种子填充算法
• Descripción general de mosaicos y mapas de mosaicos de MDN