Forums » Help » Draw Canvas as image for animation sheet.

I need to draw a pre-rendered Canvas as an ig.AnimationSheet

this.animSheet = new ig.AnimationSheet(this.canvas, this.canvas.width, this.canvas.height);

Problem is ig.Image doesn't appear to accept Canvas images. I need the pivot and some other animation methods. Any ideas on the most efficient way to get this working?

I think something like this would fix the issue at hand but haven't tried it.

ig.Image.inject{{
  load: function (loadCallback) {
    // If a canvas image hijack me and set the data, then ignore this.parent below
    this.parent(loadCallback);
  }
});

If this is that simple, any reason why ImpactJS's core can't support this? Only potential problem I could think of is it might cause issues with Ejecta.

Note, I know you can simply do a this.canvas.toDataURL(), but this doesn't seem like a good approach.

Can you do the canvas.toDataURL() and set that to an invisible image on the page, basically making a new image, then set that new image in the image load?

I did one of those dress up games, and had a lot of issues with loading images on the fly. I used this trick to export the image and save it on the server then reload it into the impact game, but maybe you can skip the server save issue.

Will the gameplay need this function or are you just making new animation sheets?

Running with your idea of overloading ig.Image, so it can take a canvas instead of an image file path:

ig.Image.inject({
    init: function(input) {
        if(typeof input === 'string') { // If string path provided..
            return this.parent(input); // Load image normally.
        }
        // Assume input is a canvas.
        this.loaded = true;
        this.data = input;
        this.width = this.data.width / ig.system.scale;
        this.height = this.data.height / ig.system.scale;
    }
});

I think that is perfect. Going to give it a try in the near future when I finish integrating ImpactJS with my NodeJS server.