Jump to content

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


Sherlautten
 Share

Recommended Posts

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.

 

2wdvdle.jpg

 

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();
}
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

 

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  ;)  ;)  ;) !!!

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...