Caméra attachée à un objet

La caméra attachée à un objet permet de donner à la caméra d'un jeu un comportement très simple qui peut être détourné de façon créative. Si elle est attachée à un objet statique, elle peut permettre à la caméra d'être fixe et de ne plus suivre les déplacements du joueur. Ce comportement peut être adapté pour des jeux constitués de petits niveaux sous forme de tableau. La caméra peut aussi être attachée à un objet en mouvement, contraignant alors le joueur à adopter son rythme.

Créer un nouveau composant

view.js


function attachedCamera( tag = "camera-focus", loseOffscreen = false ) {
  
  // permet à la caméra de suivre un objet
  
  const screen_ratio = 600
  
  let targets
  
  return {
    
    id : "camera" ,
    pos  : null ,
    zoom : null ,
    
    add() { 
      targets = get(tag, { recursive : true , liveUpdate : true } )
      if (targets.length>0 && targets[0].is("body")) {
        targets[0].onPhysicsResolve( () => this.setPos( targets[0] ) ) 
      }
      for (const p of get("character", { recursive: true } ) ){
        if ( loseOffscreen && p.is("offscreen") ) {
          p.onExitScreen(  () => {
            play("off")
            p.lose()  
          })
        }
      }
    },
    
    update() { 
      this.zoom = height()/screen_ratio 
      if (targets.length>0) this.setPos( targets[0] )
      camScale( this.zoom ) 
    },
    
    setPos(trgt) { 
      this.pos = trgt.pos 
      camPos( this.pos )
    }
    
} }

Modifier la caméa

game.js

scene("game", () => {
  
  // scène dans laquelle se déroulent les niveaux
  
  setGravity(3200) ;
  setBackground( [ 141 , 183 , 255 ] ) ;

  const level  = addLevel( LEVELS[ CURRENT_LEVEL ] , levelConf )
  
  const camera = add( [ multiplayerCamera( ) ] )

  const camera = add( [ attachedCamera( ) ] )

  if (debugmode) debug.inspect = true
  
})

Déclarer un symbole

level.js

const levelConf = {
  
  // paramètres du niveau
  
  tileWidth: 64,
  tileHeight: 64,

  tiles: {
    
    // listes des objet à placer dans les niveaux
    
    "°": () => [ // bloc
      "camera-focus",
    ], 

    "#": () => [ // player
      sprite("bean"),
      platformerController(),
      health(1),
      character(),
      area(),
      anchor("bot"),
      body(),
    ],
    
    "=": () => [ // bloc
      sprite("grass"),
      area(),
      body({ isStatic: true }),
      anchor("bot"),			
      offscreen({ hide: true }),
    ],

  },
}

Placer un objet

level.js

const LEVELS = [
  
  // liste des niveaux du jeu

  [
    "    #  ° ======" ,
    "======         " ,
  ],
  
];

l'objet auquel la caméra est attachée

Le premier paramètre du composant attachedCamera permet de spécifier quel objet la caméra doit suivre. Il est possible de créer son propre identifiant et de l'attribuer à l'objet de son choix. 

const camera = add( [ attachedCamera( "camera-focus" ) ] )

si le joueur perd lorsqu'il sort de l'écran

Le deuxième paramètre du composant camera permet de de spécifier si le joueur perd lorsqu'il sort de l'écran (true) ou non (false). 

const camera = add( [ attachedCamera( "camera-focus" , true ) ] )