Last updated: February 22, 2014

 

Index

  1. Introduction

         Downloading a project file

  2. Quick workflow
  3. Starting up
  4. Opening a sprite image
  5. Shaping a polygon

         Undoing selection

  6. Saving progress as project file
  7. Generating bezier path code

         Development platform
         Anchor point

  8. Preferences

         8a) General settings
         8b) Folders
         8c) Code


 

1. Introduction: Making a 2D game is likely to involve sprite images.  And it's likely that the shape of a game character is not simple like a circle or a rectangle.  Fortunately, Apple's Sprite Kit lets you shape a sprite node with polygon paths.  Even if it's just the matter of several vertices, it won't be easy to convert these points to Objective-C paths to shape a sprite node.

 

Mac software Pazico

Screenshot 1-01

 

Pazico is a desktop application that lets you easily record the position of each pixel you select.  It's designed to generate Objective-C code for shaping a sprite image.  The order by which you select pixel squares is not important.  And Pazico will automatically rearrange the selected vertices to draw a polygon.  Furthermore, you can save your progress as a project file.  So the polygon vertices you have selected are reproducible at any time.

 

Mac software Pazico

Screenshot 1-02

 

You can download a sample project file that contains resources used in a desktop movie.  Click here.

 

2. Quick workflow: Pazico's workflow goes as follows.

 

  1. Select and open a sprite image (PNG or TIFF).
  2. Select any of the pixels within the dark area to shape a polygon.
  3. Select a development platform (Mac OS X or iOS) and sprite's anchor point from the drop-down menus at the bottom-right corner of the window.
  4. Choose Show Polygon under Rect to plot a polygon with the vertices that are currently selected to see if your final polygon looks acceptable.
  5. Choose Export Code under File to generate Objective-C code for making bezier paths.
  6. Choose Save As Project to save progress.

 

3. Starting up: When you launch Pazico for the first time, you will see an introductory window over the main one.  (See Screenshot 1-01)  It tells you that you should use a sprite image no larger than 128 x 128 pts for a smooth workflow.  If you don't have to see this introductory window again, click on the checkbox at the bottom-left corner.

 

Mac software Pazico

Screenshot 1-01

Mac software Pazico

Screenshot 1-02

 

4. Opening a sprite image: This application is all about shaping a polygon out of a sprite image.  So let's select and open one.  You can do so by choosing Open Sprite under File or clicking on the second toolbar button from the left end.  The button labeled Open right below the path control also serves for the same purpose.  And you will be prompted to select a file.  (See Screenshot 1-02.)  You can only select PNG or TIFF formats.  If you have quick access to a sprite image you are going to use, click on the third toolbar button from the left end.  And a drop box will open.  So just drag and drop a sprite image file onto it.  (See Screenshot 1-03.)  If you have a pair of sprite images for Retina and non-Retina devices, make sure you use the latter (non-Retina one).

 

Mac software Pazico

Screenshot 1-03

Mac software Pazico

Screenshot 1-04

 

When you select a sprite image, Pazico will create as many clickable squares as the number of pixels.  If your non-Retina sprite image has 128 x 128 pixels, then Pazico will create 16384 squares, each of which is to record your click, over a black-&-white image.  (See Screenshot 1-04.)  This black-&-white image is made possible by turning transparent pixels into white and others into black.  That's all for you to shape a polygon out of the selected sprite image.  Notice that the black-&-white image appearing on the main application window is a lot bigger than the original one.  More precisely, it's exactly 5 times bigger.  Taking a very close look at this B & W image, it's divided into tiny 5 x 5 pixel squares.

 

5. Shaping a polygon: Now, all you have to do is to outline the sprite image with as many as 12 points.  So click on any of the squares.  When you do, the point you have clicked on will turn blue.  (See Screenshot 1-05.)  If you click on a blue square you have once clicked on, the color will turn back dark gray, which means that the square has been deselected.  As you select a point, the blue counter will show you how many points you have selected.  If you select more than 12 points, this counter will turn red.  12 is the division number because Xcode will lets you create a polygon with no more than 12 vertices.  So if you are going to shape a polygon with the bodyWithPolygonFromPath method of SKPhysicsBody, make sure you won't select more than 12 points.

 

Mac software Pazico

Screenshot 1-05

Mac software Pazico

Screenshot 1-06

 

For now, Pazico lets you undo as many points as you have selected simply by choosing Undo under Edit.  However, once a point has been undone, you cannot re-select it by choosing Redo.  Moreover, you can click on the Deselect All button to deselect all points so that you can start over the whole polygon making.  (See Screenshot 1-07.)  Once you click on this button, you cannot select all previous points back by choosing Redo under Edit.

When you finish selecting points to shape a polygon, you can find out what your final polygon will look like by choosing Show Polygon under Rect.  You can also click on the rightmost toolbar button for the same purpose.  Then a separate window will appear, showing you the final polygon you will get at the precise size.  (See Screenshot 1-08.)

 

Mac software Pazico

Screenshot 1-07

Mac software Pazico

Screenshot 1-08

 

6. Saving progress as project file: What's great about this application is that you can save progress at any stage after selecting a sprite image to work with.  By creating a project file, you can always reproduce selected vertices with the same black-and-white sprite image.  In order to save progress, choose Save As Project under File.  Then you will be prompted to name a file.  (See Screenshot 1-09.)  The file extension is pzc.  If you proceed, Pazico will create an application package containing an XML file and a black-and-white jpg image at the selected destination.  Once you create a project file, Pazico will not even require the original sprite image.

 

Mac software Pazico

Screenshot 1-09

Mac software Pazico

Screenshot 1-10

 

In order to reproduce polygon vertices, choose Open Project under File and select a project file.  You can also just double-click on Pazico's project file or choose Open With by right-clicking on a project file.  (See Screenshot 1-10.)  Then Pazico will reconstruct your polygon vertices.  It may take some time if the sprite image has a large number of pixels.  When Pazico finishes loading data, it will show a status message at the bottom-right corner.  (See Screenshot 1-11.)  The color of this status message will dim out in several seconds.

 

Mac software Pazico

Screenshot 1-11

Mac software Pazico

Screenshot 1-12

 

7. Generating bezier path code: Pazico stands ready to generate Objective-C code for drawing a polygon with NSBezierPath or UIBezierPath when you have two or more vertices.  Now, let's pay our attention to two drop-down menus at the bottom-right corner.  One of them is labeled Development platform.  The other is labeled Sprite's anchor point.  Drawing a shape with bezier paths is a bit different, depending on whether you develop your sprite games under Mac OS X or iOS.  So use the first drop-down menu to select your development platform.  (See Screenshot 1-12.)  The default platform is Mac OS X.  So neither of them is selected, Pazico will automatically select the first one (Mac OS X).

Next, if you explore the second drop-down menu, you will find more than several items.  (See Screenshot 1-13.)  This selection has to do with where the polygon center is.  Now, let's quickly go to Preferences by choosing Preferences under Pazico.

 

Mac software Pazico

Screenshot 1-13

Mac software Pazico

Screenshot 1-14

 

Navigating to the Code tab, you will find the same two drop-down menus.  (See Screenshot 1-14.)  The text field under this tab lets you set the variable name of NSBezierPath or UIBezierPath.  Now, suppose that your polygon is a mere circle.  If you choose Bottom-right from the bottom drop-down menu, a blue circle will appear under the first quadrant.  (Click here to find out which quadrant points to which region.)  If you choose Button-right, Pazico will use the exact position of each vertix as it appears for making a point with NSMakePoint (or CGPointMake for iOS).  If you choose Center-center, Pazido will position the circle right at the center, which means that Pazico subtracts half a width from each x coordinate and half a height from each y coordinate.  Actually, 'Center-center' is this application's default selection.  So if you don't choose any of them from the second drop-down menu, Pazico will set the anchor point at the very center.

 

Mac software Pazico

Screenshot 1-15

Mac software Pazico

Screenshot 1-16

 

Switching back to the main application window, after you choose your development platform and sprite's anchor point, choose Export Code under File or click on the navy blue toolbar button.  Then you will be prompted to name a text file.  (See Screenshot 1-15.)  Screenshot 1-16 shows the generated Objective-C code for iOS where the anchor point is set to the default (Center-center).  Additionally, Screenshots 1-17 & 1-18 show how the generated code is used to run a sample iOS sprite application.

 

Mac software Pazico

Screenshot 1-17

Mac software Pazico

Screenshot 1-18

 

 

 

 

 

 

 

 

 

 

 

 

 

 

<< Previous page   Next page >>