Cocos2D-XNA Tutorial 1: Basic Sprites

In my last post (Cocos2D-XNA Tutorial 0: Getting Started), I explained how to setup Visual Studio with Cocos2D-XNA.  Rabbit trail – as I’m tired of typing Cocos2D-XNA multiple times in my posts, it shall henceforth be referred to as C2D (XNA is implied unless otherwise noted).

Now that we have the mundane out of the way, it’s time to move on to the goodness.  I decided to start a solution on GitHub to contain several different tutorials (that’s the plan anyway), focusing on different parts of C2D as I learn it.  These projects are explorations of what I find C2D can do, so they may or may not be what would be considered “best practices” on using the framework.  If you see something that you think can be improved or would be considered “the right way” to do it (i.e. you have prior Cocos2D experience on iOS or another platform), I’d be happy to hear your suggestions.  Also, I’m using the stock C2D assemblies from the C2D Visual Studio template instead of including the framework code in the solution, mainly because I didn’t want to clutter the solution with all the framework for the check-in to GitHub.  Feel free to kill the references and add the framework projects as I showed in my previous post if you want to break through the C2D framework.

First up, I’ve created the Basic Sprites project, which is a simple project that explores some of the basic mechanics of sprites in C2D. It provides a simple background and sprite layer, allowing different operations to be performed on the sprites.  It is by no means exhaustive, but it covers a lot of the standard operations (visibility, rotation, scaling, z-order, opacity, etc.) and shows a simple structure of a C2D game (director, scene, layers). I may add to it in the future as I learn more about sprites in C2D, but it’s good enough for now.  Here’s a quick overview of the project structure:

  • BasicSpritesGame – Your main game class.  Takes care of setting up your AppDelegate class for C2D and handling input for the game.
  • AppDelegate – Your main entry point for C2D.  Takes care of initializing C2D and instantiating your initial scene object.
  • BasicSpritesScene – Creates the BackgroundLayer and BasicSpritesLayer objects and adds them to the scene.
  • BackgroundLayer – Manages the background of the game, in this case a quick and dirty rolling landscape with a road (my art skills are EPIC, aren’t they?  Yes, they aren’t. :))
  • BasicSpritesLayer – Manages the sprites in the game, containing all the methods used to manipulate them.
  • BasicSprite – Represents the sprites in the game.  It’s a subclass of CCSprite to which I added a velocity property and movement method.

Keyboard input is used to change things in the game, so have a look at the comments on the Update method of the BasicSpritesGame class for details on the key mappings and what they do.  Speaking of keyboard input, my thanks to RCIX from this StackOverflow post who shared his keyboard input class for XNA, which I lifted from the post and used in the application.  It has handy methods for all input (game pad, keyboard, mouse) and I plan to use it often.

In regard to the specifics of what the application does, I’ve commented the code pretty heavily, so I’ll let it do the talking.  A screenshot of the application is shown below.


Well, that’s about it for this post, hopefully you found it useful.  Happy proggy.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>