Corona Comics help

Hello,

I’m trying to use the template and code to make a comic book but it doesn’t work in the Simulator. I just get a totally black screen. Can someone take a look and see where I went wrong. Here is the code, modified with the coordinates I made, just to test it out. I have the comic book pages in a folder named “Assets”, the icons and the Description.txt file in a folder named “App”. The Coordinates. txt file and the main.lua files are not inside any named folders. Thanks:)

– Corona Comics framework

– The following data represents coordinates or panel sequences.
– Each panel is defined by the top left (x,y) and the bottom right (x,y) coordinates: { x1, y1, x2, y2 }

local data =
{
[0] = {
},
[1] = {
{ 5,4,736,538 },
{ 7,488,436,502 },
{ 442,541,329,486 },

},
[2] = {
{ 5,4,736,538 },
{ 7,488,436,502 },
{ 442,541,329,486 },
},
[3] = {
{ 5,4,736,538 },
{ 7,488,436,502 },
{ 442,541,329,486 },
},
[4] = {
{ 5,4,736,538 },
{ 7,488,436,502 },
{ 442,541,329,486 },
},
[5] = {
{ 5,4,736,538 },
{ 7,488,436,502 },
{ 442,541,329,486 },
},
[6] = {
{ 5,4,736,538 },
{ 7,488,436,502 },
{ 442,541,329,486 },
},
[7] = {
{ 5,4,736,538 },
{ 7,488,436,502 },
{ 442,541,329,486 },
},
[8] = {
{ 5,4,736,538 },
{ 7,488,436,502 },
{ 442,541,329,486 },
}

}

– This section represents the beginning of the framework code
– You generally won’t need to change anything below this line


display.setStatusBar( display.HiddenStatusBar )

local Object = Runtime.Object


local Frame = Object:new()

function Frame:initialize()
local view = display.newGroup()
self.view = view

– Center view in content
local contentW = display.contentWidth
local contentH = display.contentHeight

local halfContentW = 0.5*contentW
local halfContentH = 0.5*contentH
view.x = halfContentW
view.y = halfContentH

– Insert rects and position relative to view’s origin
local top = display.newRect( -halfContentW, -halfContentH, contentW, 0 )
view:insert( top )
local bottom = display.newRect( -halfContentW, halfContentH, contentW, 0 )
view:insert( bottom )
local left = display.newRect( -halfContentW, -halfContentH, 0, contentH )
view:insert( left )
local right = display.newRect( halfContentW, -halfContentH, 0, contentH )
view:insert( right )

view.top = top
view.bottom = bottom
view.left = left
view.right = right
end

local function floor( a )
return a - a%1
end

function Frame:setBounds( w, h, animate )
local view = self.view

local contentW = display.contentWidth
local contentH = display.contentHeight

– Force h to be even
if math.mod( h, 2 )~= 0 then
h = h + 1
end

– view group is at the center of the content bounds
local wNew = 0.5*(contentW - w)
local hNew = 0.5*(contentH - h)

local xNew = 0.5*(w + wNew)
local yNew = 0.5*(h + hNew)

if animate then
transition.to( view.top, { width=contentW, height=hNew, x=0, y=-yNew } )
transition.to( view.bottom, { width=contentW, height=hNew, x=0, y=yNew } )
else
local top = view.top
top.width = contentW
top.height = hNew
top.x = 0
top.y = -yNew

local bottom = view.bottom
bottom.width = contentW
bottom.height = hNew
bottom.x = 0
bottom.y = yNew
end

if animate then
transition.to( view.left, { width=wNew, height=h, x=-xNew, y=0 } )
transition.to( view.right, { width=wNew, height=h, x=xNew, y=0 } )
else
local left = view.left
left.width = wNew
left.height = h
left.x = -xNew
left.y = 0

local right = view.right
right.width = wNew
right.height = h
right.x = xNew
right.y = 0
end
end

function Frame:setColor( … )
local view = self.view
view.top:setFillColor( … )
view.bottom:setFillColor( … )
view.left:setFillColor( … )
view.right:setFillColor( … )
end


local Reader = Object:new()

– reader:initialize( basename [, startPage] )
function Reader:initialize( basename, data, startPage )
local contentWidth = display.contentWidth
local contentHeight = display.contentHeight

self.basename = basename
self.data = data

local view = display.newGroup()
self.view = view
view:translate( 0.5*contentWidth, 0.5*contentHeight )

local fullscreenRect = display.newRect( 0, 0, contentWidth, contentHeight )
fullscreenRect.isHitTestable = true
fullscreenRect:setFillColor( 0,0,0 )
fullscreenRect.isVisible = false
fullscreenRect:addEventListener( “tap”, self )
view:insert( fullscreenRect, true )

self.screenW = contentWidth
self.screenH = contentHeight

local book = display.newGroup()
view:insert( book )

local pages = {}
book.pages = pages

self.book = book

startPage = startPage or 0
self:loadPage( startPage )

local f = Frame:new()
f:initialize()
f:setColor( 0, 0, 0 )
self.frame = f
view:insert( f.view, true )
f.view.alpha = 0
end

function Reader:loadData( basename )
–[[
local datafile = system.pathForFile( basename … “.lua”, system.ResourceDirectory )
local result = dofile( datafile )
return result
–]]

return self.data[basename]
end

function Reader:loadPage( pageNum )
local book = self.book
local pages = book.pages
local page = pages[pageNum]
if not page then
– lazily load page
local basename = self.basename … pageNum
local data = self:loadData( basename )
print( “1”, basename )

if data then
print( “2” )
page = display.newImage( basename … “.png” )

pages[pageNum] = page – add into array of pages
book:insert( page, true )

page.data = data
page.number = pageNum
end
else
print( “3”, pageNum )
page.alpha = 1
page.xOrigin = 0
page.yOrigin = 0
page.xReference = 0
page.yReference = 0
end
print( “54” )

if ( page ) then
page.index = 0 – init to 0 which means viewing the entire page
book.current = page
end

return page
end

function Reader:nextFrame()
local page = self.book.current
local index = page.index + 1
if ( self:showFrame( index ) ) then
page.index = index
else
– Show entire next page
– TODO: make it an option that it goes directly to next frame on next page
index = 0

local newPage = self:loadPage( page.number + 1 )
if newPage then
self:showFrame( index )
else
newPage = self:loadPage( 0 ) – load cover
self:showFrame( 0 ) – hide frame
end

transition.to( page, { alpha = 0 } )
transition.from( newPage, { alpha = 0 } )
newPage.index = index
end

return true
end

function Reader:calculateScale()
end

function Reader:showFrame( index )
local result = true

local page = self.book.current
local data = page.data

if ( 0 >= index ) then
transition.to( self.frame.view, { alpha = 0 } )

elseif ( index <= #data ) then
local elem = data[index]
local x,y,w,h = unpack( elem, 1, 4 )

local pageAspect = w / h
local screenAspect = self.screenW / self.screenH
print( pageAspect, screenAspect )

local zoomWidth = ( screenAspect < pageAspect )
local scale = zoomWidth and (self.screenW / w) or (self.screenH / h)

local f = self.frame
f.view.alpha = 1

local firstFrame = ( 0 == page.index )

if zoomWidth then
scale = scale *0.75
f:setBounds( scale*w, scale*h, not firstFrame )
else
f:setBounds( scale*w, scale*h, not firstFrame )
end

if firstFrame then
transition.from( f.view, { alpha = 0 } )
end

local wPage = page.width
local hPage = page.height

local xCenter = x + 0.5*w
local yCenter = y + 0.5*h
local xNew = 0.5*wPage - xCenter
local yNew = 0.5*hPage - yCenter
–print( xCenter, yCenter, 0.5*page.width, 0.5*page.height, xNew, yNew, scale )

local xRef = (xCenter-0.5*wPage)
local yRef = (yCenter-0.5*hPage)

–[[
print( xNew,yNew,xRef,yRef,scale )

function dump()
print( page.x, page.y,page.xReference,page.yReference,page.xScale,page.yScale )
end

if false then
page.xReference=xRef
page.yReference=yRef
page.xScale=scale
page.yScale=scale
dump()
else
transition.to( page, { xOrigin=xNew, yOrigin=yNew, xReference=xRef, yReference=yRef, xScale=scale, yScale=scale, onComplete=dump } )
– transition.to( page, { x=xNew, y=yNew } )
end
–]]
transition.to( page, { xOrigin=xNew, yOrigin=yNew, xReference=xRef, yReference=yRef, xScale=scale, yScale=scale } )
else
result = false
end

return result
end

function Reader:tap( event )
self:nextFrame()
return true
end

function Reader:orientation( event )
print( event.delta )
local delta = event.delta
if ( delta ~= 0 ) then
local rotateParams = { rotation=-delta, delta=true }

if ( delta == 90 or delta == -90 ) then
local tmp = self.screenW
self.screenW = self.screenH
self.screenH = tmp
end

transition.to( self.view, rotateParams )
end

end


local reader = Reader:new()
reader:initialize( “Page”, data )
Runtime:addEventListener( “orientation”, reader )

–[[
function pageView:tap( event )
local index = self.current + 1
if ( self:show( index ) ) then
self.current = index
else
print( “last frame on page” )
end

return true
end

function pageView:show( index )
local data = self.data

if ( index <= #data ) then
local elem = data[index]
local x,y,w,h = unpack( elem, 1, 4 )

local f = frame:new()
f:initialize()
f:setBounds( w, h )
f:setColor( 255, 0, 255, 128 )

local page = self[1]
local wPage = page.width
local hPage = page.height

local xCenter = x + 0.5*w
local yCenter = y + 0.5*h
local xNew = 0.5*wPage - xCenter
local yNew = 0.5*hPage - yCenter
–print( xCenter, yCenter, 0.5*page.width, 0.5*page.height, xNew, yNew )

transition.to( page, { x=xNew, y=yNew } )

return true
end

return false
end

pageView.current = 0
pageView:addEventListener( “tap”, pageView )
–]]
–transition.to( frameTop, { width=10 } ) [import]uid: 10083 topic_id: 3058 reply_id: 303058[/import]

Akenaten,

The problem is probably that your images are in a subfolder–the framework currently looks for images in the same folder as your main.lua file. The easy fix is to move your images to the main project folder. Alternatively, you can also modify the Reader:loadPage() method of the framework to look for images in a subfolder. For instance, if your images are located in a subfolder called “assets” then you would change that function to look like this (unrelated code removed):

function Reader:loadPage( pageNum )  
 -- snip  
 page = display.newImage( "assets/" .. basename .. ".png" )  
 -- snip  
end  

Hth,
Tim [import]uid: 8196 topic_id: 3058 reply_id: 8983[/import]

Hi Tim,

Thanks for your reply. I tried what you suggested, both placing the images in the same folder as the main.lua, and the one above. Neither worked. Does the comics app work with the game edition, because that’s what I’m using. I’ve tried placing all of the assets in the same folder as the main.lua, I’ve tried the instruction on the pdf file, I’ve tried many combinations of everything with no luck. Thanks but I need more assistance. I look forward to hearing from you. [import]uid: 10083 topic_id: 3058 reply_id: 9001[/import]

Can you possible upload the Eyes of the Prophet files, or any other working comic book, so I can see what it is I’m doing wrong? Thank you. [import]uid: 10083 topic_id: 3058 reply_id: 9053[/import]

Hi,

The comics framework will work in any version of Corona. Is there any information reported in the terminal window when you run your app in the simulator? The blank screen often means that the app was unable to load one of the images. If so, the terminal would report something like ‘Unable to locate resource Page1.png’. Or if there are any other errors in the terminal those might be useful, as well.

There is an updated Comics SDK in the works that I hope to share shortly. I will ask about releasing the Eyes of the Prophet source. I’m not sure of its copyright status.

Tim [import]uid: 8196 topic_id: 3058 reply_id: 9094[/import]

Hi Tim,

A new SDK would be very welcome. If you have any copyright issues with the Eyes of the Prophet, perhaps even one sample page, that works on iPad, would be great. I have 10 full comic books ready to go, just waiting on something that I can use to see what I did wrong. Here is the report from the Terminal:
The file sandbox for this project is located at the following folder:
(/Users/Mackay/Library/Application Support/Corona Simulator/ComicTest-B50C1313F8F97539DCEB2860605198AE)
1 Page0
54

This is all it outputs. Thanks again! [import]uid: 10083 topic_id: 3058 reply_id: 9186[/import]

Akenaten, I was having the same problem you were and just posted a fix in my comment on this page http://developer.anscamobile.com/code/corona-comics [import]uid: 9905 topic_id: 3058 reply_id: 9366[/import]

I’d also like to find out if there’s a way to use Page png files that are larger than 1024x768 so when we zoom in to a panel, it’s still at full resolution (rather than blurry). I have not yet found a way to load larger images without Corona automatically scaling them to 1024x768 at compile time (at least that’s what I think is happening). (see https://developer.anscamobile.com/forum/2010/10/13/dynamic-content-scaling-problem#comment-9260 ) [import]uid: 9905 topic_id: 3058 reply_id: 9367[/import]

I updated the code on the Comics page with David’s code fix (thanks!) Akenaten, you can either grab the new code from the Comics page or just make the one word change on line 254 in the loadPage() function:

-- Old   
-- local data = self:loadData( basename )  
  
-- New  
 local data = self:loadData( pageNum )  

Tim

[import]uid: 8196 topic_id: 3058 reply_id: 9389[/import]

You’re welcome, Tim! [import]uid: 9905 topic_id: 3058 reply_id: 9393[/import]

Thanks guys! I’ll try out the fix. Take care:) [import]uid: 10083 topic_id: 3058 reply_id: 9425[/import]

I couldn’t make this work either, even with the code correction… is there any way to get a zip file with the whole project in it?
Thanks [import]uid: 10517 topic_id: 3058 reply_id: 10306[/import]

I updated the Corona Comics page with a new ZIP download that includes new authoring guidelines and a completed sample comic. There are a few changes in this version that I hope make it a bit easier to use (mainly refactoring changes). See the updated usage on the download page and the new docs for details.

http://developer.anscamobile.com/code/corona-comics

Let me know if you have any questions/comments.

thanks,
Tim

[import]uid: 8196 topic_id: 3058 reply_id: 10428[/import]

Thanks Tim, it works very well now :slight_smile: Awesome work !!! [import]uid: 10517 topic_id: 3058 reply_id: 10438[/import]

Got some crashes now. The new SDK works flawlessly but it crashes after 20 pages or so. I’ve tried quite a few times, even restarting the iPad. [import]uid: 10083 topic_id: 3058 reply_id: 10698[/import]

@akenaten, thanks for the report. It could be we need to be smarter about memory management, unloading images when possible. I will take a look and see if I can reproduce.

thanks
Tim [import]uid: 8196 topic_id: 3058 reply_id: 10921[/import]

Regarding my comment above about images larger than 1024x768, I found a workaround, but I’d rather be able to use full 2048x2048 images:
http://developer.anscamobile.com/forum/2010/10/28/images-over-1024x876-not-working-ipad#comment-10849

Also, Tim, did you see my questions/bug reports on the Comic download page?
https://developer.anscamobile.com/comics#comment-10646 [import]uid: 9905 topic_id: 3058 reply_id: 10924[/import]