Sprite Sheet Manager

SpriteSheetManager.js

// SpriteSheetManager.js
// Author Kenji Wong
// Lastest Modification 7/11/2012

var SpriteSheetManager;
var SpriteSheetElement;

(function($){
    // SpriteSheetManager Start
    SpriteSheetManager = function(options) {
        this.defaults = {
            componentList:[],
            actionList:[]
        };
        this.options = $.extend(this.defaults, options);
    };

    SpriteSheetManager.fn = SpriteSheetManager.prototype;
    
    SpriteSheetManager.fn.init = function(){ 
        var _this = this;
        var component_num = _this.options.componentList.length;
        for(var i=0; i<_this.options.componentList.length; i++){
            var spriteElement = _this.options.componentList[i].element;
            var spriteID = _this.options.componentList[i].id;
            spriteElement.options.managerOnPlaying = function(pElement){
                var action_obj = _this.options.actionList[spriteID];
                var action_num = _this.options.actionList[spriteID].length;
                if(action_num > 0){
                    if(pElement.getCurrentFrame() == action_obj[0].frame){
                        action_obj[0].action(_this, pElement);
                        if(action_obj[0].repeat > 1){
                            if(action_obj[0].repeat > 0){
                                action_obj[0].repeat -= 1;
                                action_obj.push(action_obj.splice(0,1)[0]);
                            } else {
                                action_obj.push(action_obj.splice(0,1)[0]);
                            }
                        } else {
                            action_obj.splice(0,1);
                        }
                    }
                }
            };
            _this.options.componentList[i].element.init();
        }
    };
    SpriteSheetManager.fn.getElementById = function(pId){
        var _this = this;
        var componentList_obj = _this.options.componentList;
        var componentList_num = componentList_obj.length;
        for(var i=0; i<componentList_num; i++){
            if(pId == componentList_obj[i].id)
                return componentList_obj[i].element;
        }
        return false;
    };
    // SpriteSheetManager End


    // SpriteSheetElement Start
    SpriteSheetElement = function(options) {
        this.defaults = {
            el          : null,
            preloadMode :false,
            component   :{
                path            :   "",
                width           :   100,
                height          :   100,
                column          :   4,
                row             :   4,
                totalFrame      :   16,
                speed           :   80, 
                auto            :   false,
                repeat          :   false
            },
            onBeforeStart:function(){},
            onPlaying   :function(){},
            onPlayDone  :function(){}
        };
        this.options = $.extend(this.defaults, options);
        this.options.busy = false;
        this.options.interval = "";
        this.options.currentX = 0, 
        this.options.currentY = 0,
        this.options.currentFrame = 0;
        this.options.managerOnPlaying = function(){};
    };
    SpriteSheetElement.fn = SpriteSheetElement.prototype;
    SpriteSheetElement.fn.init = function(pCallback){
        var _this = this;
            _this.options.el.data("SpriteSheetElement", _this);
        if(_this.options.preloadMode){
            preloadImageArray([_this.options.component.path], function(){
                _this.options.el.css("background-image","url("+_this.options.component.path+")");
                _this.options.el.css("background-repeat","no-repeat");
                _this.options.el.css("background-position","0px 0px");
                if(_this.options.component.auto)
                    _this.start();
                if(pCallback)
                    pCallback();
            });
        } else {
            if(_this.options.component.auto)
                _this.start();
            if(pCallback)
                pCallback();
        }
    };
    SpriteSheetElement.fn.start = function(){
        var _this = this;
        _this.options.onBeforeStart(_this);
        _this.options.busy = true;
        _this.options.interval = setInterval(function(){ 
            
            _this.jumpToFrame(_this.options.currentFrame);
            _this.options.onPlaying(_this);
            _this.options.managerOnPlaying(_this);
            _this.options.currentFrame += 1;

            if(_this.options.currentFrame == _this.options.component.totalFrame - 1){
                if(_this.options.component.repeat){
                    _this.options.currentFrame = 0;
                } else {
                    _this.stop();
                    _this.options.onPlayDone(_this);
                }
            }
        }, _this.options.component.speed);
    };
    SpriteSheetElement.fn.stop = function(pEndFrame){
        var _this = this;
            _this.options.busy = false;
        clearInterval(_this.options.interval);
    };
    SpriteSheetElement.fn.getCurrentFrame = function(){
        return this.options.currentFrame;
    };
    SpriteSheetElement.fn.getElement = function(){
        return this.options.el;
    };
    SpriteSheetElement.fn.getFramePosition = function(pFrame){
        var _this = this;
        return  {   
                    x:((pFrame % _this.options.component.column)*_this.options.component.width)*-1,
                    y:(parseInt(pFrame / _this.options.component.row) * _this.options.component.height)*-1 
                }
    };
    SpriteSheetElement.fn.jumpToFrame = function(pFrame){
        var _this = this;
        var jumpPosition = _this.getFramePosition(pFrame);
        _this.getElement().css("background-position", jumpPosition.x+"px " + jumpPosition.y+"px");
        _this.options.currentX = jumpPosition.x;
        _this.options.currentY = jumpPosition.y;
    };
    SpriteSheetElement.fn.fadeOut = function(){ this.getElement().fadeOut(); };
    SpriteSheetElement.fn.fadeIn = function(){ this.getElement().fadeIn(); };
    // SpriteSheetElement End
})(jQuery);