Fruit Slasher!

Vineet Srivastava

www.scratchcourse.wordpress.com

In this lesson, we will …

• Build our own version of the popular ‘Fruit Ninja’ Game.
• In this process, we will touch upon and revise several concepts like:
• Cloning with variables ONLY for this sprite.
• Editing costumes in the BITMAP mode.
• Rotation Modes.
• Lists
• My Blocks
• There are several versions of this game on the scratch platform. We will look at these and explore different approaches as we build our own version.

​

​

​

2

www.scratchcourse.wordpress.com

Fruit Slasher!

• Fruits pop-up on the screen.
• Each fruit rises from the bottom, goes upwards and then falls down.
• Using a mouse pointer, we need to ‘slash’ these fruits before they fall to the ground.
• However, we have to be careful, since occasionally we also get a BOMB.
• If we slash a BOMB, the game gets over.
• If a certain number of fruits fall to the ground, the game gets over as we lose.

​

3

www.scratchcourse.wordpress.com

Building this game

• We will build this game in stages:
• Stage 1: Costumes for the fruits.
• Stage 2: Code for the movement of the fruits.
• Stage 3: Code for slashing
• In fact, the trickiest thing in this game revolves around the slashing action – there are several variants and each has its own nuances – we will do a comparative evaluation and pick a method that works the best for us!

4

The fruit sprite

• For the purpose of this game, we will have a fruit sprite with several costumes.
• Let us say we add a bunch of costumes from the scratch library.

5

Costumes of the fruit sprite

Notice, we added 5 different fruits costumes.

​

Also, note that these are costumes 1, 2, 3, 4 and 5 respectively.

​

(You can also consider importing costumes).

6

Add a bomb costume

• We will now add a bomb costume.
• The reason we do this is because basically the bomb is no different from the fruit – it has a similar behavior as a fruit.
• Hence we need not create a separate sprite for the bomb. Instead we just create a costume and use cloning for creating the bomb.

7

Bomb Costume

• For our purpose, just paint a black circle and make a RED cross on it.

8

Now the split fruits

• We shall now ‘create’ costumes for the split fruits.
• This can be done by editing the costumes that we have in the BITMAP mode.
• First we will again add the fruit sprites in the same order as earlier. Next, we will create the split fruit costumes.
• Let’s take an example.

9

Add fruit costumes once again!

• Though it is not necessary, but it greatly simplifies the coding if we add the costumes in the same order as we had earlier – namely, Apple, Bananas, Orange, Strawberry, Watermelon.
• We will now create the split fruit costumes.

10

Creating the split fruit

11

Step 1: Convert to BITMAP

Step 2: Choose the select tool to select a part of the costume.

Step 3: Split the selection away.

Step 4: Rotate the selection

Note

1. You can also rotate the other split part.
2. A bunch of creative things can be done.
3. But this must be done on every sprite.

Step 5: Re-centre

All the cut fruit costumes

• We do the aforementioned modifications to all the fruit costumes, as shown here.

​

• Notice, for all the fruits, the split costume number is 6 more than the full fruit costume.
• For example, Full apple is Costume 1, split apple is Costume 7. Full Strawberry is Costume 4, split strawberry is costume 10 etc.
• We will use this fact in the coding later on.

12

To summarize the costumes

13

Costumes 1 to 5: Full fruits

Costume 6: Bomb

Costume 7 to 11: Split Fruits

Code for the fruits

• We want a random number of fruits to pop-up every now and then.
• We do this by cloning.

14

Create a random number of clones after a random waiting time.

Code for fruit movement

• We want each fruit to have its own movement.
• That is, each fruit (which means each clone) should have its own jump – own height, horizontal movement, rotation etc.
• We can accomplish this by creating variables for ‘THIS SPRITE ONLY’.

15

Create Local Variables

• Notice, all the above variables are ‘FOR THIS SPRITE ONLY’. As a result, each clone will maintain its own copies of these variables.

16

xSpeed: How much will the sprite move along the x-axis

ySpeed: How much will the sprite move along the y-axis

Rotation: How much does the sprite turn as it moves.

Setting the variable values

17

Set the variables to some reasonable (and random) values. The exact values do not matter – you can fine-tune according to your liking.

Send the sprite to the bottom of the stage.

Getting fruits to pop-out

• Notice, with this code, the fruits pop up, fly upwards and move a bit to the right or left.
• Also, the fruits rotate as they travel.
• Eventually they fall down too.

18

This statement ensures that eventually the fruits will fall down!

A small wait makes game more playable.

Recall, Costumes 1 to 5 are the full fruits

(Note: This can also be done BEFORE the clone is created.)

Pick random values for xSpeed, ySpeed and rotation (unique for each sprite).

xSpeed can be both positive or negative – so the fruit may travel left OR right.

ySpeed is strictly positive – so the fruit travels upwards.

rotation can be positive or negative – so fruits turn both anti-clockwise or clockwise .

Food for thought!

• Notice, the movement of the fruits is in fact quite similar to the player in the PLATFORMER.
• Just like the player’s smooth ‘Gravity guided’ jump, in this project too, the players jump up smoothly and eventually fall down.

19

Bring in the Bomb costume

• Recall the bomb is at Costume number 6.
• So getting bomb to pop out is not hard – we just have to change the range of the random variable for costume.

​

20

Create a PLAYER sprite

We use a separate costume, with an EMPTY, costume, for the drawing code.

​

This is IMPORTANT, because mixing the fruits and the drawing sprite functionality into one sprite causes a lot of confusion and makes the code very difficult to follow.

21

Slashing the fruit

• Let’s think through what we want to do:
• We want to literally ‘slash’ the fruits.
• That is, we would like to click the mouse down and drag the mouse across the fruit.
• In this process, we could also end up slashing more than 1 fruit.
• Notice that we can have a slightly different version of this game too, where clicking the fruit alone could slash it. (e.g https://scratch.mit.edu/projects/39521030/)
• However, we want to create a version where we want to ‘slash’ the fruit – not just click it.
• Doing this allows us to learn more about LISTS in Scratch.

22

We can use lists for this purpose

• Basically we need to figure out if the mouse has been moving.
• If we keep track of the last few positions where the mouse has been, then we can figure out if the mouse is moving or not.
• This can be done by storing the ‘mouse x’ and ‘mouse y’ in a list.
• While we will keep it simple, using a list and some advanced mathematics (trigonometry), we can even find out which direction and how ‘fast’ the mouse has been moving.
• We will also use this list to draw a slashing mark on the screen.

23

Lists for ‘mouse x’ and ‘mouse y’

• First, create a player sprite with NO COSTUME.
• Now, we add the following code:

24

Add ‘mouse x’ and ‘mouse y’ to a list.

The moment this list becomes equal to 6 elements, delete the first element.

The choice of 6 is arbitrary. But notice that this list will contain the ‘last 5’ positions that the mouse has been at.

Mouse_x and Mouse_y lists

25

x0

y0

x0

y0

x1

y1

x0

y0

x1

y1

x2

y2

x0

y0

x1

y1

x2

y2

x3

y3

x0

y0

x1

y1

x2

y2

x3

y3

x4

y4

x0

y0

x1

y1

x2

y2

x3

y3

x4

y4

x5

y5

x1

y1

x2

y2

x3

y3

x4

y4

x5

y5

x1

y1

x2

y2

x3

y3

x4

y4

x5

y5

x6

y6

x2

y2

x3

y3

x4

y4

x5

y5

x6

y6

List Building Up

New position added

Item 1 deleted

New position added

Item 1 deleted

After the list has 5 items

Notice, this list will ALWAYS contain the last 5 items that the mouse went, the latest position is the at item 5.

Food for thought

• The lists above are similar to what we did in the Snake game.
• One difference, however, is that in these lists the latest position is at the END of the list, unlike the snake game where the latest position was at the BEGINNING of the list.

26

Using list for drawing the slashing line

• We will now use this list for drawing the ‘slashing’ line.
• The idea is a bit like what we did for the paintbox.

27

Drawing the slashing line

28

When the MOUSE is down, that is, when we click the mouse button

Go to the first item of Mouse_x and Mouse_y

Erase everything (This is useful to prevent user from holding the MOUSE and getting a LINE - class video part 2 at about 10:30)

Start drawing

Go to every item of the list. Notice, we start from item 2, then go to item 3, item 4 and so on, till the last element,

​

Notice also that if the mouse stops moving, this will just draw a small dot on the screen.

If the mouse is not clicked,

Erase everything and stop drawing.

Drawing Code expanded

The REPEAT UNTIL on the last slide can be understood by realizing that we are basically going to EVERY element of the list. And sice PEN is down, we end up drawing.

29

Converting this code to a MyBlock

• Notice, this is not necessary, but makes our code more readable and easier to understand.

30

We created a new MyBlock called DrawBlade, without any inputs, and moved the entire drawing code into that. This makes the code more readable.

Loop with a variable!

What we have just seen is a very special programming construct – a loop (repeat) where on every iteration of the loop, a counter variable gets changed.

​

This is known as a FOR LOOP in many languages and is a very useful construct in programming.

​

We will also use this approach in the next project – Hangman!

31

Checking if the mouse is moving

• Next, we will use a simple argument to determine if the mouse is moving.
• Recall, if the mouse is not moving, ALL the elements of the list Mouse_x and Mouse_y will be the same.
• We will create a MyBlock to determine if the mouse is moving.
• As you can imagine, in fact this list can be used to figure out the DIRECTION in which the mouse is moving too, but that is a bit more involved.

32

Check Movement

• If every element of the lists is the same as the present mouse x and mouse y, the mouse is not moving.
• Notice, this is very simple assessment, we can also do estimation of how ‘fast’ the mouse is moving and so on.
• Again, we have used a LOOP with a variable,

33

Check every element. If any one element of the list is NOT equal to the present mouse position, then we set the variable ‘moving’ to 1.

Slashing the fruits

34

Recall costumes 1 to 5 were uncut fruits. If they are slashed, we get a point.

Also, we change costume to the corresponding cut fruit costume.

If we slash the bomb, (that is, if the costume number of the clone is 6), the game is going to get over.

This code is done on the FRUITS sprite.

Deducting Lives

• If a fruit falls down without getting slashed, we deduct a life.
• But if the bomb drops, we do not deduct lives.

35

This ‘and’ condition ensures that the fruit is falling DOWN and touches the edge

If the fruit has not been slashed and it is not a bomb, then reduce Lives by 1. (We can determine this from the costume.)

Regardless of the costume, delete this clone.

Getting game to get over

• We can use WAIT UNTIL Lives becomes 0.

36

Wait Until LIVES < 1 is a better choice.

The two ending Broadcasts

37

Notice, this broadcast will delete all the clones

We stop New clones from getting generated

Play the sound completely

And you are all set!

• Fruit Ninja is a popular game, with a lot of examples available on the scratch platform.
• Revise the concepts, and put them in action by creating your own version of this game as part of the independent activity.
• Have fun!

38

www.scratchcourse.wordpress.com

Extra Innings

39

Rotation Style

• Since we are moving a sprite turn, there is an interesting concept of Rotation Style that comes into play. Basically, there are three possible rotation styles:

​

40

Sprite looks only two ways (either LEFT (direction less than 0) or RIGHT (direction more than 0).

​

Sprite does not rotate.

​

Sprite rotates freely all along.

Experimenting with rotation mode

• We can now introduce the bomb costume too.
• Just for the sake of understanding, we will set th rotation mode for the bomb costume to DON’T ROTATE.
• Note, this is not necessary – we are doing this just to get a better feel of the rotation styles.

41

Rotation Style for Bomb

• For the specific bomb costume we set the rotation style to ‘don’t rotate’.
• As mentioned before, this is not absolutely needed – we are doing this just for the sake of understanding the different rotation styles (experiment for your self for better understanding.)

42

Draggable Mode

• One of the problems that we face in this game is that in the process of slashing, the fruit sprites get dragged.
• We can avoid this by using the draggable mode block.
• Notice, however, that this has effect only in the project page, not in the editor.

​

​

43

Setting this to ‘not-draggable’ makes the sprite not get dragged (but only on the project page).

Ideas to spice up the game!

• Several versions of this game start with a fruit getting slashed. You can try that. Have a rotating fruit, once that is slashed, you can broadcast a start game and get the game started.
• A lot of innovation is possible around the costumes/backdrops.
• You can also introduce a ‘splatter/juice’ sprite to make the game more appealing.
• A more challenging version is to have both halves of the fruit fly out in different directions.
• We can use ‘TIMER’ to determine if we are slashing combos (multiple fruits in one slash) and add bonus points for those in the score.

​

​

​

​

44

www.scratchcourse.wordpress.com