Making a Pong Game with Cocos2d-x Part 1

One of the best ways to learn programming and game development is to start making a basic game on your own. Pong is the first game that I ever made, so I think it’s a great place to start. It has a simple rule set that everyone knows, it has basic graphics, and it has features that are a core part of most games. These features include a user controlled piece, which is your paddle, a game piece that moves on its own under a strict set of rules, the ball, and an AI opponent, which is the computer’s paddle. Having these features in a simplistic environment makes Pong a great starting point for learning game development.

Next, we need to choose the game engine for our Pong game. In Tyler’s post from February 15, 2017, he outlined the pros and cons of several different mobile game engines. For this project, I am going to use Cocos2d-x. As Tyler mentioned, Cocos2d-x is a cross-platform game engine, which is natively written in C++. This game engine is especially good for 2d games, and it can be used for all of the popular mobile platforms (iOS, Android, Amazon, Windows, etc). Although you will generally have to write some native code for whichever platform you deploy on, all of the game logic can be written in C++. We are going to start by making the game for iOS. Before we get started on coding, let’s get our Cocos2d-x environment ready to go!

Cocos2d-x Prerequisites

To run Cocos2d-x for iOS, you must have Mac OS X 10.7 or higher and Xcode 7 or higher installed on your computer. You have to use an Apple computer to run Xcode, which is required for developing and submitting iOS apps. Xcode can be downloaded for free from the Mac App Store. A potentially tricky point is that Python version 2 is also required for Cocos2d-x installation. This is standard on current macs, but you may be using Python v3 as your default due to other software or programs. I was running Python 3 from using Anaconda, an open source data science platform, on my computer. An easy way to check your default Python is to open Terminal and enter, “python –version”.

Downloading and Installing Cocos2d-x

To begin the Cocosd2-x installation, go to cocos2d-x.org and click on the “Download” navigation link at the top. From there, click to download the latest stable version of Cocos2d-x, which currently is 3.14.1. The download should begin immediately and the “cocos2d-x-3.14.1” folder should appear in your downloads when complete. I like to move this to a “Developer” folder, but feel free to move it wherever you like. Next, open the Terminal and open a Finder window to the cocos2d-x-3.14.1 folder in your directory. Now enter “cd ” then drag in the cocos2d-x folder from Finder into your Terminal window and press enter. This will change the current directory in Terminal to the cocos2d-x folder. Now, enter “./setup.py” and press enter. This sets up the cocos2d-x environment and updates your profile. Next, enter “source /Users/(your username)/.bash_profile” to make the added system variables take effect.

We need to create a folder to house our new projects. This will be used when specifying the location of the new project we are creating. I am creating a folder called “cocos2dx-v3.14.1-projs”, which will hold all of my future projects for this version of Cocos2d-x. We next create the project, by typing into Terminal “cocos new <game name> -p <package identifier> -l <language> -d <location>”. For me, this looked like, “cocos new PongTutorial -p com.HangZone.PongTutorial -l cpp -d /Users/(username)/Developer/cocos2dx-v3.14.1-projs”. You will be asked if you agree to send data to Cocos, which is done when the command-line tools are used for development. Either yes or no is totally fine. Now the project is created. You should find a new folder called “PongTutorial” wherever you specified for the cocos2d-x project to be created. Click on PongTutorial->proj.ios_mac->PongTutorial.xcodeproj to open the project in Xcode. Press the run button to run the “Hello World” project on a simulator.

The Cocos2d-x project is now properly setup on your computer! Join us for part 2 of the Cocos2d-x Pong Tutorial to see the game start to take shape.