Jump to content

continuous Bezeir kind of curve in on the mouse trail


Recommended Posts

Hi all,


  I dont know if this has been answered already but can you help me in this.


 I want to create an effect something like in this game using PhaserJS 



 The existing example of texture trail seems to be jittery and NOT SMOOTH



 do tell me is there any lightweight way. A worked out sample would be really helpful






Link to comment
Share on other sites

oops sorry 


I meant this 



Something i have created using another html5 framework looks like this..i want to move that blue dot across the trail ...which should be a continous line instead of a trail with uneven spaces




Link to comment
Share on other sites

Hey Pinastro,


I just had some fun playing around with the Phaser Graphics object in the direction I think you want to go.


Here is what I came up with:


http://janpeter.net/perma/phaser/cursorLine.html (works in firefox and chrome, IE 11 there is something wrong with the mouse events I think, no errors, but also no movement)


You only need any small png graphic for the sprite, and put the whole code thing into an index.html and have a phaser.js in the same directory.

(I have used v1.1.4 - Built at: Tue Jan 14 2014 03:31:58 - I hope it works with 1.1.3)


What it does:

- You can paint a line with by clicking with the mouse.

- the sprite will move and follow that line to it's end

- if you draw a new line, the old line is erased, the sprite follows the new line



I paint into a graphics object, when ever the mouse is moved an the button is pushed.

I also record the points where I paint into an array, so the sprite has infos where it needs to move.

Array and Graphic are cleared if you draw a new line.


Pitfall: The graphic is cleared by painting it black. (I have not found a way to make it transparent - but I am sure that is possible). This means the sprite has to be above the graphics object to be visible.


Pitfall 2: It only works in canvas mode so far. The lineTo function does strange things. (paints circles everywhere... no clue why)

<!doctype html> <html> <head>   <title>Phaser</title>   <script type="text/javascript" src="phaser.js"></script> </head> <body> <script type="text/javascript">var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create, update: update });  var sprite = null;  var graphic = null;  var wasDown = false;  var path = null;  var pathIndex = -1;  var pathSpriteIndex = -1;  function blackoutGraphic() {    graphic.beginFill(0x000000);    graphic.lineStyle(4, 0x000000, 1);    graphic.drawRect(0, 0, game.width, game.height);    graphic.endFill();    graphic.lineStyle(4, 0xFF0000, 1);  }  function preload() {    game.load.image('star', 'star.png');  }  function create() {    graphic = game.add.graphics(0, 0);    blackoutGraphic();    sprite = game.add.sprite(100, 100, 'star');    sprite.anchor.setTo(0.5, 0.5);  }  function update() {    if (game.input.mousePointer.isDown) {      if (!wasDown) {        graphic.moveTo(game.input.x, game.input.y);        blackoutGraphic();        pathIndex = 0;        pathSpriteIndex = 0;        path = [];        wasDown = true;      }      if (pathIndex == 0 || (path[pathIndex - 1].x != game.input.x || path[pathIndex - 1].y != game.input.y)) {        graphic.lineTo(game.input.x, game.input.y);        path[pathIndex] = new Phaser.Point(game.input.x, game.input.y)        pathIndex++;      }    } else {      wasDown = false;    }    if (path != null && path.length > 0 && pathSpriteIndex < pathIndex) {      pathSpriteIndex = Math.min(pathSpriteIndex, path.length - 1);      game.physics.moveToXY(sprite, path[pathSpriteIndex].x, path[pathSpriteIndex].y, 250);      if (game.physics.distanceToXY(sprite, path[pathSpriteIndex].x, path[pathSpriteIndex].y) < 20) {        pathSpriteIndex++;        if (pathSpriteIndex >= pathIndex) {          sprite.body.velocity.setTo(0, 0);        }      }    }  }</script></body></html>

I hope you like it and it helps you out, I had fun with it.

(Needed to debug soo much, because my array indexs were off all the time :) )

Link to comment
Share on other sites

hey members 

thanks for the response . It was really a cool one...


 thanks but I am a sort of noob in programming  I did get most of it but please help me out understanding the code u have sent ... i tried the same code doesnt seem to be working .... though the link u shared is working .... 

this is my understanding , [ please forgive my noobness...i am not a full time programmer ..may be that's why]

blackoutGraphics()  is for resetting the screen to black again

preload, create and update are as usual  but in update there are three main conditions which I understand only partially 


 if(game.input.mousePointer.isDown) {  


    if(!wasDown) {         // NEW CLICK 




     if(pathIndex == 0     ||     (path[pathIndex - 1].x ! = game.input.x     ||     path[pathIndex-1].y != game.input.y)      ) {   // ????????


        // Probably drawing a line between two consecutive points ?????




  else   //else condition also not clear because the if condition was not clear





 if (path != null       &&         path.length > 0       &&         pathSpriteIndex < pathIndex)  {   

   //this condition is probably for moving the star.png across the line till the covered distance is over




Link to comment
Share on other sites

Just to make sure: Just drawing is way easier then my example. You just have to have two variables that store the x and y position of the mouse each call to update. if the mouse position has changed, draw a line between the new position and the old x and y. then update x, y to the new mouse pos.


Infos for my example:


To get the complete working source, you can view my linked demo, right click and use "view sourcecode".

(But it should be what I posted.)


I use the "wasDown" boolean variable to determine if this is the first call to update since the mouse button is pressed.

(By setting it to false when the mouse is not pressed.)

This is used to clear the graphic, when ever you push the mouse button down.


So now I know the mouse button is down and I check if the mouse has moved since the last time update was called.


path[pathIndex - 1] holds the last position we have stored, because pathindex is increased everytime a new position is stored.


So I compare the mouse position to the position in path[pathindex -1] .. if Y or X have changed, then the mouse has been moved.

(The check for pathindex == 0 is there so that I start storing mouse positions initially in the first update())


Then I draw a line from the last position to the new position of the mouse.

I store the the new position in the path array and increase the pathindex by 1.


Then we make sure the sprite moves from point to point that we saved in the path array.


Why are we storing all the positions instead of only the last one? - That because I wanted the sprite to move along the painted line.

And since the sprite is slower then the mouse, it would leave the line if we did not 

Link to comment
Share on other sites

  • 3 months later...

I'm trying to achieve something similar, but for my application it's crucial to draw a smooth curved line. With <canvas> you can do the following to create a just that:


The phaser graphics can't do that from what I understand, so I'm using this instead:

graphics.lineTo(p.position.x, p.position.y);

This is drawing straight lines, but I really need the smoothness. Can I somehow access the underlying technologies for this purpose?

Link to comment
Share on other sites

Wait for the next release of Pixi - Mat has added some excellent updates to the Graphics class that can handle this with ease now, which will filter down into Phaser.


See Pixi dev branch for details. When they hit master I will merge with Phaser (hopefully not too long? week or so.. fingers crossed)

Link to comment
Share on other sites

  • 3 weeks later...
  • 6 months later...

  • Recently Browsing   0 members

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