HTML5 Handling many collisions

Kodiqi

Member
GMS v1.4.1804

I have a Breakout style game which involves multiple balls (up to 1,000) and bricks (up to 100) on screen at a time. This means I have a lot of frequent collisions and I am getting some significant lag in the HTML5 version of my game. I'm just wondering if there is a better way I should be approaching my collisions to reduce this lag?

Initially, I was using place_meeting in the Step event of each Ball object to check if it met with a brick in its next step. After reading about grid collisions, I switched to using a ds_grid to store the location of the bricks, then in the step event of the Ball, I had it lookup the relevant grid to get the Brick ID (if any) it would collide with (images below might help explain the setup).

Grid.png Level1.png

In the Windows build, this did have an improvement on performance; with 500+ Balls active I could maintain over 100 fps still. In the HTML5 build though, I still saw a lot of lag. Is this just the performance hit I have to live with in HTML5? Is there a better (faster) way for me to handle collisions specific to HTML5 (or in general)?

Link to my game: https://kodiqi.itch.io/idle-breakout
 

TheouAegis

Member
You could get rid of collisions and just use a grid checking method. Convert the ball's ccoordinates down to the grid's range, then check if the cell in the grid is occupued by a block. If it is, destroy that block and clear the cell in the grid.
 

Kodiqi

Member
Yeah, that's effectively how it's working at the moment. Each grid cell contains either 0 (for empty) or the ID of the Brick matching its location. The Ball object then converts its own x,y values (where it will be next step) to the relevant grid x,y values; if an ID is present, it reduces that Brick's health accordingly (and does nothing if it finds 0). Code below for reference.

obj_ball: Step event
Code:
dest_x = floor((x + lengthdir_x(min(32,speed)+sprite_width/2,direction))/32)-1;
dest_y = floor((y + lengthdir_y(min(32,speed)+sprite_width/2,direction))/32)-3;

if (ds_grid_get(object_control.map,dest_x,dest_y) != 0)
    {
    hit = ds_grid_get(object_control.map,dest_x,dest_y);
    if (hit != 0)
        {
        scr_damage(hit,type);
        }
}
 

TheouAegis

Member
Well you could speed it up a tad.

Code:
dest_x = floor((x + lengthdir_x(min(32,speed)+sprite_width/2,direction))/32)-1;
dest_y = floor((y + lengthdir_y(min(32,speed)+sprite_width/2,direction))/32)-3;

var hit = ds_grid_get(object_control.map,dest_x,dest_y;
if hit
{ scr_damage(hit,type); }
 
Top