Point de vue à la troisème personne

Tu veux que ton joueur puisse voir le personnage qu'il incarne dans son jeu ? Bravo, c'est une très bonne idée. Tout d'abord il va te falloir une image pour représenter ton joueur. La suite est plutôt simple comme tu vas pouvoir le constater.

Crée la fonction viewPlayer()

Je te propose de créer une nouvelle fonction qui sera en charge d'afficher le personnage du joueur. Je t'en ai préparé une que tu peux d'ors et déja ajouter dans ton srcipt view.js.

function viewPlayer(  ) {
  
  const s = 0.6 ;
  const img = lee ;
  
  let r = lee.width / lee.height ;
  let h = view.height * s ;
  let w = h*r ;
  let p = ( view.height - h ) / 2 ;
  let x = playerPos[0].x * view.height ;
  let y = playerPos[0].y * view.height ;
  
  view.translate( x , y , - p ) ;
  view.rotateY( PI / 2 ) ;
  view.rotateX( -( playerR[0] + 1 ) * PI / 2 ) ;
  view.rotateZ( -PI / 2 ) ;
  view.texture(lee);
  view.plane( w , h ) ;
  
}

Appeler la fonction viewPlayer()

Il nous faut ensuite appeler cette nouvelle fonction. Pour que ton personnage s'affiche au bon endroit, il est essentiel d'ajouter cette ligne exactement à cette place dans la fonction viewDisplay(), toujours dans le script view.js.

function viewDisplay() {
  
  // cette fonction affiche le jeu à l'écran
  
  let h = view.height ;
  
  view.push() ;
  
  stoner() ;
  
  view.background(backgroundColor) ;

  view.translate( 0 , 0 , h / 8 ) ;
  view.rotateY( PI / 2 * playerR[0] ) ;
  view.rotateX( PI / 2 ) ;
  view.translate( -playerPos[0].x * h , -playerPos[0].y * h ) ;
  
  viewRooms() ;
  
  for( let i = 0 ; i < rooms.length ; i ++ ) {
    
    viewEnemys( rooms.length-i ) ;
    viewItems( rooms.length-i ) ;
    
  }
  
  viewPlayer() ;
  view.pop() ;
  
  imageMode( CENTER , CENTER ) ;
  image( view , width / 2 , height / 2 ) ;
  
}

Déplacer la caméra

Maintenant que ton joueur est affiché à l'écran, il nous faut changer le point de vue de ton jeu. Pour cela nous allons créer une nouvelle variable cameraAngle dans la fonction viewDisplay(), et lui attribuer une valeur de 0.2.

function viewDisplay() {
  
  // cette fonction affiche le jeu à l'écran
    
  const cameraAngle = 0.2 ;
  let h = view.height ;
  
  view.push() ;
  
  stoner() ;
  
  view.background(backgroundColor) ;

  view.translate( 0 , 0 , h / 8 ) ;

  view.rotateY( PI / 2 * playerR[0] ) ;
  view.rotateX( PI / 2 ) ;
  view.translate( -playerPos[0].x * h , -playerPos[0].y * h ) ;
  
  viewRooms() ;
  
  for( let i = 0 ; i < rooms.length ; i ++ ) {
    
    viewEnemys( rooms.length-i ) ;
    viewItems( rooms.length-i ) ;
    
  }
  
  viewPlayer() ;
  view.pop() ;
  
  imageMode( CENTER , CENTER ) ;
  image( view , width / 2 , height / 2 ) ;
  
}

Rajoute ensuite cette ligne pour appliquer la nouvelle orientation de notre caméra.

function viewDisplay() {
  
  // cette fonction affiche le jeu à l'écran
    
  const cameraAngle = 0.2 ;
  let h = view.height ;
  
  view.push() ;
  
  stoner() ;
  
  view.background(backgroundColor) ;

  view.translate( 0 , 0 , h / 8 ) ;
  
  view.rotateX( - cameraAngle ) ;
  view.rotateY( PI / 2 * playerR[0] ) ;
  view.rotateX( PI / 2 ) ;
  view.translate( -playerPos[0].x * h , -playerPos[0].y * h ) ;
  
  viewRooms() ;
  
  for( let i = 0 ; i < rooms.length ; i ++ ) {
    
    viewEnemys( rooms.length-i ) ;
    viewItems( rooms.length-i ) ;
    
  }
  
  viewPlayer() ;
  view.pop() ;
  
  imageMode( CENTER , CENTER ) ;
  image( view , width / 2 , height / 2 ) ;
  
}

Tu peux bien sûr changer la valeur de la variable cameraAngle si tu veux modifier la position de ta caméra.

Ensuite, nous allons reculer légèrement la caméra, pour que nous puissions mieux voir le joueur. Pour cela modifie cette ligne, toujours dans la fonction viewDisplay().

function viewDisplay() {
  
  // cette fonction affiche le jeu à l'écran
    
  const cameraAngle = 0.2 ;
  let h = view.height ;
  
  view.push() ;
  
  stoner() ;
  
  view.background(backgroundColor) ;
  
  view.translate( 0 , 0 , h / 8 ) ;
  view.translate( 0 , 0 , 0 ) ;
  view.rotateX( - cameraAngle ) ;
  view.rotateY( PI / 2 * playerR[0] ) ;
  view.rotateX( PI / 2 ) ;
  view.translate( -playerPos[0].x * h , -playerPos[0].y * h ) ;
  
  viewRooms() ;
  
  for( let i = 0 ; i < rooms.length ; i ++ ) {
    
    viewEnemys( rooms.length-i ) ;
    viewItems( rooms.length-i ) ;
    
  }
  
  viewPlayer() ;
  view.pop() ;
  
  imageMode( CENTER , CENTER ) ;
  image( view , width / 2 , height / 2 ) ;
  
}

Régler la fonction viewPlayer()

Ça y est, ton personnage est maintenant visible à l'écran. Oui, comme je ne savais pas quelle image tu voulais ajouter pour ton personnage, j'ai mis une image de la personne la plus cool que je connaisse. Dans la fonction viewPlayer(), remplace la valeur de la variable img pour choisir une autre image.

Au début de cette fonction j'ai aussi défini une variable s, qui permet d'ajuster la taille du personnage. Sa valeur devra être comprise entre 0 et 1, libre à toi de la modifier pour agrandir ou rétrécir ton personnage.

Bravo, ton hack est terminé !