Comic App, using high res image to move from scene to scene

Getting Started Newbie Questions
#1

I am working on a relatively simple app for a comic we are working on and I wanted to know whether it is possible to setup the app to work this way.

Ideally we were thinking of loading a single large high res image which would represent the current page. The user has the option to pinch zoom and slide the image around to read, otherwise they can swipe across the screen to be directed from scene to scene within the image. Swiping across the screen would zoom into the image and would change the x,y value of the image so the viewpoint is centered on that scene.

I was thinking I could use Director Class or Storyboard for the scenes, and simply change the x,y for each scene moving the single high res image over to display each scene. The reason we thought of doing it this way is so we can create the feel of reading a comic and your eyes shift from box to box reading the dialogue and viewing the images. The other boxed would still be visible near the edges of the current scene. 

If this is not easily achievable then the alternative is to cut up the comic and use some transition effects to create the same illusion. 

Let me know what you think, and what API performs the zooming in/out of the image. I couldn’t find out how to zoom in/out of any display object / imagerect.

#2

Hi @gearedcorp,

You can definitely do this, but I’d suggest you break up the comic “page” into individual image files (if possible) and re-assemble them in a logical manner. The reason is, if you attempt to build this as one immense image, you’ll potentially blow past your texture memory limits. If you can separate and re-assemble the page using images of the smallest-possible Power-of-2 dimensions, you’ll save some precious texture memory. This is detailed in some degree here:

http://docs.coronalabs.com/guide/basics/optimization/index.html

All of these objects can, of course, be placed into a display group. And you can scale that group, or move it around, in the usual methods. If you need a (quite impressive) pinch-zoom-move-rotate module, I suggest you check out the one by Matt Webster detailed in this tutorial:

http://www.coronalabs.com/blog/2013/01/22/implementing-pinch-zoom-rotate/

Hope this helps,

Brent

#3

Thank you Rob, love the support with Corona and the response times. I will give those articles a read, I had a feeling that the memory may have been an issue when loading one large image file.

#4

Hi @gearedcorp,

You can definitely do this, but I’d suggest you break up the comic “page” into individual image files (if possible) and re-assemble them in a logical manner. The reason is, if you attempt to build this as one immense image, you’ll potentially blow past your texture memory limits. If you can separate and re-assemble the page using images of the smallest-possible Power-of-2 dimensions, you’ll save some precious texture memory. This is detailed in some degree here:

http://docs.coronalabs.com/guide/basics/optimization/index.html

All of these objects can, of course, be placed into a display group. And you can scale that group, or move it around, in the usual methods. If you need a (quite impressive) pinch-zoom-move-rotate module, I suggest you check out the one by Matt Webster detailed in this tutorial:

http://www.coronalabs.com/blog/2013/01/22/implementing-pinch-zoom-rotate/

Hope this helps,

Brent

#5

Thank you Rob, love the support with Corona and the response times. I will give those articles a read, I had a feeling that the memory may have been an issue when loading one large image file.