Last updated: September 08, 2015

 

Index

  1. Introduction

  2. Quick workflow

  3. Starting a new tile map

         Changing canvas background colors
         Changing checker colors
         Changing map layout

  4. Resources and assets

         Adding resources
         Deleting resources
         Selection colors
         Bring Asset To Front
         Changing asset places

  5. Different types of assets

         Resource window
         Flip assets
         Repeat assets
         Interval assets
         Background assets

  6. Working with assets

         Visibility buttons
         Adding a comment to an asset
         Asset position
         Info window
         Step and snap toolbar buttons
         Move Asset To Center and Set Asset Position
         Scroll buttons, keep-coordinate buttons
         Mini map

  7. Markers

  8. Saving current progress

  9. Exporting tiles and assets

         Saving map with code
         Saving map with options
         Saving map as image
         Saving asset as image

  10. Preferences

         a) General settings
         b) Folders
         c) More

  11. FAQ

 

1. Introduction: TileObject is a desktop application that lets you design a tile map for a sprite kit game.  A platform map may consist of various graphical objects such as buildings, roads, bridges, trees and bushes.  So you place this component here and that component there to design a game map.  The ultimate goal of using TileObject is to slice the entire platform map into small tiles such that you can read this collection of tiles with Xcode as a texture atlas to create a sprite kit game.

 

Mac software TileObject

Screenshot 1-01

 

If you develop a platform game for iOS, you are likely to set the anchor point of the world to {0.5,0.5}, which will make it easier for you to design a game for different interface sizes (1,136 x 640, 1,334 x 750, 1,920 x 1,080, 1,024 x 768...).  This decision could also make it difficult for you to figure out the relative position of one object to that of another, but not using this application.  TileObject lets you easily find out the point where you have clicked relative to the center of the world.  TileObject will even tell you which tile the point where you have clicked on refers to.

 

Mac software TileObject

Screenshot 1-02

 

A beauty of using this application is that TileObject will generate Objective-C code for you when you save the tile map as a texture atlas to your disk.  So you can easily figure out how to load the saved collection of tiles with Xcode as far as you are familiar with SpriteKit.

 

Mac software TileObject

Screenshot 1-03

 

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

 

  1. Click on the new map toolbar button to start a new tile map.
  2. Click on the file manager toolbar button to open File Manager.
  3. Drag and drop image files that you place over a tile map onto the list to the left over File Manager.
  4. Select a resource and click on the add as asset button (blue arrow tab) to add the selected resource to the current tile map.
  5. Click on the save tiles toolbar button to save a collection of tiles as a texture atlas that can be used with Xcode.
  6. Click on the save as doc toolbar button to save current progress as a project file.

 

3. Starting a new tile map: Every time you launch the application, you will start with a blank canvas.  (See Screenshot 1-01.)  So the first thing you need to do is to create a map layout.  For this purpose, choose New Map under Map or click on the new map toolbar button [1].  (See Screenshot 1-02.)  And a small, separate window will appear.  In reference to Screenshot 1-02, notice that there are two group boxes.  Use the combobox [2] inside the group box to the left to set a tile size.  The tile must be a square, and the side must be an even number like 32, 64, 128 (but not 33, 65 or 129).  When you finally save the game map as tiles, it is this size each tile will have.  So if you enter 64 in the side combobox, the entire game map will be divided into squares of 64 points x 64 points.  Under this combobox, you find two color buttons [3].  Use them to set the colors of the canvas background checkers.  Moving on to the other group box, express the size of your game map in terms of tiles.  The width and the height of a map must also have even numbers.  When you enter all valid numbers, you will see a final map size [4] under the group box to the left.  If you want to save current configurations as default settings, click on Save [5].  Finally, click on Create [6] to start a new map.

 

Mac software TileObject

Screenshot 1-01

Mac software TileObject

Screenshot 1-02

 

When you create a new game map, you will have a canvas with 2-color checkers.  By default, the area outside the tile map is black.  You can choose Set White Canvas under Map to set a white background.  (See Screenshot 1-03.)  Notice that there are measurements at the top, at the bottom and to the left and to the right of the canvas.  Each number indicates the distance from the center of the map in terms of tiles.  So if you see 4, that's 4 tiles away from the center of the map.  These measurements will help you see the relative location of a graphical object to the center of the map.  Another thing you notice is that there are two red lines that intersect at the center of the map.  You can set a different line color by choosing one of the commands (for example, Set Black Lines) under Map.

 

Mac software TileObject

Screenshot 1-03

Mac software TileObject

Screenshot 1-04

 

By the way, the canvas consists of color checkers such that you can distinguish a graphical object from the background.  If you want to set different colors to checkers, you can do so at any stage by choosing Change Checker Colors [1] under Map.  (See Screenshot 1-04.)  And a separate, small window with two color buttons will appear.

We don't always make the right decision.  It's possible that you feel you need to change the layout size after proceeding with the current map.  TileObject does let you change the document size of the ongoing project whether or not you already have some graphical objects on it.

 

Mac software TileObject

Screenshot 1-04a

Mac software TileObject

Screenshot 1-04b

 

In order to change the layout size of the current map, first, choose Edit Map under Map.  A new modal window similar to the one that you saw when you created a new map will appear.  (See Screenshot 1-04a.)  So revise the tile size, map width or map height.  Then click on Change.  Screenshot 1-04b shows the result of extending the current map width by 20 tiles (80 tiles to 100 tiles).  In this case, you see some extra space horizontally.  At least, no graphical object has been lost.  And none of relative positions to others has changed.

 

4. Creating assets: Through this user's guide, we frequently use two seemingly identical terms.

 

  • Resource: A resource is a graphical file you have selected and opened.  Each resource is reusable in creating assets.
  • Asset: An asset is a graphical object appearing on the tile map.

 

With these defintions in mind, let's click on the file manager toolbar button or choose Show File Manager under Window.  This window largely consists of two lists, which are separated by a thin divider.  (See Screenshot 1-05.)  To the left, you have a list of resources [1] while the list to the right [2] shows graphical objects or assets appearing over the tile map.  In reference to Screenshot 1-06, locate the green plus button [1] at the bottom left-corner.  (You can also choose Add Resource under Resource for the same purpose.)  Clicking on the plus button, you will be prompted to select one or more pictures.  Just for now, try selecting only one picture and click on Open or press RETURN.  Likewise, select a different picture by clicking on the plus button.  Now, do you notice something different?  When you select and open the second resource, it will appear at the top of the list with the first resource appearing at the bottom.  That's not how a Cocoa tableView object usually works, is it?  But that's how it works here.  There's a very good reason why the latest resource will come to the top of the list, which we will discuss soon.

 

Mac software TileObject

Screenshot 1-05

Mac software TileObject

Screenshot 1-06

 

If you want to remove any of resources from the list to the left, first, select one to remove in the list.  (See Screenshot 1-07.)  Then click on the X button [1].  You can also choose Delete Resource under Resource.  You will be then prompted for confirmation.

 

Mac software TileObject

Screenshot 1-07

Mac software TileObject

Screenshot 1-08

 

If you have quick access to image files that you want to use, there is a better way of opening them as resources.  Well, you can just drag and drop them all directly onto the resource list.  (See Screenshot 1-08.)  It doesn't matter whether or not a group of files contains text files or Microsoft Word document files.  TileObject will selectively read particular file types including BMP, GIF, JPEG, JPEG 2000, PDF, PNG, PSD, TIFF.

 

Mac software TileObject

Screenshot 1-09

Mac software TileObject

Screenshot 1-10

 

So far, none of the resources hasn't appeared over the canvas, right?  So let's make that happen.  In reference to Screenshot 1-09, select one of the resources in the list and choose Add As Asset [1] under Asset.  More conveniently, click on the blue arrow tab button [2] at the bottom.  In reference to Screenshot 1-10, the selected resource should also appear under the asset list [1], which means that it must have been placed somewhere around the map.  But where is it?  When you turn a resource into an asset, a status message [2] will appear at the bototm-left corner of the main applicaiton windows, which says that a new asset has been added at the center of the map.  So you can scroll the map to the center to find the last asset.  Or just double-click on an object in the asset list, and the map will automatically scroll to locate the selected asset.

When you select an asset in the list or simply click on a graphical object over the canvas with your mouse pointer, the selected asset will get a focus with a sky blue color.  But if the selected asset itself consists of pixels with similar colors, you may not be able to see it being selected.  In such case, what you can do is to set a different selection color.  For example, choose Magenta Selection Color under Map.  (See Screenshot 1-11.)  If you click on the same or a different asset with your mouse pointer, you will see a change.

 

Mac software TileObject

Screenshot 1-11

Mac software TileObject

Screenshot 1-12

 

Now, try selecting a different resource and then clicking on the blue arrow button at the bottom.  In reference to Screenshot 1-12, taking a close look at the asset list, a purple item is actually the second asset but appears at the top.  Again, that's not Cocoa!  So assets will pile up in this list as well.  But why!?  If you take a look at both assets over the map, the second asset is placed over the top of the first asset, which is consistent with the way those assets are listed.  Now, grab the second row in the list.  Then drag-move it to the first row to change places.  (See Screenshot 1-13.)  If you look at the map, you should notice the change - the top asset in the list has also become the top asset over the map.  So it will make more sense if the newest asset appears above old ones in the list.  To be consistent with the asset list, the resource list will also show the newest item on top of old ones.  Does that make sense?

 

Mac software TileObject

Screenshot 1-13

Mac software TileObject

Screenshot 1-14

 

Instead of drag-moving an asset selection up or down, you can right-click on an asset in the list and choose Bring Asset To Front [1] to bring the selected asset to the top.  (See Screenshot 1-14.)

 

5. Different types of assets: So far, we have learnt how to add a selected resource to the asset list.  What you get in this manner is what the resource exactly is.  Next, let's find out how to add a selected resource to the asset list by flipping it horizontally or vertically.  We can also create a large item by repeating the same resource consecutively.

You probably have noticed by now that the first column of the resource list shows the preview of each resource.  These pictures are very tiny.  So if you need to take a good look at a resource, select one in the list and then choose Show Resource Window under Window.  Then you can see a bigger picture for the selected resource.  (See Screenshot 1-15.)  Using the resource window, you can click on the Change button to set a new path for the selected resource especially when you have misplaced the file away from the original location.

 

Mac software TileObject

Screenshot 1-15

Mac software TileObject

Screenshot 1-16

 

Anyway, if you want to add the selected resource to the canvas by flipping it horizontally, choose Add As Flipped Horizontally under Asset.  (See Screenshot 1-16.)  Similarly, you can add the selected resource by flipping it vertically by choosing Add As Flipped Vertically under Asset.

 

Mac software TileObject

Screenshot 1-17

Mac software TileObject

Screenshot 1-18

 

Sometimes, it may be a good idea to come up with a small pattern so that you can repeat that pattern consecutively to create a larger image.  For example, if you have an image like the one shown in Screenshot 1-17, you can repeat it consecutively to create a horizontally-long asset.  For this purpose, click on the tab button [1] next to the add as asset button with a blue arrow.  (See Screenshot 1-18.)  You can also choose Add As Repeat under Asset.  Using the modal window that has appeared, express the final size in terms of tiles.  For example, if you enter 80 in the width combobox, a repeat asset will have a width of 80 times the current tile side.  Screenshot 1-19 shows a final horizontally-long repeat asset resulted from a 128 px x 64 px resource image.  Screenshots 1-20 shows a repeat asset resulted from 64 px x 64 px resource image by repeating it 80 tile times horizontally and 4 tile times horizontally.

 

Mac software TileObject

Screenshot 1-19

Mac software TileObject

Screenshot 1-20

 

Next, we want to do something with a street light pole image.  (See Screenshot 1-21.)  It would be nice if we could post a street light pole every 3 to 4 tiles horizontally, right?  In this case, we don't want to create a repeat asset.  Rather, we can use interval.  So we choose Add As Interval under Asset while a graphical object in question is selected in the resource list.  We use interval to regularly but not consecutively repeat the same image horizontally.

 

Mac software TileObject

Screenshot 1-21

Mac software TileObject

Screenshot 1-22

 

In reference to Screenshot 1-22, the modal window gives you some information on your current situation like the map size and the size of the selected resource.  Initially, the application will automatically set the start value of 0 [1], which means that you might want the selected resource to appear right at the left edge of the map.  The application also sets some number to the end point.  The screenshot indicates it's 5120 points [2], which is the exact width of the tile map.  We are on our own in deciding the frequency of pole appearance.  So let's post a street light pole every 240 points, entering 240 in the last field [3].  By so doing, the application will calculate the approximate size [4] of a final interval asset.  Well, why don't we start the first pole at 100 points?  So let's enter 100 in the start field [5].  Finally, we click on Create [6] to create an interval asset.

Screenshot 1-23 shows the result of creating an interval asset.  A street light pole appears every 240 points, a little short of a width worth 4 tiles.

 

Mac software TileObject

Screenshot 1-23

Mac software TileObject

Screenshot 1-24

 

Looking at Screenshot 1-23, we now have two buildings with a pavement and street light poles.  Wouldn't it be nice if we had a background color for the sky just in order to get a better atmosphere while designing a platform map?  For this purpose, we choose Add As Background under Asset.  Then another modal window will appear.  (See Screenshot 1-24.)  Under this window, click on the only color button to pick a solid color.  If necessary, use the slider to set an opacity level.  Finally, click on Create.  Screenshot 1-25 shows the result.  We have to use File Manager to drag and move the background asset to the end of the list, don't we?

 

Mac software TileObject

Screenshot 1-25

Mac software TileObject

Screenshot 1-26

 

6. Working with assets: If you take a good look at the asset list under File Manager, there are checkboxes.  Each asset comes with this visibility button.  Every time you create a new asset, the application will automatically turn the visibility button belonging to that asset on.  If you turn off the visibility button of an asset, the corresponding asset will become invisible over the tile map.  (See Screnshot 1-26.)  So if you select a building in the asset list and then turn off its visibility button, that building will disappear.  Furthermore, when you save the entire map as a texture atlas, invisible assets will be excluded.

By the way, wouldn't it be better if you just programatically set the background color of the world like

 

@implementation GameScene {
BOOL contentCreated;
}

- (void)didMoveToView:(SKView *)view {
if (!contentCreated) {
[self createSceneContents];
contentCreated = YES;
}
}

- (void)createSceneContents {
self.backgroundColor = [SKColor colorWithRed:0.90f green:0.933f blue:0.96f alpha:1.0];
}

 

instead of creating a graphical object over the map?  The answer is Yes, absolutely.  You should set the background color of the world programatically.  The background asset is in fact different from others.  It's a non-visible assetWhether their visibility buttons are on or off, when you save the entire map as a texture atlas, the application will automatically exclude all background assets.

While designing a game map, you may feel that you need to post an asset-specific comment.  TileObject lets you add a comment to any asset very easily.  In reference to Screenshot 1-27, first, select an asset [1] in the list.  Then click on the Edit button [2].  You can now type anything in the text box [3].  The default text size is 12 points.  So it might be too small for some users.  No problem!  This text box supports styled text (RTF), actually, although the application doesn't have features of its own to let you change text size, text color, fonts and so on.  Yet, you can just use TextEdit and create a string of styled text.  Then just paste it into the text box.  Finally, don't forget to click on the Save button [4].  Try selecting a different asset and then coming back to the last one to make sure that the last asset comes with your comment.

 

Mac software TileObject

Screenshot 1-27

Mac software TileObject

Screenshot 1-28

 

Now, let's go back to the asset list once again.  In reference to Screenshot 1-28, we already know that the first column of this list shows the preview of each asset.  We also know what those visibility buttons on the second column are for.  You can probably figure out that the third column shows the size (dimensions) of each asset, can't you?  But how about fourth and fifth columns.  They share the same column name 'position.'  The fourth column [1] shows the position of each asset relative to the left-bottom corner.  In this case, the origin (0,0) is located at the bottom-left corner of the game map.  That's the default pair of coordinates for Cocoa graphics.  The fifth column [2] shows the position of each asset relative to the center of the map.  So whenever you create a new asset, its value under the fifth column should show 0.0,0.0 because we already know that new assets are all placed at the center of the map by default.

Apart from the position of the selected asset, you can also find out the exact position where you click over the tile map.  For this purpose, choose Show Info under Window, and a tiny window will appear.  (See Screenshot 1-28a.)  Shown at the top [1] is information on the current tile map.  The numbers shown within parentheses are the width and the height in terms of tiles, respectively.

 

Mac software TileObject

Screenshot 1-28a

 

 

Info also gives you two pairs of position coordinates.  The pair to the left [2] points to the position where you click over the map relative to the origin (bottom-left corner) while the pair to the right [3] shows the coordinate of the position where you click relative to the center of the map.  Finaly, the tile number indicates the tile that contains the position where you click.  If this number shows 0, for example, then the position where you have clicked must be a point at the very top-left corner of the map as TileObject slices the entire map into titles, starting from the top-left corner.  (In reference to Screenshot 1-43, that's Tile 000.)

As far as moving an asset is concerned, simply touch one with your mouse pointer to make sure that it's highlighted at first.  You can also select (= highlight) an asset from the asset list.  Then just move it anywhere around the tile map.  TileObject supports full undo/redo stacks.  So you can just press Command + Z or Command + Shift + Z to undo or redo last relocation.  (See Screenshot 1-29.)

 

Mac software TileObject

Screenshot 1-29

Mac software TileObject

Screenshot 1-30

 

If you want to move an asset to a corner of the map, there is a better way than to start from the center and move one manually.  Right-click on an asset and then choose Move Asset To Top Left or equivalent.  (See Screenshot 1-30.)  If you select a graphical object in the asset list, you can also bring up a contextual menu with the same group of commands.

In reference to Screenshot 1-31, there are two groups of similar-looking toolbar buttons.  Group 1 [1] includes Move down, Move up, Move left, Move right.  These buttons are used to move the selected asset by one tile.  For example, if you select an asset with your mouse pointer and then click on the move down toolbar button, the corresponding asset will be moved downwards by 1 tile.  We have another group [2] of similar-looking toolbar buttons.  This group includes Snap bottom, Snap top, Snap left, Snap right.  Using these buttons, you can move the selected asset to the edge of the nearest tile.  For example, if you want to move the purple building down to the bottom edge of Tile 5 (in reference to Screenshot 1-31.), you can click on Snap bottom.  And click on Snap left to move the same asset to the left edge of Tile 39.

 

Mac software TileObject

Screenshot 1-31

Mac software TileObject

Screenshot 1-32

 

There are two things you can do to move the selected asset to a precise position.  In reference to Screenshot 1-32, you can right-click on an asset and then choose Move Asset To Center [1], which will take the selected asset to the center of the map.  If you choose Set Asset Position [2], a modal window will appear so that you can specify a destination position.  (See Screenshot 1-33.)  Notice that there is a pair of  radio buttons at the top.  If you select system coordinates, the value fields inside the group box to the left will become accessible.  So enter a destination position relative to the bottom-left corner of the map.  If you select map coordinates, you have to set a destination position relative to the center of the map.

 

Mac software TileObject

Screenshot 1-33

Mac software TileObject

Screenshot 1-34

 

You should be aware by now that there are four buttons at the bottom-right corner of the main window.  (See Screenshot 1-34.)  You have two recess buttons [1],[2] at the corner.  If you turn on the - recess button, you will get to move the selected asset with your mouse pointer only horizontally, keeping the original vertical coordinate.  Turning off the - recess button, if you turn on the | recess button, you will only get to move the selected asset vertically.  Those two tiny buttons [3],[4] are used to quickly scroll horizontally.  Click on the button with a left-looking arrow to scroll the map to the left edge.  And click on the other push button with a right-looking arrow to quickly move the map to the right end.

As you probably already know, TileObject doesn't let you rescale the entire map.  If the current map is too big to fit the application window, it will show vertical and horizontal scroll bars, which makes it difficult to see the entire picture as a whole.  But that's not the end of the world.  If you choose Show Mini Map under Window, a separate window will apepar, giving you a preview of the entire map.  (See Screenshot 1-34a.)  By default, when you open the mini map window, the application will refresh the picture every two seconds.  The reason why it won't refresh the picture any time you make a change to the tile map has to do with the undo-redo stack.  Any time you drag and move an asset over the canvas, the undo-redo stack would hinder your mouse movement.  And if you undid or redid the last move, you could end up waiting for a while with a rainbow wheel to see a change.  A 2-second refresh time won't give you a stressless environment because you can be slightly interrupted every 2 seconds if your dragging lasts longer.

 

Mac software TileObject

Screenshot 1-34a

Mac software TileObject

Screenshot 1-34b

 

If you want to be completely intruption-free in dragging & moving an asset over the map, there is something you can do about it.  Click on the preferences toolbar button and then navigate to the more tab.  Explore the drop-down menu under this tab and select Never automatically.  (See Screenshot 1-34b.)  By choosing it, you need to click on the push button located at the bottom-left corner of the mini map window to refresh the picture manually.  Or choose Every 9 seconds or Every 10 seconds from the drop-down menu to give yourself sufficient time to finish dragging-moving an asset.  The longer is the refresh time, the less likely that your mouse movement will be interrupted.

 

7. Markers: In the last section, we learned that we can add a comment to the selected object over the asset list.  We have also discussed a non-visible asset.  In fact, we have another type of non-visible assets.  Markers belong to this type.  You can add a marker to your game map so that you can remind yourself about a certain map aspect.  Under the Marker menu, there are five commands.  (See Screenshot 1-35.)  If you choose Add Blue Marker [1], for example, TileObject will add a blue marker [2] to the center of the tile map.  You can freely move a marker around the map.  And you can add a comment to it since a marker is also asset.  The only differences between markers and other assets are that markers are non-visible assets and that markers are not asset-specific.  So whether you turn on or off the visibility button of a marker is not important when you save the current map as a texture atlas because all markers will be automatically excluded.  And you don't have to select an asset in order to record a comment!

 

Mac software TileObject

Screenshot 1-35

 

 

8. Saving current progress: TileObject lets you save current progress as a project file.  TileObject literally saves pretty much everything including the current window size and tiny preview icons appearing under the asset list to make sure that you will be able to reconstruct the very last phase of progress.  Tenically speaking, TileObject saves each asset as an NSData object, raw data object, put in an XML file.

In order to save current progress, simply click on the save as doc toolbar button.  You can also choose Save As Project under File for the same purpose.  And you will be prompted to name a file.  This application uses the extension of tob.

 

Mac software TileObject

Screenshot 1-36

Mac software TileObject

Screenshot 1-37

 

If you want to recover last progress from a saved project file, simply double-click on one.  You can also click on the open doc toolbar button or choose Open Project under File as well.  You will be then prompted to save a file.  (See Screenshot 1-36.)

One thing that you may notice when you save a project file is that a file can be quite big.  If you see Screenshot 1-37, this project file is 21.8 MB.  If you want to reduce the file size, you may want to delete non-visible background images.

Screenshot 1-38 shows the result of opening a project file.  Notice that the title of the main application window now indicates the current ongoing project.  You can now choose Save Project under File or press Command + S to write over the current project file.

 

Mac software TileObject

Screenshot 1-38

 

 

9. Exporting tiles and assets: If you remember, the main objective of this application is to let the user save a platform game map as a texture atlas.  So let's find out how to complete our objective.

When you start a new tile map, the application will stand ready to let you save the map as a collection of files for SpriteKit.  And the save tiles toolbar button should be active.  Clicking on it, a new modal window will appear.  (See Screenshot 1-39.)  You can also choose Save Tiles With Code As under File for the same purpose.  And there are some settings to consider.  When you read a collection of images as a texture atlas with Xcode, you need a folder with the atlas extension to house.  That's the folder name field [1] is for.  The file name field [2] is used to specify the prefix of each tile name.  For example, if you enter 'fox,' TileObject will chop the entire map into square tiles named 'fox0,' 'fox1,' 'fox2'...  Furthermore, we need to set an export format [3].  Generally, you should choose PNG as that's the format that Xcode designates to read a collection of images as a texture atlas.  If you want to save all these settings, click on the Save button [4].  But not yet...  There are additional settings to work on by clicking on the disclosure button [5].

 

Mac software TileObject

Screenshot 1-39

Mac software TileObject

Screenshot 1-40

 

In reference to Screenshot 1-40, first, you need to decide which development platform your tiles are for.  So use the pair of radio buttons [1] at the top to make your choice.  Secondly, you need to decide whether your intend to set the anchor point of the game scene world to center or bottom-left [2].  This choice won't affect the way the application will slice the entire map into tile images.  However, the way you read the tile collection will be different, depending on where the anchor point is.  Moreover, there are four fields to follow.  They are used to name variables.  These variables are used in a code file that TileObject generates in line with a texture atlas.  If you are finished, click on Close [3] or click on the disclosure button to close the popover window.  Then click on the Next button to proceed.

Next, you will be prompted to select a folder or a volume where to save a texture atlas folder and a code file.  (See Screenshot 1-41.)  The name of the texture atlas depends on your setting while the code file will be specifically named tile.m.  If TileObject finds an existing file sharing the same name as tile.m, it will append a number to 'tile' to avoid overwriting your existing file.  Likewise, TileObject will avoid overwriting an existing folder if it finds a folder sharing the same name as the one you have designated.  Anyway, click on Open or press Return, and a window sheet with a progress wheel will follow while the application chops the map into square tiles.

 

Mac software TileObject

Screenshot 1-41

Mac software TileObject

Screenshot 1-42

 

Screenshot 1-42 shows an example of saving the map as a texture atlas with a code file.  If you explore the folder [1] with the atlas extension, you will find a number of chopped tile images.  And try opening tile.m [2] with Xcode.  Taking a close look at the lines of Objective-C code in it, you will see how those variable names over the popover window settings are used.  The implementation file indicates that tile files need to be first loaded into an NSMutableArray object.  Its default variable name is backgroundTextures.  You need an SKSpriteNode object to hold each tile.  The default variable name of this object is tileNode.

If you find it difficult to read your texture atlas with your Xcode project, make sure you state the anchor point of the game world.  tile.m says it at the beginning.  You also need to declare your NSMutableArray object for hoding tiles somewhere.  If you still have difficulty, see our sample projects each for OS X and iOS.  Click here to download a zip package containing sample projects.

So how does TileObject slice the entire map into tiles?  Top to bottom and right to left?  In reference to Screenshot 1-43, provided that you had a map size of 1,280 points x 768 points and the tile side had 64 points, the first tile would be 000.  Then the next tile would be 001 and move on to 019, 020...  So TileObject will chop the entire map into square tiles, starting from top-left corner and goes from left to right.

 

Mac software TileObject

Screenshot 1-43

Mac software TileObject

Screenshot 1-44

 

You can have some options in slicing the entire map into tiles.  For this purpose, choose Save Tiles With Options As under File.  Then another modal window will appear.  (See Screenshot 1-44.)  Under this window, you can decide whether you want to start from left to right or right to left and whether or not you want to move from top to bottom or bottom to top in slicing the entire map into tiles.  The red right-angle arrow over the preview box indicates how the application will proceed in chopping the map.  Furthermore, you don't necessarily cover the entire map and can decide which row to start and then end and which column to start and then end.  The only catch is that TileObject won't create a code file.  So you will be on your own in reading a texture atlas.  Anyway, after working on these settings, click on Next, and you will be prompted to select a destination folder.

 

Mac software TileObject

Screenshot 1-45

Mac software TileObject

Screenshot 1-46

 

Now, if you want to save the entire map as a single picture, you can do by choosing Save Map As under File.  And a small modal window will appear, giving you an export format choice.  (See Screenshot 1-45.)  If you click on Next, you will be prompted to name a file.  Screenshot 1-46 shows an example.  A saved picture can be quite big in dimensions.

 

Mac software TileObject

Screenshot 1-47

Mac software TileObject

Screenshot 1-48

 

Finally, if you select an asset with your mouse pointer over the canvas or select one in the asset list, the Save Asset As command under File will become accessible.  (See Screenshot 1-47.)  Choose this command to save the selected asset as a picture.  And another small modal window will appear, giving you an export format choice.  (See Screenshot 1-48.)

 

 

 

 

 

 

 

 

 

 

 

<< Previous page   Next page >>