Previous 24 Next

Texture atlas

It can be convenient and more performant to have multiple images stored inside a single image, called a texture atlas.

All graphics for the game in a single image
Texture atlas

To get an image out of the texture atlas we need additional information about where it is located and how big it is.

src/TextureAtlas.ts
import { Rectangle } from "./Rectangle"

export const TextureAtlas = {
  groundLeft: new Rectangle(17, 85, 16, 16),
  groundMiddle: new Rectangle(34, 85, 16, 16),
  groundRight: new Rectangle(51, 85, 16, 16),

  steelBarLeft: new Rectangle(17, 17, 16, 16),
  steelBarMiddle: new Rectangle(34, 17, 16, 16),
  steelBarRight: new Rectangle(51, 17, 16, 16),

  steelBarStandTopLeft: new Rectangle(17, 34, 16, 16),
  steelBarStandTopRight: new Rectangle(51, 34, 16, 16),
  steelBarStandCenterLeft: new Rectangle(17, 51, 16, 16),
  steelBarStandCenterRight: new Rectangle(51,51,16,16),

  steelBarStandBottomLeft: new Rectangle(17, 51, 16, 20),
  steelBarStandBottomRight: new Rectangle(51, 51, 16, 20),

  steelSideBar: new Rectangle(85, 17, 16, 16),
  steelSideBarBottom: new Rectangle(85, 34, 16, 16),
  steelTopBar: new Rectangle(102, 17, 16, 16),
  steelTopBarRight: new Rectangle(119, 17, 16, 16),
  steelTopBarLeft: new Rectangle(136, 17, 16, 16),

  knife: new Rectangle(85, 85, 16, 16),
  knifeUse0: new Rectangle(85, 102, 16, 16),
  knifeUse1: new Rectangle(85, 119, 16, 16),

  pistol: new Rectangle(102, 85, 16, 16),
  machineGun: new Rectangle(119, 85, 16, 16),
  handCannon: new Rectangle(136, 85, 16, 16),

  pistolBullet: new Rectangle(102, 102, 5, 3),
  machineGunBullet: new Rectangle(119, 102, 4, 4),
  handCannonBullet: new Rectangle(136, 102, 7, 9),

  guy0: new Rectangle(323, 204, 16, 16),
  guy1: new Rectangle(340, 204, 16, 16),
  guy2: new Rectangle(357, 204, 16, 16),
  guy3: new Rectangle(374, 204, 16, 16),
  guy4: new Rectangle(391, 204, 16, 16),
  guy5: new Rectangle(408, 204, 16, 16),
  guyRun0: new Rectangle(323, 221, 16, 16),
  guyRun1: new Rectangle(340, 221, 16, 16),
  guyRun2: new Rectangle(357, 221, 16, 16),
  guyRun3: new Rectangle(374, 221, 16, 16),
  guyDie0: new Rectangle(323, 238, 16, 16),
  guyDie1: new Rectangle(340, 238, 16, 16),
  guyDie2: new Rectangle(357, 238, 16, 16),
  guyFall0: new Rectangle(323, 255, 16, 16),
  guyFly0: new Rectangle(323, 272, 16, 16),

  blueberry: new Rectangle(306, 306, 16, 16),
  blueberryRun0: new Rectangle(323, 306, 16, 16),
  blueberryRun1: new Rectangle(340, 306, 16, 16),
  blueberryRun2: new Rectangle(357, 306, 16, 16),
  blueberryRun3: new Rectangle(374, 306, 16, 16),
  blueberryRun4: new Rectangle(391, 306, 16, 16),
  blueberryRun5: new Rectangle(408, 306, 16, 16),
  blueberryFall0: new Rectangle(323, 323, 16, 16),
  blueberryFall1: new Rectangle(340, 323, 16, 16),
  blueberryPart0: new Rectangle(357, 323, 16, 16),
  blueberryPart1: new Rectangle(374, 323, 16, 16),

  lemon: new Rectangle(306, 354, 16, 19),
  lemonRun0: new Rectangle(323, 354, 16, 19),
  lemonRun1: new Rectangle(340, 354, 16, 19),
  lemonRun2: new Rectangle(357, 354, 16, 19),
  lemonRun3: new Rectangle(374, 354, 16, 19),
  lemonRun4: new Rectangle(391, 354, 16, 19),
  lemonRun5: new Rectangle(408, 354, 16, 19),
  lemonFall0: new Rectangle(323, 374, 16, 16),
  lemonFall1: new Rectangle(340, 374, 16, 16),
  lemonPart0: new Rectangle(357, 374, 16, 16),
  lemonPart1: new Rectangle(374, 374, 16, 16),

  melon: new Rectangle(272, 425, 33, 33),
  melonRun0: new Rectangle(306, 425, 33, 33),
  melonRun1: new Rectangle(340, 425, 33, 33),
  melonRun2: new Rectangle(374, 425, 33, 33),
  melonRun3: new Rectangle(408, 425, 33, 33),
  melonRun4: new Rectangle(442, 425, 33, 33),
  melonRun5: new Rectangle(476, 425, 33, 33),
  melonFall0: new Rectangle(306, 459, 33, 33),
  melonFall1: new Rectangle(340, 459, 33, 33),
  melonPart0: new Rectangle(374, 459, 33, 33),
  melonPart1: new Rectangle(408, 459, 33, 33),
  melonPart2: new Rectangle(442, 459, 33, 33),

  basket: new Rectangle(121, 121, 12, 14),

  buttonShoot: new Rectangle(17, 153, 16, 16),
  buttonJump: new Rectangle(34, 153, 16, 16),
  buttonRight: new Rectangle(51, 153, 16, 16),
  buttonLeft: new Rectangle(68, 153, 16, 16),

  particle0: new Rectangle(187, 134, 1, 1),
  particle2: new Rectangle(204, 133, 2, 2),
  particle3: new Rectangle(221, 132, 3, 3),
  particle4: new Rectangle(221, 132, 1, 1),

  flare0: new Rectangle(119, 80, 3, 4),
  flare1: new Rectangle(123, 79, 3, 5),
  flare2: new Rectangle(127, 75, 3, 9),

  "#000000": new Rectangle(272, 17, 8, 8),
  "#222034": new Rectangle(281, 17, 8, 8),
  "#45283c": new Rectangle(290, 17, 8, 8),
  "#663931": new Rectangle(299, 17, 8, 8),
  "#8f563b": new Rectangle(308, 17, 8, 8),
  "#df7126": new Rectangle(317, 17, 8, 8),
  "#d9a066": new Rectangle(326, 17, 8, 8),
  "#eec39a": new Rectangle(335, 17, 8, 8),
  "#fbf236": new Rectangle(272, 26, 8, 8),
  "#99e550": new Rectangle(281, 26, 8, 8),
  "#6abe30": new Rectangle(290, 26, 8, 8),
  "#37946e": new Rectangle(299, 26, 8, 8),
  "#4b692f": new Rectangle(308, 26, 8, 8),
  "#524b24": new Rectangle(317, 26, 8, 8),
  "#323c39": new Rectangle(326, 26, 8, 8),
  "#3f3f74": new Rectangle(335, 26, 8, 8),
  "#306082": new Rectangle(272, 35, 8, 8),
  "#5b6ee1": new Rectangle(281, 35, 8, 8),
  "#639bff": new Rectangle(290, 35, 8, 8),
  "#5fcde4": new Rectangle(299, 35, 8, 8),
  "#cbdbfc": new Rectangle(308, 35, 8, 8),
  "#ffffff": new Rectangle(317, 35, 8, 8),
  "#9badb7": new Rectangle(326, 35, 8, 8),
  "#847e87": new Rectangle(335, 35, 8, 8),
  "#696a6a": new Rectangle(272, 44, 8, 8),
  "#595652": new Rectangle(281, 44, 8, 8),
  "#76428a": new Rectangle(290, 44, 8, 8),
  "#ac3232": new Rectangle(299, 44, 8, 8),
  "#d95763": new Rectangle(308, 44, 8, 8),
  "#d77bba": new Rectangle(317, 44, 8, 8),
  "#8f974a": new Rectangle(326, 44, 8, 8),
  "#8a6f30": new Rectangle(335, 44, 8, 8),

  a: new Rectangle(66, 183, 7, 11),
  b: new Rectangle(74, 183, 7, 11),
  c: new Rectangle(82, 183, 7, 11),
  d: new Rectangle(90, 183, 7, 11),
  e: new Rectangle(98, 183, 7, 11),
  f: new Rectangle(106, 183, 7, 11),
  g: new Rectangle(114, 183, 7, 11),
  h: new Rectangle(122, 183, 7, 11),
  i: new Rectangle(133, 183, 2, 11),
  j: new Rectangle(138, 183, 7, 11),
  k: new Rectangle(146, 183, 7, 11),
  l: new Rectangle(154, 183, 7, 11),
  m: new Rectangle(162, 183, 7, 11),
  n: new Rectangle(170, 183, 7, 11),
  o: new Rectangle(178, 183, 7, 11),
  p: new Rectangle(186, 183, 7, 11),
  q: new Rectangle(194, 183, 7, 11),
  r: new Rectangle(202, 183, 7, 11),
  s: new Rectangle(210, 183, 7, 11),
  t: new Rectangle(218, 183, 7, 11),
  u: new Rectangle(226, 183, 7, 11),
  v: new Rectangle(234, 183, 7, 11),
  w: new Rectangle(242, 183, 7, 11),
  x: new Rectangle(250, 183, 7, 11),
  y: new Rectangle(258, 183, 7, 11),
  z: new Rectangle(266, 183, 7, 11),

  "0": new Rectangle(204, 158, 7, 11),
  "1": new Rectangle(213, 158, 4, 11),
  "2": new Rectangle(220, 158, 7, 11),
  "3": new Rectangle(228, 158, 7, 11),
  "4": new Rectangle(236, 158, 7, 11),
  "5": new Rectangle(244, 158, 7, 11),
  "6": new Rectangle(252, 158, 7, 11),
  "7": new Rectangle(260, 158, 7, 11),
  "8": new Rectangle(268, 158, 7, 11),
  "9": new Rectangle(276, 158, 7, 11),

  uiTopLeft: new Rectangle(272, 85, 4, 4),
  uiTopCenter: new Rectangle(277, 85, 4, 4),
  uiTopRight: new Rectangle(282, 85, 4, 4),
  uiMiddleLeft: new Rectangle(272, 90, 4, 4),
  uiMiddleCenter: new Rectangle(277, 90, 4, 4),
  uiMiddleRight: new Rectangle(282, 90, 4, 4),
  uiBottomLeft: new Rectangle(272, 95, 4, 4),
  uiBottomCenter: new Rectangle(277, 95, 4, 4),
  uiBottomRight: new Rectangle(282, 95, 4, 4),
}
Previous 24 Next