Problem with camera following the HUD/Scoreboard in game

[essmac]

Not sure if there's anyone who can help me on a last minute notice as I'm expected to have this game live by today... Basically I've been stuck trying to figure out why the scoreboard is not following the camera accordingly. It works width ways but will not follow the camera when the player goes to the higher platforms. 
 

.body(function() {

game.createScene('Level1', {
	backgroundColor: 0x91e2ee,

    init: function() {
        //SPEED FUNCTIONS
        // Slow down to 50%game.Timer.speedFactor = 0.5;// Speed up to 200%game.Timer.speedFactor = 2;// Back to normal speedgame.Timer.speedFactor = 1;

        this.world = new game.World(0, 2000);

        var floorBody = new game.Body({
            position: {
                x: game.system.width / 2,
                y: game.system.height - 220
            },
            collisionGroup: 1
        });
        this.timer = this.addTimer(0);

        var floorShape = new game.Rectangle(game.system.width, 60);
        floorBody.addShape(floorShape);
        this.world.addBody(floorBody);

        var bg = new game.Sprite('01_sky_sun.png').addTo(this.stage);
        this.addParallax('01.5_sky_clouds.png', 1000, 200);
        this.addParallax('farBg.png', 150, 0.01);
        this.addParallax('04_favelas1.png', 150, -600);
        this.addParallax('04_favelas.png', 200, -700);
        this.addParallax('fences.png', 200, -800);
        this.addParallax('floor.png', 150, -800);
        this.addParallax('05_bush.png', 0, -880);


        this.playerContainer = new game.Container().addTo(this.stage);
        this.objectContainer = new game.Container().addTo(this.stage);


        //Positioning of player during the beginning of the game
        this.player = new game.Player(400, 800 - 400);
        this.player.sprite.addTo(this.playerContainer);

        // var audioOn = game.audio.playSound('song1');
        // game.audio.setVolume(audioOn, 0.3);

        var speedboat = new game.Speedboat(1300, 900);

        this.guiContainer = new game.Container(400, 400)
        this.guiContainer.addTo(this.stage);

        var sprite1 = new game.Sprite('hud_score.png');
        sprite1.center(0, 410)
        this.stage.addChild(sprite1);

        this.addTimer(1500, this.spawnRandomObject.bind(this), true);
        this.spawnRandomObject();

        //this.addTimer(10000, );

        this.addTimer(5000, function() {
            console.log("Test speed up");
            game.Timer.speedFactor = game.Timer.speedFactor + 0.06;
            return this.addTimer;
            },5000);


        this.stage.addChild(this.guiContainer);

        this.text = new game.PIXI.Text("SCORE: ", {font: "bold 40px Arial",});
        this.text.position = {x: 950, y: 895};
        this.text.style.fill = "#FFFFFF";
        //this.text.addTo(this.guiContainer);
        this.text.addTo(this.guiContainer);


	  	//CAMERA
		this.camera = new game.Camera();
		this.camera.setTarget(this.player.sprite, this.guiContainer);
		this.camera.setPosition(0, 0);
		this.camera.minX = 0;
		this.camera.minY = -10000;
		this.camera.maxX = 0;
		this.camera.maxY = 0;
		this.camera.container = this.stage;
		this.camera.addTo(this.stage);
      },

    addParallax: function(texture, pos, speed) {
        var sprite = new game.TilingSprite(texture, game.system.width);
        sprite.speed.x = speed;
        sprite.position.y = game.system.height - sprite.height - pos;
        this.addObject(sprite);
        this.stage.addChild(sprite);
    },

    addTo: function(container) {
        this.container = container;
        this.container.position.set(-this.position.x, -this.position.y);
        return this;
    },

    update: function(){
        this._super();
        var time = + Math.floor(this.timer.time());
        if(time<0){time = i++;}


        this.text.setText(time + game.storage.has('coinscore'));
    },

    spawnRandomObject: function() {
        var rand = Math.random();

        //POINTS (COINS)
        if (rand < 0.4   ) {
            var coin = new game.Coin(game.system.width, 340 + Math.random() *  400);
        }

        //NOTES//
        //oneway = medium
        //oneway1 = small
        //oneway2 = large


        //LOWER PLATFORMS (1-3)
        else if (rand < 0.9) {
            var oneway = new game.Oneway(game.system.width , 575);
        }
        //SMALL SIZED PLATFORM WITH COINS
        if (rand > 0.5) {
            var oneway1 = new game.Oneway1(game.system.width + 400, 410);
        }

        if (rand > 0.6) {
            var coin = new game.Coin(game.system.width + 95, 320);
        }

        if (rand < 0.7) {
            var oneway2 = new game.Oneway2(game.system.width, 150);

        }

        if (rand < 0.3) {
            var coin = new game.Coin(game.system.width + 1365, -40);
            var tree = new game.Tree(game.system.width +  Math.random() *  400, -777);
        }

        //HIGHER PLATFORMS (4-5)
        if (rand > 0.5) {
            var oneway = new game.Oneway(game.system.width, -210);
        }

        if (rand > 0.8) {
            var coin = new game.Coin(game.system.width + 195, -310);
            var coin = new game.Coin(game.system.width + 295, -310);
            var coin = new game.Coin(game.system.width + 395, -310);
        }

        if (rand < 0.3) {
            var oneway3 = new game.Oneway3(game.system.width, -150);
        }

        if (rand > 0.9) {
            var tree = new game.Tree(game.system.width +  Math.random() *  100 - 300, -1135);
        }

        //OBSTACLES
        else if (rand > 0.3) {
            var hurdle = new game.Hurdle(game.system.width, 735);
        }


        if (rand < 0.2) {
            var samba = new game.Samba(game.system.width, 700);
        }

        if (rand < 0.3) {
          var biker = new game.BikerBoy(game.system.width, 750);
        }

    },

    mousedown: function() {
        this.player.jump();
    },

    keydown: function(key) {
        if (key === 'SPACE') this.player.jump();
    },

    tap: function(key) {
        this.player.jump();
    }
});

});

Also, I'm having trouble with the scoring system (this isn't my biggest priority right now the scoreboard is but I thought to chuck this in incase someone might know the answer), the main score works absolutely fine however the coin bonus score will read on the console log but not on the gameover screen. Coin points are called through the collision function and coin class as shown below. Storage is between the two and is also called on the game over screen 

Coin Class, then collision function:

game.createClass('Coin', {

    init: function(x, y) {

        this.sprite = game.Animation.fromFrames('coin-gold');
        this.sprite.animationSpeed = 0.2;
        this.sprite.anchor.set(0.5, 0.5);
        this.sprite.play();

        this.body = new game.Body({
            position: {
                x: x + this.sprite.width,
                y: y
            },
            collisionGroup: 2
        });

        this.body.parent = this;
        this.body.velocity.x = -800;
        var shape = new game.Rectangle(40, 60);
        this.body.addShape(shape);
        game.scene.playerContainer.addChild(this.sprite);
        game.scene.world.addBody(this.body);
        game.scene.addObject(this);
    },

    remove: function() {
        game.scene.world.removeBody(this.body);
        game.scene.playerContainer.removeChild(this.sprite);
        game.scene.removeObject(this);
        game.storage.set('coin');
    },

    update: function() {
        this.sprite.position.x = this.body.position.x;
        this.sprite.position.y = this.body.position.y;
        if (this.body.position.x + this.sprite.width / 2 < 0) this.remove();

    }
});

    coin: 0,

    collide: function(other) {
        if (other.collisionGroup === 1) {
            this.body.velocity.y = 0;
            this.body.mass = 0;
            this.onGround = true;
            this.jumps=0;
        }
        else if (other.collisionGroup === 2) {
            other.parent.remove();

            game.storage.get('coin');
            this.coin += 2000;
            console.log("coin count: " + this.coin);

            return false;

            game.storage.get('coinscore');
            this.coinscore += 2000;

            return false;
        }
        else if (other.collisionGroup === 3) {
            this.kill();
            return false;
        }
        else if (other.collisionGroup === 4, 5) {
            if (this.body.last.y + this.body.shape.height / 2 <= other.position.y - other.shape.height / 2) {
                this.body.velocity.y = 0;
                this.onGround = true;
                this.jumps = 0;
        }

        else return false;

        }
        return true;
    },

Then part of the game over scene:

            //console.log("coin count: " + this.coin);

            //add coin scores
            this.coinscore = game.storage.get('coinscore');
            this.coin = game.storage.get('coin');



            //this will set coin score as the number u set it, NOT the total coin score, how to change to coin score ?????
            //this.coinscore += 10300;
            console.log("coin total: " + this.coinscore);

            this.textresult = new game.Text("RUNNING SCORE:", { font: 'bold 50px Arial', fill: "#D6AF74", align: "right" });
            this.textresult.position={x: 300,y: 300};
            this.stage.addChild(this.textresult);

            this.textresult = new game.Text("COIN SCORE:", { font: 'bold 50px Arial', fill: "#D6AF74", align: "right" });
            this.textresult.position={x: 410,y: 380};
            this.stage.addChild(this.textresult);

            this.textresult = new game.Text("TOTAL:", { font: 'bold 50px Arial', fill: "#D6AF74", align: "right" });
            this.textresult.position={x: 560,y: 620};
            this.stage.addChild(this.textresult);

            //add final scores
            this.highscore = game.storage.get('highscore', 0);
            this.lastscore = game.storage.get('lastscore', 0);
            this.bronze = game.storage.get('bronze', 30000);
            this.silver = game.storage.get('silver', 60000);
            this.gold = game.storage.get('gold', 90000);
            this.coinscore = game.storage.get('coinscore');
            this.coin = game.storage.get('coin');


          /*  if (this.coin+=this.coinscore) {
                //this.coin+= 1000;
                game.storage.get('coin', this.coinscore);
            }*/

            this.textresult = new game.Text(this.coinscore, { font: 'bold 50px Arial', fill: "#ffffff" });
            this.textresult.position={x: 800,y: 380};
            this.stage.addChild(this.textresult);

            this.textresult = new game.Text(this.lastscore + this.coinscore, { font: 'bold 50px Arial', fill: "#ffffff" });
            this.textresult.position={x: 800,y: 620};
            this.stage.addChild(this.textresult);





            if (this.lastscore>this.highscore) {
                game.storage.get('highscore', this.lastscore);

                //Top score sprite yet to be fixed!
                var sprite11 = new game.Sprite('topscore.png');
                sprite11.center(-300,-300)
                this.stage.addChild(sprite11);
            }



            this.textresult = new game.Text(this.lastscore, { font: 'bold 50px Arial', fill: "#ffffff" });
            this.textresult.position={x: 800,y: 300};
            this.stage.addChild(this.textresult);

            if (this.lastscore >= this.gold) {
                var sprite10 = new game.Sprite('goldmedal.png');
                sprite10.center(330,0)
                this.stage.addChild(sprite10);
            }

            if (this.lastscore > this.bronze && this.lastscore < this.gold ) {
                var sprite8 = new game.Sprite('silvermedal.png');
                sprite8.center(330,0)
                this.stage.addChild(sprite8);
            }

            if (this.lastscore <= this.bronze){
                var sprite9 = new game.Sprite('bronzemedal.png');
                sprite9.center(330,0)
                this.stage.addChild(sprite9);
            }
        },



        addParallax: function(texture, pos, speed) {
            var sprite = new game.TilingSprite(texture, game.system.width);
            sprite.speed.x = speed;
            sprite.position.y = game.system.height - sprite.height - pos;
            this.addObject(sprite);
            this.stage.addChild(sprite);
        },

    });

 

[essmac]

Never mind - fixed...luckily!
Check out our current game - https://www.bigbrandideas.co.uk/runnymcjumpface/

[saltysquid]

Looks great!! So what was the fix for your problem?

 

[essmac]

Thanks ! It's literally been the hardest thing ever but has been well worth it - came into a design agency for a games design placement with no clue about Javascript... Working on my 2nd panda JS game now for a Donald Trump game which i'll post online when I'm done with it!

So basically had to change a few things in terms of defining the containers - was much more simpler than I thought.

So I added in this:
addParallax: function(texture, pos, speed) {

                this.playerContainer.addChild(sprite);

}

 

Then went through the objects.js file and replaced objectContainer with playerContainer and fixed the camera to container:

 

this.camera.addTo(this.playerContainer);

 

and voila..!