Centering the Viewport on Player?

[Orthonormal]

I am trying to reproduce this game: http://ha.reesun.me/=/~Games/BEACH/

In that game, the viewport is centered on your player. When you move
around with the arrow keys, the viewport moves so that your player is
always in the center. I looked at the documentation for
me.Viewport.follow(Object, axis) but it wasn't really clear about how
the viewport is following the input Object or what parameters I can
modify to change it.

Suggestions? :)

[Orthonormal]

Self solved this after looking at the MelonJS viewport code. (thanks
for the generous comments and neat code!)

Steps taken:

1. Used "me.game.viewport.setDeadzone(0,0)".
2. If you want the viewport to center at the edges of the map too you
will need to have ample empty spaces added to the tmx file. If not the
viewport will not remain centered on the player at the edges.

P.S.
This thread could be a nice reference for people who wants to do the
same thing. After spending some time googling for viewport and
deadzone, it wasn't apparent that setting the deadzone to 0 would
achieve what I want.

[Norb]

Hello,

I don't know how you solve it with deadzone, if you want to follow your entity just place in the class definition of your entity :

        me.game.viewport.follow(this.pos, me.game.viewport.AXIS.BOTH);

[Orthonormal]

Thanks Norb. But that is not enough to produce the effect here:
http://ha.reesun.me/=/~Games/BEACH/

If you go to that link and press the arrow key, you will find that the
viewport is always centered on your character. Any movement will move
the viewport.

On the other hand, if your deadzone is not 0 in MelonJS, the viewport
might not move with your character. The deadzone appears to set an
area around your character that you can move in without triggering a
viewport move.

[Orthonormal]

Furthermore, "this.pos" gives the top left corner of your sprite. So,
the viewport will be centered on the top left corner of the sprite,
instead of the exact center.

To fully achieve the viewport in this game: http://ha.reesun.me/=/~Games/BEACH/,
I had to define a new vector, say this.tracking, that keeps track of
the position of the center of the sprite and make the viewport follow
it instead.

i.e. me.game.viewport.follow(this.tracking,
me.game.viewport.AXIS.BOTH);

[kevand...@gmail.com]

I'm having trouble getting my viewport to center perfectly on the centerpoint of my character. You mentioned making a tracking vector but I don't know how to set it or call it properly so that it wont break the viewport following entirely. Melon JS has some of the worst documentation I have ever seen. Almost none of it is useful.

[Jay Oster]

Hi!

Which documentation are you referring to, specifically? I'm surprised to hear you claim it is almost all useless. We have:

• Docs : http://melonjs.github.io/docs/
• Tutorial : http://melonjs.github.io/tutorial/
• Wiki : https://github.com/melonjs/melonJS/wiki

I would say it is very well-documented, actually.

What is meant by "tracking vector" is creating a new vector object on the player, that you "manually" update each frame by copying the position vector after the updateMovement() call, then adding the hWidth and hHeight properties to get a vector pointing to the object's center.

var PlayerEntity = new me.ObjectEntity.extend({

    "init" : function (x, y, settings) {

        this.parent(x, y, settings);

        // Create a vector that represents the player center point

        this.center = new me.Vector2d(this.hWidth, this.hHeight);

        // Create the "tracking vector"

        this.tracking = this.pos.clone();

        // Set viewport to follow the "tracking vector"

        me.game.viewport.follow(this.tracking, me.game.viewport.AXIS_BOTH);

        me.game.viewport.setDeadzone(0, 0);

    },

    "update" : function () {

        this.updateMovement();

        // Update the "tracking vector"

        this.tracking.copy(this.pos).add(this.center);

        return this.parent();

    }

});

That's a very specific question that is outside of the scope of melonJS documentation. And in fact, such questions are what this forum is for. I hope I have been able to help!