CocosSharp – The Game Loop

This post is part of my Mobile Game Development series. Start at the beginning to catch up. This series was inspired by the things I learned developing a new game for Android and iOS called Mirror Maze.

I’ve talked a lot in this series about the foundation, building blocksvarious different node implementations that come out of the box with CocosSharp, and how to implement your own custom node. That will get you going with a CocosSharp application, but it will be static at this point. A game with nothing but static graphics isn’t all that cool, so you probably want to get things moving around a bit.

In game development, there is the concept of the Game Loop. The game loop is the chunk of code that gets called repeatedly, usually around 60 times per second, which drives the game. It processes things like user input, game state, and collision detection, then handles updating the nodes and rendering the game frame. The game loop is where all the magic happens.

In CocosSharp, each node has the capability of implementing its own game loop. There is a method provided by the root class CCNode, called Schedule, which takes an Action and schedules it to run for every cycle.

I typically implement a method called Process for scheduling. The Process method needs to take a float as a parameter, which represents the number of seconds that have passed since the last time Process was called. Remember that this method will be called somewhere around 60 times per second, so the actual value of the seconds parameter will be somewhere in the neighborhood of 0.016667. Don’t expect a whole second or more to have passed since the last call.

Adding Movement

Having a game loop that doesn’t do anything is no fun. Let’s draw a circle and move it across the screen.

The code above creates a CCDrawNode, draws a blue circle with it, then positions it in the middle on the left of the screen. Once the game loop begins, the circle will move one unit to the right every time through the loop. At this point, the circle will move right off the screen and continue to move to the right for the entire time the application is running. We can add some more processing to have the circle bounce within the visible bounds of the screen.

In the first change above, I added a member variable called Movement. When Movement is positive, the circle will move to the right. When Movement is negative, the circle will move to the left.

In the second change above, I updated the Process method to use the new Movement variable for the circle’s position and added logic to reverse the movement direction when the circle’s bounding box starts to move outside the visible bounds of the layer.

Now, you can run the code above as long as you want and just watch the ball move back and forth across the screen indefinitely.

Pause() and Resume()

The game loop will run continuously until the node is removed from the scene. However, there are times you won’t want the game loop to run. Perhaps you want your player to be able to pause the game and resume it right where they left off, without your game doing processing that would change the game’s state. That is why CCNode also provides Pause() and Resume() methods. Calling Pause() will stop the game loop from being called until the Resume() method is called.

To be clear, however, calling Pause() will only pause the game loop. It will not prevent any touch interactions you may have added from being handled. You’ll want to keep that in mind when you start working with touches, if you leverage the Pause and Resume methods.

With the concept of the game loop, you can now start to do some interesting things with your game. However, most games will need some sort of touch interaction. In the next post, we’ll take a look at how you can add that touch interaction.

2 thoughts on “CocosSharp – The Game Loop”

  1. Great article! It taught me a lot about CocosSharp.
    I was wondering if you had used CCMotionStreak before? I’m trying to use it but can’t get it to work on top of a CCSprite. If I only have a layer in the scene, then it works fine. If I add a background image, it won’t draw on top of it. I checked the order I added the image and try setting the ZOrder as well but everything I do doesn’t have any effect.
    Any ideas?


    1. Joe- I haven’t played with CCMotionStreak before, so I unfortunately don’t have any ideas to offer.

Leave a Reply

Your email address will not be published. Required fields are marked *