Corona Comics 2.0

Posted by Gilbert, Posted on November 11, 2011

3 votes
GitHub URL: 
https://github.com/ansca/Corona-Comics-SDK-2.0

The Corona Comics SDK 2.0 is based on the 1.0 version from November, 2010. In truth, this code is not as much an SDK as a demo of a fully functioning app using the code. It is a Lite version of Electric Eggplant’s iPad app, “Be Confident in Who You Are: A Middle School ConfidentialTM Graphic Novel” with all the functionality intact. It contains the opening animation and all of chapter 1, plus the Info page, and several About pages.

There’s some hard-coded special functionality still in place that will most likely need to be commented out or removed if you use this code. The code is open source, MIT Licensed for you to use.


Replies

futbol4
User offline. Last seen 21 weeks 4 days ago. Offline
Joined: 14 Nov 2011

David,

first question

I searched and did not see any posts that had the answer already, I have read the new Comics SDK PDF and am working through the template that comes with it.

First, thanks to David Fox of Electric Eggplant for creating this and sharing to the community!

Second, currently I am unable to increase the amount of pages in the comic app past 18pgs.
I have set "lite version" to false thinking that would change the maxPage to 44 as I see the full version is set to maxPage = 44, I have looked through files main, coordinates & reader and have still not found the settings I need to change.

I know it is there I will keep looking and if I find solution will share.

second question

Is it possible, when the app zooms in on a frame and the rest of the screen goes black, to adjust the opacity so it doesn't go totally black? but that one would be able to see surrounding artwork but readers focus would be on the frame we have chosen?

thanks in advance

DavidBFox's picture
DavidBFox
User offline. Last seen 2 weeks 4 days ago. Offline
Joined: 10 Oct 2010

Hi futbol4,

First answer: This might be convoluted, but the number of pages is determined by the number of pages defined in the coordinates.lua file array and then set in main.lua:

1
data = require ("coordinates")
and then

1
_G.lastPage = #data - 1 -- last story page is 1 less than the info page

I'm always assuming that the last page is the Info page, so the last accessible page would be 1 less than that.

So define more pages in coordinates.lua (after the 17th one). Of course, you also need the other assets for these... and you also have to set up additional pages in the arrays in frames.lua, sound.lua, and balloons.lua (if you're using the balloons).

Second answer: Yes, see line 213 in reader.lua. I'm setting alpha to 255. Try setting it to 128 and see how it looks. And you could select a different color other than black if you wanted... see lines 214-217.

Hope this helps!

futbol4
User offline. Last seen 21 weeks 4 days ago. Offline
Joined: 14 Nov 2011

Both of your explanations worked,

thank you!

futbol4
User offline. Last seen 21 weeks 4 days ago. Offline
Joined: 14 Nov 2011

I would add for any one else needing to make similar changes is that you have to add pages number in the pageSize.lua files as well.

thanks again for your help.

p

futbol4
User offline. Last seen 21 weeks 4 days ago. Offline
Joined: 14 Nov 2011

DavidBFox,

Where are the chapters Page defined on the menu/info page?

I found this section but I don't see where each page # is defined with the corresponding chapter:

------------------------------------------------------------
-- Send us to the correct page when Chapter button is tapped
------------------------------------------------------------

thanks

DavidBFox's picture
DavidBFox
User offline. Last seen 2 weeks 4 days ago. Offline
Joined: 10 Oct 2010

futbol4, I think what you want is the array on line 559 of main.lua:

1
local chapterStart = {0,4,10,16,21,26,30,34,39}

It lists the page number that each chapter starts on.

RedRize
User offline. Last seen 14 hours 25 min ago. Offline
Joined: 2 Apr 2011

Hello,
Can you please give me a link on CoronaComicsCoordCreator. In pdf file links don't work.

Thanks!

DavidBFox's picture
DavidBFox
User offline. Last seen 2 weeks 4 days ago. Offline
Joined: 10 Oct 2010
RedRize
User offline. Last seen 14 hours 25 min ago. Offline
Joined: 2 Apr 2011

@DavidBFox
Thank you very much!Really fast reply ;)

DavidBFox's picture
DavidBFox
User offline. Last seen 2 weeks 4 days ago. Offline
Joined: 10 Oct 2010

Yep... I'm just waiting here constantly refreshing email just so I can answer Comic SDK questions! :-)

Actually, also working on our Book 2 app using the same codebase... hope to have it wrapped up this month.

aldissmile
User offline. Last seen 22 weeks 10 hours ago. Offline
Joined: 19 Dec 2011

For easier organization, you could try putting them in groups. Put the visible and invisible object in the same group. And now when you want to manipulate or reference the group, both items should be affected.

You would have to change the listener to the invisible object, since that is what you want to register the touch event. And if you are not using an event.target reference in your event listener, I would think your code would remain the same.Dell Inspiron 15RN i15RN//Dell D600 Laptop//Toshiba Portege R835 P81//Toshiba Portg R835 //Apple MacBook Air MC969LLA//Toshiba Portg R835//

futbol4
User offline. Last seen 21 weeks 4 days ago. Offline
Joined: 14 Nov 2011

Thank you that did it! (chapter points)

futbol4
User offline. Last seen 21 weeks 4 days ago. Offline
Joined: 14 Nov 2011

Interested in two things

- words on how I would begin to make changes between pages so they "slide" from image to image as opposed to the next page simply "appearing".

- would like direction on how I would start adding to this code base to add support for making the App Universal, currently only for iPad and nook? (want to work on iPhone testing s far fails after build)

thanks

mike4's picture
mike4
User offline. Last seen 1 week 6 days ago. Offline
Joined: 22 Feb 2010

@futbol4 - For the first question, you want to change the way the pages transition, not panel to panel, correct?

The transitions for the pages occur in the Reader.lua in the Reader:loadPage function. You would need to remove the fade in, and write your own transitions between the current page and the page being loaded.

For the second question, I have released one comic using this framework as a Universal app. I have submitted 5 others to be approved, also as Universal apps. What are you having trouble with in terms of Universal apps. I'm sure I can help you get it worked out.

m

sabir.ahmed59
User offline. Last seen 3 weeks 5 days ago. Offline
Joined: 11 Jul 2011

Hi david,

Thank for posting and sharing the wonderful code base.

I have two questions:

1. How do i disable the zoom which occurs on touching each panel? What i want is the comic to remain hidden and appear frame by frame. When the user wants to move from one frame to another i want the earlier frame to remain on screen in a diff shade of transparency.

2. can i have a background on which i can draw the frames? how do i do that?

Thanks a lot in advance for any direction or pointers for these.

DavidBFox's picture
DavidBFox
User offline. Last seen 2 weeks 4 days ago. Offline
Joined: 10 Oct 2010

Hi sabir.ahmed59,

Not sure if I understand what you're looking for...

If you never want it to zoom, then I guess you can remove the event listener for each panel. Look for this code in Reader.lua:

-- set up touchable zoom-in rectangles for each frame

Then start in zoomed-in mode... find all occurrences of _G.showFullPages = true and change them to false.

You can change the alpha and color of the black framing rectangles (that block out the rest of the page when zoomed in). If you leave them black but change the alpha to .5, then you'd see the rest of the page, but faded. Look for function Frame:setColor( ... ) in Reader.lua and change

local alpha = 255

to a lower value, like 128

I don't have an answer for your 2nd question. Not sure what you're looking for. Feel free to modify the code, though!

DavidBFox's picture
DavidBFox
User offline. Last seen 2 weeks 4 days ago. Offline
Joined: 10 Oct 2010

Ed Brindle passed this tip along. He was having trouble getting the rotations to work properly on Android devices until he changed the build.settings code to this:

1
2
3
4
5
6
7
8
settings =
{
       orientation =
       {
               default = "portrait",
               content = "portrait",
               supported = { "portrait", "portraitUpsideDown" }
       },

He confirmed that the app runs will with the new Android tablets (Xoom, and Asus) and even with v4 ics (ice cream sandwich).

Thanks Ed!

umeshukla
User offline. Last seen 13 weeks 3 days ago. Offline
Joined: 22 Nov 2011

David,

Thanks for sharing your code.

I am trying to get a handle on all the things that are needed to be done for adopting the code.

I am not sure how one is suppose to use Zwoptex. I have exported the balloon files in to separate PNGs. When I open Zwoptext, it doesn't allow me to change the document resolution to match iPad resolution ( 1x or 2x ). Secondly, am I suppose to place the individual sprites in proper position before I publish.

Please advise.

DavidBFox's picture
DavidBFox
User offline. Last seen 2 weeks 4 days ago. Offline
Joined: 10 Oct 2010

umeshukla, a sprite sheet creation program like Zwoptex takes your images and figures out the best way to arrange them in a file so they'll all fit. The location of your images in the sheet is irrelevent to you. Think of it as a big jigsaw puzzle that Zwoptex solves for optimum placement.

The dimensions of the file just have to be large enough to barely hold your images. That's one thing I don't like about the program... if it's smart enough to figure out where to put your images, maybe it should be smart enough to determine the optimal sprite sheet dimensions to get them all to fit. But now you have to do that manually. I usually start with 1024x1024 and see if that works. If they don't all fit, I move to 1024x2048 or 2048x1024. If they fit in 1024x1024, I'll see if I can reduce one of the dimensions to 512 and see if it still works.

Zwoptex outputs 2 files... the actual sheet with your images in it (.png), and a .lua file that's the key to the location of your images. The .lua file is the map which Reader.lua uses to select each image. The .lua file needs to go in your root directroy of your app (where your main.lua file is). The simulator seems to be able to read it from a subdirectory, but last time I tried, when you install the app on an iOS device, it fails.

I'm sure there's lots of documentation on the Zwoptex site on how to do this.

Hope this helps!

umeshukla
User offline. Last seen 13 weeks 3 days ago. Offline
Joined: 22 Nov 2011

David, thanks a bunch.

imactiva's picture
imactiva
User offline. Last seen 1 hour 12 min ago. Offline
Joined: 22 Jun 2011

Can this SDK work with "director" or "storyboard" to view more than 1 comic in a single app?

DavidBFox's picture
DavidBFox
User offline. Last seen 2 weeks 4 days ago. Offline
Joined: 10 Oct 2010

imactiva - I assume it's possible, but you or someone would have to do the coding to integrate that functionality. If you do, please share it with the rest of us!

kuronekko
User offline. Last seen 6 weeks 5 days ago. Offline
Joined: 20 May 2011

I dont know if anyone is still checking this but…Ive been using the SDK and STILL cant manage to get my word bubbles to line up into their proper place. Im able to extract coordinates and order them, no problem using Zwoptex but…nothing I try works. If anyone can point me at a solution Id be most grateful.

Thanks

Micheline

DavidBFox's picture
DavidBFox
User offline. Last seen 2 weeks 4 days ago. Offline
Joined: 10 Oct 2010

@Micheline, I use Zwoptex to build the sprite sheets for the balloons, but not to determine where the balloons need to go on the page. Maybe the step you missed is using Photoshop to position the balloons, and then using CoronaComicsCoordCreator to gather the coordinates. Make sure you take a look at the documentation included with the code -- it should walk you through the process.

kuronekko
User offline. Last seen 6 weeks 5 days ago. Offline
Joined: 20 May 2011

Hi David,
Its so weird. Ive dutifully collected the coordinates using the CCCC, and have only been using Zwoptex to to cram the word bubbles onto a appropriately sized spritesheet.

But the layout only seems to work on maybe 2 out of 21 pages. The zoom in almost never works though. I wonder if there's something else going on that's throwing it off.

I so wanted the balloons functionality to happen but if Im going to be ready in time for MoCCA with a demo I might have to just bite it and merge word bubbles with each panel this time :P

Thanks so much for making this available to everyone. Its been challenging for a n0ob like me but Im really inspired! Link to my project journal below:

http://www.kuronekko.com/first-build/

DavidBFox's picture
DavidBFox
User offline. Last seen 2 weeks 4 days ago. Offline
Joined: 10 Oct 2010

From looking at the screen shots on your link, I'd guess that you don't have empty coordinates set up for the frames that don't have balloons. In your example, panel 3 has no balloons, so I'd guess that it's working correctly on this page for panels 1-3, then failing for the rest. Is it possible that the only pages that work properly are those where there's a balloon for each panel?

For the panels with no balloons, the balloons.lua code should something like like this:

1
2
3
4
5
6
7
        [2] = {
                { 1,220,111,227,81}, 
                {},    -- no balloons in this frame, still need placeholder
                { 2,68,685,229,76}, 
                { 3,391,704,78,85}, 
                { 4,314,840,162,129}, 
        },

If this isn't the solution, I'd be happy to take a look at one of your pages to see what you're doing wrong. I'd need the Photoshop file with the background and the balloons, and all your .lua files. Want to just zip up the entire project and include just one page in Photoshop?

kuronekko
User offline. Last seen 6 weeks 5 days ago. Offline
Joined: 20 May 2011

Hi

Thank you so much for suggesting this...I think that might be the problem (or at least one of them..lol)

Im going to try this and I'll let you know if it works or not.

Thanks for the help,

Mich

kuronekko
User offline. Last seen 6 weeks 5 days ago. Offline
Joined: 20 May 2011

Hi David,

Ive been trying so hard to get my comic to show the word bubbles correctly but it's still not working right. Is it too late to take you up on your offer to look at my files?

Thanks

M

DavidBFox's picture
DavidBFox
User offline. Last seen 2 weeks 4 days ago. Offline
Joined: 10 Oct 2010

MIch, happy to take a look. Zip it all up and give me a URL I can download it from. And tell me which pages you're having problems with.

kuronekko
User offline. Last seen 6 weeks 5 days ago. Offline
Joined: 20 May 2011

Oh thank you so much!

Here is a link to where you can get it :

http://dl.dropbox.com/u/37054773/eggplant/ansca-Corona-Comics-SDK-2.0-malice.zip

I included a psd of page 17, which isn't working right. Actually most of the pages aren't working right but maybe there's something about the way Im setting it up that I'm missing.

Thanks again. And if you can, would you please let me know when you got it so I can take it down? (I just feel a little funny having it up there :P )

Thank you,

Mich

DavidBFox's picture
DavidBFox
User offline. Last seen 2 weeks 4 days ago. Offline
Joined: 10 Oct 2010

MIch, ok I downloaded it. Will take a look later today. Want to give me your email address so we can take the discussion offline for now?

kuronekko
User offline. Last seen 6 weeks 5 days ago. Offline
Joined: 20 May 2011

Yes thank you!

You can get me at: kuronekko@hotmail.com

my email alias appears as 'boiled meat is tasty' so please dont be alarmed. lol

Mich