Fish Game: Part 1

The source code for this tutorial is here.  If you are interested in following along, you can download it or clone it to your local repository.  This game (along with this accompanying tutorial) is still in development, so any help is welcome.  If you want to check out of some my other free games and apps,check here.  The game works much nicer when tested on a real device, but the video screenshot taken from the simulator for the current version is shown below:

In this tutorial, we will explore GameplayKit to lay the foundation for a fish game I will call “LastFishFloating.”  This will be a game where the player-controlled fish must flee from predators, catch prey, and also acquire collectible items drifting from the ocean surface.  The game assets used here are from Kenney.nl  – You can download the asset pack by making a small donation of $10.00.   The assets are available in .svg format if you want to do your own custom scaling and image editing.

Here is our all-star cast, the fish that we will be using for the game:

 

You’ll notice that the fish come in outline and unoutlined versions, which can alternate with each other to create a power-up or invincibility animation.  In addition to these fish, we will also include the eel and the blowfish,

 

The fish above also have corresponding skeletons, which you can conveniently use to create die animations:

 

In addition, backgrounds for the game scenes will be developed using the tiles shown below, also provided with the asset pack that you can download from Kenney’s site:

 

 

 

As you can see, there’s quite a lot of variety in terms of the different tiles that we can use to develop backgrounds with SKScene editor in Xcode.   Just thinking of all the possibilities, I can’t wait to jump into the game.  Once you’ve downloaded the assets from Kenney, go ahead and add them directly into your Assets.xcassets folder in the document hierarchy window.

For the game scene background, we will also use the bokeh particle emitter to create a nice bubble effect to simulate fish swimming in the deep sea.  To create a particle emitter, go to File -> New -> File… and select SpriteKit Particle System file.  Select “Bokeh” as your particle system template and save the file as “Bubble.sks.”

Open the Attributes Inspector on the right-hand side of the Xcode editor, and change the background to a nice light blue color.  You can play around with the different parameters for the particle system (i.e. birthrate, lifetime, etc.) to get the desired effect.  I’ve configured my settings as shown below:

Here’s a preview of what the particle emitter will look like:

Now that the particle emitter is ready, we can go ahead and create the background scene.  You can use the SKScene TileMap editor if you’d like, but for our purposes here I just used regular copying and pasting to quickly generate a background. To copy and a paste a tile, click on the tile, and while holding down the “option” key, drag to a new location on the screen.  A copy of the tile should be generated automatically.

Now to create the background scene that will be loaded into the main SKScene node, go to File -> New -> File…  and chose SpriteKit Scene File.   The SceneKit editor should be opened.

You should get a blank, grey screen with a white outline delineating the boundaries of simulated iPhone or iPad, as shown below:

On the lower right hand side underneath the Attributes Inspector section, select the “Show Media Library” icon (i.e. the first icon from the right, to select the sprites that should have been loaded into your Assets.xcassets file already.

Before we start adding in our sprites, let’s first drag and drop a few empty SKNode objects to serve as placeholders for different game objects.  Click on the Object Library icon, which is the second icon from the right underneath the Attributes inspector, drag and drop  an empty SKNode object, and name it “Root” in the Attributes Inspector.

Next, drag and drop three more empty SKNode objects and name them “Obstacles,” “PathNode,” and “Flock” in any order.  These will serve as placeholders for different game objects.  The “Flock” node will be the parent node for additional SKNodes which will act as placeholders to provide spawning points for certain kinds of fish later in the game.  Likewise, the “Obstacles” node will act as a container whose child nodes will act as spawning points for the Blowfish, which will act as obstacles that the other fish will try to avoid in the game.  The “PathNode” will act as a container whose child nodes will each contain a set of nodes that will determine a specified moving path for certain kinds of fish. This will become clear later.

The “Root” node will contain all the tiles that will be used to create the background for the scene. The screen should now look something like this:

Now click on the “Show Media Library” icon beneath the Attributes Inspector, which is the first icon on the right.  This icon will then show a list of all the sprites in your Assets.xcassets folder:

This is a convenient way to drag and drop sprites directly into the SpriteKit scene editor.  You can drag in the tiles to create the background, since the fish will be generated programmatically.   You can use your imagination to create any kind of background you want.  In addition to the tiles, I will a reference node to the “Bubbles.sks” particle emitter created earlier.  To do this, you just click on the file in the document hierachy on the left and drag it directly into the SpriteKit scene editor.  In addition I’ve added a few empty Sprite nodes to act as physical barriers for the fish.  These are named “BarrierTop,” “BarrierRight,” and “BarrierLeft,” and their physics properties will be configured so that the the fish in the scene are constrained to a well-defined area of gameplay.  My final scene is show below:

Okay, now that our game assets are in place, we will move on to developing classes to configure all the game objects in our code.  Click here to continue to the next section. We will come back to the SceneKit scene later to do additional configuration work.