What is the best way (efficient and fast) to generate several images (pixel-by-pixel) during run-time and store them in the app's memory - in some kind of drawing buffer - for later use?
I'm trying to write a mobile app in Construct 2 that features the capability to morph one image into another based on certain parameters. This will require me to generate frames of the morph animation at run-time, store them in the game's memory, and then display them as an animation sequence to the user.
The approach I have thought out so far:
I can use R0j0hound's Canvas plugin to calculate a given frame of the animation (using pixel-by-pixel processing), but I am not sure what the optimal way to store a frame would be. My first thought was to use a 2D array, with each element representing a pixel's color as an integer. By this approach, if I had 30 frames in my morph animation, I would then have 30 gigantic (up to 1024x768) 2D arrays representing the animation.
Problems with it:
One major problem with this approach is that displaying the images as an animation might be too time consuming, because I have to convert the arrays back into pixels to display on the canvas. For a smooth animation, I'd still want to draw the images to a buffer somewhere first.
Second, I am also concerned about the pixel processing itself taking up too much time by virtue of being a software process rather a hardware one. Is there a way to utilize the hardware to do the image processing? Especially on conversion to an iOS app via AppMobi or eventually CocoonJS.
How you can help:
Any input like tips/techniques/insights that you can provide will be very much appreciated! I feel that Construct 2 is good for the job, it's just a matter of figuring out how to do it.
Thanks,
Dalal