Totty got tired because:
- 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;
- 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:
- 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);