scrolling background, level design

Getting Started Newbie Questions
#1

Hi I this is my first app - I watched an online tutorial and felt fairly confident but I’ve stumbled at the first hurdle. I’d much appreciate a leg-up if anyone’s able to help.

I want to create a side scroller with a background image that scrolls slowly as the character advances to the end, meeting sprites along the way.

The background image is 16384px by 1536px - huge I know, but it’s based on an ipad display height (landscape) and about 8 screens long.

My first questions are:

  1. is this a good idea? I was going to downsize the sprites and background image and use lower resolution images/sprites for smaller screens - but setting those per screen size is an issue for later. I’m starting with best possible quality and trying to get something to work.

Would it be better to cut the image into screen widths and have one appear as the previous one scrolls away?

  1.  I don’t how to put the image on the screen. A lot of tutorials cover endless scrolling but this case is different. Should I use display.newImage, scrollView? How should I handle the scrolling, perhaps transitions.to?

Many thanks for any help - with such a basic question I know.

David.

#2

Hi David, first of all - welcome to the forums :slight_smile:

My very first project was a 2.5D platformer as well - some tasks might be a little bit tough for a beginner, but you are learning basically anything about LUA and Corona SDK through the development process.

So, 1) is this a good idea?

No, I don´t think so. I don´t think that any device is able to show an image of such dimensions. You have to divide it into several pieces and include it in a sprite for example. 

But yes, you need to write some code to handle the background scrolling and the player movement.

Putting an image on the screen is one of the easiest tasks in Corona SDK! :) 

The simplest way to do so is using 

local image = display.newImage("Image.png")

You should check out some very basic tutorials about Corona SDK before you jump into something like this :wink:

But for further help:

Based on your description I believe you do NOT want to create an endless scrolling background? I highly recommend to check out Caleb´s camera module (developer.coronalabs.com/code/perspective)

Too bad you are asking right now for a platformed/jump&run tutorial… I am currently writing a tutorial series about how to make exactly something like this :frowning:

But I need to finish the current project first :mellow:

Coronalabs (formerly knows as Anscamobile) has some old, but still very good, tutorials on it´s youtube channel: http://www.youtube.com/watch?v=W671W0QwgdQ

Max / CineTek

#3

Thank you very much Max that’s really helpful. So am I correct in thinking that I should focus on dynamic scaling and use screen sized images in series to produce a scrolling background - perhaps (if my terminology is correct) add a listener to each to that it calls the next, with the final background image tile signifying the end of the level?

Am I correct in thinking that these background image tiles can be considered as sprites because they move? in that case would you recommend I approach the code along the lines of:

  1. local image = display.newImage(“Image.png”)

as you recommended, or would there be a different method more appropriate for moving sprites? Or is the code above the standard universal method of showing images?

 

Many thanks for your help - I’m looking forward to your tutorial series!

 

David

#4

Well the code above is just the very basic method to draw an image on screen. Did you watch any tutorials e.g. on Youtube yet? :slight_smile:

Max

#5

Thanks Max, yes I’ve watched a couple of series of tutorial videos and I’ve seen the Coronalabs documentation pages - I guess those pages seem so expansive that it’s hard to get a handle on it but got to keep on truckin’ I guess. Thanks for your help, I’ll hit YouTube and hopefully start piecing things together!

David 

#6

Hi David, first of all - welcome to the forums :slight_smile:

My very first project was a 2.5D platformer as well - some tasks might be a little bit tough for a beginner, but you are learning basically anything about LUA and Corona SDK through the development process.

So, 1) is this a good idea?

No, I don´t think so. I don´t think that any device is able to show an image of such dimensions. You have to divide it into several pieces and include it in a sprite for example. 

But yes, you need to write some code to handle the background scrolling and the player movement.

Putting an image on the screen is one of the easiest tasks in Corona SDK! :) 

The simplest way to do so is using 

local image = display.newImage("Image.png")

You should check out some very basic tutorials about Corona SDK before you jump into something like this :wink:

But for further help:

Based on your description I believe you do NOT want to create an endless scrolling background? I highly recommend to check out Caleb´s camera module (developer.coronalabs.com/code/perspective)

Too bad you are asking right now for a platformed/jump&run tutorial… I am currently writing a tutorial series about how to make exactly something like this :frowning:

But I need to finish the current project first :mellow:

Coronalabs (formerly knows as Anscamobile) has some old, but still very good, tutorials on it´s youtube channel: http://www.youtube.com/watch?v=W671W0QwgdQ

Max / CineTek

#7

Thank you very much Max that’s really helpful. So am I correct in thinking that I should focus on dynamic scaling and use screen sized images in series to produce a scrolling background - perhaps (if my terminology is correct) add a listener to each to that it calls the next, with the final background image tile signifying the end of the level?

Am I correct in thinking that these background image tiles can be considered as sprites because they move? in that case would you recommend I approach the code along the lines of:

  1. local image = display.newImage(“Image.png”)

as you recommended, or would there be a different method more appropriate for moving sprites? Or is the code above the standard universal method of showing images?

 

Many thanks for your help - I’m looking forward to your tutorial series!

 

David

#8

Well the code above is just the very basic method to draw an image on screen. Did you watch any tutorials e.g. on Youtube yet? :slight_smile:

Max

#9

Thanks Max, yes I’ve watched a couple of series of tutorial videos and I’ve seen the Coronalabs documentation pages - I guess those pages seem so expansive that it’s hard to get a handle on it but got to keep on truckin’ I guess. Thanks for your help, I’ll hit YouTube and hopefully start piecing things together!

David