Skip to main content

Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
TagsGame Engines
(1 edit) (+2)

The problem is that gamelib.js calls the getImageData() method on a canvas that has data loaded from an external image file, which falls afoul of https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData#exceptions and https://developer.mozilla.org/en-US/docs/Web/Security/Defenses/Same-origin_policy#file_origins when the game is running from a file:/// URL. To work around this, either set up a local Web server and then run the game through localhost, or go into gamelib.js and replace this block of code:

                    let r = (colorMultiplier >> 16 & 0xff)/0xff;
                    let g = (colorMultiplier >> 8 & 0xff)/0xff;
                    let b = (colorMultiplier >> 0 & 0xff)/0xff;
                    let imgData = ctx.getImageData(0, 0, cellw, cellh);
                    for(let i = 0; i < imgData.data.length; i += 4) 
                    {
                        imgData.data[i + 0] *= r;
                        imgData.data[i + 1] *= g;
                        imgData.data[i + 2] *= b;
                    }
                    ctx.putImageData(imgData, 0, 0);                

With this one:

                    ctx.fillStyle = "#" + colorMultiplier.toString(16).padStart(6, '0');
                    ctx.globalCompositeOperation = "multiply";
                    ctx.fillRect(0, 0, frame.rect.w, frame.rect.h);
                    ctx.fillStyle = "black";
                    ctx.globalCompositeOperation = "destination-atop";
                    ctx.drawImage(img, frame.rect.x, frame.rect.y, frame.rect.w, frame.rect.h, 0, 0, frame.rect.w, frame.rect.h);
                    ctx.globalCompositeOperation = "source-over";
(+2)

Thank you! That worked! =)