131 lines
4.0 KiB
JavaScript
131 lines
4.0 KiB
JavaScript
import { ctx } from './canvas'
|
|
import Input from './input'
|
|
|
|
class Debugging {
|
|
constructor () {
|
|
this.overlay = document.createElement('div')
|
|
this.overlay.style = 'color:#fff;position:absolute;top:15px;right:15px;background-color:hsla(0,0%,47%,0.5);padding:10px;display:flex;flex-direction:column;'
|
|
document.body.appendChild(this.overlay)
|
|
this.drawGrid = false
|
|
this.infotext = true
|
|
this.addCheckbox(this, 'infotext')
|
|
}
|
|
|
|
draw (vp, world, fps) {
|
|
if (!this.infotext) return
|
|
let p = vp.chunkIn(world.chunkSize * world.tileSize)
|
|
ctx.fillStyle = '#fff'
|
|
ctx.fillText(fps + ' fps', 4, 16)
|
|
ctx.fillText('cam (x: ' + vp.x + '; y: ' + vp.y + ')', 4, 16 * 2)
|
|
ctx.fillText('cam-in-chunk (x: ' + p.x + '; y: ' + p.y + ')', 4, 16 * 3)
|
|
ctx.fillText('loaded ' + world.chunks.length, 4, 16 * 4)
|
|
ctx.fillText('drawn ' + world._lastDrawCount, 4, 16 * 5)
|
|
ctx.fillText('updates ' + world._lastUpdateCount, 4, 16 * 6)
|
|
ctx.fillText('active ' + world._active.length, 4, 16 * 7)
|
|
// Mouse
|
|
let mpos = Input.mouse.pos
|
|
let mabs = { x: mpos.x + vp.x, y: mpos.y + vp.y }
|
|
let mpin = world.gridPosition(mabs)
|
|
ctx.fillText('mouse (x: ' + mpos.x + '; y: ' + mpos.y + ')', 4, 16 * 9)
|
|
if (mpin.chunk) {
|
|
ctx.fillText('mouse-in-chunk (x: ' + mpin.chunk.x + '; y: ' + mpin.chunk.y + ')', 4, 16 * 10)
|
|
ctx.fillText('mouse-in-tile (x: ' + mpin.tile.x + '; y: ' + mpin.tile.y + ')', 4, 16 * 11)
|
|
}
|
|
}
|
|
|
|
createSliders (obj, args, fn) {
|
|
for (let a in args) {
|
|
let min = args[a][0]
|
|
let max = args[a][1]
|
|
let step = args[a][2]
|
|
let div = document.createElement('div')
|
|
div.style = 'display:flex;flex-direction:row;'
|
|
let name = document.createElement('span')
|
|
let value = document.createElement('value')
|
|
let slider = document.createElement('input')
|
|
slider.style = 'flex-grow:1;'
|
|
slider.type = 'range'
|
|
slider.min = min
|
|
slider.max = max
|
|
slider.step = step
|
|
slider.value = obj[a]
|
|
name.innerHTML = a
|
|
value.innerHTML = obj[a]
|
|
slider.addEventListener('input', function (e) {
|
|
obj[a] = parseFloat(slider.value)
|
|
value.innerHTML = slider.value
|
|
fn && fn(a, slider.value)
|
|
})
|
|
div.appendChild(name)
|
|
div.appendChild(slider)
|
|
div.appendChild(value)
|
|
this.overlay.appendChild(div)
|
|
}
|
|
}
|
|
|
|
addCheckbox (obj, arg, fn) {
|
|
let div = document.createElement('div')
|
|
div.style = 'display:flex;flex-direction:row;'
|
|
let name = document.createElement('span')
|
|
let checkbox = document.createElement('input')
|
|
name.style = 'flex-grow:1;'
|
|
name.innerHTML = arg
|
|
checkbox.type = 'checkbox'
|
|
checkbox.checked = obj[arg] === true
|
|
checkbox.addEventListener('change', function (e) {
|
|
obj[arg] = checkbox.checked
|
|
fn && fn(arg, obj[arg])
|
|
})
|
|
div.appendChild(checkbox)
|
|
div.appendChild(name)
|
|
this.overlay.appendChild(div)
|
|
}
|
|
|
|
chunkGrid (ctx, chunk, view) {
|
|
if (!this.drawGrid) return
|
|
// Inner grid
|
|
ctx.lineWidth = 0.15
|
|
ctx.strokeStyle = '#041fff'
|
|
for (let x = 0; x <= chunk.fullSize; x += chunk.tile) {
|
|
ctx.beginPath()
|
|
// Vertical lines
|
|
ctx.moveTo(0 + x, 0)
|
|
ctx.lineTo(0 + x, chunk.fullSize)
|
|
|
|
// Horizontal lines
|
|
ctx.moveTo(0, 0 + x)
|
|
ctx.lineTo(chunk.fullSize, 0 + x)
|
|
|
|
// Close
|
|
ctx.closePath()
|
|
ctx.stroke()
|
|
}
|
|
|
|
// Chunk border
|
|
ctx.lineWidth = 1
|
|
ctx.strokeStyle = '#040404'
|
|
ctx.beginPath()
|
|
ctx.moveTo(0.5, 0)
|
|
ctx.lineTo(0.5, chunk.fullSize)
|
|
ctx.moveTo(0.5, chunk.fullSize)
|
|
ctx.lineTo(chunk.fullSize, chunk.fullSize)
|
|
ctx.closePath()
|
|
ctx.stroke()
|
|
|
|
/* Draw colliders
|
|
ctx.fillStyle = '#00aaff'
|
|
let collider = chunk.getLayer('col')
|
|
for (let i in collider.tiles) {
|
|
let p = collider.toXY(parseInt(i))
|
|
if (collider.tiles[i] === 0) continue
|
|
ctx.fillRect(p.x * chunk.tile, p.y * chunk.tile, chunk.tile, chunk.tile)
|
|
}
|
|
*/
|
|
// Chunk index
|
|
ctx.fillStyle = '#fff'
|
|
ctx.fillText(chunk.x + ';' + chunk.y, 5, 16)
|
|
}
|
|
}
|
|
|
|
export default new Debugging()
|