How to player center all divice and map move?

Cocos Creator
1

I wanted to create a game like Agar.io . And objects controlled by 4 buttons . Thank for all

2

I’ve been building up on the example you find in the path assets\cases\tiledmap\puzzle.fire if you create a new project with the option examples/example collection.

Basically you can use the method in there used to move the map once you reach the edge of the view and just remove the check for nearing the edge so that it moves with every keystroke and keeps you centered:

_tryMoveMap: function(moveDir) {
    // get necessary data
    //var mapContentSize = this.node.getContentSize();
    var mapPos = this.node.getPosition();
    //var playerPos = this.player.getPosition();
    var viewSize = cc.size(cc.visibleRect.width, cc.visibleRect.height);
    var tileSize = this.tiledMap.getTileSize();
    //var minDisX = minTilesCount * tileSize.width;
    //var minDisY = minTilesCount * tileSize.height;
    //var disX = playerPos.x + mapPos.x;
    //var disY = playerPos.y + mapPos.y;
    var newPos;
    switch (moveDir) {
        case MoveDirection.N:
            //if (disY < minDisY) {
                newPos = cc.p(mapPos.x,mapPos.y + 4);
            //}
            break;
        case MoveDirection.NW:
            //if (disY < minDisY) {
                newPos = cc.p(mapPos.x-4,mapPos.y + 2);
            //}
            break;
        case MoveDirection.NE:
            //if (disY < minDisY) {
                newPos = cc.p(mapPos.x+4,mapPos.y + 2);
            //}
            break;
        case MoveDirection.S:
            //if (viewSize.height - disY - tileSize.height < minDisY) {
                newPos = cc.p(mapPos.x,mapPos.y - 4);
            //}
            break;
        case MoveDirection.SW:
            //if (disY < minDisY) {
                newPos = cc.p(mapPos.x-4,mapPos.y - 2);
            //}
            break;
        case MoveDirection.SE:
            //if (disY < minDisY) {
                newPos = cc.p(mapPos.x+4,mapPos.y - 2);
            //}
            break;
        case MoveDirection.W:
            //if (viewSize.width - disX - tileSize.width < minDisX) {
                newPos = cc.p(mapPos.x-8,mapPos.y);
            //}
            break;
        case MoveDirection.E:
            //if (disX < minDisX) {
                newPos = cc.p(mapPos.x+8,mapPos.y);
            //}
            break;
        default:
            return;
    }
    if (newPos) {
        // calculate the position range of map
       /* var minX = viewSize.width - this.mapContentSize.width - cc.visibleRect.left;
        var maxX = cc.visibleRect.left.x;
        var minY = viewSize.height - this.mapContentSize.height - cc.visibleRect.bottom;
        var maxY = cc.visibleRect.bottom.y;
        if (newPos.x < minX) newPos.x = minX;
        if (newPos.x > maxX) newPos.x = maxX;
        if (newPos.y < minY) newPos.y = minY;
        if (newPos.y > maxY) newPos.y = maxY;

*/
if (!cc.pointEqualToPoint(newPos, mapPos)) {
this.node.setPosition(newPos);
}
}
}

if you want a centered player you’ll need to update the position according to the maps position (my sprite is a child of the map so the coordinates are relative:

_updatePlayerPos: function() {
    //var pos = this._layerFloor.getPositionAt(cc.p(Math.floor(this._curTile.x),Math.floor(this._curTile.y)));
    var pos = cc.p(320+this.tiledMap.node.getPosition().x*-1,320+this.tiledMap.node.getPosition().y*-1);
    this.player.setPosition(pos);
    //this.player._vertexZ=-119+(Math.floor(this._curTile.x)+Math.floor(this._curTile.y));
},

where 320 is half of my screen width/height, you can check for the screen/view size like in the commented code at the beginning:

    var viewSize = cc.size(cc.visibleRect.width, cc.visibleRect.height);

then just replace the 320 offset with its respective width/height half.

hope this helps,

cheers
lotf

1 Like
3

Continuing the discussion from How to player center all divice and map move?:

Thank you . I’ll try !