Graphic briefly flickers when updating

58 views Asked by At

I'm a little out of my depth here. The community here seem very helpful so I'm hoping together we can figure out the issue I'm experiencing.

I'm developing a game for Windows PC and the language is Javascript. I'm using a plugin that updates a character dynamically.

Unfortunately the creator of this plugin abandoned the plugin so due to it being unfinished, I expected parts of it to be a little bit janky. But it actually works very well and successfully updates my character using a layered composite system, dynamically updating/layering their png spritesheet file with images e.g. hair, clothes, etc, in another one of my folders. So at least the hard part is out the way!

  1. The first issue I'm experiencing involves the graphic of my character briefly flickering (there is a missing frame or two) when they update and an extra layer is added to them in the game. This flicker doesn't happen all the time when a layer is added to them, but sometimes it does, and I'm not sure why.

  2. Another issue: When the graphic updates the character's spritesheet also flickers in the corner of the screen for a few frames, and then disappears. Fortunately the spritesheet flicker in the corner isn't visible if I'm playing the game at a lower resolution BUT it can be seen if the game is played on 1920x1080 or larger screens... I'd love to know why that is happening and if it is possible to hide it.

I'm looking through the code right now and I would like to share it with you if that would be more helpful in solving the issue, but I'm not exactly sure where to look. I would certainly be happy to post it all, but there are 2000 lines of code! I'm not sure if it's frowned upon to post that many lines of code on here so I would prefer to ask first. If that's too many, I can attempt to post what is relevant if we can narrow down the problem! Thank you in advance for reading! Really hoping I can sort this out as it would be a big weight off my shoulders!

Edit: From what you have said so far, some code will definitely help. But not 2000 lines that's for sure, which is understandable! Here is a small section that I believe might be most relevant with the issues I'm experiencing...

How the images are combined:

Echomap_Processor.prototype.combineImagesLayer = function(bmp,imgLayerA,imgLayerE) {
this.combiningStarted = true;
var imgLayer = new Array();
for (var i = 0, len = imgLayerA.length; i < len; i++) {
    imgLayer.push( imgLayerA[i] );
}
for (var i = 0, len = imgLayerE.length; i < len; i++) {
    imgLayer.push( imgLayerE[i] );
}
for (var i = 0, len = imgLayer.length; i < len; i++) {
    var hue = 0;
    var dpath;
    var imgLocal = imgLayer[i]; //Echomap_CCG_ImgObject'
    dpath = 'img/composite/' + imgLayer[i].filename();
    imgLocal.setDPath(dpath);
    hue = imgLocal.hue();
    var toneR = imgLocal.toneR();
    var toneG = imgLocal.toneG();
    var toneB = imgLocal.toneB();
    Echomap.Utils.log('combineImagesLayer', 'dpath', dpath, 4);

    var tLayer;
    tlayer = ImageManager.loadNormalBitmapEcho3b(imgLocal);//dpath, hue, toneR,toneG,toneB);
    if (tlayer.isError()) {
        this.composingImgX = false;
        throw new Error('Failed to load: ' + tlayer.url);
    }
    if (!tlayer.isReady()) {
        this.composingImgX = false;
        Echomap.Utils.log('combineImagesLayer', 'WARN: bitmap not ready! (WHY?)!!', tlayer.url);
        return; //done = false;
        //throw new Error('Failed to load: ' + tlayer.url);
    }
    if( toneR!=0 || toneG!=0 || toneB!=0 )
        tlayer.adjustTone(toneR,toneG,toneB);
    var w = tlayer.width;
    var h = tlayer.height;
    Echomap.Utils.log('combineImagesLayer', 'bitmap ready', tlayer.url);
    bmp.blt(tlayer, 0, 0, w, h, 0, 0);
    /*tLayer.addLoadListener(function () {
        //blt ( source , sx , sy , sw , sh , dx , dy , [dw=sw] , [dh=sh] )
        bmp.blt(tLayer, 0, 0, tLayer.width, tLayer.height, 0, 0);
    });*/
}
this.combiningLvlStarted = false;

};

How the images are loaded:

Echomap_Processor.prototype.loadImagesLayer = function(bmp,imgLayer) {
//Echomap.Utils.log('loadImagesLayer', 'Called');
//Array imgLayer
for (var i = 0, len = imgLayer.length; i < len; i++) {
    var hue = 0;
    var imageLocal = imgLayer[i];
    //var dpath = 'img/composite/' + imgLayer[i];
    var dpath = 'img/composite/' + imageLocal.filename();
    hue   = imageLocal.hue();
    imageLocal.setDPath(dpath);
    if(imageLocal) {
        Echomap.Utils.log('loadImagesLayer', 'dpath', dpath, 4 );
        //var tLayer = ImageManager.loadNormalBitmap(dpath, hue);
        var tLayer = ImageManager.loadNormalBitmapEcho3(imageLocal);
    }
    /*tLayer.addLoadListener(function () {
        //blt ( source , sx , sy , sw , sh , dx , dy , [dw=sw] , [dh=sh] )
        bmp.blt(tLayer, 0, 0, tLayer.width, tLayer.height, 0, 0);
    });
    */
}
//Echomap.Utils.log('loadImagesLayer', 'Done');

};

Source: https://github.com/echomap/rpgmvplugins (This is where the plugin is from)

0

There are 0 answers