Center static camera in fullscreen?

[Pattentrick]

Hi there,

i can not thank you enough for impact++. Impact++ is great and makes a whole bunch of things much easier. However i am fairly new to this extension and i have a problem with the implementation of a static camera in connection with fullscreen/resolution independence.

Everything happens on one screen in my game. I need no scrolling for my levels or an "entity following" at all. Instead i need the camera to center the „gamearea/viewport“ inside the canvas. Right now the „gamearea/viewport“ is in the upper left corner.

Here is my config:

   ig.CONFIG_USER = {

        // set to true for a top down game
        TOP_DOWN : true,

        // enable fullscreen
        GAME_WIDTH_PCT : 1,
        GAME_HEIGHT_PCT : 1,

        // start resolution that will be scaled
        GAME_WIDTH_VIEW : 320,
        GAME_HEIGHT_VIEW : 200,

        // camera settings
        CAMERA : {
            AUTO_FOLLOW_PLAYER : false
        }

    };

I tried something like this.screen.x -= ig.system.width / 2; in the game init, but without any success. How can i center the camera inside the "gamearea/viewport"?

[Pattentrick]

I added the behaviour i wanted after some headache like this:

this.screen.x -= ( ig.system.realWidth / 2 ) / ig.system.scale - ( _c.GAME_WIDTH_VIEW / 2 );
this.screen.y -= ( ig.system.realHeight / 2 ) / ig.system.scale - ( _c.GAME_HEIGHT_VIEW / 2 );

not sure though if this approach is too complicated, or unnecessary because impact++ has a built in functionality for this. anyhow ... this approach fails also on browser resize. even when i try to add this code to the games resize method.

any feedback is highly appreciated!

[collinhover]

Hi @Pattentrick! I'm actually not sure if this is built into the camera, as you're the first to bring it up. I'm guessing from your question that your levels never change size and that all of them are the same? If that is the case, why not set your game/canvas size to the exact size of your levels:

   ig.CONFIG_USER = {

        // set to true for a top down game
        TOP_DOWN : true,

        // width and height of your levels
        GAME_WIDTH: 320,
        GAME_HEIGHT: 200,

        // also don't enable fullscreen
        // and we don't need width / height in VIEW

        // camera settings
        CAMERA : {
            AUTO_FOLLOW_PLAYER : false
        }

    };

[collinhover]

And I forgot one thing, you'll probably want to set your canvas CSS to the size of the levels and make sure it is centered in the page.

[Pattentrick]

Hi Collin,

thank you for your anwser and your effort on this one! Thats right, my levels never change in size and all of them have the same dimension. I need a static game screen like in puzzlegames (tetris or bejeweled for example). To be exact, i am working on a graphic adventure in style of the early ega sierra games (kings quest, space quest, lesuire suit larry), where you have a static background with no scrolling at all.

Your solution is valid. But i need the fullscreen mode and resolution independence for the user experience, so that my game scales up to to the biggest size possible. As for myself - i prefer my games as player in fullscreen mode and would not accept a predefined windowed mode.

However, i fixed the code mentioned above and it does the trick on fullscreen mode:

// declare config variable
var _c = ig.CONFIG;

// have your game class extend Impact++'s game class
var pac = ig.GameExtended.extend({

    // background color of canvas
    clearColor: "#000000",

    // override the game init function
    init: function () {

        this.parent();

        // load level
        this.loadLevel(ig.global.LevelTest);

    },

    /**
     * Centers camera on gamescreen when
     * the game runs in fullscreen mode
     */
    centerStaticCamera : function(){

        // reset screen position for
        // proper positioning on resize
        ig.game.screen.x = 0;
        ig.game.screen.y = 0;

        // calculate new screen position
        ig.game.screen.x -= ( ig.system.realWidth / 2 ) / ig.system.scale - ( _c.GAME_WIDTH_VIEW / 2 );
        ig.game.screen.y -= ( ig.system.realHeight / 2 ) / ig.system.scale - ( _c.GAME_HEIGHT_VIEW / 2 );

    },

    resize : function(){

        this.parent();

        // check for game instance
        if( ig.game !== null ){

            // center camera on gamescreen
            this.centerStaticCamera();

        }

    }

});

I will go for this one, if there is no built in feature to center the camera on the gamescreen in fullscreen mode, when there is no entity to follow.

Please contact me, if you ever feel the need to implement this kind of camera behaviour in impact++. I would be very happy to contribute to this awesome project.

[collinhover]

I prefer fullscreen as well! You are correct, there is no built in offset. If you'd like to modify the ig.Camera class to have an option to automatically position itself to a defined offset based on a percent of the level size, when it has nothing to follow, please submit a pull request and we'll merge it in.