Vue du dessus

Simon

1. Charger un atlas images

   load.js

   function loadAtlas() {
   
     loadSpriteAtlas("assets/sprites/clementine-atlas.png", {
       "clementine": {
         x: 0, y: 0,
         width: 244, height: 53,
         sliceX: 4,
         anims: {
           idle: { from: 0, to: 0 },
           run: { from: 0, to: 0 },
           sleep: { from: 1, to: 1 },
           jump: { from: 2, to: 2 },
           worry: { from: 3, to: 3 },
         },
       },
     })
   
     loadSpriteAtlas("assets/sprites/bean-atlas.png", {
       "bean": {
         x: 0, y: 0,
         width: 244, height: 53,
         sliceX: 4,
         anims: {
           idle: { from: 0, to: 0 },
           run: { from: 0, to: 0 },
           sleep: { from: 1, to: 1 },
           jump: { from: 2, to: 2 },
           worry: { from: 3, to: 3 },
         },
       },
     })
   
     loadSpriteAtlas("assets/sprites/splash.png", {
       "splash": {
         x: 0, y: 0,
         width: 384, height: 64,
         sliceX: 6,
         anims: { explode: { from: 0, to: 5, speed:30 } },
       },
     })
   
   }

2. configurer les niveaux

   config.js

   level not found

3. Déclarer un objet

   config.js

   const TILE_CONFIG = {
   
     "@": () => [ // player 1
       sprite("clementine"),
       pos(0, -32),
       topdownController(),
       alive(),
       opacity(),
       scale(),
       health(1),
       area({
         shape: new Polygon([vec2(28, -12), vec2(28, 12), vec2(12, 24), vec2(-12, 24), vec2(-28, 12), vec2(-28, -12), vec2(-12, -24), vec2(12, -24),])
       }),
       anchor("center"),
       body(),
       respawn(),
       rotate(),
       "player",
     ],
   
     "#": () => [ // player 1
       sprite("bean"),
       platformerController(),
       jumpController(),
       sleep(),
       alive(),
       opacity(),
       scale(),
       health(1, 4),
       area(),
       body(),
       respawn(),
       falling(),
       rotate(),
       pos(0, -20),
       anchor("center"),
     ],
   
     "=": () => [ // block
       sprite("grass"),
       area({ collisionIgnore: ["agent"] }),
       body({ isStatic: true }),
       anchor("bot"),
       offscreen({ hide: true }),
       tile({ isObstacle: true }),
     ],
   
   }

4. Placer les objets

   level.js

   const LEVELS = [
   
     {
       map: `
   
   
             =====================
             =            =      =
             =      = === =      =
             =  @   =   = =      =
             =      === =        =
             =      =   = =      =
             =        =   =      =
             =====================
   
   
       `,
     },
   
   ]

Paramètres

topdownController()

example

config.js

topdownController({
  upKey: ["up", "z"],
  leftKey: ["left", "q"],
  rightKey: ["right", "d"],
  downKey: ["down", "s"],
  moveSpeed: 480,
  rotationDelay: 0.04,
  accelerationtionDelay: 0.04,
  rotation: -90,
  startRotation: 90,
  rotateSprite: true
}),

Ressources

• clementine-atlas.png