Bloc en tuile

Paul

Les 47 différentes déclinaisons de tuile permettent d’afficher toutes les configurations de bloc possibles. Ce hack utilise ce template (8x6) pour la conception de l’image source.

1. Charger le fichier

   load.js

   function loadAtlas(){
   
     loadSpriteAtlas("assets/sprites/grass-tileset.png", {
       "grass-tileset": {
         x: 0, y: 0,
         width: 512, height: 384,
         sliceX: 8,
         sliceY: 6,
         anims: {
           "0": 0, "4": 1, "92": 2, "112": 3, "28": 4, "124": 5, "116": 6, "64": 7,
           "20": 8, "84": 9, "87": 10, "221": 11, "127": 12, "255": 13, "245": 14, "80": 15,
           "29": 16, "117": 17, "85": 18, "95": 19, "247": 20, "215": 21, "209": 22, "1": 23,
           "23": 24, "213": 25, "81": 26, "31": 27, "253": 28, "125": 29, "113": 30, "16": 31,
           "21": 32, "69": 33, "93": 34, "119": 35, "223": 36, "241": 38, "17": 39, "5": 40,
           "68": 41, "71": 42, "193": 43, "7": 44, "199": 45, "197": 46, "65": 47,
         },
       },
     })
   
     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. Créer un composant

   component.js

   function autoTiling(p) {
     const param = {
       tag: "tile sheet",
       ...p
     }
     return {
       id: "tile sheet",
       require: ["sprite"],
       add() {
         requestAnimationFrame(() => {
           const level = this.getLevel()
           const { x, y } = this.tilePos
           const hasTile = (x, y) => {
             if (x < 0 || x >= level.numColumns() || y < 0 || y >= level.numRows()) return false
             for (const e of level.getAt({ x, y })) if (e.is(param.tag)) return true
             return false
           }
           const up = hasTile(x, y - 1);
           const right = hasTile(x + 1, y);
           const down = hasTile(x, y + 1);
           const left = hasTile(x - 1, y);
           const upLeft = up && left && hasTile(x - 1, y - 1);
           const upRight = up && right && hasTile(x + 1, y - 1);
           const downRight = down && right && hasTile(x + 1, y + 1);
           const downLeft = down && left && hasTile(x - 1, y + 1);
           const index = (
             (up ? 1 : 0) |
             (upRight ? 2 : 0) |
             (right ? 4 : 0) |
             (downRight ? 8 : 0) |
             (down ? 16 : 0) |
             (downLeft ? 32 : 0) |
             (left ? 64 : 0) |
             (upLeft ? 128 : 0)
           )
           this.play(index)
         })
       },
     }
   }

3. Déclarer un objet

   config.js

   const LEVEL_CONFIG = {
   
     // paramètres du niveau
   
     tileWidth: 64,
     tileHeight: 64,
     backgroundColor: "afe1ff",
     gravity: 3200,
   
     tiles: {
   
       "+": () => [ // tile
         sprite("grass-tileset"),
         autoTiling(),
         area(),
         body({ isStatic: true }),
         anchor("bot"),
         offscreen({ hide: true }),
       ],
   
       "#": () => [ // player 1
         sprite("bean"),
         platformerController(),
         alive(),
         opacity(),
         scale(),
         health(1, 4),
         area(),
         anchor("bot"),
         body(),
         respawn(),
         falling(),
       ],
   
       "=": () => [ // block
         sprite("grass"),
         area(),
         body({ isStatic: true }),
         anchor("bot"),
         offscreen({ hide: true }),
       ],
   
     },
   }

4. Placer les objets

   level.js

   const LEVELS = [
   
     {
       map: `
   
               +++
           +    #+
           +    ++
           + +   +
           ++++  +
             +
   
       `,
     },
   
   ]

Paramètres

example

config.js

autoTiling({
  tag: "tile sheet"
}),

Ressources

• grass-tileset.png