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