All courses now render properly. WIP items (shell, banana, fake item)

2019-06-09 23:50:55 +01:00
1 parent e010627b5d
commit ff21142744
@@ -0,0 +1,166 @@
+//
+// tileFlattener.js
+//--------------------
+// Renders screens or cells to 2d canvas. Useful for drawing UI elements from the ROM.
+// by RHY3756547
+//
+// includes: main.js
+//
+
+window.TileFlattener = function(palette, tiles, map) {
+
+    this.palette = palette;
+    this.tiles = tiles;
+    this.map = map;
+    this.toCanvas = toCanvas;
+
+    this.cellMode = map.cebk != null;
+
+    var tileCache = {};
+    var zero = [0, 0, 0, 0];
+    var emptyTile = new Uint8ClampedArray(64);
+
+    function getTileImg(pal0trans, tile, pal) {
+        var cacheID = tile + ":" + pal;
+        var item = tileCache[cacheID];
+        if (item != null) return item;
+        //make the tile
+        var canvas = document.createElement("canvas");
+        canvas.width = 8;
+        canvas.height = 8;
+        var ctx = canvas.getContext("2d");
+
+        var d = new Uint8ClampedArray(8*8*4);
+        var data = new ImageData(d, 8, 8);
+        var targ = 0;
+        var colors = palette.pltt.palettes[pal] || [];
+        var tileData = tiles.char.tiles[tile] || emptyTile;
+
+        for (var i=0; i<64; i++) {
+            var colID = tileData[i];
+            var col = (pal0trans && colID == 0) ? zero : (colors[colID] || zero);
+            d[targ++] = col[0];
+            d[targ++] = col[1];
+            d[targ++] = col[2];
+            d[targ++] = col[3];
+        }
+
+        ctx.putImageData(data, 0, 0);
+        tileCache[cacheID] = canvas;
+        return canvas;
+    }
+
+    function calcImageSize(image) {
+        var xMin = 65536;
+        var yMin = 65536;
+        var xMax = 0;
+        var yMax = 0;
+        for (var i=0; i<image.cells.length; i++) {
+            var cell = image.cells[i];
+            var size = cell.size;
+            var x = cell.x + size[0];
+            if (x > xMax) xMax = x;
+            x -= size[0];
+            if (x < xMin) xMin = x;
+            var y = cell.y + size[1];
+            if (y > yMax) yMax = y;
+            y -= size[1];
+            if (y < yMin) yMin = y;
+        }
+        return [xMin, yMin, xMax, yMax];
+    }
+
+    function toCanvas(pal0trans, imageInd, palInd) {
+        var canvas = document.createElement("canvas");
+        if (this.cellMode) {
+            //essentially a collection of ds sprites
+            //render out the image the user has requested
+            var image = map.cebk.images[imageInd];
+            var isize = calcImageSize(image);
+            
+            canvas.width = isize[2] - isize[0];
+            canvas.height = isize[3] - isize[1];
+            var ctx = canvas.getContext("2d");
+            var tileWidth = this.tiles.char.tilesX;
+            image.cells.sort(function(a, b){return b.priority - a.priority});
+
+            for (var i=image.cells.length-1; i>=0; i--) {
+                var cell = image.cells[i];
+
+                var size = cell.size;
+                var sx2 = size[0]/2;
+                var sy2 = size[1]/2;
+                ctx.save();
+                ctx.translate(cell.x + sx2 - isize[0], cell.y + sy2 - isize[1]);
+                ctx.scale(cell.xFlip?(-1):1, cell.yFlip?(-1):1);
+
+                var tile = cell.tileOffset;
+                var pal = cell.pal;
+                ctx.strokeStyle = "white";
+                ctx.strokeWidth = 1;
+                if (cell.disable) continue;
+
+                //draw oam sprite
+                var base = tile;
+                for (var y=0; y<size[1]; y+=8) {
+                    for (var x=0; x<size[0]; x+=8) {
+                        var img = getTileImg(pal0trans, tile++, pal);
+                        ctx.drawImage(img, x-sx2, y-sy2);
+                    }
+                    if (tileWidth != 65535) { //when defined, wrap to the next row when drawing a lower portion of the sprite
+                        base += tileWidth;
+                        tile = base;
+                    }
+                }
+                ctx.restore();
+            }
+        } else {
+            //screen render, very simple
+            var screen = map.scrn;
+            canvas.width = screen.screenWidth;
+            canvas.height = screen.screenHeight;
+            var ctx = canvas.getContext("2d");
+
+            var data = screen.data;
+            var tileWidth = (screen.screenWidth / 8);
+            var tileHeight = (screen.screenHeight / 8);
+            var x = 0;
+            var y = 0;
+            for (var i=0; i<data.length; i++) {
+                var info = data[i];
+
+                /*
+                Format is (YYYYXXNNNNNNNNNN)
+                Y4 Palette Number 
+                X2 Transformation (YFlip/XFlip) 
+                N10 Tile Number
+                */
+                var pal = info >> 12;
+                var trans = (info >> 10) & 3;
+                var tile = info & 0x3FF;
+
+                var img = getTileImg(pal0trans, tile, pal);
+                var xf = (trans&1) > 0;
+                var yf = (trans&2) > 0;
+
+                if (xf || yf) {
+                    //transform
+                    ctx.save();
+                    ctx.translate(x + 4, y + 4);
+                    ctx.scale(xf?(-1):1, yf?(-1):1);
+                    ctx.drawImage(img, -4, -4);
+                    ctx.restore();
+                } else {
+                    ctx.drawImage(img, x, y);
+                }
+
+                x += 8;
+                if (x >= screen.screenWidth) {
+                    x -= screen.screenWidth;
+                    y += 8;
+                }
+            }
+        }
+        return canvas;
+    }
+}