Draw a zigzag line

[zomm]

Hi all,

 

I started to learn Phaser in one week, and realize that Phaser is interesting framework. So I decide to dive deep into the sea and having a question: 

How can I draw a random zigzag line along with side scrolling?

Please let me know, if you have an answer, thank you.

[BdR]

I don't know if you can draw lots of graphics for each frame and still keep 60fps. So if you want to draw a zig zag line as a background effect, then maybe it's faster and better performance to create a bitmap .PNG file and use that.

 

But strictly answering your question; you can use the graphics() class from Pixi.JS, so something like this:

    var zigstep = 30;    // initialise line    var grph = game.add.graphics(0, 0);    grph.lineStyle(1, 0xFFFFFF, 1.0); // width=1, alpha=1.0    grph.moveTo(0, 300);    // draw zigzag line horizontally    for (var x=0; x<800; x=x+zigstep) {        // alternate between y=300 and x=360        var y = 300;        if ((x % (2*zigstep)) == 0) {y = 360};        // draw part of the zig zag line        grph.lineTo(x, y);    }; 

 

 

[zomm]

Thank you BdR, It works perfectly 

And for more details, how can I make the line drawing along with sidescrolling animation? I mean when the player in game moving forward, the line has drawn?