Problem getting images in Sprites to refresh

  • For the moment, I'm creating behaviors dealing with the HTML image inside the Sprite object.

    I usually get it back with that line of code :

    this.inst.type.animations[0].frames[this.inst.cur_frame].texture_img.src;

    I do what I need to do with that (usually drawing it on another private canvas to modify it).

    When I want to inject it back (as a base64 string), it updates in Chrome, but not in Firefox.

    To clarify my problem, here's a typical piece of code :

    var tmpImage;

    var base64str;

    this.tmpImg.onload = function(){

        ctx.drawImage(tmpImg, 0, 0,tmpImg.width,tmpImg.height);

        //do my thing

        base64str = cvs.toDataURL("image/png");

        inst.cur_animation.frames[inst.cur_frame].texture_img.onload = (function (self) {

            return function(info) {

                inst.set_bbox_changed();

                cr.runtime.redraw = true;

         };

        })(this);

                  ?

                  ?img.src = base64str;

                  ?cr.runtime.redraw = true;

    }

    this.tmpImg.src = this.inst.type.animations[0].frames[this.inst.cur_frame].texture_img.src;

    It works perfectly in Chrome.

    However, although the new "img.src" of the Sprite contain, indeed, the base64 string, FF doesn't update.

    When I do that kind of things outside C2's SDK, it works perfectly on FF and Chrome (see here, for example : http://jsfiddle.net/2Unnf/).

    So, here's my question : what's the right way to inject an image inside the Sprite object, when dealing with onload() methods ?

  • Your closure has a mistake, you return "function (info)" but use "inst.", you probably wanted to write "function (inst)". Surprised that doesn't crash in Chrome.

    You should probably also only update the sprite's image when tmpImage's onload event fires.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Surprised that doesn't crash in Chrome.

    Ashley: I've noticed that chrome is really "laxist" on the JS code execution whereas firebug is far stricter. I don't know if FF without firebug executes said code, but with the extension on it often "shoots" some bit of code that are not working as they should.

    If you want to make sure some code is correct, run it by firebug and you'll be set.

  • Kyatric: Very interesting. For me it feels that Chrome is much more stricter than Firefox/bug with Javascript.. (using external-resources(scripts,..), dirty fast scripts, and also with the WebGL-stuff)

  • Ashley : I made the modification you noticed, but I still can't force Firefox to update the image (and checking with Firebug, the image .src is the right base64 string).

    How do you force the refresh ?

  • Pode, as far as C2's engine is concerned, you literally only need to set the runtime redraw flag to true. That forces a complete refresh of the entire game. If that is not doing it, perhaps the image is not loaded or there is something else in the browser involved.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)