CocosSharp – Learning To Use CCDrawNode

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.


Earlier in this series, I talked about CCSprite for graphic file and frame-based animation needs. Sometimes you just want to draw your own stuff in code. There can be a lot of reasons why you’d want to do that and I certainly did for several elements within Mirror Maze. Enter CCDrawNode.

CCDrawNode provides methods to draw a number of 2D shapes, such as lines, circles, and rectangles. It’s pretty straightforward to call these methods, but there are some gotchas to be aware of.

Drawing a Line

Let’s start with the the most simple command: drawing a line.

The code above instantiates a CCDrawNode, then draws a blue line with a width of 1 unit from the point (0, 0) to the point (10, 10). While this is straight-forward, there are some things to be aware of here.

First, the points used here, (0, 0) and (10, 10) are relative to the Draw Node’s origin and has nothing to do with it’s position. To explain why that is important, let me give an example.

The code above has two different draw nodes that both draw a blue line from (0, 0) to (10, 10). However, drawNode2 has a position of (20, 0). What the user will actually see is two diagonal blue lines of the same length and angle, one drawn from (0, 0) to (10, 10) and one drawn from (20, 0) to (30, 10). How is that possible since they both used the same coordinates to draw? Because the draw node’s origin is always the same, but the draw node itself is moved by the position.

The whole concept of positioning with CocosSharp is complex enough that I will have an entire post coming up that will cover only positioning. For now, just think of drawing to the draw node as you would drawing on a piece of paper. You can draw on that paper however you like, then move that paper around the table. The drawing is always the same relative to the paper, but the paper itself can be moved to a different position on the table.

Drawing a Rectangle

The next drawing command I want to talk about is drawing a rectangle. There are several different DrawRect methods available with CCDrawNode, so I’ll show the one I use the most.

The code above draws a filled blue rectangle at (0, 0) with a width of 20 and a height of 10. This is self-explanatory and the only thing I have to add is to keep in mind the paper/table metaphor from above with the line. The rectangle can be drawn wherever you want it to be on the “paper”, then the paper can be moved on the “table”.

Drawing a Circle

Drawing a circle is simple to do, but requires a little explanation to fully understand what is going on.

The code above draws a yellow circle at (0, 0), with a radius of 10. Here’s the catch: the position you provide to draw the circle is is the center of the circle. That may seem like what you would expect, but the ramification of that is that the circle will actually be drawn into -x and -y ranges. If you’ve been happily drawing lines and rectangles starting at (0, 0) and then you decide to draw a circle at (0, 0), you’ll find that the circle may not look like it’s drawn in the correct place. To draw the circle to match the expectations set by the line and rectangle commands, you’ll need to modify your position to account for the size of the radius.

Now you’ll draw a circle where you probably expected it to go in the first place.

CCDrawNode provides several more draw commands for you to play around with, but this is enough for you to get a decent start. Just remember to know the difference between where you are drawing on the draw node versus where that draw node is actually positioned and you’ll be in good shape.

Share

1 thought on “CocosSharp – Learning To Use CCDrawNode”

Leave a Reply

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