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.