Introduction
Let’s start things off with one of the most basic building blocks of a 2D game in any game engine, creating a Sprite. This will introduce us to the Cocos Creator user interface, illustrate how to import assets into our game, show how nodes are defined, and of course, draw a Sprite on screen.
Assets
We are going to need some sprites and other assets throughout this entire project. I am using the awesome free pixel art package available at Pixel Game Art. Obviously feel free to replace with whatever assets you have at hand, but if you want to follow along exactly, I recommend you download that asset pack. Extract the assets out into a folder somewhere on your hard drive.
Importing Sprites
Let’s start things off organized. Locate the Assets tab,
Name your newly created folder “sprites”, simple drag and drop the image file(s) you want to use into this folder.
The asset you just dropped in is now available for usage in your game. You can also simply drop files into the project folder using your native file system file browser. Simply right-click the folder within the asset panel and select Open In Explorer. Any files you add to the file system will automatically be imported into your project.
Now that we have a graphic to work with, let’s create a sprite open in our game. Locate the Node Tree panel, make sure that Canvas is selected, then click the + Icon.
Whatever item you have selected will automatically be the parent of the created node. A child automatically inherits positioning information from it’s parent. Once you’ve clicked the + link, select Create Renderer Nodes->Sprite Node:
You will notice that this action created a new Node initially named New Sprite, with a Component of type Sprite. Cocos Creator is a component-based game engine, where all of the things that are drawn on the screen are implement as Nodes, and those nodes contain one or more components. You could have created the exact same result by creating an empty node and adding a Sprite component with it. We will explore adding components to nodes in more detail in the future.
The most important property we care about right now is Sprite Frame in the Sprite component. This is where we attach our image asset to the sprite node. Simply drag and drop again, this time from assets to sprite frame:
You will now notice that your sprite is available and drawn (by default centered inside it’s parent node) in the Scene panel.
This panel is where you can layout the various visible nodes that compose your scene. There is a toolbar for switching between the various transformation options.
You can also switch between these options using W(move), E(rotate), R(scale), T(rectangle). They are all fairly self-explanatory except perhaps rect. Using the Rect tool you can scale and rotate a node using the corners or center point.
Now that we’ve successfully created a sprite, let’s look at some of the key properties. You will notice the manipulator for our sprite object is relative to its center. This means when you translate or rotate this node, it’s done relative to its mid-point.
Often people prefer to instead draw relative to a different point, the bottom left-hand corner is the most common alternative. This can easily be set using the Anchor property:
This is a normalized value, from 0.0 to 1.0. A value of (0.0,0.0) is the bottom left corner, (0.0,1.0) is the top left corner, while (1.0,1.0) is the top right-hand corner. This value is available to every single node type. This anchor value also sets positioning relative to the parent. So, for example with our canvas anchor set to (0.5,0.5), child nodes at (0.0,0.0) will be drawn in the middle.
Speaking of that Canvas node, let’s take a closer look at its properties.
The design resolution tells Cocos what resolution you want to work at, and most importantly, how to deal with it when that resolution doesn’t match. Therefore, if you are working with low pixel images let’s instead work with a different resolution, such as 320×240. You will notice as it’s changed, the purple rectangle depicting the boundaries of the viewport. The Fit Width and Fit Height checkbox tell Cocos how to stretch the resolution in case the device you are running on is a different resolution. Cocos will automatically take care of the scaling, black bars, etc.
Once we are ready to test out our game locate the play icon at the top of the screen and click the play icon. You can run in either the Simulator or in a web browser.
You can control the dimensions of the simulator by selecting Cocos Creator->Preferences…
You can now select the resolution using Simulator Resolution, or define your own resolution using the Custom option.
