Forums » Code » Infinite Runner plugin

Hey All,

I've created a plugin to help with developing infinite runner style games in impact:

https://github.com/tmacie/impact-infinite

The levels can still be defined in Weltmeister, and it properly loads all tiles/entities. Suggestions/questions/bug reports are all welcome.

Thanks!

Tom

I just added an example based on the jump'n'run demo, see it at http://impact-infinite-example.azurewebsites.net/.

It's nice. It's just repeat the two maps, it willl be possible a random map generator? That would be awesome. :D

Thanks for the plugin.

Fixed some issues that would arise if you had no collision Map (you can use this for a shooter and it works just as good :) )

https://github.com/tmacie/impact-infinite/issues/1

@Felipe - Thanks for the info, I've pushed a fixed to the repository.
@Luthor - The example has 2 levels, but you can add as many as you'd like. I've been thinking about procedural level generation but haven't had time to implement it. Hopefully soon!

I haven't had a chance to try this, but I am looking forward to. I was wondering, if you added the same level in the array multiple times, would that improve the odds of it coming up or does it ignore multiple occurrences? I was thinking it would be cool to have a "filler" type of level come up more often then important levels.

Loving this plugin, although I have been having a minor issue with it on both my local installations and the hosted version at http://impact-infinite-example.azurewebsites.net

Currently if I have Chrome's console open the character will disappear when the game starts. Also, using the latest version of Firefox or Safari seems to cause the same issue without the console being open.

I'm going to try debugging the plugin to see if I can find a solution, if I do I'll post an issue on GitHub.

Thanks!

@stillen Yes, if you add the level multiple times it will come up more often. I've thought about adding the ability to pass in a selection function that would override the default approach of randomly picking levels, would that be useful?

@Gareth Glad you like it! If you find an issue let me know, I appreciate you looking into it.

What I was thinking would be awesome, would be able to pick a first and last level, but have the middle levels be random.

Like you can pick the spot where the player spawns, and then the place where the level ends, but then everything between is build "randomly"

I have a few spots in my game where this would be very useful.

You can actually pick the first level with the plugin right now. Haven't really thought about a last level, as the initial idea was for infinite runners, but if you think it would be useful add an issue on github and I can look into it.

Thank you. This looks awesome!

This is pretty cool :)

I had a bug using this plugin which was that my player would sometimes die right after it spawned (when starting the level) apparently the plugin was killing it in your method that checks for entities that are no longer visible.

I fixed this by adding a condition entity!=ig.game.player to the if statement, that would make it not kill my entity no matter where it is located . Just thought I'd share in case someone else ran into this

@tmcie: Nice plugin. You could have called it Infinite Flapper plugin as well. ;)

BTW, your getNextLevel function is the perfect place for clients who might want to override the default random level selection functionality, e.g., default random, or sequential with wraparound, or per some other parameters.

@mr_j936 it would be awesome if you could open an issue and submit a Pull Request in the GitHub project for this... :)

Thanks for the feedback. I've updated the plugin so that the following are configureable:

kill entities if they go past the left of the screen
kill entities if they go below the bottom of the screen
method for determining next level

you can see the details at https://github.com/tmacie/impact-infinite

@tmacie thanks for this awesome plugin!

BTW, when I try to use the Pre Rendered setting (I'm using it in Impact.Debug) the map gets stuck in the same position but the player keeps running and interacting with the collision layer. If i deactivate the Pre Rendered setting, everything goes back to normal.

I detected if I delay the trim of the out of the screen column of tiles, the Pre Rendering works "fine", but when start to trimming, everything goes to hell. I did this with this:

// remove tiles that are no longer visible
if (ig.game.screen.x >= ig.game.backgroundMaps[0].tilesize * 50) {
    ...
}

The last thing that I tried is to call the function ig.game.backgroundMaps[0].preRenderMapToChunks(); after the trimming, but... of course the performance sucks completely (I know... it's the worst sollution ever! but I have to try it! :D).

I hope someone has the solution for this :)

Hey Tmacie, cool plugin-- is there a way to get the parallax run smoothly? Right now if you set "distance" to anything besides 1 the refresh stutters, seems like the speed is not being set correctly. I'm going to try to build a custom background map and see if that helps, if it works I'll post the code.

Cool plugin tho.

One way I got around this was I set the farthest background outside the level editor.

Basically I have the sky in my game draw before the level's draw. I leave them transparent, so you can see through them. Having my background move slower then the level gives the same effect.

I actually do this with two background layers, sky and then clouds. I also draw a layer above the game for items that how above the game and then another layer that shows the UI for the game.

Not sure if that helps, but it keeps everything very smooth, since they are not dependent on the plugin or level editor. I was having issues when the levels didn't end equally, the backgrounds would "tear"

Hi there guys,

Sry to bump this thread.

I'm trying to use the camera plugin and this one and the it doesnt follow .

Did anyone have this problem?

Thx!

Quote from RockLeo
I'm trying to use the camera plugin

Which plugin are you trying to use?

There doesn't seem to be a camera plugin in the repo: https://github.com/tmacie/impact-infinite

Quote from Joncom
Which plugin are you trying to use?

There doesn't seem to be a camera plugin in the repo: https://github.com/tmacie/impact-infinite

Hi Joncom,

Camera plugin made by Dominic in Biolab Disaster.

http://impactjs.com/forums/help/screen-scrolling#post1978

It is used in the Super Generic Jump n run.

Quote from RockLeo
I'm trying to use the camera plugin and this one and the it doesnt follow .

Did anyone have this problem?

Please provide some relevant code showing what you've tried so far.

You're having trouble with the camera? Then perhaps show us the code that interacts with the camera...

I download the super generic jump'n run from my download page.

Then, I followed the instruction of infinite plugin, this is the result:

	infiniteLevel:null,
	init: function() {
		// We want the font's chars to slightly touch each other,
		// so set the letter spacing to -2px.
		this.font.letterSpacing = -2;		
		
		// Load the LevelGrasslands as required above ('game.level.grassland')
		//this.loadLevel( LevelGrasslands );
		this.infiniteLevel = new ig.InfiniteLevel([LevelGrasslands], {start: LevelGrasslands, checkX: true, checkY:false});		
	},

	loadLevel: function( data ) {
		// Remember the currently loaded level, so we can reload when
		// the player dies.
		this.currentLevel = data;

		// Call the parent implemenation; this creates the background
		// maps and entities.
		this.parent( data );
		
		this.setupCamera();
	},
	
	setupCamera: function() {
		// Set up the camera. The camera's center is at a third of the screen
		// size, i.e. somewhat shift left and up. Damping is set to 3px.		
		this.camera = new ig.Camera( ig.system.width/3, ig.system.height/3, 3 );
		
		// The camera's trap (the deadzone in which the player can move with the
		// camera staying fixed) is set to according to the screen size as well.
    	this.camera.trap.size.x = ig.system.width/10;
    	this.camera.trap.size.y = ig.system.height/3;
		
		// The lookahead always shifts the camera in walking position; you can 
		// set it to 0 to disable.
    	this.camera.lookAhead.x = ig.system.width/6;
		
		// Set camera's screen bounds and reposition the trap on the player
    	this.camera.max.x = this.collisionMap.pxWidth - ig.system.width;
    	this.camera.max.y = this.collisionMap.pxHeight - ig.system.height;
    	this.camera.set( this.player );
	},

	reloadLevel: function() {
		this.loadLevelDeferred( this.currentLevel );
	},
	
	update: function() {		
		// Update all entities and BackgroundMaps
		this.parent();
		
		//infinite update
		this.infiniteLevel.update();
		
		// Camera follows the player
		this.camera.follow( this.player );
		
		// Instead of using the camera plugin, we could also just center
		// the screen on the player directly, like this:
		// this.screen.x = this.player.pos.x - ig.system.width/2;
		// this.screen.y = this.player.pos.y - ig.system.height/2;
	},
	
	draw: function() {
		// Call the parent implementation to draw all Entities and BackgroundMaps
		this.parent();
		

		// Draw the heart and number of coins in the upper left corner.
		// 'this.player' is set by the player's init method
		if( this.player ) {
			var x = 16, 
				y = 16;

			for( var i = 0; i < this.player.maxHealth; i++ ) {
				// Full or empty heart?
				if( this.player.health > i ) {
					this.heartFull.draw( x, y );
				}
				else {
					this.heartEmpty.draw( x, y );	
				}

				x += this.heartEmpty.width + 8;
			}

			// We only want to draw the 0th tile of coin sprite-sheet
			x += 48;
			this.coinIcon.drawTile( x, y+6, 0, 36 );

			x += 42;
			this.font.draw( 'x ' + this.player.coins, x, y+10 )
		}
		
		// Draw touch buttons, if we have any
		if( window.myTouchButtons ) {
			window.myTouchButtons.draw(); 
		}
	}
});

the camera goes crazy when the player walks lol.

Here's the entire code

http://1drv.ms/1OyKjqg

thx again!

Try this:

1. Disable the camera plugin and have the screen follow the player manually
2. Add this line to your player.js update function: console.log(this.pos.x);
3. Add this line to your main.js init function: ig.Timer.timeScale = 0.1;
4. Start playing the game
5. Watch the position of the player being printed in the console

You'll notice that at a certain point, the player position value in the console keeps reverting to a previous value. That's how the infinte running plugin seems to make the level infinite, by delete tiles on the left, and then shifting the level (and the entities) over to fill the tiles that were deleted.

So basically you're having camera issues because the player and the world are jumping around.

ow man, so frustrating.

Thx again Joncom.

No worries. If you want to see what you're up against, look for everywhere that ig.game.screen is modified in the infinite runner plugin. Could be as simple as replacing those lines with ones that modify the camera position instead.