Draw line on canvas using Construct 3

  • Hi everyone,

    I'd like to create a simple tutorial for a multiplayer drawing game, but it doesn't seem to be possible to do it on Construct 3?

    I see there's a Canvas plugin available for Construct 2 (plugin-canvas_t64239), and a template project (https://www.scirra.com/store/royalty-fr ... -line-3445) that does exactly what I want.

    Unfortunately, the Canvas plugin doesn't seem to be available for Construct 3. Is someone working on porting it? I wouldn't mind helping out porting that plugin.

    Cheers!

    (EDIT: I can't post URLs because I'm a new user here. Hope you understand what I mean.)

  • If you just need to draw lines and nothing else, you can do this without the canvas.

    Use a Tiled Background object (say, 2x2 pixels), stretch it and rotate.

    For example:

    on first click - create TiledBackground at (mouse.x, mouse.y)

    on second click - set TiledBackground width to distance (self.x, self.y, mouse.x, mouse.y),

    set angle towards (mouse.x, mouse.y)

  • Thanks for the reply, dop2000, I actually need to draw the whole path of the mouse/touch from touch/click-start to touch/click-end.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • You can create these tiled background objects on every tick - from previous mouse position to current mouse position.

  • Per dop's post:

    + System: On start of layout
    -> TiledBackground: Destroy
    
    | Global number x0? = 0
    | Global number y0? = 0
    
    + Mouse: On Left button Clicked
    -> System: Set x0 to Mouse.X
    -> System: Set y0 to Mouse.Y
    
    + Mouse: Left button is down
    + System: x0 ? Mouse.X
    + System: y0 ? Mouse.Y
    -> System: Create object TiledBackground on layer 0 at (x0, y0)
    -> TiledBackground: Set width to distance(x0,y0,Mouse.X,Mouse.Y)
    -> TiledBackground: Set angle toward (Mouse.X, Mouse.Y)
    -> System: Set x0 to Mouse.X
    -> System: Set y0 to Mouse.Y[/code:2c2a9beo]
    
    It works best with thin lines. For thicker lines, add a rounded "end cap" sprite to each ssegment.
  • Thanks a lot, I've created a simple multiplayer example using the method you described.

    Source code: github.com/endel/multiplayer-drawing-prototype[/li]

  • Got it - .

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)