Jump to content

Draw on screen method?


npilla
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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();
        }
    }
}
Link to comment
Share on other sites

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?
Link to comment
Share on other sites

  • 1 year later...

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...