Tag Archives: User interface

No CSS, No HTML [p07]: Easy image sprite manager

20 Feb

Totty got tired because:

  1. He has to manually change it’s CSS file in multiple places in order to be get the correct x and y of the image he needed;
  2. Even changing the skin can be very time consuming;
.lightSkin .backButton {
   background-image: url('img/UI_lightSkin') 0px 10px no repeat;
}
Then he think and solved:
  1. Now he can make an object that is structured in this way: libraryName.imageName;
// you only have to change here, where you define
mapSprite("UI", "lightSkin", { // library name, skin name, maps
   backButton: [0, 10, 10, 10], // x, y, width, height
   forwardButton: [10, 10, 10, 10]
});
// the code where you actually use you don't have to change and worry about
// if you change the skin you don't really have to change anything here
// everything is managed internally. In this case we use the default skin.
// the real image is: "UI_lightSkin"
var backButton = new Image('UI.backButton');
template.addChild(backbutton);