1     /**
2         A class that display a repeating texture that can optionall be offset in either
3        the x or y axis
4         @author <a href="mailto:matthewcasperson@gmail.com">Matthew Casperson</a>
5         @class
6     */
7     function RepeatingGameObject()
8     {
9         /** The width that the final image will take up
10          @type Number
11       */
12       this.width = 0;
13       /** The height that the final image will take up
14          @type Number
15       */
16        this.height = 0;
17       /** How much of the scrollX and scrollY to apply when drawing
18          @type Number
19       */
20        this.scrollFactor = 1;
21
22        /**
23            Initialises this object
24            @return A reference to the initialised object
25        */
26        this.startupRepeatingGameObject = function(image, x, y, z, width, height, scrollFactor)
27        {
28            this.startupVisualGameObject(image, x, y, z);
29            this.width = width;
30            this.height = height;
31            this.scrollFactor = scrollFactor;
32            return this;
33        }
34
35        /**
36            Clean this object up
37        */
38        this.shutdownstartupRepeatingGameObject = function()
39        {
40            this.shutdownVisualGameObject();
41        }
42
43       /**
44            Draws this element to the back buffer
45            @param dt Time in seconds since the last frame
46          @param context The context to draw to
47          @param xScroll The global scrolling value of the x axis  
48          @param yScroll The global scrolling value of the y axis  
49        */
50        this.draw = function(dt, canvas, xScroll, yScroll)
51        {
52            var areaDrawn = [0, 0];
53
54            for (var y = 0; y < this.height; y += areaDrawn[1])
55            {
56                for (var x = 0; x < this.width; x += areaDrawn[0])
57                {
58                    // the top left corner to start drawing the next tile from
59                var newPosition = [this.x + x, this.y + y];
60                // the amount of space left in which to draw
61                    var newFillArea = [this.width - x, this.height - y];
62                // the first time around you have to start drawing from the middle of the image
63                // subsequent tiles alwyas get drawn from the top or left
64                    var newScrollPosition = [0, 0];
65                    if (x==0) newScrollPosition[0] = xScroll * this.scrollFactor;
66                    if (y==0) newScrollPosition[1] = yScroll * this.scrollFactor;
67                    areaDrawn = this.drawRepeat(canvas, newPosition, newFillArea, newScrollPosition);
68                }
69            }
70        }
71
72        this.drawRepeat = function(canvas, newPosition, newFillArea, newScrollPosition)
73        {
74            // find where in our repeating texture to start drawing (the top left corner)
75            var xOffset = Math.abs(newScrollPosition[0]) % this.image.width;
76            var yOffset = Math.abs(newScrollPosition[1]) % this.image.height;
77            var left = newScrollPosition[0]<0?this.image.width-xOffset:xOffset;
78            var top = newScrollPosition[1]<0?this.image.height-yOffset:yOffset;
79            var width = newFillArea[0] < this.image.width-left?newFillArea[0]:this.image.width-left;
80            var height = newFillArea[1] < this.image.height-top?newFillArea[1]:this.image.height-top;
81
82            // draw the image
83            canvas.drawImage(this.image, left, top, width, height, newPosition[0], newPosition[1], width, height);
84
85            return [width, height];
86        }
87
88
89    }
90    RepeatingGameObject.prototype = new VisualGameObject();

Top