This tutorial assumes that you have read Ashley's tutorial titled "Beginner's Guide to Construct 2". This tutorial explains how to make a top-down scrolling background which scrolls forever. This screenshot shows the result of this tutorial.
#1. Make a 482x640 png file with black background and random small white dots on it, and save it as "Space01.png"
#2. Make another 482x640 graphic with black background and random small white dots on it and save it as "Space02.png" or flip the first one and save it.
The window size for the game will be 640x480, but these images are 482x640 because we will need to change the angle of these images to 90 so they move downward when we give them bullet behavior. The extra 2 pixels will be useful to overlap the edges of the images so there is no gap in between. I don't know if Construct 2 needs this but it's always a failsafe in any game engine. Also the extra pixels will make sure that these sprites are visible at all times.
#3. Start a "New empty project" in Construct 2.
#4. Click on the area outside the white window to open the "Layout properties" window.
In the picture below the blue cloud shows the spot to click to bring the "Layout properties". Alternatively, in the "Projects" window you can click on Layout.
#5. Change the "Layout Size" to "640, 480" to make it the same size as the game window. This will be use as boundary for sprites such as player's ship and enemy ships.
#6. Insert "Space01.png" as a sprite and in the properties window change its Angle to 90 and Position to 320, 240 which is the coordinate of the center of the game window.
#7. Insert "Space02.png" as a sprite and in the properties window change its Angle to 90 and Position to 320, -241.
The reason we change the angle to 90 is to make these sprites move downward when we give them bullet behavior. By default bullet behavior would make these sprites move left to right.
#8. Give "Sprite" (Space01.png) and "Sprite2" (Space02.png) "Bullet" behaviors and change their speed to 10.
If you run the layout now you will see that the images move down at the speed of 10 but there is nothing to follow the second image so when it scrolls down the screen a white space follows it. To get these images to scroll down one after the other forever we need to setup events so soon as one image leaves the screen we move it back on top of the other one.
#9. In the "Events Sheet 1" add the events shown in the picture below.
If you run the layout now you will have the images scrolling down one after the other forever. These events will move one image on top of the other soon as it leaves the game window. The bottom of the top image overlaps the top of the bottom image by 1 pixel. This way both images will scroll down one after the other forever without having any gaps in between.
Line 1 simply tells the engine that when "Sprite" (Space01.png) is outside layout, move it above "Sprite2" (Space02.png) by setting its Y value to "Sprite2.Y-481". It is important to set the Y value for "Sprite" relative to "Sprite2.Y". In this case it sets the value to "Sprite2.Y-481" which means 481 pixels above "Sprite2". Remember that the size of these sprites is 482x640, and both sprites are rotated 90 degrees. Line 2 does the same thing with the second image.
Add Faster Stars
It's time to bring a little life to our universe. The problem with the above universe is that all the stars are moving at the same speed and it makes it look kind of dead and dull. To make it look a little alive we need to have some stars moving at different speeds. For this, we need two more images with invisible background and random white/gray dots as stars. Make the dots in one image a little bigger than the dots on the other, because the stars closer to the top should look bigger and move faster.
#1. Make a 480x640 image with invisible background and random small white dots, save it as "Stars01.png".
#2. Make another 480x640 image with invisible background and random bigger white dots and save it as "Stars02.png".
This time we don't need to worry about the extra 2 pixels as the background is invisible and we don't have to have the images overlap each other. But we still need to rotate it 90 degrees therefor the size should be 480x640.
#3. Lock Layer0 and add a new layer for stars. Make sure this Layer is selected and that it always stays above Layer0, otherwise Layer0 will cover it and stars on this layer won't be visible.
#4. Insert "Stars01.png" as a sprite and in the properties window change its Angle to 90 and Position to 320, 240. Remember that this file only has a few random white dots so on screen it looks like it's empty but it is not.
#5. Give Sprite3 (Stars01.png) a "Bullet" behavior and change its speed to 15.
#6. Insert "Space02.png" as a sprite, and in the properties window change its Angle to 90 and Position to 320, -240.
#7. Give Sprite4 (Stars02.png) a "Bullet" behavior and change its speed to 20.
#8. In the "Events Sheet 1" add the following events:
If you run the layout now you will have the scrolling down backgrounds with some stars moving at different speeds above it. This makes the background look alive. If you want you can set the X value of the stars to 320 but a little randomness moves their X value to different locations every time. Make sure you don't place the sprites any higher than -240 or else they will be out of layout and their value will keep resetting, which will cause them to stop scrolling.
Add Planets
This universe looks better than the one before, but we can add some planets to it to make it look more alive.
#1. Make a 50x50 image with invisible background and paste a planet of your choice in the center of it, save it as "Planet01.png". You can find pictures of planets on the internet.
#2. Lock Layer1 and unlock Layer0. Make sure Layer0 is selected.
#3. Insert "Planet01.png" as a sprite. This will become "Sprite5".
#4. Change its Angle to 90.
#5. Change its position to 100, -20 or place it anywhere you like.
#6. Give Sprite5 (Planet01.png) "Bullet" behavior and set its speed to 5.
Run the layout and you'll see that the planet is scrolling down in between the stars. If you want another Planet sprite to appear once this one goes off the layout, add the second planet as a sprite to the project and then add something like this to the events.
Destroy Sprite5 once it moves off the screen. You can add a few more planets and a spaceship and your work is done. There are other tutorials that explain how to add a spaceship as a sprite and bound it to the layout.
capx attached.
Resources attached as zip file.