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. Déclarer un objet

   config.js

   const TILE_CONFIG = {
   
     "+": () => [ // tile
       sprite("grass-tileset"),
       autoTiling(),
       area(),
       body({ isStatic: true }),
       anchor("bot"),
       offscreen({ hide: true }),
     ],
   
     "#": () => [ // 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 }),
     ],
   
   }

3. Placer les objets

   level.js

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

Paramètres

autoTiling()

example

config.js

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

Ressources

• grass-tileset.png