Draw on screen method?

[npilla]

Is there some sort of 'drawing' method in Phaser? I'd like the user to be able to draw with their finger or mouse click on the screen and have the 'trail' or line remain.

 

Thank you for the help!

[XekeDeath]

You could try using the Graphics class, it has a lineTo(x,y) function that you could use to draw a line from the original touch/click to a few subsequent points gathered while the pointer is down.

 

The Phaser Graphics object basically wraps the PIXI Graphics object, so you need to read up on the PIXI docs

http://www.goodboydigital.com/pixijs/docs/classes/Graphics.html

 

I have no idea what the performance would be like, or what optimizations could be made, this is just where I would start.

[npilla]

I was able to incorporate drawing using the canvas element and straight javascript. Problem is, the javascript canvas is sitting on top of the Phaser sprites so when I attempt to move a sprite, it automatically collides with the canvas. Is there a way to get them to work together? Maybe the Phaser sprites can just work beneath the canvas element? 

 

Thank you again for the help.

[rich]

I have added a BitmapData object to the dev branch which would be perfect for this. You can apply it to a Sprite as a texture too, so it's easy to handle layering. And you can draw directly to it.

[npilla]

OK, I'll take a look at that.

[npilla]

So I'm using this code to draw to the screen, but I'm confused about how to incorporate it into Phaser.

 

var canvas, ctx, flag = false,

    prevX = 0,

    currX = 0,

    prevY = 0,

    currY = 0,

    dot_flag = false;

 

var x = "black",

    y = 5;

 

function init() {

    canvas = document.getElementById('can');

    ctx = canvas.getContext("2d");

    w = canvas.width;

    h = canvas.height;

 

    canvas.addEventListener("mousemove", function (e) {

        findxy('move', e)

    }, false);

    canvas.addEventListener("mousedown", function (e) {

        findxy('down', e)

    }, false);

    canvas.addEventListener("mouseup", function (e) {

        findxy('up', e)

    }, false);

    canvas.addEventListener("mouseout", function (e) {

        findxy('out', e)

    }, false);

}

 

function color(obj) {

    switch (obj.id) {

        case "green":

            x = "green";

            break;

        case "blue":

            x = "blue";

            break;

        case "red":

            x = "red";

            break;

        case "yellow":

            x = "yellow";

            break;

        case "orange":

            x = "orange";

            break;

        case "black":

            x = "black";

            break;

        case "white":

            x = "white";

            break;

    }

    if (x == "white") y = 14;

    else y = 2;

 

}

 

function draw() {

    ctx.beginPath();

    ctx.moveTo(prevX, prevY);

    ctx.lineTo(currX, currY);

    ctx.strokeStyle = x;

    ctx.lineWidth = y;

    ctx.stroke();

    ctx.closePath();

}

 

function erase() {

    var m = confirm("Want to clear");

    if (m) {

        ctx.clearRect(0, 0, w, h);

        document.getElementById("canvasimg").style.display = "none";

    }

}

 

function save() {

    document.getElementById("canvasimg").style.border = "2px solid";

    var dataURL = canvas.toDataURL();

    document.getElementById("canvasimg").src = dataURL;

    document.getElementById("canvasimg").style.display = "inline";

}

 

function findxy(res, e) {

    if (res == 'down') {

        prevX = currX;

        prevY = currY;

        currX = e.clientX - canvas.offsetLeft;

        currY = e.clientY - canvas.offsetTop;

 

        flag = true;

        dot_flag = true;

        if (dot_flag) {

            ctx.beginPath();

            ctx.fillStyle = x;

            ctx.fillRect(currX, currY, 2, 2);

            ctx.closePath();

            dot_flag = false;

        }

    }

    if (res == 'up' || res == "out") {

        flag = false;

    }

    if (res == 'move') {

        if (flag) {

            prevX = currX;

            prevY = currY;

            currX = e.clientX - canvas.offsetLeft;

            currY = e.clientY - canvas.offsetTop;

            draw();

        }

    }

}

[rich]

Dev branch!

[bk0606]

I also asked this question.

[Alvin]

All the changes in the dev branch have been pushed to the master branch now.

[bk0606]

All the changes in the dev branch have been pushed to the master branch now.

 

Ok, it`s great! I`m got a bitmapData. But it does not work:

 

var btmDrw = game.add.bitmapData(100, 100);

    btmDrw.beginFill(0xFF0000);

    btmDrw.beginPath();

    btmDrw.moveTo(200, 200);

    btmDrw.lineTo(300, 300);

    btmDrw.stroke();

 

why line is not appears?

[rich]

Because the bitmap doesn't display onto the game until applied to a sprite as a texture or copied to the context. Also you've made a 100x100 sized bitmap, then moved to 200x200 and drawn to 300x300, both of which are well outside the size of the bitmap you created.

[miuan]

Hi, maybe is old topic, but I playing with Phaser version 2.3.0 and BitmapData for draw by hand.

 

if i do in addMoveCalback callback funciton (for mouse pointer listner)

 this.bmd.draw(this.loop, x- bmdsprite.x, y - bmdsprite.y);

thats work, but if i try draw something to the canvas, that does't work (no error but in sprite/bitmapData is no change)

this.bmd.ctx.beginPath();this.bmd.ctx.rect(x - bmdsprite.x, y - bmdsprite.y, 20, 20);this.bmd.ctx.fillStyle = '#ffff00';this.bmd.ctx.fill();this.bmd.ctx.closePath();

do I miss something? what i have to call for apply my changes in canvas into bitmap and sprite?

 

Thank you.