Jungle Scene/Explanation

Dear All,

I am new to corona sdk and learning through books and corona sample. I was going through the Jungle Scene code and was could not understand some of the codes:

tree[1] = display.newImage( “Palm-arecaceae.png” )

tree[1].xScale = 0.7; tree[1].yScale = 0.7

tree[1].anchorY = BOTTOM_REF

tree[1].x = 20; tree[1].y = baseline

tree[1].dx = 0.1

In the above code, there is some assignment taking places and tree[1].dx=0.1 is also and assignment as well I guess so. Correct me if I am wrong

Similary the for tree 2

tree[2] = display.newImage( “Greenhouse-Palm-jubaea01.png” )

tree[2].xScale = 0.6; tree[2].yScale = 0.6

tree[2].anchorY = BOTTOM_REF

tree[2].x = 120; tree[2].y = baseline

tree[2].dx = 0.2

Till tree 8 there is assigment

As go down the codes there is some loop

for i = 1, #tree, 1 do

tree[i].x = tree[i].x - tree[i].dx * tDelta * 0.2

if (tree[i].x + tree[i].contentWidth) < 0 then

tree[i]:translate( 480 + tree[i].contentWidth * 2, 0 )

end

end

end

Question.

What is the function/use of tree[1].dx  and tree[2].dx play in our code

what does the loop say? I mean how is that loop read

I’ll try and break this all down for you and forgive me if any of this is too elementary.

tree[1] = display.newImage( "Palm-arecaceae.png" ) tree[1].xScale = 0.7; tree[1].yScale = 0.7 tree[1].anchorY = BOTTOM\_REF tree[1].x = 20; tree[1].y = baseline tree[1].dx = 0.1

In this case:  tree is an array/table. You can hold multiple variables in one variable and access them by an index number. If you have 5 trees they can be tree[1], tree[2], etc.

The first line loads in an image named “Palm-arecaceae.png” and puts it on the screen. As a side note, the image is actually a Lua table that’s organized by “Key-Value” pairs. This will become important in a moment. The table holds values like its x and y coordinates on the screen, it’s width and height and can also contain values you want to store with it.

The next line which is really two lines combined on to one shrinks the image to 70% of it’s original size. Apparently the image is too big for the way the author was using it and they are scaling the image to the desired size.  I’m not a fan of combining lines like this in particular for new developers, though it does help make your file not be so long in your editor. Consider this like:

tree[1].xScale = 0.7 tree[1].yScale = 0.7

if it helps you see it better.

The third line involves placement of the image. In Corona, the default .x and .y values are intended to mean “the center of the object”. But some times it’s helpful to position something by it’s left edge or in this case, bottom edge. Objects have two anchor points: .anchorX and .anchorY. The default for both of these is 0.5 and 0.5 the center of a range from 0 to 1 If you change the anchor point, what .x and .y means can change. Here the programmer set the anchor point to a variable called BOTTOM_REF. I would bet in the code you will find a line like:

local BOTTOM_REF = 1

or something similar. Now if you set the .y value to 100, the bottom of the image will be 100 points down the screen.

Next the developer is saying to draw the image centered on 20 points from the left of the screen (.x = 20) and the .y to some value held in a variable named baseline. Again, two lines combined onto one.

Finally the last line in that group:  tree[1].dx = 0.1

.dx is a variable made up by the developer, but as I said below because Corona Objects are Lua tables you can add your own variables (or attributes) to any object as long as it doesn’t share the name with something we use internally.

In math “dx” means “Delta-X” or the change in X over time. In this case, it’s basically how much value to add to the tree[1]'s .x value each time the screen updates.

Now, the block of code:

&nbsp;&nbsp;&nbsp; for i = 1, #tree, 1 do &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; tree[i].x = tree[i].x - tree[i].dx \* tDelta \* 0.2 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (tree[i].x + tree[i].contentWidth) \< 0 then &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; tree[i]:translate( 480 + tree[i].contentWidth \* 2, 0 ) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; end &nbsp;&nbsp;&nbsp; end end

is probably inside of a function. This app executes a function every time the screen updates called an “enterFrame” event. I don’t have the full code in front of me, but I bet you missed a line a few other lines above the for loop. Notice how when indented the code, there is an extra “end” at the end? It probably goes with that function.

So every 30 (or 60) times per second (depending on how the app is set up), this function will execute.

The: for i = 1, #tree do statement will loop over the 8 trees that were added (tree[1], tree[2], etc.)

tree[i].x = tree[i].x - tree[i].dx * tDelta * 0.2 This line will change the position of the tree slightly by subtracting the .dx value you set when you created it from its .x. This gives it the effect of scrolling to the left.  In the lines immediately above it, a value of tDelta was calculated from the interval between frames. While we try to make the frames hit exactly every 1/30th of a second (or 1/60th), depending on the amount of work needed done, the frame update might be a little early or a little late.  The * tDelta * 0.2 is simply adjusting for the lateness of the frame, giving it a more smooth movement.

The next three lines tests to see if the tree is now off-screen and if so, it jumps just off screen to the right of the visible screen so it can scroll back on screen normally.  Then there are “end” statements to balance out each block (if’s are blocks, for’s are blocks, function are also blocks).

Rob

I’ll try and break this all down for you and forgive me if any of this is too elementary.

tree[1] = display.newImage( "Palm-arecaceae.png" ) tree[1].xScale = 0.7; tree[1].yScale = 0.7 tree[1].anchorY = BOTTOM\_REF tree[1].x = 20; tree[1].y = baseline tree[1].dx = 0.1

In this case:  tree is an array/table. You can hold multiple variables in one variable and access them by an index number. If you have 5 trees they can be tree[1], tree[2], etc.

The first line loads in an image named “Palm-arecaceae.png” and puts it on the screen. As a side note, the image is actually a Lua table that’s organized by “Key-Value” pairs. This will become important in a moment. The table holds values like its x and y coordinates on the screen, it’s width and height and can also contain values you want to store with it.

The next line which is really two lines combined on to one shrinks the image to 70% of it’s original size. Apparently the image is too big for the way the author was using it and they are scaling the image to the desired size.  I’m not a fan of combining lines like this in particular for new developers, though it does help make your file not be so long in your editor. Consider this like:

tree[1].xScale = 0.7 tree[1].yScale = 0.7

if it helps you see it better.

The third line involves placement of the image. In Corona, the default .x and .y values are intended to mean “the center of the object”. But some times it’s helpful to position something by it’s left edge or in this case, bottom edge. Objects have two anchor points: .anchorX and .anchorY. The default for both of these is 0.5 and 0.5 the center of a range from 0 to 1 If you change the anchor point, what .x and .y means can change. Here the programmer set the anchor point to a variable called BOTTOM_REF. I would bet in the code you will find a line like:

local BOTTOM_REF = 1

or something similar. Now if you set the .y value to 100, the bottom of the image will be 100 points down the screen.

Next the developer is saying to draw the image centered on 20 points from the left of the screen (.x = 20) and the .y to some value held in a variable named baseline. Again, two lines combined onto one.

Finally the last line in that group:  tree[1].dx = 0.1

.dx is a variable made up by the developer, but as I said below because Corona Objects are Lua tables you can add your own variables (or attributes) to any object as long as it doesn’t share the name with something we use internally.

In math “dx” means “Delta-X” or the change in X over time. In this case, it’s basically how much value to add to the tree[1]'s .x value each time the screen updates.

Now, the block of code:

&nbsp;&nbsp;&nbsp; for i = 1, #tree, 1 do &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; tree[i].x = tree[i].x - tree[i].dx \* tDelta \* 0.2 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (tree[i].x + tree[i].contentWidth) \< 0 then &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; tree[i]:translate( 480 + tree[i].contentWidth \* 2, 0 ) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; end &nbsp;&nbsp;&nbsp; end end

is probably inside of a function. This app executes a function every time the screen updates called an “enterFrame” event. I don’t have the full code in front of me, but I bet you missed a line a few other lines above the for loop. Notice how when indented the code, there is an extra “end” at the end? It probably goes with that function.

So every 30 (or 60) times per second (depending on how the app is set up), this function will execute.

The: for i = 1, #tree do statement will loop over the 8 trees that were added (tree[1], tree[2], etc.)

tree[i].x = tree[i].x - tree[i].dx * tDelta * 0.2 This line will change the position of the tree slightly by subtracting the .dx value you set when you created it from its .x. This gives it the effect of scrolling to the left.  In the lines immediately above it, a value of tDelta was calculated from the interval between frames. While we try to make the frames hit exactly every 1/30th of a second (or 1/60th), depending on the amount of work needed done, the frame update might be a little early or a little late.  The * tDelta * 0.2 is simply adjusting for the lateness of the frame, giving it a more smooth movement.

The next three lines tests to see if the tree is now off-screen and if so, it jumps just off screen to the right of the visible screen so it can scroll back on screen normally.  Then there are “end” statements to balance out each block (if’s are blocks, for’s are blocks, function are also blocks).

Rob