(mouseover/click to play GIF) A 15fps preview of lightning

This is a little post about making a lightning/electric arc effect in GameMaker.

The idea

The lightning is drawn in segments from the last point to the new one.

First and last point are fixed.

Each iteration, we step toward the destination by xmin..xmax pixels and pick an ymin..ymax towards either side.

Sideways offset is also multiplied by -sin(pi*position) to make the lightning "wider" on average near the middle.

The code

For GMS2.3+:

/// @param {number} x1  source X
/// @param {number} y1  source Y
/// @param {number} x2  destination X
/// @param {number} y2  destination Y
/// @param {number} xmin  minimum distance step (>0)
/// @param {number} xmax  maximum distance step (>xmin)
/// @param {number} ymin  minimum "side" step (lightning "spread")
/// @param {number} ymax  maximum "side" step (lightning "spread")
/// @returns {int} number of segments drawn.
function draw_lightning(x1, y1, x2, y2, xmin, xmax, ymin, ymax) {
    var _dist = point_distance(x1, y1, x2, y2);
    if (_dist <= 0) return 0;
    
    var _fwd_x = (x2 - x1) / _dist;
    var _fwd_y = (y2 - y1) / _dist;
    var _side_x = -_fwd_y, _side_y = _fwd_x;
    
    var _alpha = draw_get_alpha();
    var _last_x = x1;
    var _last_y = y1;
    var _pos = 0;
    var _drawn = 0;
    repeat (5000) { // line segment limit
        _pos += random_range(xmin, xmax);
        var _next_x, _next_y;
        if (_pos < _dist) {
            var _side_offset = choose(-1, 1) * lerp(ymin, ymax,
                // this instead of just random(1) makes the lightning
                // spread out more close to the middle of it
                random(sin(-pi * _pos / _dist))
            );
            
            _next_x = x1 + _fwd_x * _pos + _side_x * _side_offset;
            _next_y = y1 + _fwd_y * _pos + _side_y * _side_offset;
        } else { // (last point)
            _next_x = x2;
            _next_y = y2;
        }
        
        // you can replace this with custom line drawing - these magic numbers just look alright
        draw_set_alpha(_alpha * 0.3);
        draw_line_width(_last_x, _last_y, _next_x, _next_y, 3.7);
        draw_set_alpha(_alpha * 0.7);
        draw_line_width(_last_x, _last_y, _next_x, _next_y, 1.3);
        
        if (_pos >= _dist) break;
        _last_x = _next_x;
        _last_y = _next_y;
        _drawn += 1;
    }
    draw_set_alpha(_alpha);
    return _drawn;
}

The GIF was produced by the following:

draw_set_color(0xfff0ee);
repeat (3) draw_lightning(50, 50, mouse_x, mouse_y, 5, 15, 3, 20);

For older versions (older/less clean code):

/// draw_lightning(x1, y1, x2, y2, xmin, xmax, ymin, ymax)
//                  0   1   2   3     4     5     6     7
// Draws a lightning between points.
/// @param {number} x1  source X
/// @param {number} y1  source Y
/// @param {number} x2  destination X
/// @param {number} y2  destination Y
/// @param {number} xmin  minimum distance step (>0)
/// @param {number} xmax  maximum distance step (>xmin)
/// @param {number} ymin  minimum "side" step (lightning "width")
/// @param {number} ymax  maximum "side" step (lightning "width")
/// @returns {int} number of segments drawn.
var i, r, c, l, dx, dy, sx, sy, px, py, cx, cy, alpha;
// avoid drawing outside view:
if (max(argument0, argument2) < view_xview[view_current] - 10) return 0
if (max(argument1, argument3) < view_yview[view_current] - 10) return 0
if (min(argument0, argument2) > view_xview[view_current] + view_wview[view_current] + 10) return 0
if (min(argument1, argument3) > view_yview[view_current] + view_hview[view_current] + 10) return 0
// find distance between points (used for loop)
l = point_distance(argument0, argument1, argument2, argument3)
if (l == 0) return 0
// main direction:
i = point_direction(argument0, argument1, argument2, argument3)
dx = lengthdir_x(1, i); dy = lengthdir_y(1, i)
// side direction:
i += 90
sx = lengthdir_x(1, i); sy = lengthdir_y(1, i)
// first point coordinates:
px = argument0; py = argument1
c = 0
i = random_range(argument4, argument5)
alpha = draw_get_alpha()
repeat (5000) { // edit for line segment limit
    r = choose(-1, +1) * (argument6 + (argument7 - argument6)
        * lengthdir_y(random(1), i / l * 180)) // this part makes lightning "wider" near middle
    // current point coordinates:
    if (i < l) {
        cx = argument0 + dx * i + sx * r
        cy = argument1 + dy * i + sy * r
    } else { cx = argument2; cy = argument3 } // end point
    // line drawing code here:
    // can be just a single draw_line or something fancy like this:
    draw_set_alpha(alpha * 0.3)
    draw_line_width(px, py, cx, cy, 3.7)
    draw_set_alpha(alpha * 0.7)
    draw_line_width(px, py, cx, cy, 1.3)
    // exit condition:
    if (i >= l) break
    // update previous point coordinates:
    px = cx; py = cy
    // increments:
    c += 1
    i += random_range(argument4, argument5)
}
draw_set_alpha(alpha)
return c

Original GM8 example:

Download GMK

Related posts:

• GameMaker: Homing missiles
• GameMaker: Window sliding effects
• GameMaker: Recursive folder copying
• GameMaker: Basic 3d bone animations
• GameMaker: Shadow casting in platformer games