Mrandom Posted August 24, 2014 Share Posted August 24, 2014 Hi I'm new to Canvas or WebGL, so I'm not familiar with how each frame is rendered. In my understanding, the context is removed and re-drawed in each frame, and that's how we can see all kinds of animations. I am trying to imitate the water effect in this link: http://tysonross.com/temp/waves/index.html The problem is that I can only get one "wave" without any user input. That is, the water reaches the highest point of the wave and never comes down. I suspect the way .moveTo() or .lineTo() works in Phaser is not the same as the way they works in the original example, which is using pure Canvas. It seems that in my case, the context is not remove and repainted in each frame. Once it is painted, it stays there forever. Here my part of code to draw the water: function fillWater(){ for (var i = 1; i < springs.length; i++) { // create the four corners of our triangle. var p1 = new Phaser.Point((i-1)*baseWidth, springs[i-1].height) var p2 = new Phaser.Point(i*baseWidth, springs[i].height); var p3 = new Phaser.Point(p2.x, game.world.height); var p4 = new Phaser.Point(p1.x, game.world.height); graphics.beginFill(0x0099FF); graphics.lineStyle(1, 0x0099FF, 1); graphics.moveTo(p1.x, p1.y); graphics.lineTo(p2.x, p2.y); graphics.lineTo(p3.x, p3.y); graphics.lineTo(p4.x, p4.y); graphics.endFill(); } }The rest of my code works pretty much the same as the example. Any advice? Thanks Link to comment Share on other sites More sharing options...
eguneys Posted August 24, 2014 Share Posted August 24, 2014 try graphics.clear() at some point to clear the area and redraw everything. Link to comment Share on other sites More sharing options...
Mrandom Posted August 24, 2014 Author Share Posted August 24, 2014 try graphics.clear() at some point to clear the area and redraw everything.That works! Thanks, eguneys. BTW, where to find documentations for .clear() or .moveTo() these kind of functions? I cloned the docs from github but do not really see these functions under Phaser.Graphics. Link to comment Share on other sites More sharing options...
eguneys Posted August 24, 2014 Share Posted August 24, 2014 Phaser uses Pixi Graphics under the hood. See http://www.pixijs.com/. Link to comment Share on other sites More sharing options...
jouniii Posted August 25, 2014 Share Posted August 25, 2014 Technically Graphics is a object with programmable set of instructions to draw stuff each frame. So if you just draw and draw and draw, you are just appending after existing instructions. Thus, if you need to change the coordinates, or otherwise invalidate the Graphics object, you need to clear the instructions and reapply them. Note that the draw instructions contain absolute x/y positions. Link to comment Share on other sites More sharing options...
Recommended Posts