Tutorial Request: Big World Movement / Camera

Cocos Creator
#1

Hi there:

@slackmoehrle

Could you please create a tutorial regarding in .js concerning camera / big world movement for player with Tiled. Maybe, you can convert the below which is ts:

https://discuss.cocos2d-x.org/t/tutorial-creating-a-super-mario-style-game-in-cocos-creator/47430

I have the following code:

   cc.Class({
    extends: cc.Component,

    properties: {
      target: {
        default:null,
        type:cc.Node
      },
    map: {
        default:null,
        type: cc.Node
      },
    //  boundingBox: {
      //  default:null,
      //  type: cc.Rect
      //  },
    //    screenMiddle: {
      //    default:null,
    //    type: cc.Vec2
    //    }
  //  boundingBox: cc.Rect = null,
  //  screenMiddle: cc.Vec2 = null,
  //  minX: number = 0,
  //  maxX: number = 0,
  //  minY: number = 0,
  //  maxY: number = 0,
  //  minX:0,
  //  maxX:0,
  //  minY:0,
  //  maxY:0
boundingBox:cc.Rect,
screenMiddle:cc.Vec2,
//  boundingBox: {
    //  default:null,
    //  type: new cc.Rect()
  //  },
  //  screenMiddle: {
    //    default:null,
    //    type: new cc.Vec2()
    //  },
      minX: 0,
      maxX: 0,
      minY: 0,
      maxY: 0,
},
            // LIFE-CYCLE CALLBACKS:

    // onLoad () {},

onLoad:function(){
//  this.minX=0;
//  this.maxX=0;
////  this.minY=0;
//  this.maxY=0;
//  this.camera = this.getComponent(cc.Camera);
this.boundingBox = new cc.Rect(0, 0, this.map.width, this.map.height);
  let winsize = cc.winSize;
  this.screenMiddle = new cc.Vec2(winsize.width / 2, winsize.height / 2);
  this.minX = -(this.boundingBox.xMax - winsize.width);
  this.maxX = this.boundingBox.xMin;
  this.minY = -(this.boundingBox.yMax - winsize.height);
  this.maxY = this.boundingBox.yMin;
},
update:function(dt){
    let targertPos = this.target.convertToWorldSpaceAR(cc.Vec2.ZERO);
   let dis = pos.sub(targertPos);
   let dest = this.screenMiddle.add(dis);
   dest.x = cc.misc.clampf(dest.x, this.minX, this.maxX)
  dest.y = this.minY;
   this.node.position = this.map.node.convertToNodeSpaceAR(dest);
},

But still when my player reaches the viewpoer, it doesn’t go beyond. Would really appreciate any help regarding this, my game is 50 % done, this has me stump. Thanks and God Bless…

Sincerely,

Sunday

1 Like