Creating a sandbox world with tile sprite

[arcadedice]

Hi There,

I am trying to create a sandbox world with tile sprite, where as the player moves left to right and top to bottom, and they only ever see the image once and it doesn't actually tile. I've read that you can do this by setting the world bounds and tile sprite size to the actual size of the image. When I do this it seems to work okay, however the moment I position the player it causes the background to offset in a way where I am seeing the tile repeat, which is not the desired effect. I was hoping somebody on the forum might have some insight or experience with how to do this? I've attached my code to show the problem I'm running into. Thanks for any help with this.

'use strict';

function Level() {}

Level.prototype = {

    init: function() {
        this.drone = null;
        this.background = null;
        this.cursors = null;
        this.balloon = null;
    },

    // preload: function () {},
    initPhysics: function() {
        this.game.world.setBounds(0, 0, 3072, 1536);
        this.game.physics.startSystem(Phaser.Physics.P2JS);

        // this.game.physics.p2.defaultRestitution = 0.8;
        this.game.physics.p2.world.defaultContactMaterial.friction = 0.3;
        this.game.physics.p2.world.setGlobalStiffness(1e5);
        this.game.physics.p2.gravity.y = 100;
        this.game.physics.p2.restitution = 0.8;
    },
    addBackground: function() {
        this.background = this.game.add.tileSprite(0, 0, 3072, 1536, 'background');
        this.background.fixedToCamera = true;
        this.background.tilePosition.x = 0;
        this.background.tilePosition.y = 0;
    },
    addDrone: function() {
        this.drone = this.game.add.sprite(0, 0, 'drone');
        this.drone.animations.add('fly');
        this.drone.animations.play('fly', 30, true);
    },
    addContactMaterials: function() {
        this.spriteMaterial = this.game.physics.p2.createMaterial('spriteMaterial', this.drone.body);

        this.worldMaterial = this.game.physics.p2.createMaterial('worldMaterial');
        this.game.physics.p2.setWorldMaterial(this.worldMaterial, true, true, true, true);

        this.contactMaterial = this.game.physics.p2.createContactMaterial(this.spriteMaterial, this.worldMaterial);
        this.contactMaterial.friction = 0.0; // Friction to use in the contact of these two materials.
        this.contactMaterial.restitution = 1.0; // Restitution (i.e. how bouncy it is!) to use in the contact of these two materials.
        this.contactMaterial.stiffness = 1e7; // Stiffness of the resulting ContactEquation that this ContactMaterial generate.
        this.contactMaterial.relaxation = 3; // Relaxation of the resulting ContactEquation that this ContactMaterial generate.
        this.contactMaterial.frictionStiffness = 1e7; // Stiffness of the resulting FrictionEquation that this ContactMaterial generate.
        this.contactMaterial.frictionRelaxation = 3; // Relaxation of the resulting FrictionEquation that this ContactMaterial generate.
        this.contactMaterial.surfaceVelocity = 0; // Will add surface velocity to this material. If bodyA rests on top if bodyB, and the surface velocity is positive, bodyA will slide to the right.
    },
    enablePhysics: function() {
        this.game.physics.p2.enable(this.drone);
        this.drone.body.clearShapes();
        this.drone.body.loadPolygon('dronePhysics', 'drone');
        this.drone.body.damping = 0.5;

        // this.drone.body.x = 100;
        // this.drone.body.y = 1400;
        // this.drone.anchor.setTo(0.5, 1.0);
    },
    initCamera: function() {
        this.game.camera.follow(this.drone);
    },
    addControls: function() {
        this.cursors = this.game.input.keyboard.createCursorKeys();
    },
    create: function() {
        this.initPhysics();
        this.addBackground();
        this.addDrone();
        this.enablePhysics();
        this.addContactMaterials();
        this.initCamera();
        this.addControls();
    },
    moveHorizontally: function() {
        if (this.cursors.left.isDown) {

            this.drone.body.rotateLeft(100);

        } else if (this.cursors.right.isDown) {

            this.drone.body.rotateRight(100);

        } else {

            this.drone.body.setZeroRotation();
        }
    },
    moveVertically: function() {
        if (this.cursors.up.isDown) {

            this.drone.body.thrust(400);

        } else if (this.cursors.down.isDown) {

            this.drone.body.reverse(400);
        }
    },
    moveBackground: function() {
        if (!this.game.camera.atLimit.x) {

            this.background.tilePosition.x -= (this.drone.body.velocity.x * this.game.time.physicsElapsed);
        }

        if (!this.game.camera.atLimit.y) {

            this.background.tilePosition.y -= (this.drone.body.velocity.y * this.game.time.physicsElapsed);
        }
    },
    update: function() {
        this.moveHorizontally();
        this.moveVertically();
        this.moveBackground();
    }

    // ,
    // paused: function () {},
    // render: function () {},
    // shutdown: function () {}

};

module.exports = Level;

 

 

 

[arcadedice]

I tried adjusting this.background.cameraOffset which I thought would work, but ended up using a regular sprite, fixing the camera to the player and moving the player instead of the background.