Framer Studio • Ridiculous Fishing #3 (Part I)

Learn • That Flying feeling •

Summer migration

#3— Ridiculous Fishing

That Flying feeling.

The goal — to recreate the start screen on one of my all time favourite iOS games, Vlambeer’s Ridiculous Fishing, designed by @jwaaaap

What a game. (Part III will get you here).

The Final Product: http://bit.ly/cbz-ridiculous-fishing

As this is a more complex piece, I have decided to split it over three separate tutorials. In this first one, we will look at recreating the flying birds.

Some of the new concepts that exist in this tutorial include:

• Functions
• Arrays
• Animate
• Utils.cycle
• Utils.interval

The Setup

Things you’ll need:

• Framer Studio (v63)

Resources

Download the Starter project from here:

http://bit.ly/cbz-bird-template

Open the link above and select the Open button in the top right hand corner to get the starter project

Take Off

The first thing to do here is align the bird and add a sky blue background. Nothing new here, just as simple as creating a background layer, setting the colour and inserting the coordinates of our little bird. I have done this bit for you in the starter project

FlappyBird?

Not quite such a good game

To make our bird fly, we need to animate in 3 different states.

I have called these Flying_1, Flying_2, Flying_3, as I was feeling particularly imaginative at the time of writing.

Our bird is separated into 4 different components:

• Head — Which stays the same in all states
• Body — Which we have to hide during the final state
• Wings — rotate 180' and shift down by 12px
• Tail — rotate 3 times, 90' and 180' and back to 0'

Its head is on the right.. obviously.

The Tale (Tail)

Prologue

Lets create a method which we can pass our bird into to make it flap:

flap = (bird) ->

This is a simple method declaration which allows us to pass in the bird.

In this method we are going to want to grab the tail from the sublayer of our bird

tail = bird.childrenWithName(“Tail”)[0]

We add the [o] at the end to because childrenWithName returns an array of objects, and 0 retrieves us the first object in the array. Which in our case is the tail layer we are looking for.

We need to give our tail the 3 states that we mentioned above:

tail.states.add
    Flying_1:
         rotation: 0
    Flying_2:
         rotation: 180
    Flying_3:
         rotation: 90

The Utils.cycler gives us a clever method, that

Creates a function that returns the next value of an array every time it’s called.

This is exactly what we are going to need in order to make our bird iterate over our 3 states:

cycler = Utils.cycle([“Flying_1”, “Flying_2”, “Flying_3”])

The last piece of this method is the iteration itself

Utils.interval 0.15, ->
   nextState = cycler()
   tail.states.switchInstant(nextState)

In English: “After every 0.15 seconds, get the next state and instantly switch to it. Do this forever.”

You should be here.

Lets make that tail spin

On a new line, after the method add the following

flap(Fishing.Bird)

Add this line straight after and you’ll start to see the tail of our bird perform the cyclical rotation

Tailspin

Im Flying without wings

Lets add in the states for our birds wings and body now to really make him fly

Lets grab the body and wings in the same way we grabbed the tail:

Add these lines below where we retrieved the tail:

wings = bird.childrenWithName(“Wings”)[0]
body = bird.childrenWithName(“Body”)[0]

having done this add in the other states, and we should have a flap method that now looks something like this:

If you don’t.. copy + paste?

If everything is right, you should have a static flying bird in the aligned to the middle of you screen

The whole project up till now should look something like this:

Lets get moving

We want out bird to fly across the screen from left to right. We need to add another animation to our bird.

Do this by adding another function, move, to our file. Declare this method just below the end of our flap method

move = (bird) ->
   bird.animate
        properties: 
             x: Framer.Device.screen.width
        time: 5
        curve: “linear”

We use Framer.Device.screen.width so that regardless of how big our screen is, we just want the bird to fly off the right hand edge of it.

Finally lets set the starting point of our bird, its x value to just beyond the left of the screen.

Fishing.Bird.x = -Fishing.Bird.width

Finally, lets pass our bird into this method:

move(Fishing.Bird)

To make our bird repeat this forever add a repeat function below curve,

time: 3
curve: "linear"
repeat: 100

We have our flying bird

Bring in the horde

Now, 1 bird is nice but loads of birds are way better.

Let finish of Part I of this tutorial by adding in loads of birds.

To this, we need to add a for-loop which is going to create lots of birds and then apply all these animations to each of them

for i in [0..10]
   bird = Fishing.Bird.copy()
   bird.x = -bird.width
 
   height = Framer.Device.screen.height
   randomY = Utils.randomNumber(height)
   bird.y = Align.top(randomY)
 
   flap(bird)
   move(bird)

#madeit

TL;DR

Here is the final code at the end of Part I

bit.ly/cbz-final-birdies

You now have a screensaver

Thank you for getting this far. In Part II we will be looking at how to build the vibrating phone and in Part III we will be glueing all the bits and bobs together.

Framer ❤ from Callum Boddy.