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

   const LEVEL_CONFIG = {
     tileWidth: 64,
     tileHeight: 64,
     backgroundColor: 'afe1ff',
     gravity: 0,
     gravity: 3200,
   }

3. Déclarer un objet

   config.js

   const TILE_CONFIG = {
   
     // player 1
     '@': () => [
       sprite('clementine'),
       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(),
       pos(32, 32),
       'player',
     ],
   
     // player
     '#': () => [
       sprite('bean'),
       platformerController(),
       jumpController(),
       sleep(),
       alive(),
       opacity(),
       scale(),
       health(1, 4),
       area(),
       body(),
       respawn(),
       falling(),
       rotate(),
       pos(0, -20),
       anchor('center'),
       'player',
     ],
   
     // block
     '=': () => [
       sprite('grass-tileset'),
       offscreen({ hide: true }),
       tile({ isObstacle: true }),
       autoTiling(),
       area(),
       body({ isStatic: 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