STAY IN TOUCH

and receive our newsletter to get the latest news and tips.


Customize Jetpack Jumper

Add some style to Jetpack Jumper!

Hello! Mission complete! (It is complete, right? If not, get busy! Complete the mission of fixing the broken Jetpack Jumper game! Or, if you want to start with a "mission complete" game, go to http://aka.ms/jetpackcomplete.)
Now, are you ready to add some style to the game? To make it your own by changing the look and feel, or by changing the way the game is played? Let's do it!

Change the look and feel

Let's say that you don't like robots (though that is hard to imagine), or that you don't like cities, or tomatoes, or ...whatever. Well, you're in luck - changing these things in the game is easy. Let's start by changing the background image. (One quick note: If you want general information about art in TouchDevelop games, go to art).

Change the background image

Changing the background image (or any image, really) means doing two basic things:
  • upload the image you want to use, and
  • change the code to use your image.
To change the background image, here's step-by-step what you need to do:
1- In edit mode of the game, click on add new action, event,...:
2- In the dialog that opens, choose picture resource:
3- Scroll down to find i want to find pictures, choose an option (search online, search Bing, or upload your own), and follow the instructions for finding the image you want to use.
After you have added an image to your script, you will see it in the art section (when you are editing your script). For example, this shows a new image, spacebackground, in the art section:
4- Now you need to update the code to use your new image. Start by finding this line of code in your script:
 game → set background scene("horizontal",  city background)
5- Select that line, select city background, and select cut:
6- After you have deleted city background, you will see other art options available to you. You should see the image that you uploaded earlier. Select that one:
Your modified code should look like this:
 game → set background scene("horizontal",  spacebackground)
Now, run your script! You should see a new background!
(Here's a tip: Use a background that looks similar on both the right and left edges. This way, as the picture scrolls in the background, it will look smooth.)

Change the robot image

Now, I'm sure you don't really want to change the robot image in the game (what's better than a robot?!), but in case you do...
The steps for changing the robot image are basically the same as for changing the background image: you upload an image and modify the code. However, you will need to modify a different line of code.
(Here's a tip: Use an image with a transparent background (or simply check the remove white background button when you upload an image). This will look better in your game. It's not so important for a background image, but for the robot and obstacles, it is.)
So, upload and image, then find this line of code in your script:
var robot := board → create picture( robot)
Now, just like with the background, select robot (the parameter, not the variable), delete it, then choose the image you uploaded. When you are done, your code should look something like this (if, for example, you chose an image of an octopus):
One more thing: In this case, you might also want to change the variable name from robot to octopus (but you don't have to). If you want to change it, select the line, tap the variable name (robot), then select rename:
You can then rename the variable to an appropriate name, for example:
var octopus := board → create picture( octopus)
One cool thing about TouchDevelop is that if you rename a variable in one place, it automatically gets renamed in other places. So, you only have to do the rename once. After you do, check out your code - you'll see all instances of robot have become octopus.

Change the obstacle images

You definitely want to change the obstacles...especially that tomato! Remember, changing the obstacles images is similar to changing the background and robot images. You will need to upload the images that you want to use, then modify the code to use those images. The code for setting obstacle pictures is in the get picture action...click on it to see the code.
After you have uploaded images, update the code to use your pictures. For example let's say you uploaded an image called car. If you want to replace the tomato image with the car image, your code would look like this:
var random number := math → random(5)
if random number = 0 then
var pic :=  magnet
else if random number = 1 then
var pic :=  car
else if random number = 2 then
var pic :=  droid
else if random number = 3 then
var pic :=  storm cloud
else
var pic :=  flying saucer
end if

Change the way the game is played

All right! Now that the game has the look and feel that you want, let's tweak the way the game is played. There are lots of things you could do...that's one of the fun things about writing code...you can be creative! I'll give you some ideas below, and even show you how to make some fun changes, but don't feel like this is all you can do. You should use these ideas to spark ideas of your own!

Make the game harder or easier

Is the game too hard right now? Too easy? Either way, the level of difficulty is easy to change. Some things you could do are...
  • change gravity (how fast the robot falls)
  • change the speed of the obstacles
  • change the size of the obstacles
  • change the "burst" speed of the robot (how fast it moves up when you tap or click)
  • change the number of obstacles
Making these changes is easy - you just need to change parameter values. For example, to change gravity, try passing a different value (different from 400) in the robot->set acceleration(400) line of code in your script. For example, this will make him fall faster:
robot → set acceleration y(600)
To change the speed of the obstacles, change the parameter in obstacle->set speed(-100). This will make the obstacles move faster:
obstacle → set speed x( - 200)
Making the obstacles bigger or smaller will make the game harder or easier. To change the size of the obstacles, change the parameter in obstacle->set height(100). This will make the obstacles smaller:
obstacle → set height(50)
To change the "burst" speed of the robot, change the parameter robot->set speed y(-200). This will make his "burst" slower:
robot → set speed y( - 100)
To change the number of obstacles in the game you'll need to change two values in your script: the value of the obstacle spacing variable, and the range of values of i in the for loop of your script. The value of obstacle spacing should be 800 divided by the number of obstacles you want (the board is 800 pixels wide, so dividing by the number of obstacles will space the obstacles evenly across the board). Then, you'll need to change the upper bound on i in the for loop to be the number of obstacles you want. For example, if you want 5 obstacles, your code will look like this (and remember, 800/5 = 160):

Change the way the game is scored

Another fun thing to play with is how the game is scored. Right now, the player gets one point for each obstacle that reaches the left side of the screen. The easiest change to make would be to give the player 10 points for each obstacle...or 100...or 1000! And, again, you just need to change a parameter. Find the line of code in your script that says game->add score(1), and change it to something like this:
 game → add score(100)
That's easy, but say you wanted to introduce some totally new way of scoring. For example, what if you wanted to give extra points if the robot hit a special obstacle? This is easy to. To do this, you need to change what happens when an obstacle overlaps with the robot. Right now, a life is removed (and the game is then over) when this happens. Let's change this. Find the code that determines the overlap behavior in your script...this code:
if obstacle → overlaps with(robot) then
 game → remove life(1)
else ... end if
Let's say you wanted to award extra points if the robot hits the flying saucer obstacle. You'll need to check to see if the obstacle that is hit is the flying saucer (and if it is, award points), otherwise, remove a life. You can do this by using nested if statements (an if statement inside an if statement). The code looks like this:
if obstacle → overlaps with(robot) then
if (obstacle → picture) → equals( flying saucer) then
 game → add score(10)
obstacle → set x( - 100)
else
 game → remove life(1)
end if
else ... end if
If you are reading that code carefully, you might notice I included an extra line of code: obstacle->set x(-100). This code will have some interesting side effects. When the robot hits a flying saucer, the x-position of the flying saucer is set to -100 (beyond the left side of the screen...remember the coordinate system!). Now, the "on every frame" code checks the position of the obstacle on every frame. The on every frame code checks the x-position of the obstacle, and if it is less than 0, the obstacle is automatically moved to the right side of the board. This will mean that the obstacle might not be evenly spaced with other obstacles.
Make the change, play the game, and see what happens! And remember, this is just one suggestion. Be creative! Try inventing other ways to change the scoring!

Other crazy ideas

Add some 'tilt' to Bot

I hope you are getting the idea that you can be creative when you are writing code! Just for fun, let's try introducing a little more movement to Bot. (You haven't changed him, have you?) Let's make him tilt up when he is flying upward, and tilt down when he is flying downward. To do this, find the code that examines what robot is doing on every frame. It's this code:
robot → on every frame(perform2)
where perform2() is
if robot → y > board → height then
 game → remove life(1)
else ... end if
if robot → y < 0 then
 game → remove life(1)
else ... end if
end
end
Let's add some code that changes Bot's angle when moving up. Another way of saying this is IF Bot's speed is less than 0, THEN set its angle to -20. Similarly, we can change his angle when he is moving down: IF Bot's speed is greater than 0, THEN set its speed to 20. This is how to do that in code:
if robot → speed y < 0 then
robot → set angle( - 20)
else
robot → set angle(20)
end if
Now, let's put that inside the code that checks what Bot is doing on every frame. The code looks like this:
robot → on every frame(perform2)
where perform2() is
if robot → y > board → height then
 game → remove life(1)
else ... end if
if robot → y < 0 then
 game → remove life(1)
else ... end if
if robot → speed y < 0 then
robot → set angle( - 20)
else
robot → set angle(20)
end if
end
end
Try changing the values of -20 and 20 to get slightly different effects.

Introduce fuel

Here's a crazy idea: Let's introduce the idea of fuel to the game. This will change the way the game is played and the scoring. Here are the things we want to do:
  • add a variable for keeping track of fuel
  • display the amount of remaining fuel on the game board
  • reduce the amount of fuel each time the screen is tapped or clicked
  • add fuel for each obstacle that reaches the left of the screen
  • remove a life if the fuel is gone

Add a variable for keeping track of fuel

This is easy. Find the code where we set Bot's acceleration (robot->set acceleration(-400)), and add a new line below it that looks like this:
This creates a variable, called fuel and sets its value to 100 (we are going to start with 100 units of fuel). Now, in order to make this variable accessible everywhere in the script, we have to promote it to data. (This touches on an important idea in programming: global variables vs. local variables. If you want to read more about this, go here: https://www.touchdevelop.com/app/beta#list:topics:topic:data:overview.) To promote fuel to data (i.e. to make it a global variable), tap on the variable name, then select promote to data:
Now your code should look like this:
 fuel := 100

Display the amount of fuel remaining

Now we want the player to see how much fuel is remaining. We'll do this by using board->create text. This is the line of code you want to add (just below the last line you added)...see if you can figure out how:
var fuel text := board → create text(100, 20, 40,  fuel → to string)
Next, we want to position the text in a nice place on the screen with this code (just below your last line):
fuel text → set pos(400, 10)
So far so good, but we want to update the display on every frame. In other words, on every frame, we want to check how much fuel is remaining and display it. To do this, find the code that checks robot on every frame (robot->on every frame(perform2)). Inside that block of code, we want to add this:
fuel text → set text( fuel → to string)
Be careful! There is a lot of code inside that on every frame block. Make sure you don't add your code inside an if statement.

Reduce the amount of fuel on tap or click

OK. Next, we want to reduce the amount of fuel each time the board is tapped or clicked. Can you find the code for the tap event? Here's what it looks like, with the code for reducing fuel added:
board → on tap(tapped)
where tapped(x : Number , y : Number) is
robot → set speed y( - 200)
 fuel :=  fuel - 10
end
end
This code reduces the amount of fuel by 10 units for each click or tap. You can try other values if you want.

Add fuel for each obstacle that reaches the left of the screen

If you are going to reduce fuel, you better also add some way to add fuel, right? Let's add fuel each time an obstacle reaches the left of the screen. Do you remember how we added points in this way? Find that code and add this line:
 fuel :=  fuel + 10
Remember, you can try a different value instead of 10.

Remove a life if the fuel is gone

Last thing: If the player runs out of fuel, he/she should lose a life. We are going to add this code to the robot->on every frame(perform2)) block of code:
if  fuel0 then
 game → remove life(1)
else ... end if
Now play it and see what you think! You may find that you want to change some of the values to make it easier or harder.
If you would like to see a working game with many of the changes described above, check out this one: http://aka.ms/jetpackcustom

That's it! Keep on coding, and share what you create!

Wait, one more thing...

A challenge: Creating animations

OK...this may be a bit advanced, but if you are feeling brave...
You can create animations for characters (such as the robot or obstacles) used in your game. For example, imagine the fire in Bot's jetpack being animated whenever you tap or click. For information about how to create animations, go to https://www.touchdevelop.com/app/beta#list:topics:topic:spritesheet:overview. You'll have to learn a lot on your own, but that can be fun. Good luck!