This tutorial will show how to move the background while keeping the animated sprite in the same location. The overall effect is of a moving sprite.

This tutorial is in continuation with the tutorial on Moving Sprite which should be completed to have a moving cat  effect.


Click on the icon as shown in following screenshot to choose for a backdrop of your choice


 The following window opens


 find the brick wall and click on it

 and click OK button

 The background will be filled with the brick backdrop

 Click on the Stage Backdrop

and then click on the Backdrop tab

 then right-click on the brick-wall and save it to a location in your computer


 It will be saved as a png file


 Now we will import it as a sprite so click on the icon that says Upload sprite from file


 Select the file that you saved in the previous steps


 This will appear next to the cat icon which shows that it is now a sprite


 Next job is to delete the backdrop. So click on the Backdrop first


 then right-click on the brick-wall and click "Delete"


Some times you may have to use the clear button if the above step does not work


 Now click on the brick-wall sprite


 and we are ready to code

if you set x and y values to 0

You can double click on the blocks while they are in the store and do not have to drag them to the programming stage to make them work

You can drag them there so that it can be used whenever you need them


 Also notice that our cat is hiding behind the wall so we need to send the brick-wall behind the cat.

You need to think of sprites as layers which go on top of one another and you need to bring them forwards or send them back as per requirement

So again just drag that block on the programming screen so that you can use it time and again as per your need


Clicking that a couple of times will make the cat appear in front

At this stage you should have a running cat that is going nowhere! ...haha

Let us make the background move that will give an appearance of the cat actually moving and going somewhere

Actually this is how most games are developed


Let us start by dragging When "Green FLAG" Clicked as shown below. We always start with this as this runs the project.


Get a loop forever block and snap it to the start block. When you bring one block near another block they tend to snap together automatically. So this part should be easy.


 Now Click on "Data" Menu under "Scripts" Tab and then click on the "Make a Variable"


 A new window appears where you need to name the variable. Let us name it is scrollx because we are trying to scroll the background in the x direction.


 So now we have a few more blocks to play with


 Let is first of all use the "Set scrollx to 0" and place it under the start block. This will reset the value of the variable called "scrollx" to 0 when ever we run the program.


 insert a "set x to 0" block as shown below


 then drag the "scrollx" on top of 0 so that "scrollx" snaps in place of "0"


 The whole thing currently looks like as shown below


 right-click on the brick-wall and click on "duplicate"


 One more brick-wall sprite is created


 Click on the newly created brick-wall2 sprite


 You will notice that it has all the code of the other sprite. 


 The whole thing currently looks like as follows. Notice how the new layer has covered our cat 


 just click on the block named "go back 1 layer" couple of times and our cat will reappear as shown below


 drag out the "scrollx" from the code 


 and drop it back into the menu area as shown below. This will remove the scrollx from code. if you wish to remove any part of the code then you follow this process and drag the block back into the menu options area to remove it.


 break the forever block as shown below


Drag it down a little bit before releasing it so that it does not snap back to the same place.


  Now break the "set scrollx to 0" block as shown below.


  drag it back to menu options area to remove it


 Snap the forever block to the start block


  From the "Operators" menu select the first option which has "+" sign and drag it on the number "10" of "set x to 10" block. 


This will replace 10 with this option


Now drag "scrollx" on top of the first empty space before "+" sign



 ...and it will snap in place as shown below


 in the other space type 480. You will wonder from where did we get that value. Well it is the size of the screen/stage in the x direction. You can find the size by hovering your mouse on the extreme ends of the screen. 


 Now click on the sprite named "brick-wall1"


 and let us do some more programming... Drag a new "start" block...


 Drag a "forever " block and snap it to the "start" block


 Now from the "Data" Menu, drag the block named "Change scrollx by 1" and place it as shown. Also change the value "1" to "-1". This will make the background move towards left. 


 Now select the sprite named "brick-wall2"


 and let us do some more programming here ... drag a new "start" block


 drga a "forever" block and snap it to "start" block


 From "Control" Menu, drag a "if" block and snap it in "forever" block


 Now from the "operators" menu, drag a "less than" operation in the "if" conditional block


 place "scrollx" in the first empty space 


 as shown below


 and type -500 in the second block. It is just a value greater than the stage size. with a bit of overlap. you can set it to 480 and it will probably work just fine.

Now place "set scrollx to 0" block inside the "if" block


and that is it.