MichaelD Posted December 14, 2014 Share Posted December 14, 2014 Hello, I have created a line to immitate lightning as shown in the http://gamemechanicexplorer.com/ this is my code that creates the line var ctx = reg.lightningBitmap.context; var width = reg.lightningBitmap.width; var height = reg.lightningBitmap.height; // Our lightning will be made up of several line segments starting at // the center of the top edge of the bitmap and ending at the bottom edge // of the bitmap. // Clear the canvas ctx.clearRect(0, 0, width, height); ctx.lineCap = "round"; ctx.lineJoin = "mitter"; // Set the starting position and number of line segments var x = 0; var y = 0; var segments = game.rnd.integerInRange(20, 100); // Draw each of the segments for (var i = 0; i < segments; i++) { // Set the lightning color and bolt width ctx.strokeStyle = 'rgb(0, 174, 239)'; ctx.fillStyle = 'rgb(255,255,255)'; ctx.lineWidth = 3; ctx.beginPath(); ctx.moveTo(x, y); // Calculate an x offset from the end of the last line segment and // keep it within the bounds of the bitmap y += game.rnd.integerInRange(-50, 50); if (y <= 10) y = 10; if (y >= width - 10) y = width - 10; // Calculate a y offset from the end of the last line segment. // When we've reached the ground or there are no more segments left, // set the y position to the height of the bitmap. x += game.rnd.integerInRange(20, width / segments); if (i == segments - 1 || x > width) { x = width; } // Draw the line segment ctx.lineTo(x, y); ctx.stroke(); // Quit when we've reached the ground if (x >= width) break; } // This just tells the engine it should update the texture cache reg.lightningBitmap.dirty = true;Now what I want to achieve is to have a white fill for the line and blue stroke as it is.How could I achieve this? Thanks guys. Link to comment Share on other sites More sharing options...
Recommended Posts