Experimenting with procedurally generated levels in ImpactJS

Posted on June 26, 2012 | 3 minute read

I have been experimenting with procedurally generated levels in ImpactJS. Up until now everything I’ve done was using levels pre-made in Weltmeister (Impact’s inbuilt level editor). However, being able to generate levels on the fly seems like it would be a much more scalable and more interesting approach for some types of games.

I know some Impact users suggest moving the screen and generating/removing rows to accomplish this. This might very well be the best way, but so far in playing around with generating levels dynamically the most success I’ve found has been with moving the player and repeating the level background layer while also generating collisions on the fly using entities as opposed to CollisionMap. This seems like a very hacky way to do this so it may get scrapped at some point, but so far what I have works to make the player auto-move in a straight line with a repeating background and not fall through the floor due to the collider entities being spawned on the fly.

Performance-wise this runs consistently at 60fps as the collider entities are being spawned at a set distance in front of the player and killed as soon as they leave the screen.

Again, I want to stress that I’m only in the beginning stages of playing around with this and don’t know how viable this method is over the long term (for example, how I’d generate variations in the collider entities to create randomized drops or jumps on the fly). In fact, I’m mostly just making this post to articulate what I just did to myself. Writing things down helps to review and solidify concepts in my head. Here’s how I’m doing what I have so far:

Set background map layer in Weltmeister to “repeat”

Right now all I have is a row of placeholder red tiles here, repeating.

ImpactJS Weltmeister layer repeat

Create collider entity

(See inline comments)

ig.module( 
    'game.entities.collision'
)
.requires(
    'impact.entity'
)
.defines(function(){
EntityCollision = ig.Entity.extend({
    size: {x: 20, y:20},
    offset: {x: 0, y: 0},
    flip: false,
    angle: 0,
    maxVel: {x: 0, y: 0},
    friction: {x: 0, y: 0},
    // Not impacted by world gravity:
    gravityFactor:0,
	
    type: ig.Entity.TYPE.A, // Player friendly group
    checkAgainst: ig.Entity.TYPE.NONE,
    // Entity is fixed to ensure it always stays in place.
    collides: ig.Entity.COLLIDES.FIXED,
	
    animSheet: new ig.AnimationSheet( 'media/collision.png', 20, 20 ),
	
    init: function( x, y, settings ) {
        this.parent( x, y, settings );
        // Add animations
        this.addAnim( 'idle', 1, [0] );

    },
	
	
    update: function() {
	
        // The following if statement kills the entity as soon as it's no longer in view of the screen window
        var i = this.pos.x - ig.game.screen.x;
        if( i<0){
            this.kill();
        }
		
        // move!
        this.parent();
    },
	
    draw: function() {
        this.parent();
    }

});
});

Spawn collider entities in main.js

Spawn collider entities 400px in front of the player entity in the update() function of main.js:

var player = this.getEntitiesByType( EntityPlayer )[0];
this.spawnEntity( EntityCollision, player.pos.x + 400, 420 );

Screenshot of end result (collider entities are yellow, but will eventually be transparent): Dynamic level in ImpactJS

Up next

  • Stop collider entities from being piled on top of each other like they currently are. Generate them 20px apart in one row

  • Create a ‘drop’ entity that the collider entities couldn’t spawn on top of. Make it look and act like a hole for the player to fall into (by setting collision to NEVER)

  • Generate obstacles randomly just off of the right edge of the screen

From there I’ll start looking into difficulty levels (increasing speed, triggering more powerful obstacles, etc)

What I’ve been reading

Over the past couple of days while thinking about this I’ve stumbled across a few interesting articles about platformer level design:




Categories:game dev dev games
comments powered by Disqus