DbD Posted October 6, 2015 Share Posted October 6, 2015 Hi all, I'm currently editing an example i found on infinite jumpers, and I was wondering about an infinite scrolling background. The thing with the example I'm using is that it's constantly creating, and destroying the top and bottom parts of the map to keep it within a 300x500 size, and too keep it from lagging once the game gets too big. The issue I'm having is with the background. I would like it to constantly update with the to part of the map,and to give it a "infinite scrolling background" feel. However, when the game updates the top portion of the map, it cuts off the top of the background image, and no matter what I do, I cant seem to figure out how to recreate the background on the new portions of the map. Here's the game in it's current state: http://dbdeveloped.com/games/commando-escape/ and here's the current code: var Jumper = function() {};Jumper.Play = function() {}; Jumper.Play.prototype = { preload: function() { this.load.image( 'hero', 'assets/player.png' ); this.load.image( 'pixel', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/836/pixel_1.png' ); this.load.image("background", "assets/background.png"); }, create: function() { // background color //this.stage.backgroundColor = '#6bf'; this.bg= this.game.add.tileSprite(0, 0, game.stage.bounds.width, game.cache.getImage('background').height, 'background'); // scaling this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.scale.maxWidth = this.game.width; this.scale.maxHeight = this.game.height; this.scale.pageAlignHorizontally = true; this.scale.pageAlignVertically = true; this.scale.setScreenSize( true ); // physics this.physics.startSystem( Phaser.Physics.ARCADE ); // camera and platform tracking vars this.cameraYMin = 99999; this.platformYMin = 99999; // create platforms this.platformsCreate(); // create hero this.heroCreate(); // cursor controls this.cursor = this.input.keyboard.createCursorKeys(); }, update: function() { // this is where the main magic happens // the y offset and the height of the world are adjusted // to match the highest point the hero has reached this.world.setBounds( 0, -this.hero.yChange, this.world.width, this.game.height + this.hero.yChange ); // the built in camera follow methods won't work for our needs // this is a custom follow style that will not ever move down, it only moves up this.cameraYMin = Math.min( this.cameraYMin, this.hero.y - this.game.height + 130 ); this.camera.y = this.cameraYMin; // hero collisions and movement this.physics.arcade.collide( this.hero, this.platforms ); this.heroMove(); // for each plat form, find out which is the highest // if one goes below the camera view, then create a new one at a distance from the highest one // these are pooled so they are very performant this.platforms.forEachAlive( function( elem ) { this.platformYMin = Math.min( this.platformYMin, elem.y ); if( elem.y > this.camera.y + this.game.height ) { elem.kill(); this.platformsCreateOne( this.rnd.integerInRange( 0, this.world.width - 50 ), this.platformYMin - 100, 50 ); } }, this ); if( game.input.keyboard.isDown(Phaser.Keyboard.W)) { this.bg.tilePosition.y += 1; } }, shutdown: function() { // reset everything, or the world will be messed up this.world.setBounds( 0, 0, this.game.width, this.game.height ); this.cursor = null; this.hero.destroy(); this.hero = null; this.platforms.destroy(); this.platforms = null; }, platformsCreate: function() { // platform basic setup this.platforms = this.add.group(); this.platforms.enableBody = true; this.platforms.createMultiple( 10, 'pixel' ); // create the base platform, with buffer on either side so that the hero doesn't fall through this.platformsCreateOne( -16, this.world.height - 16, this.world.width + 16 ); // create a batch of platforms that start to move up the level for( var i = 0; i < 9; i++ ) { this.platformsCreateOne( this.rnd.integerInRange( 0, this.world.width - 50 ), this.world.height - 100 - 100 * i, 50 ); } }, platformsCreateOne: function( x, y, width ) { // this is a helper function since writing all of this out can get verbose elsewhere var platform = this.platforms.getFirstDead(); platform.reset( x, y ); platform.scale.x = width; platform.scale.y = 16; platform.body.immovable = true; return platform; }, heroCreate: function() { // basic hero setup this.hero = game.add.sprite( this.world.centerX, this.world.height - 48, 'hero' ); this.hero.anchor.set( 0.5 ); // track where the hero started and how much the distance has changed from that point this.hero.yOrig = this.hero.y; this.hero.yChange = 0; // hero collision setup // disable all collisions except for down this.physics.arcade.enable( this.hero ); this.hero.body.gravity.y = 500; this.hero.body.checkCollision.up = false; this.hero.body.checkCollision.left = false; this.hero.body.checkCollision.right = false; }, heroMove: function() { // handle the left and right movement of the hero if (game.input.keyboard.isDown(Phaser.Keyboard.A)) { this.hero.body.velocity.x = -200; } else if (game.input.keyboard.isDown(Phaser.Keyboard.D)) { this.hero.body.velocity.x = 200; } else { this.hero.body.velocity.x = 0; } // handle hero jumping if( game.input.keyboard.isDown(Phaser.Keyboard.W) && this.hero.body.touching.down ) { this.hero.body.velocity.y = -350; } // wrap world coordinated so that you can warp from left to right and right to left this.world.wrap( this.hero, this.hero.width / 2, false ); // track the maximum amount that the hero has travelled this.hero.yChange = Math.max( this.hero.yChange, Math.abs( this.hero.y - this.hero.yOrig ) ); // if the hero falls below the camera view, gameover if( this.hero.y > this.cameraYMin + this.game.height && this.hero.alive ) { this.state.start( 'Play' ); } }} var game = new Phaser.Game( 300, 500, Phaser.CANVAS, '' );game.state.add( 'Play', Jumper.Play );game.state.start( 'Play' );Thanks for all the help, and sorry for the large code paste. Pretty much everything that i'm working on for the background happens in the create and update functions. Link to comment Share on other sites More sharing options...
Recommended Posts