bellboy

Extracting sprites from screenshots

Recommended Posts

How to quickly rip sprites from pictures? (let's say I have 10 screenshots from Mario Brothers game and would like to extract Mario from each picture then save it as png with transparent background). GIMP has 'foreground select' option but it's far from being perfect, there is also clippingmagic but not free.

Share this post


Link to post
Share on other sites

this will depend what engine rendering you use.

here a part of example with canvas pixi and nwjs

This , save all children sprites with alpha

        setTimeout(function(){ // wait rendering to 0,0 update _displayX,_displayY
            SceneManager._scene._active = false;
            var fs = require('fs');
            var pathName = `img/parallaxes/${$dataMap.parallaxName}.png`;
            var snap = Bitmap.snap2(target);
            var urlData = snap._canvas.toDataURL();
            var base64Data = urlData.replace(/^data:image\/png;base64,/, "");
            fs.writeFile(pathName, base64Data, 'base64', function(error){
                if (error !== undefined && error !== null) {  console.error('An error occured while saving the screenshot', error); } 
            });
            // PHOTOSHOP MODE
            if(option["c-save_psd"]){
                var newFolderPath = `img/parallaxes/_psd_${$dataMap.parallaxName}`;
                if(!fs.existsSync(newFolderPath)){ fs.mkdirSync(newFolderPath)}; // create folder if not exsit
                    
                for (let i = 0; i < target._spriteset.displayLayers.length; i++) {
                    let layer = target._spriteset.displayLayers[i];
                    let pathName = `${newFolderPath}/${$dataMap.parallaxName}_psd_layer${i}.png`;
                    let snap = Bitmap.snap2(layer);
                    let urlData = snap._canvas.toDataURL();
                    let base64Data = urlData.replace(/^data:image\/png;base64,/, "");
                    fs.writeFile(pathName, base64Data, 'base64', function(error){
                        if (error !== undefined && error !== null) {  console.error('An error occured while saving the screenshot', error); } 
                    });
                }
            };
            
            iziToast.warning({
                transitionOut: 'fadeOutUp',
                id:'loading',
                timeout:false,
                theme: 'dark',
                icon: 'icon-person',
                title: 'Rendering and Compile Json Complette',
                message: 'please Reload',
                position: 'topCenter', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter
                progressBarColor: 'rgb(0, 255, 184)',
                backgroundColor: '#f44242',
                progressBarColor:'#f41002',
            });
     
         }, 300);
    };

    Bitmap.snap2 = function(stage) {
        var width =  $dataMap.width*48;
        var height = $dataMap.height*48;
        var bitmap = new Bitmap(width, height);
        var context = bitmap._context;
        var renderTexture = PIXI.RenderTexture.create(width, height);
        if (stage) {
            Graphics._renderer.render(stage, renderTexture);
            stage.worldTransform.identity();
            var canvas = null;
            if (Graphics.isWebGL()) {
                canvas = Graphics._renderer.extract.canvas(renderTexture);
            } else {
                canvas = renderTexture.baseTexture._canvasRenderTarget.canvas;
            }
            context.drawImage(canvas, 0, 0);
        } else {

        }
        renderTexture.destroy({ destroyBase: true });
        bitmap._setDirty();
        return bitmap;
    };

 

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.