PNG files are great to work with in the game, they have a small file size and support an alpha channel.
JPG files have small file size rather than PNG files. But when using JPG files, they don't support an alpha channel, so you will see that we still have our black background from the image we are using.
To remove the background from an image, we need to load the alpha texture via the custom filter to a main image.
So we need to require two images.
This is exactly what we want (alpha texture, image that filled a white color) :
DLC
Let's add the filter that can use an alpha texture to main sprite and see how it looks.
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 | function getImgPath() { var path; if(Utils.isNwjs()) { path = StorageManager.localFileDirectoryPath(); path = path.replace("save", "img"); } else { path = window.location.pathname.slice(0, window.location.pathname.lastIndexOf("/")) + "/img/"; } return path; }; function testCretingAlphaTextureWithJPG(name) { // to use an ES6 "use strict"; var scene, alphaSprite, sprite, filter, path; scene = SceneManager._scene; path = getImgPath(); sprite = PIXI.Sprite.fromImage(path + `pictures/${name}.jpg`); // to add child SceneManager._scene.addChild(sprite); // to create a JPG image. alphaSprite = PIXI.Sprite.fromImage(path + `pictures/${name}_alpha.jpg`); sprite.addChild(alphaSprite); // to add the filter filter = new PIXI.ETC1Filter(alphaSprite); // to set the filter sprite.filters = [filter]; }; | cs |
This is exactly what we want :
it passes vFilterCoord into our filter, then we know that we still have one problem that the destination coordinate is a little weird.
This guide requires the latest ETC1Filter plugin, which is available at https://github.com/biud436/MV/raw/master/RS_ETC1Filter.js, so make sure that this is installed first.