screepers/screeps-visual

Chrome Extension that adds a Visual API to screeps

Adds a few useful variable wrappers to conole.

Installation

Extension (Browser Only)

1. Install greasemonkey or tampermonkey
2. Click here
3. Click install on the resulting screen
4. Add visual.js to your screeps codebase
5. Add RawVisual.commit() at the end of your main loop
6. Refresh screeps
7. Profit! (Note: Nothing will render until your code tells it to, See Usage below)

Manually (Browser + Steam Client)

1. Add this snippet to your code

global.loadVisual = function(){
  return console.log('<script>' + 
    'if(!window.visualLoaded){' + 
    '  $.getScript("https://screepers.github.io/screeps-visual/src/visual.screeps.user.js");' + 
    '  window.visualLoaded = true;' + 
    '}</script>')
}

2. Add visual.js to your screeps codebase
3. Add RawVisual.commit() at the end of your main loop
4. Run loadVisual() to load visuals (Note: This step will need to be repeated each time you load the steam client or browser tab)
5. Profit!

Usage

visual.js implements nearly all of the canvas context API MDN

const Visual = require('visual')
let ctx = new Visual('E0N0')
ctx.fillRect(1,1,1,1)
ctx.commit() // Commit this renderqueue, will NOT save until RawVisual.commit() is called

Example function to render creep paths.

function visualizePaths(){
  let Visual = require('visual')
  let colors = []      
  let COLOR_BLACK = colors.push('#000000') - 1
  let COLOR_PATH = colors.push('rgba(255,255,255,0.5)') - 1
  _.each(Game.rooms,(room,name)=>{
    let visual = new Visual(name)
    visual.defineColors(colors)
    visual.setLineWidth = 0.5
    _.each(Game.creeps,creep=>{
      if(creep.room != room) return
      let mem = creep.memory
      if(mem._move){
        let path = Room.deserializePath(mem._move.path)
        if(path.length){
          visual.drawLine(path.map(p=>([p.x,p.y])),COLOR_PATH,{ lineWidth: 0.1 })
        }
      }
    })
    visual.commit()
  })
}