Unduhan MapEditor - Unduhan kode sumber MapEditor

Editor Peta

Generator peta dirancang untuk pengembang game untuk menyederhanakan pengembangan dan meningkatkan efisiensi

Penggunaan daring

Tampilan online: https://alsritter.gitee.io/map-editor-online

Alat ini tidak beradaptasi dengan terminal seluler

Fungsi Dasar

Impor dan ekspor data?

Pilih Ubin yang akan digunakan?

Pilih batu bata yang sedang digunakan

Pilih lapisannya?

Secara default (Anda dapat mengurai data dengan cara Anda sendiri):

Latar Belakang: lapisan Latar Belakang yang tidak berinteraksi dengan pemutar
Tabrakan: Lapisan tumbukan
Perangkap: Lapisan perangkap
Foreground: Tutupi layer di depan karakter

Tetapkan Ukuran Peta

Pilih Alat Menggambar?

Apa gunanya alat-alat ini?

Pen Tool: alat pena default, menggambar satu kotak dalam satu waktu
Draw Area Tool: menggambar satu blok kotak
Isi SEMUA Alat: Alat ember cat, digunakan untuk menutupi lapisan
Fill Area Tool: digunakan untuk mengisi kekosongan
Alat Ganti Ubin: Ganti ubin
Erase Tool: Menghapus kotak saat ini
Hapus Alat Area: Hapus satu blok

Tetapkan titik lahir dan titik akhir

Bagaimana cara kerjanya? ?

Berikut adalah beberapa prinsip kerja. Bagi yang tidak tertarik dengan bagian ini bisa langsung dilewati~

Gambarlah kisi-kisi

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

Warna gambar tikus

Catatan: Ada tiga informasi koordinat yang dapat diperoleh dengan peristiwa mouse, di sini offset harus digunakan untuk halaman, offset, dan klien, jika tidak maka akan terjadi kesalahan

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

Pemilih warna

Memotong atlas

Cara paling efektif untuk menyimpan Tileset adalah atlas atau sprite sheet. Ini semua ubin yang diperlukan yang dikelompokkan bersama dalam satu file gambar. Saat ubin perlu digambar, hanya sebagian kecil dari gambar yang lebih besar yang ditampilkan di kanvas permainan. RPGMaker berikut adalah Tileser yang digunakan

Berikut adalah Tileset yang digunakan dalam tutorial

Langkah pertama adalah memotong atlas ini (berikut adalah demonstrasi langsung cara memperoleh data, dan benar-benar mulai menggunakannya di bagian selanjutnya)

 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 )

Efek gambarnya adalah sebagai berikut

Peta mendapatkan posisi grid

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

Gambarlah latar belakang kotak-kotak

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

Data lokasi penyimpanan

Untuk menyimpan data grafik, Anda bisa menggunakan kelas khusus

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

Mouse untuk mendapatkan Tile

Perlu mengimplementasikan mouse untuk berpindah ke Tile tertentu untuk mendapatkan nomor Tile yang sesuai

Catatan: Ada tiga informasi koordinat yang dapat diperoleh dengan peristiwa mouse, di sini offset harus digunakan untuk halaman, offset, dan klien, jika tidak maka akan terjadi kesalahan

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

Ketiga peristiwa ini paling banyak digunakan: 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 )
    }
  }
}

Fungsi acara?

Karena ada banyak perubahan keadaan yang terlibat, seperti mengubah lapisan, mengimpor data baru, mengubah mode tampilan, dll., maka perlu menggunakan peristiwa untuk memisahkannya, dan lapisan kontrol hanya perlu memantau terjadinya waktu tertentu. .

Misalnya, peristiwa penyegaran perlu dikeluarkan ketika keadaan tertentu telah berubah

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

Dan pantau dan segarkan acara ini di lapisan kontrol

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

menarik

Penarikan ini sebenarnya adalah proses penumpukan dan popping, sehingga Anda dapat mempertahankan tumpukannya sendiri.

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

Dorong ke tumpukan tepat waktu setelah setiap penulisan

Dan kemudian monitor di lapisan kontrol 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 ) ; // 通知更新数据
    }
  }
} ;

Pembaruan regional

Jika Anda menyegarkan semua data setiap frame, banyak kinerja yang akan terbuang, dan ada banyak lapisan data yang memperburuknya

Buat cacheMap untuk mencatat lokasi yang dimodifikasi, itu akan diperbarui di frame berikutnya

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

Dan setelah menyegarkan data setiap frame, itu hanya akan dirender ulang setelah Cache diubah.

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

Algoritma pengisian

Padahal, ember cat di PS umumnya digunakan untuk mewarnai. Misalnya, mengklik lingkaran yang dicat akan otomatis mengisinya tanpa harus keluar.

Algoritma 4-unicom digunakan di sini

Catatan: 8-Unicom dan 4-Unicom hanya berbeda dalam jumlah penilaian. Yang biru adalah 4 Unicom, dan yang merah adalah efek dari 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 } ,
]

Algoritma Pengisian Banjir

Ini dapat digunakan untuk mencapai penggantian warna

Algoritma pengisian injeksi tidak memiliki konsep batas, melainkan hanya menggantikan warna yang ditentukan pada area 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 )
    }
  }
}

Algoritma Pengisian Batas

Ini berbeda dengan arah injeksi dan pengisian di atas. Ini lebih tentang batas (warna yang ditentukan adalah batas), yang akan menggantikan semua nilai dalam batas yang ditentukan

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