How does Graphics class work?

[Mrandom]

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 

 

[eguneys]

try graphics.clear() at some point to clear the area and redraw everything.

[Mrandom]

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.

[eguneys]

Phaser uses Pixi Graphics under the hood. See http://www.pixijs.com/.

[jouniii]

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.