How to attach a menu on the screen with a world inside?

[Sherlautten]

Hi, I'm having a problem which has broken my mind the last days and I haven't found any solution to fix it.

 

Well, what I want is, inside my Canvas screen, a screen with a menu, buttons and score, and inside it a game world with players who can move and the camera follow them inside it, because it's biggers than the Canvas screen.

 

 

This is an idea of what I want, a Canvas screen of 850*600 pixels, and inside it, buttons, score and a game in the middle with a camera view of 790*410 pixels, but the world inside it is of 1300*615 pixels.

 

I have setted the game world inside the canvas and works fine, but I can't attach the outworld screen to the canvas screen, when my players, for example, left corner, I can't see the Score and Exit buttonts, and when it's on any top corner he can't see the menu bottom.

 

This is the code that I have thanks to the tip which rich gave here

http://www.html5gamedevs.com/topic/8048-gameworldsetbounds-doesnt-work/

 

But It's not working as I would like, I want my camera to move only inside the game and let all the stuff outside attached. This is the code... Do you know any solution?? Thanks in any case!

 

 

window.onload= function(){

var game = new Phaser.Game(850 , 600, Phaser.AUTO, 'phaser', { preload: preload, create: create, update: update });

 

function preload() {    

    game.load.spritesheet('Red','images/RedBall.png',25,25,2);

}

 

function create() {

    game.physics.startSystem(Phaser.Physics.P2JS);

    game.physics.p2.setImpactEvents(true);

    

    game.world.bounds.setTo(0, 0, 1300, 625);

    if (game.camera.bounds)

    {

        //  The Camera can never be smaller than the game size

        game.camera.bounds.setTo(-30, -50 , 1340, 825);

    }

   game.physics.setBoundsToWorld();

   

   sprite = game.add.sprite(200, 200, 'Red');

 

    //  Enable if for physics. This creates a default rectangular body.

 game.physics.p2.enable(sprite);

 

    //  Modify a few body properties

   sprite.body.setZeroDamping();

sprite.body.fixedRotation = true;

    cursors = game.input.keyboard.createCursorKeys();

}

[pxam]

fixedToCamera is what you're looking for:

http://phaser.io/docs/2.4.3/Phaser.Group.html#fixedToCamera

[Sherlautten]

fixedToCamera is what you're looking for:

http://phaser.io/docs/2.4.3/Phaser.Group.html#fixedToCamera

Thanks for your help but it didn't work, I tried to draw a rectangle and fixed it to camera, but It doesn't works... I still have the same problem.

 

I have a screen behind but I don't know how to make my Game screen smaller so it's the only which moves even when the other elements are fixed.

[Sherlautten]

Up!

 

Any idea? I need this 

[NateTheGreatt]

Can you show the portion of your code where you set fixedToCamera? This is how it is normally used:
 

var ui = game.add.group();
ui.fixedToCamera = true;
var sprite = new Phaser.Sprite(game, 10, 10, 'imgKey');
ui.add(sprite);

[Sherlautten]

 

Can you show the portion of you code where you set fixedToCamera? This is how it is normally used:

 

var ui = game.add.group();ui.fixedToCamera = true;var sprite = new Phaser.Sprite(game, 10, 10, 'imgKey');ui.add(sprite);

I got to fixed the problem with a mix between setBoundsToWorld and fixed to camera!!

 

 

game.world.bounds.setTo(30, 50, 1300, 625);

    if (game.camera.bounds)

    {

        //  The Camera can never be smaller than the game size

        game.camera.bounds.setTo(0, 0, 1360, 800);

    }

       game.physics.setBoundsToWorld();

 

ground = game.add.sprite(30,50,'campo'); 

 

graphics.beginFill(0xFF3300);

    graphics.drawRect(0, 0, 840, 50);

    graphics.drawRect(0, 0, 30, 600);

    graphics.drawRect(810, 0, 30, 600);

    graphics.drawRect(0, 475, 840, 150);

    graphics.fixedToCamera= true;

 

 

 

It works exactly as I wanted, Ty both      !!!