flows/sprites.js at master · bernardio5/flows · GitHub

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
91
92
93
94
95
96
97
98


function exSpriteCanvas(aCanvas, x0, y0) {
    this.canvas = aCanvas;

    this.context = aCanvas.getContext("2d");
    this.context.fillStyle = 'white';
    this.context.strokeStyle = "#000";
    this.cxw = this.context.canvas.width;
    this.cxh = this.context.canvas.height;
    this.tileSize = 32;    // size of tiles on screen; set how you please
    this.imgTileSz = 32;    // sze of tiles in exTiles: 32
    this.tileW = Math.floor(this.cxw / this.tileSize) + 1; // # tiles available on canvas in X
    this.tileH = Math.floor(this.cxh / this.tileSize) + 1; // in Y
    this.x0 = x0 * this.tileSize;
    this.y0 = y0 * this.tileSize;

    // load the tile set bitmap.
    this.loaded = 0;
    this.tiles = new Image();
    this.tiles.src = "microTiles.png";
    that = this;
    this.tiles.onload= function(that) { that.loaded=1; }

    // bbox for all draws since last erase-- uses canvas
    this.minX = 999.0;
    this.minY = 999.0;
    this.maxX = -999.0;
    this.maxY = -999.0;
}


exSpriteCanvas.prototype = {
    // draw tile at tx,ty at grid point x, y-- minimal default case
    drawSprite: function(x, y, tx, ty) {
        var ts = this.tileSize;
        var is = this.imgTileSz;
        var xpos = this.x0 + (ts*x);
        var ypos = this.y0 + (ts*y);
        this.context.drawImage(this.tiles, tx*is, ty*is, is, is, xpos, ypos, ts, ts);
        if (x<this.minX) { this.minX = x; }
        if (y<this.minY) { this.minY = y; }
        if (x>this.maxX) { this.maxX = x; }
        if (y>this.maxY) { this.maxY = y; }

    },


    // draws multiple tiles on a grid point
    drawLargeSprite: function(x, y, tx, ty, txsz, tysz) {
        var ts = this.tileSize;
        var is = this.imgTileSz;
        var xpos = this.x0 + (ts*x);
        var ypos = this.y0 + (ts*y);
        this.context.drawImage(this.tiles, tx*is, ty*is, txsz*is, tysz*is, xpos, ypos, txsz*ts, tysz*ts);
        if (x<this.minX) { this.minX = x; }
        if (y<this.minY) { this.minY = y; }
        if ((x+txsz)>this.maxX) { this.maxX = (x+txsz); }
        if ((y+tysz)>this.maxY) { this.maxY = (y+tysz); }
    },


    // scale the sprite by xscale and yscale
    drawStretchedSprite: function(x, y, tx, ty, txsz, tysz, xscale, yscale) {
        var ts = this.tileSize;
        var is = this.imgTileSz
        var xpos = this.x0 + (ts*x);
        var ypos = this.y0 + (ts*y);
        this.context.drawImage(this.tiles, tx*is, ty*is, txsz*is, tysz*is, xpos, ypos, txsz*ts*xscale, tysz*ts*yscale);
        if (x<this.minX) { this.minX = x; }
        if (y<this.minY) { this.minY = y; }
        if (((x+txsz)*xscale)>this.maxX) { this.maxX = ((x+txsz)*xscale); }
        if (((y+tysz)*yscale)>this.maxY) { this.maxY = ((y+tysz)*yscale); }
    },


    // erases canvas
    clear: function() {
        var ts = this.tileSize;
        this.context.fillStyle = this.bg;
        this.context.beginPath();
        this.context.rect(this.x0 + (this.minX*ts), this.y0+(this.minY*ts), this.maxX*ts, this.maxY*ts);
        this.context.fill();
        this.minX = 999.0;
        this.minY = 999.0;
        this.maxX = -999.0;
        this.maxY = -999.0;
    },

    // erases canvas
    clearAll: function() {
        var ts = this.tileSize;
        this.context.fillStyle = this.bg;
        this.context.beginPath();
        this.context.rect(0.0,0.0, this.tileW*ts, this.tileH*ts);
        this.context.fill();
    },
}