Sign in to follow this  
pat

how to change the speed of a drawing on a bitmapData ?

Recommended Posts

Hello all,

 

This short code works well.

I am calculating 4 points and I connect them with a dotted line.

I draw them on a bitmapData

 

My problem is this one.

I want to slow down the drawing and for example 

draw a point (wait 1 second), draw a second point (wait another second), draw another point (wait another second) and then draw the lines.

The waiting time can be giving by a slider.

And of course, during all this time, I want to be able to click on the slider to change the speed of the animation.

is it possible or not, because I am drawing on the bitmapData.

 

Thanks for your help

 

Patrick

window.onload = function () {    var SCREEN_WIDTH = 800;    var SCREEN_HEIGHT = 600;    // array of points    var points = [];    // lineDashOffset    var dashOffset = 1;    var game = new Phaser.Game(SCREEN_WIDTH, SCREEN_HEIGHT, Phaser.AUTO, '', { create: create, update: update});    // We draw circle and lines directly on the bitmapdata bmd    var bmd;    function create() {        game.stage.backgroundColor = '#FFFFFF';        // we create and add the bitmapData        bmd = game.add.bitmapData(SCREEN_WIDTH, SCREEN_HEIGHT);        game.add.sprite(0, 0, bmd);        // calculate 4 points        for (var i = 0; i < 4; i++) {            points[i] = [                [Math.random() * SCREEN_WIDTH],                [Math.random() * SCREEN_HEIGHT]            ];        }    }    function update() {        // erase bitmapData        bmd.clear();        test();    }    function test() {        //  we draw lines        bmd.ctx.beginPath();        bmd.ctx.lineWidth = '1';        bmd.ctx.setLineDash([5, 5]);        bmd.ctx.lineDashOffset = dashOffset;        dashOffset++;        bmd.ctx.strokeStyle = "green"; // Green path        for (var i = 1; i < points.length; i++) {            bmd.ctx.moveTo(points[i - 1][0], points[i - 1][1]);            bmd.ctx.lineTo(points[i][0], points[i][1]);            bmd.ctx.stroke(); // Draw it        }        // to remove dashed line        bmd.ctx.setLineDash([0, 0]);        bmd.ctx.lineDashOffset = 0;        // we draw circles        for (i = 0; i < points.length; i++) {            bmd.ctx.beginPath();            bmd.ctx.arc(points[i][0], points[i][1], 3, 0, Math.PI * 2);            bmd.ctx.fillStyle = 'Red';            bmd.ctx.fill();            bmd.ctx.lineWidth = 1;            bmd.ctx.strokeStyle = 'FireBrick';            bmd.ctx.stroke();        }    }}

Share this post


Link to post
Share on other sites

Sadly it's not just a case of 'slowing down' the drawing routines, you'd probably have to implement your own line drawing routines using tweens or similar. It'd be a pretty involved process to do this; and to then have it controllable would be even trickier!

 

There're some interesting techniques here that work on pointer movement - if you could somehow set up a series of tweens which moved a virtual pointer between the four points you could make use of something like these techniques to create a nice effect:

 

http://perfectionkills.com/exploring-canvas-drawing-techniques/

Share this post


Link to post
Share on other sites

Thanks a lot for your answer, but it is not I am waiting for.

In fact my problem is this one. I calculate a lot of points and for each point, I want to be able to calculate a new bitmapData (I can do that) and to force the update/refresh of this bitmapData

function create() {        game.stage.backgroundColor = '#FFFFFF';        // we create and add the bitmapData        bmd = game.add.bitmapData(SCREEN_WIDTH, SCREEN_HEIGHT);        game.add.sprite(0, 0, bmd);        // calculate 4 points        for (var i = 0; i < 4; i++) {            points[i] = [                [Math.random() * SCREEN_WIDTH],                [Math.random() * SCREEN_HEIGHT]            ];            CALCULATE A NEW BITMAP DATA (I can do it)            FORCE REFRESH (is it possible ??)            WAIT A SECOND  (is it possible ??)        }    }

Share this post


Link to post
Share on other sites

AARRGGHH

exactly what I wanted.

You save my day  :D  :D  :D  :D  :D  :D  :D

I think that there is a little problem, when you look, you can see that the first line is drew four times, the second line is drew 3 times and so on

It look like the bmp data is not erased or something like that.

Share this post


Link to post
Share on other sites

One more time, thanks a lot

 

If I add this line

bmd.clear();

just after the beginning of function processQueue

I see one point alone, then the second point alone, then the third point alone and the last point alone (that seems good)

but I see the four lines at the same time ????

processQueue: function() {        // Are there any commands left to process?        if (queue.length == 0) {            return;        }                 bmd.clear();  …

Share this post


Link to post
Share on other sites

I change a little your code, the problem was for the move command. It is not necessary to update the bitmap data if we only move the pen.

I just store the value of the move point to use it when necessary.

I put your code here, in case I loose it on my computer.

 

Thanks a lot

// Phaser current version test environment// Procedurally draw a boxvar game = new Phaser.Game(500, 400, Phaser.AUTO, 'test');var BasicGame = function(game) {};BasicGame.Boot = function (game) {    // nothing here};var bmd, queue = [], lastAction ={action: '', pt:new Phaser.Point(0, 0)};BasicGame.Boot.prototype = {    preload: function() {      game.time.advancedTiming = true;    },	create: function() 	{        // Create our bitmapData and apply it to a Sprite        bmd = game.add.bitmapData(400, 400);        game.add.sprite(40, 40, bmd);                // Feed the drawShape function an array of points        this.drawShape([            new Phaser.Point(5, 5),            new Phaser.Point(275, 20),            new Phaser.Point(245, 265),            new Phaser.Point(25, 275)        ]);    },    update: function() {            },    render: function()    {        game.debug.text(game.time.fps || '--', 2, 14, "#00ff00");       },    drawShape: function(pts) {        var p;        // Loop through all of the points and add 'plot' commands        for (p = 0; p < pts.length; p++) {            queue.push({action: "plot", pt: pts[p]});           }                // Move back to the first point        queue.push({action: "move", pt: pts[0]});                // Shift the array so the last point is the first, so we make a complete square with the lines that follow        Phaser.Math.shift(pts);                // Loop through the shifted points and add 'line' commands        for (p = 0; p < pts.length; p++) {            queue.push({action: "line", pt: pts[p]});           }        // Begin processing the queue of commands we've created        this.processQueue();    },    processQueue: function() {        // Are there any commands left to process?        if (queue.length == 0) {            return;        }        //bmd.clear();        // Get the next command from the front of the queue        var a = queue.shift();        // Parse our commands and perform the appropriate canvas operations        switch (a.action) {            case "plot":                bmd.ctx.beginPath();                bmd.ctx.arc(a.pt.x, a.pt.y, 2, 0, 2 * Math.PI, false)                bmd.ctx.fillStyle = '#ffffff';                bmd.ctx.fill();                // Set the bmd to dirty so it renders in WebGL properly                // If dirty this BitmapData will be re-rendered.                bmd.dirty = true;                break;            case "move":                // do nothing, I save the new point in lastAction                break;            case "line":                bmd.ctx.beginPath();                bmd.ctx.lineWidth = '2';                bmd.ctx.setLineDash([5, 5]);                bmd.ctx.strokeStyle = "green"; // Green path                bmd.ctx.moveTo(lastAction.pt.x, lastAction.pt.y);                bmd.ctx.lineTo(a.pt.x, a.pt.y);                bmd.ctx.stroke(); // Draw it                // Set the bmd to dirty so it renders in WebGL properly                // If dirty this BitmapData will be re-rendered.                bmd.dirty = true;                break;        }        // we save the last action with the point coord        lastAction = a;        // Process the next command in the queue after 400ms        game.time.events.add(400, this.processQueue, this);    }};game.state.add('Boot', BasicGame.Boot);game.state.start('Boot');

Share this post


Link to post
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...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.