MapEditor

Éditeur de cartes

Le générateur de cartes est conçu pour les développeurs de jeux afin de simplifier le développement et d'améliorer l'efficacité

Utilisation en ligne

Affichage en ligne : https://alsritter.gitee.io/map-editor-online

Cet outil ne s'adapte pas au terminal mobile

Fonctions de base

Importer et exporter des données ?

Choisissez la tuile à utiliser ?

Sélectionnez la brique actuellement utilisée

Sélectionnez le calque ?

Par défaut (vous pouvez analyser les données à votre manière) :

1. Arrière-plan : un calque d'arrière-plan qui n'interagit pas avec le lecteur
2. Collision : couche de collision
3. Pièges : Couche de pièges
4. Premier plan : occulter le calque devant le personnage

Définir la taille de la carte

Sélectionnez Outil de dessin ?

A quoi servent ces outils ?

• Outil Plume : l'outil Plume par défaut, dessinez un carré à la fois
• Outil Dessiner une zone : dessiner un bloc de carrés
• Outil Remplir TOUT : outil Pot de peinture, utilisé pour recouvrir les calques
• Outil de remplissage de zone : utilisé pour combler les lacunes
• Outil Remplacer les tuiles : Remplacer les tuiles
• Outil Effacer : Effacer le carré actuel
• Outil Effacer la zone : effacer un bloc

Définir le point de naissance et le point final

Comment ça marche ? ?

Voici quelques principes de travail. Ceux qui ne sont pas intéressés par cette partie peuvent la sauter directement~

Dessiner une grille

 < 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 >

Couleur du dessin de la souris

Remarque : trois informations de coordonnées peuvent être obtenues par des événements de souris. Le décalage doit être utilisé ici pour la page, le décalage et le client, sinon une erreur se produira.

 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 )
       }
     }
   }
 } 

Sélecteur de couleurs

Atlas de coupe

Le moyen le plus efficace de stocker Tileset est un atlas ou une feuille de sprite. Il s’agit de toutes les tuiles requises regroupées dans un seul fichier image. Lorsque des tuiles doivent être dessinées, seule une petite partie de cette image plus grande est présentée sur la toile du jeu. Le RPGMaker suivant est le Tileser utilisé

Voici le Tileset utilisé dans le tutoriel

La première étape consiste à découper cet atlas (voici une démonstration directe de la façon d'obtenir les données, et de commencer à les utiliser dans la section suivante)

 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 )

L'effet de dessin est le suivant

La carte obtient la position de la grille

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

Dessiner un fond en damier

  /**
   * 绘制背景方格
   * @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 )
  }

Données d'emplacement de stockage

Pour stocker les données du graphique, vous pouvez utiliser une classe personnalisée

 /**
 * 单个 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 */
}

Souris pour obtenir Tile

Besoin d'implémenter une souris pour se déplacer vers une certaine tuile afin d'obtenir le numéro de tuile correspondant

Remarque : trois informations de coordonnées peuvent être obtenues par des événements de souris. Le décalage doit être utilisé ici pour la page, le décalage et le client, sinon une erreur se produira.

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

Ces trois événements sont principalement utilisés : 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 )
    }
  }
} 

Fonction événementielle ?

Étant donné que de nombreux changements d'état sont impliqués, tels que le changement de couche, l'importation de nouvelles données, le changement de mode d'affichage, etc., il est nécessaire d'utiliser des événements pour les découpler, et la couche de contrôle n'a besoin que de surveiller l'apparition d'un certain temps. .

Par exemple, un événement d'actualisation doit être émis lorsqu'un certain état a changé

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

Et surveillez et actualisez cet événement dans la couche de contrôle

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

retirer

Ce retrait est en fait un processus d'empilement et d'éclatement, vous pouvez donc maintenir un stack vous-même.

 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 ;
  }
}

Pousser vers la pile à temps après chaque écriture

Et puis surveillez dans la couche de contrôle 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 ) ; // 通知更新数据
    }
  }
} ; 

Mise à jour régionale

Si vous actualisez toutes les données à chaque image, une grande partie des performances sera gaspillée et plusieurs couches de données aggravent la situation.

Créez un cacheMap pour enregistrer l'emplacement modifié, il sera mis à jour dans la prochaine image

 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 ;
      }
    }
  }
}

Et après avoir actualisé les données à chaque image, elles ne seront restituées qu'après la modification du cache.

 // 局部刷新
    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 ( ) ; 

Algorithme de remplissage

En fait, le pot de peinture en PS est généralement utilisé pour la coloration. Par exemple, cliquer sur le cercle peint le remplira automatiquement sans sortir.

L'algorithme 4-unicom est utilisé ici

Remarque : 8-Unicom et 4-Unicom ne diffèrent que par le nombre de jugements. Le bleu est 4 Unicom et le rouge est l'effet 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 } ,
]

Algorithme de remplissage

Cela peut être utilisé pour réaliser un remplacement de couleur

L'algorithme de remplissage par injection n'a pas de concept de limite, mais remplace uniquement la couleur spécifiée dans la zone 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 )
    }
  }
}

Algorithme de remplissage des limites

Ceci est différent de la direction de l’injection et du remplissage ci-dessus. Il s'agit davantage de la limite (la couleur spécifiée est la limite), qui remplacera toutes les valeurs à l'intérieur de la limite spécifiée.

 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 )
    }
  }
} 

Référence ~

• CGA 填充算法之种子填充算法
• Présentation des tuiles MDN et des cartes de tuiles