Jul 102011
 

This tutorial explains how to use a scrolling background in your iPhone application.

This section of code is for those of you who want to use a background in a portrait application. (The background will scroll upwards.)

Take the following code and place it into your app;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
local paper = display.newImage("paper.png")
paper:setReferencePoint(display.CenterLeftReferencePoint)
paper.x = 0
paper.y = 0

local paper2 = display.newImage("paper.png")
paper2:setReferencePoint(display.CenterLeftReferencePoint)
paper2.x = 0
paper2.y = 480

local tPrevious = system.getTimer()
local function move(event)
local tDelta = event.time - tPrevious
tPrevious = event.time

local yOffset = ( 0.15 * tDelta )

paper.y = paper.y - yOffset
paper2.y = paper2.y - yOffset

if (paper.y + paper.contentHeight-240) < 0 then
paper:translate( 0, 480 * 2)
end
if (paper2.y + paper2.contentHeight-240) < 0 then
paper2:translate(0, 480 * 2)
end
end
Runtime:addEventListener( "enterFrame", move )

It’s that simple!

Just make sure you have two images (or one you want to repeat) in your application’s project folder that are 480 high. (Width is unimportant although you’d normally use 320 for a standard background.)

Change “paper” to your own file names and you’re good to go!

Enjoy!

I will be posting more tutorials for scrolling backgrounds this week including how to scroll a portrait background downwards, a landscape from the left and a landscape from the right.

Peach Pellen :)

Like this post? Subscribe to the monthly newsletter!

 

  19 Responses to “How To Use A Scrolling Background – Portrait/Up”

  1. [...] This tutorial will let you add a scrolling background to your portrait app, which will scroll downward. (For and upward scrolling background, see last week’s tutorial.) [...]

  2. That’s not Scroll Background!! is only a transition of the Background.

    Scroll Background background is moving in any direction, with a touch event, for example.
    something like slide show, but without the black spaces in between.

    you have something like that???

    forgiveness for my iingles.

    Greetings.

  3. lmao I am sorry!!

  4. Yes, but jesus, don’t post it! You don’t put your email online as a link, you get added to spam lists. XD

    That’s my email though, yes, you got it right.

  5. ok, that sounds great! I will email *REMOVED*

    is that right?

  6. Hey Kurt,

    Ah, geeze, I don’t know :S This is working fine for me with those same settings on iPhone and iPhone4.

    I haven’t used Lion admittedly but I can’t see that making a difference.

    As a free user you’ll be on 2011.591 if you downloaded in the past few weeks.

    I seriously don’t know. Maybe you could zip your project file exactly as it is and email it to me? peach pellen at gma!1 com. No spaces, etc.

    I’ll check it out.

  7. settings = {
    orientation =
    {
    default = “portrait”,
    },
    iphone =
    {
    plist=
    {
    UIStatusBarHidden=true,
    UIApplicationExitsOnSuspend = true,
    UIPrerenderedIcon = true
    },
    },
    }

    that is my build.settings =)

    and I am using a mac os lion macbook air 13inch with an i5 and 4gb ram

    and my version is idk haha, but I just downloaded it like 3 days ago haha i am quite a newb.

    -Thanks for alll your help again, please get back to me on what you know!

  8. Just tested this and it actually works fine with those config settings. (iPhone4 and iPhone3GS)

    It shouldn’t make a difference but can you show me your build.settings code please?

    Also, you haven’t told me what version of Corona you are using. Testing on .591 with those config, main.lua containing only the above code, paper.png (height 480, width 320) and build.settings as;

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    settings = {
        orientation =
        {
            default = "portrait",
        },
        iphone =
        {
            plist=
            {
                UIStatusBarHidden=true,
                UIApplicationExitsOnSuspend = true,
                UIPrerenderedIcon = true
            },
        },
    }

    Everything works smoothly for me.

    So if you still have issues, please let me know Corona version number and what machine you’re on, just OOI :)

    Peach

  9. application =
    {
    content =
    {
    width = 320,
    height = 480,
    scale = “zoomEven”
    }
    }

    That is how my config.lua is setup

  10. Hey Kurt,

    Still here – about to run off.

    This is the case with ALL apps if your config.lua isn’t set up correctly; are you using a config.lua? Make sure the width is set to 320 and the height to 480. Try setting the scale to zoomEven. That should see it work fine. Let me know, though :)

    I THINK you can test on your iPhone if you have the Apple Developer license even if you are on the free version; it just pops up a note on your phone reminding you it’s the trial, so that no one can publish with it ;) (Have you got a paid dev account yet?)

    As to the donation, I greatly appreciate all donations however don’t stress it too much ;) When people appreciate what I do I never feel badly if they can’t donate.

    Peach :)

  11. Hay thanks for your quick response! I did end up getting it to work =). But I have a new problem with it. It seems to only work for the iPhone regular, not the 4. If I try to run it in the iPhone 4 window, my blue background fills up half the screen and the bottom half of that scrolls up and then when it reaches the top half it resets and starts scrolling back up again. I know that’s kind of a weird explanation, ahha but it’s a weird error =). Also another side question, I am currently only using the free version of Corona (I do plan to buy the paid ) Although I am just trying it out first. Anyways I want to test the app on my iPhone, is it possible to, if so is there a link to how i do so. =) Thanks a bunch and I promise a donation, just waiting for the bank transfer to paypal =)

  12. Hey Kurt,

    What errors are printing in the simulator? Can you copy/paste them here, please?

    Also, just in case, what version of Corona are you currently using?

    Have to go out shortly but will be back in a couple of hours and will keep an eye out for a response – I’m sure I can help you out :)

    Peach

    PS – Thanks for the kind words, most appreciated!

  13. hay Peach!! I have been doing all of your tutorials, and I really love them! They work great, I plan to donate of course. Although I have problem with this one. I can’t seem to get it to work, I have this pasted in a main.lua folder and I am running it on the emulator, and the screen is black. I put the paper.png in the folder and it’s still black any help would be awesome
    l!!

  14. @AdrianEraldo

    Yes, the Corona SDK Has limitations on image display, I think something like 2048×2048.

    You can get around it by take a very very large image, and slicing in half, or quarters etc.

    You then can either leave the center reference point (default) of the image and base everything on that.

    Or if you have 1 image is 8192×8192, you split into 4 sections.

    I have tackled it one of 2 ways so far.

    1) split into 4 sections, and trial and error with the x and y coordinates

    1) split into 4 sections and use TILED:
    A) first take image width and height, which is 2048 in this example
    B) Choose a tile size that divides evenly into 2048. If you choose 32 then thats = 64, or 16 would be 128
    C) Import the image into your favorite image editor, photoshop, gimp, svg inkscape whatever I dont care
    C1)Draw something like a GIANT LETTER A for the upper left, save as a different file name (for sketching out a level I’ll do map.png (original quartered map) and map1a.png for upper left, map1b for upper right, map1c for lower left and map1d for lower right. Then draw in big ass letters B and C and D for each quadrant of the map. You will use these to reference on screen to see if your positions are spot on or not.

    When you save your image do a save as image, and uncheck the zoom option (otherwise it will print to the exact size you see on screen and not the actual pixel size). Also, I find it helpful if you “Show gridlines” as well.

    Keep in mind this is just for test, and for prototyping.


    *Note* when you are using a sky background, it’s easy to overlap and not notice. So here is what you can do:
    –Draw different border colors for each section (just for testing). like on 1a I’ll do bright blue, and the 1b I’ll do the hot pink, etc. That way when you code your display objects you will have an idea if things are overlapping, if they overlap you will see one color if they have space between them you will see the color line + black + other color line and if they perfect they will be right next to each other ready for a party.

    Then you set the reference point as follows. Using my fancy pants ascii art you could do something like this
    on 1x, you would set reference point for lower right, and 2x for lower left, 3x for upper right, then 4x for upper left.

    1X2X
    3X4X

    Everything on iOS is referenced from the upperleft in either portrait or landscape….this is important to note.

    Then get your config.lua, buildsettings squared away for portrait and if you will allow the screen to rotate etc etc etc, set your fps etc etc.

    Then you start coding (I know, its a long process weeeeeeeeeeee!)

    To get accurate placement, make sure you are aware if you are viewing as iphone4 or iphone 3 in your Corona SDK simulator AND make sure if you are going to use display.newImageRect and the @2x for your images you keep a standard. What will happen is you will have a map that is to big or to small and your mapping of objects will be all screwy!

    Once you get that sorted out, then using tiled count the number of tiles over on X and Y that the image’s center resides. This is tricky so you say something like ok 30 over and 30 down is the center

    x 30×32 = 960
    y 30×32 = 960

    You then code your main.lua to show the object.x = 960 and object.y = 960

    Then you launch and test, then place your second image. Get another part of your quartered image in and see how things line up, otherwise you can’t see where things are placed.

    I’ve done it a couple different ways, set map focus on the player to follow around on screen. Using dpad movement (you can snatch up peach’s tutorial on this) to explore the map.

    After that then it gets REALLY hard to deal with. Once you got your background lined up, now you need to place objects on screen. The upperleft is always easy to deal with since that’s what you see by default, it’s the other things outside of the screen you trial and error on.

    Use tiled to cound tiles to get x and y coordinates I go to google and put make my own graph paper and then print out the exact number of tiles I need then map everything out that way (pen and paper baby!) to map things out.

    Ok, you got a LOT more than you were asking for on large images, but this is how I am doing thigs these days (so far, I may change it up who knows).

    Working out pretty ok so far!

    -Nick

    Then (Yea I know this is a lot) you code some map dragging and put even listeners on things so you can drag your map around.

  15. Dammit! XD

    Thanks for pointing that out; I must have grabbed it from the wrong file >.< ‘ I’ll edit it now – thanks again. Enjoy your pancakes and look forward to seeing your code :) (Although likely not until tomorrow, I should try to sleep while it’s still dark here ;))

    Peach :)

  16. Very cool. I noticed the “object.stageheight” vs object.contentheight errors hehe. Was this a little treasure you have been keeping safe? Hehe, the command is deprecated some time ago so I was just wondering :)

    I was able to take this and randomize the pieces coming from different areas and use multiple size images (3 to be exact) and do them at different speed to make it look like you are floating above them.

    I’ll post code when I get back, it’s pancake / run errands time w00t.

  17. Hey,

    Yeah – I can’t recall the exact limits off hand but I believe it might be > 2000 = fail.

    Breaking it up could work well, you’d just have to modify it to suit the height/number of your images.

    Peach :)

  18. Nice!
    I was wondering if this would work for a bigger bacground. My bkg is 4000 x 1000 and the app crashes if I try to use that image so big. So I guess I could cut it in chunks and then use this code? any thoughts?
    Cheers
    adrianEraldo

 Leave a Reply

(required)

(required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Notify me of followup comments via e-mail. You can also subscribe without commenting.