Creating sprite frame animations

You may have noticed that there are three assets for the bird. These will be used to create a keyframe animation that will run in a loop. SpriteBuilder makes this process very simple:

  1. Create a new file that uses a sprite as its root object. Call it Bird.
  2. Select CSprite in the editor.
  3. In the options pane on the right-hand side of the screen, there is an option for Sprite frame. Set it to bird0.png.
    Creating sprite frame animations
  4. Now, in order to create the animation, select all the bird images in the resources pane on the left of the screen. Right-click on them and select Create keyframes from Selection.
  5. Notice that there has been three keyframes created in the timeline editor. If you click play, you will notice that the bird quickly flaps and then gets stuck on the last frame while the rest of the timeline plays out.
  6. In order to fix this, you need to set the timeline duration. Open the options for the default timeline and select Set timeline duration. Enter 0 seconds and 3 frames.
  7. You also have to set up the animation to loop. This is accomplished with the chaining of timelines. In order to create a loop, you simply chain the timeline to itself.
  8. At the bottom of the timeline, there is an option currently set to No chained timeline. Click on this and select Default Timeline.
  9. Your bird sprite animation is now complete. Let's drop it in the main menu in order to see it in action.
  10. Open your MainScene.ccb file and drop in a subfile node. Select your Bird.ccb file as the CCB File.

    Tip

    If nothing appears after selecting Bird.ccb, make sure you have saved your bird file.

    Creating sprite frame animations

    We can now also switch out the square in the game play scene with your new bird subfile.

  11. Open your Gameplay layer.
  12. Delete the square and drag out a new subfile onto the physics node in the timeline.

    Note

    Remember to re-add the code connection a doc root var named _character and enable physics.

  13. Change the physics shape to circle as it better fits the image of our bird.
  14. Publish your game and run it from Xcode.

You now have a real flapping bird!

Switching out the obstacle image

Knowing that you cleverly made your obstacle a separate subfile, it is very easy to switch in the image of the pipe. Let's do this now:

  1. Open up the Obstacle file and delete the two red squares.
  2. Drag out two images of the pipe from the resources tab.
  3. You will have to rotate one of them to 180 degrees so that it is facing the correct direction. Line them up where the red blocks were.
  4. You will also have to re-add your code connections and physics so the collisions work.
  5. Enable physics on both and set the physics type to be Polygon and Static. Also, add the doc root var code connections _topBlock and _bottomBlock, respectively.
  6. Open the Gameplay scene and drag out some ground sprites to replace your gradient node ground. You will probably have to overlap two of them. Ensure that your new ground nodes have physics enabled and are children of the physics node in the scene.
  7. Also drag out some background images to make your scene look good.
  8. Publish and run the game and have a look!

The game is starting to look really good now.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.117.227.194