pinastroHTML5 Posted January 31, 2014 Share Posted January 31, 2014 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 http://coil.clay.io/ The existing example of texture trail seems to be jittery and NOT SMOOTH http://localhost/phaser-master/phaser-master/examples/_site/view_full.html?d=display&f=render+texture+trail.js&t=render%20texture%20trail do tell me is there any lightweight way. A worked out sample would be really helpful thanks Link to comment Share on other sites More sharing options...
rich Posted January 31, 2014 Share Posted January 31, 2014 You've linked to localhost. That's your own machine. No-one else can see it Heppell08 1 Link to comment Share on other sites More sharing options...
pinastroHTML5 Posted January 31, 2014 Author Share Posted January 31, 2014 oops sorry I meant this http://gametest.mobi/phaser/examples/_site/view_full.html?d=display&f=render+texture+trail.js&t=render%20texture%20trail 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 spaceshttp://collegetomato.com/trail.png Thanks Link to comment Share on other sites More sharing options...
jpdev Posted January 31, 2014 Share Posted January 31, 2014 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 How?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 More sharing options...
jpdev Posted February 1, 2014 Share Posted February 1, 2014 I should go to bed, instead of playing with this code Have more lines:http://janpeter.net/perma/phaser/cursorLineMoreLines.html Good night Zaidar and jerome 2 Link to comment Share on other sites More sharing options...
pinastroHTML5 Posted February 2, 2014 Author Share Posted February 2, 2014 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 againpreload, 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 // RESETTING ALL THE PARAMETERS } 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 More sharing options...
jpdev Posted February 2, 2014 Share Posted February 2, 2014 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 More sharing options...
pinastroHTML5 Posted February 3, 2014 Author Share Posted February 3, 2014 Cool. I got it Next working on smoothening the curve now using sampling technique, dont know if that is the best option...lot of arrays I guessIn case you have any easier method ..suggest me one thanks Link to comment Share on other sites More sharing options...
mfcv Posted May 16, 2014 Share Posted May 16, 2014 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:ctx.bezierCurveTo(20,100,200,100,200,20);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 More sharing options...
rich Posted May 16, 2014 Share Posted May 16, 2014 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 More sharing options...
mfcv Posted June 3, 2014 Share Posted June 3, 2014 Any news about this feature in Phaser? I can't find anything in the documentation, but I'm not really sure where to look... Link to comment Share on other sites More sharing options...
Gregory Posted December 8, 2014 Share Posted December 8, 2014 Any news about this feature in Phaser? I can't find anything in the documentation, but I'm not really sure where to look... Rich, any update on this? Link to comment Share on other sites More sharing options...
Recommended Posts