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. Créer des composants

   component.js

   function topdownController(p) {
     const param = {
       upKey: "up",
       leftKey: "left",
       rightKey: "right",
       downKey: "down",
       moveSpeed: 480,
       rotationDelay: 0.04,
       accelerationtionDelay: 0.04,
       sleepDelay: 2,
       rotation: -90,
       startRotation: 90,
       ...p
     }
     return {
       id: "player",
       direction: vec2(0, 0),
       require: ["alive", "body"],
       moveSavedTime: 0,
       asleep: false,
       acceleration: 0,
       add() {
         this.gravityScale = 0
         this.moveSavedTime = time()
         this.direction = Vec2.fromAngle(param.startRotation)
       },
       update() {
         if (this.isAlive) {
           const keyDown = isKeyDown([param.leftKey, param.rightKey, param.upKey, param.downKey])
           if (keyDown) {
             const inputDirection = (() => {
               let t = vec2(0.0, 0.0)
               if (isKeyDown(param.leftKey) && isKeyDown(param.rightKey)) t.x = 0.0
               else if (isKeyDown(param.leftKey)) t.x = -1
               else if (isKeyDown(param.rightKey)) t.x = 1
               if (isKeyDown(param.upKey) && isKeyDown(param.downKey)) t.y = 0.0
               else if (isKeyDown(param.upKey)) t.y = -1
               else if (isKeyDown(param.downKey)) t.y = 1
               return Vec2.fromAngle(t.angle())
             })()
             tween(this.direction, inputDirection, param.rotationDelay, (p) => (this.direction = p), easings.easeInQuad)
           }
           const acceleration = keyDown ? 1 : 0
           tween(this.acceleration, acceleration, param.accelerationtionDelay, (p) => (this.acceleration = p), easings.easeInQuad)
           const s = time() - this.moveSavedTime > param.sleepDelay;
           this.angle = this.direction.angle() + param.rotation
           this.move(this.direction.scale(param.moveSpeed * this.acceleration))
           if (this.acceleration > 0.1) this.moveSavedTime = time()
           if (!this.asleep && s) this.trigger("sleep")
           else if (this.asleep && !s) this.trigger("awake")
           this.asleep = s
         }
       }
     }
   }

3. configurer les niveaux

   game.js

   const LEVEL_CONFIG = {
   
     tileWidth: 64,
     tileHeight: 64,
     backgroundColor: "afe1ff",
     gravity: 0,
     gravity: 3200,
   
     tiles: {
   
       "#": () => [ // 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. Déclarer un objet

   config.js

   const LEVEL_CONFIG = {
   
     // paramètres du niveau
   
     tileWidth: 64,
     tileHeight: 64,
     backgroundColor: "afe1ff",
     gravity: 3200,
   
     tiles: {
   
       "@": () => [ // 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(),
         animator(),
       ],
   
       "#": () => [ // 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 }),
       ],
   
     },
   }

5. Placer les objets

   level.js

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

Paramètres

example

config.js

topdownController({
  upKey: "up",
  leftKey: "left",
  rightKey: "right",
  downKey: "down",
  moveSpeed: 480,
  rotationDelay: 0.04,
  accelerationtionDelay: 0.04,
  sleepDelay: 2,
  rotation: -90,
  startRotation: 90
}),

Ressources

• clementine-atlas.png