Saturday, February 15, 2014

Step 3

Week 3 (February 12-19) — Events


To deliver:


  • Create a menu for the app to touch and start
  • Select text within the story to have text boxes pop up

This week's summary:


I changed a little from making draggable objects to creating a scroll view.  It was a more applicable to the app I'm creating.  This week I felt very successful!  My app is actually beginning to look like my mock-up.  I did not, however link my menu page to my main page as I had planned.

What I learned:

  • How to position text on the display
  • How to make text scrollable (I would like a little more explanation on this)

Definitions of terms:


  • widget - I think it's a little like a function.  It tells my code to react a certain way when an event happens

Some great resources:



  • http://forums.coronalabs.com/topic/34784-scrollview-and-background-image/
  • http://stackoverflow.com/questions/8651591/what-sizes-of-images-do-i-need-for-background-and-sprites-in-corona-to-support-a
  • http://stackoverflow.com/questions/19153695/background-image-size-for-all-device-in-corona
  • http://stackoverflow.com/questions/12908215/scrolling-text-without-white-background-corona-sdk
  • http://www.youtube.com/watch?v=FrS8P_cx9F8

Questions/concerns/problems to come back to:


  • Why do I need the multipliers on the background image?
  • Should I change the multipliers because I'm using an iPad instead of iPhone?
  • Why can't the padding come after all the text is finished on the bottom?
  • My background now looks terrible compared with what it looked like before after I've added the scroll
  • For the text on the title page, is there a way to center the text?
  • Why is the location of an image not within the parenthesis?

Functioning code so far:



Main page


local background = display.newImage( "background.png" )
background.x = 160; background.y = 195

   local xMultiplier = display.contentWidth/320  
   local yMultiplier = display.contentHeight/480
   --[[ I used 320 here because i'm using iPhone Simulator 
        (320 is the width of the simulator you are coding in)
        I used 480 here because i'm using iPhone Simulator 
        (480 is the height of the simulator you are coding in)--]]


        --shoud I change these numbers because I'm using an iPad instead of iPhone?

   local background = display.newImageRect("background.png",320*xMultiplier,480*yMultiplier)
   background.x = 160*xMultiplier ; background.y = 240*yMultiplier




-- I got this code from https://docs.coronalabs.com/api/library/widget/newScrollView.html.  The only issue is can't get it to display the background image I want
local widget = require( "widget" )

-- ScrollView listener
local function scrollListener( event )

    local phase = event.phase
    if ( phase == "began" ) then print( "Scroll view was touched" )
    elseif ( phase == "moved" ) then print( "Scroll view was moved" )
    elseif ( phase == "ended" ) then print( "Scroll view was released" )
    end

    -- In the event a scroll limit is reached...
    if ( event.limitReached ) then
        if ( event.direction == "up" ) then print( "Reached top limit" )
        elseif ( event.direction == "down" ) then print( "Reached bottom limit" )
        elseif ( event.direction == "left" ) then print( "Reached left limit" )
        elseif ( event.direction == "right" ) then print( "Reached right limit" )
        end
    end

    return true
end

-- Create the widget
local scrollView = widget.newScrollView
{
    top = 0,
    left = 0,
    width = display.contentWidth,
    height = display.contentHeight, --why can't the padding come after all the text is finsihed on the bottom?
     topPadding = 50,
     bottomPadding=50,
    horizontalScrollDisabled = true,
    verticalScrollDisabled = false,
    listener = scrollListener,
    hideBackground = true -- my background now lookds terrible compared with what it looked like before
}



local storyText = {
{ p1Text = "There were once five-and-twenty tin soldiers, all brothers, for all had been made out of one old tin spoon. They carried muskets in their arms and held themselves very upright, and their uniforms were red and blue. The first words they heard in this world were, 'Tin soldiers!' It was a little boy who uttered them, when the lid was taken off the box where they lay; and he clapped his hands with delight. They had been given to him because it was his birthday. Then he set them out on the table. ", 
xLocation = 400, yLocation = 150, width = 650, height = 0, font = "Georgia",}, -- if height is 0 it will automaticcally adjust
  { p2Text = "The soldiers were like each other to a hair; all but one, who had only one leg, because he had been made last, when there was not quite enough tin left. He stood as firmly, however, upon his one leg as the others did upon their two, and it is this one-legged tin soldier's fortunes that seem to us worthy of being told.",
    xLocation = 400, yLocation = 240, width = 650, height = 0, font = "Georgia",},
    { p3Text = "On the table where the tin soldiers stood there were other playthings, but the most charming of them all was a pretty pasteboard castle. Through its little windows one could look into the rooms. In front of the castle stood some tiny trees, clustering round a little mirror intended to represent a lake. Some waxen swans swam on the lake and were reflected in it.",
    xLocation = 400, yLocation = 310, width = 650, height = 0, font = "Georgia",},
    { p4Text = "All this was very pretty, but prettiest of all was a little lady standing in the open doorway of the castle. She, too, was cut out of pasteboard, but she had on a frock of the softest muslin, and a narrow sky-blue riband was flung across her shoulders like a scarf, and in the middle of this scarf was set a glittering tinsel rose. The little lady was a dancer, and she stretched out both her arms, and raised one of her  legs so high in the air that the tin soldier could not see it, and thought she had, like himself, only one leg.",
    xLocation = 400, yLocation = 400, width = 650, height = 0, font = "Georgia",},
    { p5Text = "'That would be just the wife for me,' thought he, 'but then she is of too high a rank. She lives in a castle, and I have only a box, and even that is not my own, for all our five-and-twenty men live in it; so it is no place for her. Still, I must make her acquaintance.' Then he laid himself down at full length behind a snuff-box that stood on the table so that  he had a full view of the delicate little lady still standing on one leg without losing her balance.",
    xLocation = 400, yLocation = 495, width = 650, height = 0, font = "Georgia",},
    { p6Text = "When evening came, all the other tin soldiers were put into the box, and  the people of the house went to bed. Then the playthings began to have their own games, to pay visits, fight battles and to give balls. The tin soldiers rattled in the box, for they wished to play too, but the lid would not open. The nut-crackers cut capers, and the slate-pencil danced about on the table. There was such a noise that the canary woke up and began to talk too, but he always talked in verse. The only two who did not move from their places were the tin soldier and the dancer. She remained standing on the very tip of her toes, with outstretched arms, and he stood just as firmly on his one leg, never for a moment taking his eyes off her.",
    xLocation = 400, yLocation = 610, width = 650, height = 0, font = "Georgia",},
    { p7Text = "Twelve o'clock struck, and with a crash the lid of the snuff-box sprang open­ there was no snuff in it, it was only a toy puzzle- and out jumped a little black conjurer. 'Tin soldier!' said the conjurer, 'please keep your eyes to yourself!'",
    xLocation = 400, yLocation = 725, width = 650, height = 0, font = "Georgia",},
    { p8Text = "But the tin soldier pretended not to hear.",
    xLocation = 400, yLocation = 775, width = 650, height = 0, font = "Georgia",},
    { p9Text = "'Well, just wait till tomorrow!' said the conjurer.",
    xLocation = 400, yLocation = 795, width = 650, height = 0, font = "Georgia",},
    { p10Text = "When the children got up next morning the tin soldier was placed on the window­ ledge, and, whether the conjurer or the wind caused it, all at once the window flew open and out fell the tin soldier head foremost, from the third storey to the ground. It was a dreadful fall, for he fell head first into the street, and at last rested with his cap and bayonet between two paving-stones, and with his one leg in the air.",
    xLocation = 400, yLocation = 845, width = 650, height = 0, font = "Georgia",},
    { p11Text = "The servant-maid and the little boy came downstairs directly to look for him; but though they very nearly trod on him they could not see him. If the tin soldier had but called out, 'Here I am!' they might easily have found him, but he thought it would not be becoming for him to cry out, as he was in uniform.",
    xLocation = 400, yLocation = 945, width = 650, height = 0, font = "Georgia",},
    { p12Text = "Presently it began to rain; soon the drops were falling thicker, and there was a perfect downpour. When it was over, two little street arabs came by.",
    xLocation = 400, yLocation = 1045, width = 650, height = 0, font = "Georgia",},
    { p13Text = "'Look,' said one, 'there is a tin soldier. Let him have a sail for once in his life.' ",
    xLocation = 400, yLocation = 1145, width = 650, height = 0, font = "Georgia",},
    { p14Text = "So they made a boat out of newspaper, and put the soldier into it. Away he sailed down the gutter, both the boys running along by the side of it and clapping their hands. The paper boat rocked to and fro, and every now and then was whirled round so quickly that the tin soldier became quite giddy. Still he did not move a muscle but looked straight before him, and held his musket tightly clasped.",
    xLocation = 400, yLocation = 1245, width = 650, height = 0, font = "Georgia",},
    { p15Text = "All at once the boat was carried into a long drain, where the tin soldier found it as dark as in his own box.",
    xLocation = 400, yLocation = 1345, width = 650, height = 0, font = "Georgia",},
    { p16Text = "'Where can I be going now?' thought he. 'It is all that conjurer's doing. Ah! if only the little maiden were sailing with me I would not mind its being twice as dark.'",
    xLocation = 400, yLocation = 1445, width = 650, height = 0, font = "Georgia",},
    { p17Text = "Just then a great water-rat that lived in the drain darted out. 'Have you a pass­ port?' asked the rat. 'Show me your passport!' But the tin soldier was silent, and held his musket tighter than ever. The boat sailed on, and the rat followed. How he gnashed his teeth, and cried out to the sticks and the straws: 'Stop him, stop him, he has not paid the toll; he has not even shown his passport.' But the stream grew stronger and stronger. The tin soldier could already catch a glimpse of the daylight where the tunnel ended, but at the same time he heard a roaring noise that might have made the boldest tremble. Where the tunnel ended, the water of the gutter fell into a great canal. This was as dangerous for the tin soldier as a waterfall would be for us.",
    xLocation = 400, yLocation = 1545, width = 650, height = 0, font = "Georgia",},
    { p18Text = "The fall was now so close that he could no longer stand upright. The boat darted forward; the poor tin soldier  held himself as stiffly as possible, so that  no one could accuse him of having even blinked. The boat spun round three or four times, and was filled with water to the brim; it must sink now.",
    xLocation = 400, yLocation = 1645, width = 650, height = 0, font = "Georgia",},
    { p19Text = "The tin soldier stood up to his neck in water, but deeper and deeper sank the boat, and softer and softer grew the paper till the water stood over the soldier's head. He thought of the pretty little dancer whom he should  never see again, and these words rang in his ears:",
    xLocation = 400, yLocation = 1745, width = 650, height = 0, font = "Georgia",},
    { p20Text = "'Fare on, thou soldier brave! Life must end in the grave.'",
    xLocation = 400, yLocation = 1845, width = 650, height = 0, font = "Georgia",},
    { p21Text = "The paper now split in two, and the tin soldier fell through the rent and was at once swallowed up by a large fish. Oh, how dark it was! darker even than in the tunnel and  much  narrower too! But the tin soldier was as constant as ever and lay there at full length, still shouldering his arms.",
    xLocation = 400, yLocation = 1945, width = 650, height = 0, font = "Georgia",},
    { p22Text = "The fish swam to and fro, and made the strangest movements, came quite still. After a while a flash of lightning seemed  to dart through him  and the daylight shone brightly, and someone cried out, I declare, here is the tin soldier!' The fish had been caught, taken to the market, sold, and brought into the kitchen, where the servant-girl was cutting him up with a large knife. She seized the tin soldier by the middle with two of her fingers, and took him into the parlour, where everyone was eager to see the wonderful man who had travelled in the maw of a fish. But the tin soldier was not proud.",
    xLocation = 400, yLocation = 2075, width = 650, height = 0, font = "Georgia",},
    { p23Text = "They set him on the table, and-what strange things do happen in the world!--­ the tin soldier was in the very room in which he had been before. He saw the same children, the same playthings on the table-among them the beautiful castle with the pretty little dancing maiden, who was still standing upon one leg while she held the other high in the air; she too was constant. It quite touched the tin soldier; he could have found it in his heart to weep tin tears, but such weakness would have been un­ becoming in a soldier. He looked  at her and she looked  at him, but  neither spoke a word.",
    xLocation = 400, yLocation = 2200, width = 650, height = 0, font = "Georgia",},
    { p24Text = "And now one of the boys took the soldier and threw him into the stove. He gave no reason for doing so, but no doubt it was the fault of the conjurer in the snuff-box.",
    xLocation = 400, yLocation = 2300, width = 650, height = 0, font = "Georgia",},
    { p25Text = "The tin soldier now stood in a blaze of light. He felt extremely hot, but whether from the fire or from the flames of love he did not know. He had entirely lost his colour. Whether this was the result of his travels, or the effect of strong feeling, I know not. He looked at the little lady, and she looked at him, and he felt that he was melting, but, constant  as ever, he still stood shouldering his arms. A door opened, and the draught caught the dancer, and, like a sylph, she flew straightway into the stove, to the tin soldier. Instantly she was in a blaze and was gone. The soldier was melted and dripped down among the ashes, and when the maid cleaned out the fireplace the next day she found his remains in the shape of a little tin heart. Of the dancer all that was left was the tinsel rose, and that was burnt as black as of coal.",
    xLocation = 400, yLocation = 2400, width = 650, height = 0, font = "Georgia",}
}


--the following code will display the story text and allow the text to scroll

local paragraph1Object = display.newText(storyText[1].p1Text, storyText[1].xLocation, storyText[1].yLocation, storyText[1].width, storyText[1].height, storyText[1].font)
paragraph1Object:setFillColor(.169,.169,.169) 
paragraph1Object.x = display.contentCenterX
scrollView:insert( paragraph1Object)

local paragraph2Object = display.newText(storyText[2].p2Text, storyText[2].xLocation, storyText[2].yLocation, storyText[2].width, storyText[2].height, storyText[2].font)
paragraph2Object:setFillColor(.169,.169,.169) 
paragraph2Object.x = display.contentCenterX
scrollView:insert( paragraph2Object)

local paragraph3Object = display.newText(storyText[3].p3Text, storyText[3].xLocation, storyText[3].yLocation, storyText[3].width, storyText[3].height, storyText[3].font)
paragraph3Object:setFillColor(.169,.169,.169)
paragraph3Object.x = display.contentCenterX
scrollView:insert( paragraph3Object)

local paragraph4Object = display.newText(storyText[4].p4Text, storyText[4].xLocation, storyText[4].yLocation, storyText[4].width, storyText[4].height, storyText[4].font)
paragraph4Object:setFillColor(.169,.169,.169)
paragraph4Object.x = display.contentCenterX
scrollView:insert( paragraph4Object)

local paragraph5Object = display.newText(storyText[5].p5Text, storyText[5].xLocation, storyText[5].yLocation, storyText[5].width, storyText[5].height, storyText[5].font)
paragraph5Object:setFillColor(.169,.169,.169)
paragraph5Object.x = display.contentCenterX
scrollView:insert( paragraph5Object)

local paragraph6Object = display.newText(storyText[6].p6Text, storyText[6].xLocation, storyText[6].yLocation, storyText[6].width, storyText[6].height, storyText[6].font)
paragraph6Object:setFillColor(.169,.169,.169)
paragraph6Object.x = display.contentCenterX
scrollView:insert( paragraph6Object)

local paragraph7Object = display.newText(storyText[7].p7Text, storyText[7].xLocation, storyText[7].yLocation, storyText[7].width, storyText[7].height, storyText[7].font)
paragraph7Object:setFillColor(.169,.169,.169)
paragraph7Object.x = display.contentCenterX
scrollView:insert( paragraph7Object)

local paragraph8Object = display.newText(storyText[8].p8Text, storyText[8].xLocation, storyText[8].yLocation, storyText[8].width, storyText[8].height, storyText[8].font)
paragraph8Object:setFillColor(.169,.169,.169)
paragraph8Object.x = display.contentCenterX
scrollView:insert( paragraph8Object)

local paragraph9Object = display.newText(storyText[9].p9Text, storyText[9].xLocation, storyText[9].yLocation, storyText[9].width, storyText[9].height, storyText[9].font)
paragraph9Object:setFillColor(.169,.169,.169)
paragraph9Object.x = display.contentCenterX
scrollView:insert( paragraph9Object)

local paragraph10Object = display.newText(storyText[10].p10Text, storyText[10].xLocation, storyText[10].yLocation, storyText[10].width, storyText[10].height, storyText[10].font)
paragraph10Object:setFillColor(.169,.169,.169)
paragraph10Object.x = display.contentCenterX
scrollView:insert( paragraph10Object)

local paragraph11Object = display.newText(storyText[11].p11Text, storyText[11].xLocation, storyText[11].yLocation, storyText[11].width, storyText[11].height, storyText[11].font)
paragraph11Object:setFillColor(.169,.169,.169)
paragraph11Object.x = display.contentCenterX
scrollView:insert( paragraph11Object)

local paragraph12Object = display.newText(storyText[12].p12Text, storyText[12].xLocation, storyText[12].yLocation, storyText[12].width, storyText[12].height, storyText[12].font)
paragraph12Object:setFillColor(.169,.169,.169)
paragraph12Object.x = display.contentCenterX
scrollView:insert( paragraph12Object)

local paragraph13Object = display.newText(storyText[13].p13Text, storyText[13].xLocation, storyText[13].yLocation, storyText[13].width, storyText[13].height, storyText[13].font)
paragraph13Object:setFillColor(.169,.169,.169)
paragraph13Object.x = display.contentCenterX
scrollView:insert( paragraph13Object)

local paragraph14Object = display.newText(storyText[14].p14Text, storyText[14].xLocation, storyText[14].yLocation, storyText[14].width, storyText[14].height, storyText[14].font)
paragraph14Object:setFillColor(.169,.169,.169)
paragraph14Object.x = display.contentCenterX
scrollView:insert( paragraph14Object)

local paragraph15Object = display.newText(storyText[15].p15Text, storyText[15].xLocation, storyText[15].yLocation, storyText[15].width, storyText[15].height, storyText[15].font)
paragraph15Object:setFillColor(.169,.169,.169)
paragraph15Object.x = display.contentCenterX
scrollView:insert( paragraph15Object)

local paragraph16Object = display.newText(storyText[16].p16Text, storyText[16].xLocation, storyText[16].yLocation, storyText[16].width, storyText[16].height, storyText[16].font)
paragraph16Object:setFillColor(.169,.169,.169)
paragraph16Object.x = display.contentCenterX
scrollView:insert( paragraph16Object)

local paragraph17Object = display.newText(storyText[17].p17Text, storyText[17].xLocation, storyText[17].yLocation, storyText[17].width, storyText[17].height, storyText[17].font)
paragraph17Object:setFillColor(.169,.169,.169)
paragraph17Object.x = display.contentCenterX
scrollView:insert( paragraph17Object)

local paragraph18Object = display.newText(storyText[18].p18Text, storyText[18].xLocation, storyText[18].yLocation, storyText[18].width, storyText[18].height, storyText[18].font)
paragraph18Object:setFillColor(.169,.169,.169)
paragraph18Object.x = display.contentCenterX
scrollView:insert( paragraph18Object)

local paragraph19Object = display.newText(storyText[19].p19Text, storyText[19].xLocation, storyText[19].yLocation, storyText[19].width, storyText[19].height, storyText[19].font)
paragraph19Object:setFillColor(.169,.169,.169)
paragraph19Object.x = display.contentCenterX
scrollView:insert( paragraph19Object)

local paragraph20Object = display.newText(storyText[20].p20Text, storyText[20].xLocation, storyText[20].yLocation, storyText[20].width, storyText[20].height, storyText[20].font)
paragraph20Object:setFillColor(.169,.169,.169)
paragraph20Object.x = display.contentCenterX
scrollView:insert( paragraph20Object)

local paragraph21Object = display.newText(storyText[21].p21Text, storyText[21].xLocation, storyText[21].yLocation, storyText[21].width, storyText[21].height, storyText[21].font)
paragraph21Object:setFillColor(.169,.169,.169)
paragraph21Object.x = display.contentCenterX
scrollView:insert( paragraph21Object)

local paragraph22Object = display.newText(storyText[22].p22Text, storyText[22].xLocation, storyText[22].yLocation, storyText[22].width, storyText[22].height, storyText[22].font)
paragraph22Object:setFillColor(.169,.169,.169)
paragraph22Object.x = display.contentCenterX
scrollView:insert( paragraph22Object)

local paragraph23Object = display.newText(storyText[23].p23Text, storyText[23].xLocation, storyText[23].yLocation, storyText[23].width, storyText[23].height, storyText[23].font)
paragraph23Object:setFillColor(.169,.169,.169)
paragraph23Object.x = display.contentCenterX
scrollView:insert( paragraph23Object)

local paragraph24Object = display.newText(storyText[24].p24Text, storyText[24].xLocation, storyText[24].yLocation, storyText[24].width, storyText[24].height, storyText[24].font)
paragraph24Object:setFillColor(.169,.169,.169)
paragraph24Object.x = display.contentCenterX
scrollView:insert( paragraph24Object)

local paragraph25Object = display.newText(storyText[25].p25Text, storyText[25].xLocation, storyText[25].yLocation, storyText[25].width, storyText[25].height, storyText[25].font)
paragraph25Object:setFillColor(.169,.169,.169)
paragraph25Object.x = display.contentCenterX
scrollView:insert( paragraph25Object)




Menu page





--background image
local menuBackground = display.newImage( "menu-background.png" )
menuBackground.x = 160; menuBackground.y = 195

local xMultiplier = display.contentWidth/320  
local yMultiplier = display.contentHeight/480
   --[[ I used 320 here because i'm using iPhone Simulator 
        (320 is the width of the simulator you are coding in)
        I used 480 here because i'm using iPhone Simulator 
        (480 is the height of the simulator you are coding in)--]]


        --shoud I change these numbers because I'm using an iPad instead of iPhone?

local menuBackground = display.newImageRect("menu-background.png",320*xMultiplier,480*yMultiplier)
   menuBackground.x = 160*xMultiplier ; menuBackground.y = 240*yMultiplier




--title text (is there a way to center the text?)
local fairyTales = display.newText("FAIRY TALES",560,200, 1000, 0, "Georgia", 105)
fairyTales:setFillColor(.255,.153,.102)

local hcAndersen = display.newText("HANS CHRISTIAN ANDERSEN",560,275, 600, 0, "Georgia", 20)
hcAndersen:setFillColor(.169,.169,.169)

local title = display.newText("THE CONSTANT TIN SOLDIER",560,450, 700, 0, "Georgia", 25)
title:setFillColor(.169,.169,.169)

local readToMe = display.newText("READ TO ME", 210, 750, 150, 0, "Georgia", 25)
readToMe:setFillColor(.169,.169,.169)

local readByMyself = display.newText("READ BY MYSELF", 580, 750, 200, 0, "Georgia", 25)
readByMyself:setFillColor(.169,.169,.169)

local menuSoldier = display.newImage ("menu-soldier.png", true) --true says to display at full resolution
menuSoldier.x = 395; menuSoldier.y = 750 -- why is this location not within the paranthesis?
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)