[REL] Sketch tools for casters

Discussion in 'Mod Discussions' started by Martenus, March 18, 2014.

  1. Martenus

    Martenus Well-Known Member

    Messages:
    530
    Likes Received:
    437
    The ultimate tool for casters and video makers, finally it is here brought to you by Captain Conundrum, LavaSnake and myself!

    The user-friendly UI will let you draw on your screen (don't move your view during drawing!), you can choose from variety of tools and colours. Check the screenshots below to get a better idea.

    History
    • Version: 1.2.0
      • Better arrows
      • Circle tool
      • Stamp tool removed
      • Keyboard shortcut to clear the canvas has been changed to ALT+X
    • Version: 1.0.0
      • Four colours to choose from: Blue, Red, Green, Yellow
      • Free-drawing tool
      • Arrow tool
      • Clear all drawings
      • UI becomes transparent when not mouse-overed
      • UI is dragable

    How to use
    • Select a color, select a tool
    • Hold left Alt, click and drag to draw on your screen
    • Drawings are linked to your view, not the planet, so don't move!
    • Click the clear all button to get rid of the drawings

    Where to get it

    Future plans
    • Stamp tool (circle)
    • Hotkeys for tools, clear all and toggle colour

    Screenshots

    [​IMG]
    [​IMG]
    [​IMG]
    [​IMG]

    Videos:

    Coming soon
    Last edited: April 10, 2014
    LavaSnake, Methlodis, Geers and 3 others like this.
  2. cptconundrum

    cptconundrum Post Master General

    Messages:
    4,186
    Likes Received:
    4,900
    I'll look into creating a sketch.js layer over the game window.
    shootall and Martenus like this.
  3. brianpurkiss

    brianpurkiss Post Master General

    Messages:
    7,879
    Likes Received:
    7,438
    This would be pretty stinkin awesome for casters.

    It'd be like watching football commentators – lol
  4. LavaSnake

    LavaSnake Post Master General

    Messages:
    1,620
    Likes Received:
    691
    That would work quite well but you'd need to watch for zoom and camera movement so you can clear it.
  5. cptconundrum

    cptconundrum Post Master General

    Messages:
    4,186
    Likes Received:
    4,900
    I'm going to make it so that you can draw by holding down a key (probably ALT) and erase everything by pressing a single key.
    sketch.jpg

    This can pretty much be as complicated as you guys want it to be, so start listing your demands!
    shootall and cwarner7264 like this.
  6. cptconundrum

    cptconundrum Post Master General

    Messages:
    4,186
    Likes Received:
    4,900
    That's not a bad idea. I could just have the sketch automatically clear whenever the camera moves at all.
    shootall and zaphodx like this.
  7. cptconundrum

    cptconundrum Post Master General

    Messages:
    4,186
    Likes Received:
    4,900
    I'll do some more on this tomorrow.

    Basically how it works is I add a full screen HTML5 canvas over the entire window and then set it to pointer-events:none so that it doesn't do anything at all. When I detect a specific key press, I can change it to pointer-events:auto and it will automatically start accepting input through sketch.js.
    Last edited: March 18, 2014
  8. Martenus

    Martenus Well-Known Member

    Messages:
    530
    Likes Received:
    437
    I want colors, colors so I can like distinquish movements of two teams. I want a prefabricated arrow tho, so I dont have to draw it myself!
    cptconundrum likes this.
  9. cptconundrum

    cptconundrum Post Master General

    Messages:
    4,186
    Likes Received:
    4,900
    I can do colors easily enough. I'm not so sure about the arrow using sketch.js, but we will see.
    Martenus likes this.
  10. LavaSnake

    LavaSnake Post Master General

    Messages:
    1,620
    Likes Received:
    691
    An arrow might be doable by listening for mouse release and then drawing a rotated image of an arrowhead at the end of the line.
    cptconundrum likes this.
  11. cptconundrum

    cptconundrum Post Master General

    Messages:
    4,186
    Likes Received:
    4,900
    This looks straightforward enough to do as an extension of sketch.js.
  12. zaphodx

    zaphodx Post Master General

    Messages:
    2,350
    Likes Received:
    2,409
    Additional: Request a circle, like area commands. Also a draw with mouse line, with no arrow end.
  13. LavaSnake

    LavaSnake Post Master General

    Messages:
    1,620
    Likes Received:
    691
    Three hot keys then: Arrow, line, and circle?

    Also cpt, I'd love to work with you on this mod if you'd like the help. I could put it in my pa mods repo in the PA Mods org or you could make a repo for it.
  14. cptconundrum

    cptconundrum Post Master General

    Messages:
    4,186
    Likes Received:
    4,900
    I think my first version will just be about getting it working so I can get this to you guys as quickly as possible. It looks really easy to write new tools for it like arrows and circles, so I can probably get those out in an update. I don't know how much extra I can give you for this weekend's tournament though.
  15. kryovow

    kryovow Well-Known Member

    Messages:
    1,112
    Likes Received:
    240
    why only for casters? in dota 2 on the minimap it also works for teamgames, ok this would be harder for a mod :p
  16. cptconundrum

    cptconundrum Post Master General

    Messages:
    4,186
    Likes Received:
    4,900
    If you want, look at sketch.js and write a new tool for the arrow. I could hook into that easily enough.

    That would mean sending the lines to our own server and then back to the other players, which is more complicated than I want to make this.
  17. LavaSnake

    LavaSnake Post Master General

    Messages:
    1,620
    Likes Received:
    691
    A web service would do that, although none of us have the time to make that right now.
  18. LavaSnake

    LavaSnake Post Master General

    Messages:
    1,620
    Likes Received:
    691
    ok, I'll see what I can do.
  19. cptconundrum

    cptconundrum Post Master General

    Messages:
    4,186
    Likes Received:
    4,900
    I'll get it on github tomorrow though. Right now I have to watch some Star Trek.
    spicyquesidilla likes this.
  20. LavaSnake

    LavaSnake Post Master General

    Messages:
    1,620
    Likes Received:
    691
    Have fun! I already got the framework for my tools together here: https://github.com/pamods/LavaSnake-s-Mods/tree/master/LavaDraw (Sketch.js Tools)

    Feel free to download it, currently the arrow tool is just a clone of the draw tool through. I'll get to work on it soon. ;)

Share This Page