API Docs for:
Show:

File: rendering\View.js

/**
 This object is used by various systems for drawing on a canvas. It provides the most basic amount of information required for rendering and should be wrapped by a custom camera object. The view takes its height and width from the canvas object directly, so it will always allow for rendering on the whole canvas.
 @class View
 @constructor
 @param canvas {Canvas} Canvas object to be drawn to.
 */
function View(canvas){    
    this._context = canvas.getContext('2d');
    this._canvasWidth = canvas.width;
    this._canvasHeight = canvas.height;
    this._viewWidth = canvas.width;
    this._viewHeight = canvas.height;
    this._viewWidthScaling = 1;
    this._viewHeightScaling = 1;
    this._gameWidth = this._viewWidth;
    this._gameHeight = this._viewHeight;
    this._position = new Vector2D(this._viewWidth / 2, this._viewHeight / 2);
}

View.prototype = {
    constructor : View,
    
    /**
     Sets a new position for the view. The view's position is its middle point. The view's top left corner's position can never be less than 0 on either axis, this function ensures that. This limitation makes tile rendering logic much less complicated.
     @method setPosition
     @param x {Number} The x component of the new position.
     @param y {Number} The y component of the new position.
     */
    setPosition : function(x, y){
        var viewHalfWidth = this._viewWidth / 2,
            viewHalfHeight = this._viewHeight / 2;
        
        //View's bottom right corner can't be outside of the game space.
        this._position.x = Math.min(x, this._gameWidth - viewHalfWidth);
        this._position.y = Math.min(y, this._gameHeight - viewHalfHeight);
        //View's top left corner's position can't be negative on either axis.
        this._position.x = Math.max(x, viewHalfWidth);
        this._position.y = Math.max(y, viewHalfHeight);
    },
    
    /**
     @method getPosition
     @param vector {Vector2D} The vector to which the position will be copied.
     */
    getPosition : function(vector){
        vector.x = this._position.x;
        vector.y = this._position.y;
    },
    
    /**
     @method getViewWidth
     @return Width of the view.
     */
    getViewWidth : function(){
        return this._viewWidth;
    },
    
    /**
     Sets the width of the view. The view always renders to the full canvas, so setting the width
     to something other than the width of the canvas will scale the rendered output.
     @method setViewWidth
     @param width {Number} New width of the view.
     */
    setViewWidth : (function(){
        var temporaryPosition = new Vector2D();
        
        return function(width){
            this._viewWidth = width;
            this._viewWidthScaling = this._canvasWidth / this._viewWidth;
            
            //Use the setPosition function to move the view if it's now outside of the game space.
            this.getPosition(temporaryPosition);
            this.setPosition(temporaryPosition.x, temporaryPosition.y);
        };
    })(),
    
    /**
     @method getViewHeight
     @return Height of the view.
     */
    getViewHeight : function(){
        return this._viewHeight;
    },
    
    /**
     Sets the height of the view. The view always renders to the full canvas, so setting the height
     to something other than the height of the canvas will scale the rendered output.
     @method setViewHeight
     @param height {Number} New height of the view.
     */
    setViewHeight : (function(){
        var temporaryPosition = new Vector2D();
        
        return function(height){
            this._viewHeight = height;
            this._viewHeightScaling = this._canvasHeight / this._viewHeight;
            
            //Use the setPosition function to move the view if it's now outside of the game space.
            this.getPosition(temporaryPosition);
            this.setPosition(temporaryPosition.x, temporaryPosition.y);
        };
    })(),
    
    /**
     @method getGameWidth
     @return Width of the game space.
     */
    getGameWidth : function(){
        return this._gameWidth;
    },
    
    /**
     Sets the width of the game space.
     @method setGameWidth
     @param width {Number} New width of the game space.
     */
    setGameWidth : (function(){
        var temporaryPosition = new Vector2D();
        
        return function(width){
            this._gameWidth = width;
            
            //Use the setPosition function to move the view if it's now outside of the game space.
            this.getPosition(temporaryPosition);
            this.setPosition(temporaryPosition.x, temporaryPosition.y);
        };
    })(),
    
    /**
     @method getGameHeight
     @return Height of the game space.
     */
    getGameHeight : function(){
        return this._gameHeight;
    },
    
    /**
     Sets the height of the game space.
     @method setGameHeight
     @param height {Number} New height of the game space.
     */
    setGameHeight : (function(){
        var temporaryPosition = new Vector2D();
        
        return function(height){
            this._gameHeight = height;
            
            //Use the setPosition function to move the view if it's now outside of the game space.
            this.getPosition(temporaryPosition);
            this.setPosition(temporaryPosition.x, temporaryPosition.y);
        };
    })(),
    /**
     @method getContext
     @return 2D context used for rendering.
     */
    getContext : function(){
        return this._context;
    },
    
    /**
     Clears the whole canvas.
     @method clearContext
     */
    clearContext : function(){
        //The clear area is affected by the canvas transform. The position of the clear rectangle needs to be offset.
        //The fact that the view dimensions are used instead of the canvas dimensions takes care of scaling.
        this._context.clearRect(this._position.x - this._viewWidth / 2, this._position.y - this._viewHeight / 2, this._viewWidth, this._viewHeight);
    },
    
    /**
     Sets the context's transformation matrix to an identity matrix.
     @method resetContextTransform
     */
    resetContextTransform : function(){
        this._context.setTransform(1, 0, 0, 1, 0, 0);
    },
    
    /**
     Applies the view scaling and translation to the context. The transform should be applied before doing any other transformations.
     @method applyViewTransform
     */
    applyViewTransform : function(){
        this._context.scale(this._viewWidthScaling, this._viewHeightScaling);
        this._context.translate(-(this._position.x - this._viewWidth / 2), -(this._position.y - this._viewHeight / 2));
    }
};