Blocs qui tournent

Les plateformes en mouvement permettent d'introduire une dimension de timing dans les déplacements du joueur. Le mouvement circulaire et continu de ces blocs permet une grande prédictibilité pour le joueur et peut ainsi lui permettre de planifier ces déplacements. Lorsque la sprite des blocs tourne également, ces plateformes peuvent s'ouvrir à une grande diversité d'utilisations dans lesquelles les murs deviennent alternativement des sols et inversement.

Charger une image

load.js

const PNG = [

  "stone" ,
  "sun" ,

  "grass" ,
  "bean"  ,
]

Créer un composant

component.js

// Ajoutes ici tes propres composants
  
function rotatingBlock( tag = "rotating" , speed = 10 , rotateSprite = true ){
  
  // fait tourner des objets autour d'un point
  
  let target = null , rotation = 0 , dist = 0 , startRotation = 0
  
  return {
    
    init() {
      for ( const t of get(tag, { recursive: true } ) ) {
        if (target==null || this.pos.dist(t.pos) < this.pos.dist(target.pos) ) target = t ;
      }
      if (target!=null){
        startRotation = -target.pos.angle( this.pos ) ;
        dist     = target.pos.dist( this.pos ) ;
      }
      this.pos = Vec2.fromAngle(rotation).scale(dist).add(target.pos)
    },
    
    update() {
      if (target==null) this.init()
      else {
        rotation += dt() * speed 
        this.pos = Vec2.fromAngle(rotation+startRotation).scale(dist).add(target.pos)
        if (rotateSprite) this.angle = rotation
      } 
    },
    
} }

Déclarer un symbole

level.js

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

  tiles: {
    
    // listes des objet à placer dans les niveaux

    "e": () => [ // axe de rotation sens horaire
      sprite("sun"),
      anchor("center"), 
      z(-1),
      "rotate-e",
    ],
    "a": () => [ // axe de rotation sens anti-horaire
      sprite("sun"),
      anchor("center"), 
      z(-1),
      "rotate-a",
    ],
    "≤": () => [ // bloc qui tourne en sens horaire
      sprite("stone"),
      area(),
      body({ isStatic: true }),
      anchor("center"),			
      offscreen({ hide: true }),
      rotatingBlock( "rotate-a" ),
    ],
    "≥": () => [ // bloc qui tourne en sens anti-horaire
      sprite("stone"),
      area(),
      body({ isStatic: true }),
      anchor("center"),			
      offscreen({ hide: true }),
      rotatingBlock( "rotate-e" , -10 ),
    ],
    "#": () => [ // player
      sprite("bean"),
      platformerController(),
      health(1),
      character(),
      area(),
      anchor("bot"),
      body(),
    ],
    
    "=": () => [ // bloc
      sprite("grass"),
      area(),
      body({ isStatic: true }),
      anchor("bot"),			
      offscreen({ hide: true }),
    ],

  },

}

Placer les objets

level.js

const LEVELS = [
  
  // liste des niveaux du jeu

  [
    "                       ≥                       " ,
    "                ≤                              " ,
    "  #                                            " ,
    "=====    e      e   ≥  a  ≥   e ≤  ≤ e     ===" ,
    "                                               " ,
    "         ≤                                     " ,
    "                       ≥                       " ,
  ],
  
];

l'axe de rotation

Le premier paramètre du composant rotatingBlock permet de spécifier quel objet sera l'axe de la rotation. Il est possible de créer son propre identifiant et de l'attribuer à l'objet de son choix.

rotatingBlock( "rotate-b" )

le sens et la vitesse de la rotation

Le deuxième paramètre du composant rotatingBlock permet de déterminer la vitesse et le sens de la rotation. Plus le nombre est élevé, plus la rotation sera rapide, si le nombre est positif l'élément tournera en sens horaire, s'il est négatif il tournera en sens anti-horaire.

rotatingBlock( "rotate-b" , 10 )

si l'image tourne en même temps que la position

Le troisième paramètre du composant fallingBlock permet de déterminer si l'orientation de l'objet change également lors de la rotation ( true ), ou s'il conserve son orientation initiale ( false )

rotatingBlock( "rotate-b" , 1 , true )