javascript - Canvas | How do I create a Y-axis trail, from an X-axis moving object -
i'm making game in canvas/phaser @ moment , i'm looking solution following problem.
i need make y-axis trail object moves on x-axis, looks leaves dust trail.
however everywhere people creating trail bouncing balls or other x/y moving objects, not want create.
i using phaser game framework develop game, if there solution within framework supurb, if me pure canvas solution/idea great too!
i hope chose right words explanation, below added picture , small video visualizes wanted end result.
i not know phaser, since asking plain canvas example, here 1 that:
fifo buffer (array)
you can use fifo buffer (first-in-first-out) or delay-buffer. store x and/or y value depending on needs buffer. when buffer full according predefined max value, first value thrown out.
now have tail values , can rendered anyway want.
demo
below store x. tail gradient defined. give best/smoothest result, can create array predefined color matching entries in fifo-buffer.
just aware in case need render solids (no alpha) or transition between each line segment visible.
and there it. make fit in render cycle.
performance tips:
- if move in y-direction gradient need follow. instead of creating new gradient every time, use translate() player head. translate gradient line definition.
- using typed array can improve performance if need many/long tails. these faster list/node arrays not come shift need use cyclic pointer instead.
- for game in video, render single tail once, reuse other heads.
- instead of using shadow glow in demo, use image head glow applied.
var ctx = document.queryselector("canvas").getcontext("2d"); ctx.fillstyle = "#fff"; var fifo = [], // fifo buffer cycle older x values through max = 30, // max positions stored in buffer = 0, // demo, make x cycle on screen size = 8, // draw size x = 300, // x-pos mousemove event y = 30, // y-pos player head // make gradient tail stroke: // adjust range needed gradient = ctx.createlineargradient(0, 30, 0, 280); // brightest color on top, transparent color @ bottom. gradient.addcolorstop(0, "#ccd"); gradient.addcolorstop(1, "rgba(200,200,240,0)"); // set canvas ctx.strokestyle = gradient; ctx.linewidth = 10; ctx.linejoin = "round"; ctx.linecap = "square"; // glow effect (because can.. :) ) ctx.shadowcolor = "rgba(255,255,255,0.5)"; ctx.shadowblur = 20; ctx.canvas.onmousemove = function(e) { var rect = this.getboundingclientrect(); x = e.clientx - rect.left; }; // main loop - (function loop() { // push new value(s) fifo array (for demo, x) fifo.push(x); // fifo buffer full? throw out first value if (fifo.length > max) fifo.shift(); // render got; ctx.clearrect(0, 0, 600, 480); ctx.beginpath(); ctx.moveto(fifo[0], y + fifo.length * size); for(var t = 1; t < fifo.length; t++) { ctx.lineto(fifo[t], y + (fifo.length - t) * size); } ctx.stroke(); // draw main player head ctx.translate(x, y); ctx.rotate(0.25*math.pi); ctx.fillrect(-size*0.5, -size*0.5, size*2, size*2); ctx.settransform(1,0,0,1,0,0); requestanimationframe(loop) })();canvas {background:#000}<canvas width=600 height=360></canvas>
Comments
Post a Comment