Overview

Crocotile 3D is a tile-based modeling editor. You can import tilesets and select tiles from the image to place into the 3d scene to construct environments, objects, characters or anything else you can imagine. Controls in the editor allow you to fine-tune and edit these tiles, allowing any shape or form to be made. This document outlines all methods of interacting with the software with instructions on how to use it.

Getting Started
Commands
Configuration
Tilesets
Painting
Objects
Layers
Exporting
Active Selection Mode

Getting Started

When you open Crocotile 3D, you're presented with the main window that displays an empty scene (where you'll be placing the tiles), and a smaller window that contains Tileset and Paint tabs. The Tileset tab is open by default and is where you can choose which tiles to draw into the scene. Clicking on the tileset will select a portion of the image according to the tilesize values near the bottom of the window and this portion will be used when drawing your tiles into the scene.

To draw into the scene, you must be in Draw mode. This mode is activated by default. You can toggle between Draw mode and Edit mode by pressing Tab or by clicking the Mode button located at the top of the main window.

When you are ready to draw to the scene just click the scene to place a tile or click and drag to place multiple tiles. Right clicking will erase them. You can control the position where the tiles are created as well as their direction. The tile gets placed against an invisible plane that always aligns with the 3d crosshair.

The 3d crosshair is depicted by white lines that extend along the x, y, and z axis. By moving this crosshair, you can adjust where the tiles are drawn. You can press W, A, S, and D to move the crosshair up, left, down, and right. Holding Spacebar and pressing W will move the crosshair away from you while pressing S while Spacebar is held will move the crosshair towards you. Adjusting the Grid Rounding value found in the lower right of the Tileset window will define the distance the crosshair moves.

Rotating the scene/camera to look at it from another angle will allow you to change which invisible plane the tiles get drawn against. So for example, if you are looking down at the scene then the tiles will get drawn looking upwards. Hold Spacebar and click and drag using the mouse buttons to rotate, zoom, and pan the camera.

Try drawing tiles from various angles and moving the 3d crosshair to get comfortable with placing tiles. These controls are unique so it may feel strange at first, but they are designed to be intuitive. It will allow you to place tiles quickly from any angle and position. You could try rotating the tile brush by pressing Q or E. You can even flip it or mirror it by pressing F or R.

When you've had enough practice, you'll want to begin editing the tiles to gain greater control over their shape. Switching to Edit mode will allow you to interact with the tiles in various ways. In Edit mode, you can click on tiles to select/deselect their faces or click on their corner points to select/deselect their vertices. With these highlighted, now moving the 3d cursor via the W, A, S, and D keys will move the selected vertices and faces as well. Holding Shift will allow you to move the crosshair without moving the selection. User a lower Grid Rounding value for more precise positioning.

Try selecting and moving faces and vertices. You can also press Q or E to rotate the selection in Edit mode. Notice that the selection rotates around the center of the 3d crosshair. F will flip the selection relative to the crosshair position and R will mirror it similarly.

There are other ways of moving the selected vertices and faces. One way is to drag the arrows that appear when you hover the mouse over the 3d crosshair. You can turn off these arrows in the settings if you prefer. Another way to move vertices is by clicking and dragging them directly with the mouse. You can hold Shift while you drag a vertex to snap it onto another vertex.

A couple other things that you can do to tiles that are worth mentioning is reversing the face, or flipping the face edge. Try reversing a face by selecting a tile and pressing Shift+R. If it disappears, this is because it is now facing away from the camera in the opposite direction. Tiles aren't visible from their backside. Each tile consists of two triangles, and the edge these triangles share can be flipped by pressing Shift+F. Try flipping some edges to see the effect it has. This is useful if you want more control over how a tile is shaped.

Be sure to look over the list of commands and read through this entire document to understand all the ways you can interact with tiles, edit them, paint over them, and more.

Commands

General

Hotkeys

Camera Controls

Holding Spacebar will toggle camera mode. In this mode, you can click and drag the scene using the mouse buttons to rotate, zoom, and pan the scene. This will allow you to change the direction of the plane to which you draw your tiles(see Draw mode for more info).

There is also the viewcube that can be used to rotate/zoom/pan the scene. It is styled as a lowpoly crocodile. Simply click it and drag- depending on whether you use left middle or right mouse button will determine whether it rotates, zooms, or pans. The viewcube can be re-positioned by dragging the small semi-transparent circle. You can also double-click the circle to toggle it on or off, or right click the circle.

Crosshair Controls

The 3d crosshair is used to position the invisible plane to which you draw tiles onto, as well as to move selected vertices and faces, or to rotate, mirror, flip them. The 3d crosshair is visualized as white lines that extend along the x, y, and z axis. You can adjust the grid size to change how far the 3d crosshair moves per step.

Draw Mode

When drawing tiles or prefabs into the scene, the tiles or prefabs will be drawn onto an invisible plane that aligns with one of the 3d crosshair's axis depending upon the current direction of the camera. Positioning the crosshair allows you to draw at any position in 3d space.

Hotkeys

Edit Mode

Each tile consists of four vertices and two triangles/faces. These can be modified in various ways and in various combinations. You can right click the scene in edit mode to open a menu with various actions that can be made on selected vertices or faces.

Hotkeys

Tilesets

With the Tileset tab open, you can select a part of the image. This selection can then be drawn into the scene. Multiple tilesets can be used by clicking the tileset button and choosing to Add a new tileset. Then you can click the next and previous buttons to toggle between them.

Paint

The following keys apply while the Paint window is in focus. Read the Painting section to learn more about how to use the tools.

Scene

Opening the Scene tab will display a list of layers and objects if any exist in the scene. You can add layers or import prefabricated objects, or create objects from groups of tiles in the scene. To know more, check the Objects section.

Configuration

Main Menu

The main menu can be accessed from the main window. The button on the right side in the panel at the top will display the menu when clicked.

Settings

These can be adjusted by accessing the settings menu item in the main panel, or by pressing f1.

Buttons

The key bindings can be adjusted by accessing the buttons menu item in the main panel.

Camera

Skybox

Included with the program is a skybox.png file. This image serves as a template for your skyboxes. Images can be larger or smaller as long as the layout remains the same. From the menu in the main window, there is a Skybox menu item with options to pick a skybox image, or to show/hide the skybox.

About

This will show a box with information about the version of Crocotile 3D. It will also provide input fields to type in your email and activation code if you have registered for one. Registering allows you to gain the ability to save a scene with more than 100 tiles and also allows exporting your work. It also helps support the development of this product.

Tilesets

Tiles in your scene display portions of your tilesets and there are various ways to customize your tilesets. Selecting faces in the scene will display the corresponding UVs on the tileset and these can also be editing by right-clicking and dragging their corners in the Tileset window.

Menu

The button with an image icon will open a menu with the following choices.

There is also a button between the buttons with arrow icons. Clicking it will show a dropdown list of all your tilesets. This is a way to easily select another tileset. You can also press Ctrl+[ and Ctrl+] to cycle through them, or click the arrow buttons.

Re-size Tileset

Opens a window with various options to customize how to re-size the currently selected Tileset. You can control from which side the Tileset gets re-sized from by clicking one of the nine buttons and arrows will show the direction the re-size will occur.

Export Tileset

If you make any changes to your Tileset, such as resizing it or painting on it, you can export the image in png format by selecting this menu item.

Tile Swapping

You can swap tiles by selecting tiles in the tileset window and then right-click and dragging them to the desired location. UVs of tiles in the 3d scene will get updated to the new UV locations if their UVs were inside the tile area you are repositioning.

Refresh

The refresh button next to the Zoom menu will force the Tilesets to refresh. They won't refresh if there have not been any changes to their file outside of the program. Be careful if you are Painting over your Tilesets if you haven't refreshed them prior to that process as refreshing them may overwrite your work. You can enable auto-refresh in the settings to keep the Tilesets up to date if you are editing them outside of the program.

Painting

When you select a tile or group of tiles in the Tileset tab, this portion of the image then becomes editable when clicking on the Paint tab.

Drawing Tools

These help modify the pixel data of the textures/tilesets. See your changes in real-time reflected on the 3d model.

Selection Tools

Limits painting to within the selection. The selection can be moved, cut, copied, pasted, and re-sized. Add, subtract, and intersect modifiers can be accessed when combining Alt, Shift keys. Cut and copy modifiers can be accessed with the Ctrl, Alt keys.

Move Tools

Re-size Selection

After a selection has been made, handles will appear on the corners and sides of the selection. These handles can be clicked and dragged to adjust the size. If a portion of the image has been clipped, it will also be re-sized. The following keys can be held down to control how the selection is re-sized.

Objects

Objects can be created by grouping tiles together. Object instances can then be added to the scene. Editing one instance allows all instances to be updated with the same changes.

Instances / Prefab Brush

Instances can be added to the scene in two ways. One way is through the menu when right-clicking an object in the Scene tab list. This will place the object at wherever the current position is of the 3d cursor. Another way is by left-clicking the object in the list while in Draw mode. This will allow you to place objects in the scene near your mouse, relative to an invisible plane that sits against the 3d cursor (This acts just like when you place single tiles). You can also erase the instance by lining up the Prefab Brush with an instance, and right-clicking it in the scene, exactly as you would do with a normal tile.

Object Points

Each object has an origin point that helps with the placement of the instances within the scene. At the time of creating an Object, the current location of the 3d cursor will determine where to place the origin point relative to the rest of the tiles in the object. The origin point can be re-positioned afterwards, as well as new points added for custom data.

Object Context Menu

This menu allows you to perform various operations related to an object. To open the menu, go to the Scene tab and right-click an object that is listed. See below for more information regarding the various menu choices.

Add to Scene

This will place an instance of the object at the location of the 3d cursor in the scene without any rotation applied.

Rename Object

This will show an input box to type in the new name for the object.

Select all

All instances of the object in the scene will become highlighted/selected.

Deselect All

All instances of the object in the scene will become unhighlighted/deselected.

Hide/Show all

If you want to hide or show all the instances of a specific object. If the instances are currently hidden/invisible, they will become visible for example.

Delete Object/Instances

This completely removes the object and all of its instances from the scene.

Export Instance Data

If you have exporting activated, you can save data related to an object, such as the coordinates and rotation of each instance in the scene, as well as any additional object points it has. This may be useful if you intend to load these objects separately in another program and need the coordinates so that you can line them up accurately with the rest of the scene.

{"name":"Object 1","points":[{"name":"Origin","pos":{"x":0,"y":0,"z":0}},{"name":"Point","pos":{"x":0,"y":0,"z":0}}]}

... ,{"pos":{"x":0,"y":0,"z":0},"rot":{"x":0,"y":0,"z":0,"order":"XYZ"}}, ...

Generate NormalMap

This is an experimental feature. It will generate a normal map of the prefab object. Z axis is considered the direction out from the image.

Generate HeightMap

This is an experimental feature. It will generate a height map of the prefab object. It will use the origin point of the object as the ground level, and check the Z values of the tile's vertices to generate the height map values. The highest Z value will be considered the highest point.

Export Obj

If you have exporting activated, a save dialog box will appear allowing you to save the object as an .obj file that you can then import into other programs. If the object consists of multiple textures, you would need to export for each tileset/texture image as explained in the exporting section of this document. Or export with a MTL file to include all tilesets. You can also batch export more than one object at the same time by choosing Export Objects in the File menu.

Export Prefab

If you have exporting activated, a save dialog box will appear allowing you to save the object as its own prefab that can be loaded into any crocotile3d project. All textures that the object uses will be saved and when imported they will be added as well. There is an option in the tileset menu that allows combining two tileset/texture images together in the case that importing creates duplicate images.

Layers

Layers allow you to organize your object list inside the Scene tab. You can drag objects into and out of layers and label them to help you when sorting through them. Layers can also be dragged into and out of other layers. To add a layer, simply click the + button near the top of the window while the Scene tab is open. If you right-click a layer, a menu will display with the following options.

Export

If you have registered and activated your program, you'll have the ability to save and export.

  1. Choose a tileset that is being used in your scene.
  2. Click the Export button located inside the File menu in the main panel.
  3. Select which objects to include in the scene if necessary.
  4. Pick a location to save your .obj file.
  5. Type in a name for your file and click save.

If you are using multiple tilesets to construct your scene, you will have to export for each tileset unless you choose to export a MTL file with your OBJ. If you choose this, it will also export all the textures the MTL will reference. If you don't choose to export a MTL file, then when you export, it looks at the current tileset that you have selected and checks to see if there are any tiles in the scene from that tileset. If there are none from that tileset, then it won't export. When you choose a tileset that has tiles in the scene, the export will work and an .obj file will be created with tiles that use only that tileset.

If you export without the MTL option, each .obj file will contain tiles from one tileset, which means that your scene will be split up into multiple parts. Then when importing into another program, you can load all of the exported .obj files, apply the correct tileset texture to each one, and position them to the same coordinates. Your scene will look fine, and everything will be together.

If you export with the MTL file, then when you import the .obj file into a program that supports mtl files, it will import everything with the appropriate textures assigned.

Tile Spacing

When exporting, the tile spacing option will add pixels around each tile. So if you choose a value of 2, each tile will have two rows/columns of pixels added on each side, so there would be 4 total pixels rows/columns between every tile. Example: [[Tile]][[Tile]][[Tile]]

This tile spacing implementation only works if you keep all your uvs square with the same dimensions (one tile size per tileset).

Power of Two

With power of two option enabled, the tilesets will resize the canvas (it will add empty space) up to a power of two dimension if they aren't already. This may be necessary for some engines to render your textures correctly. For instance, if your textures look blurry, it may be due to tilesets not being power of two dimensions.

Active Selection Mode

If you are in Edit mode and have at least one face selected, you can press Shift+Enter to toggle Active Selection Mode, or you can press the middle mouse button. This mode prevents editing tiles that weren't selected so that you can focus on editing only the selected tiles.

Tile Splitting

While in Active Selection Mode, you will see a yellow line appear on selected tiles when you hover your mouse over them. The line represents where you can choose to split a tile. Adjusting the Tile Splitting value located in the lower right corner of the Tileset window in the Tileset tab will give you more control over where you can split a tile. Setting the value to four will let you split the tile at every fourth pixel for example.

  1. Position the yellow line where you want to split a tile.
  2. Right click to bring up the edit menu.
  3. Go to Faces, and click on Split Tile.

Subdivide

A tile can be subdivided. This process will create new tiles in a grid formation across the original tile. When you select subdivide, a window will popup where you can set the rows and columns. Settings the rows to 3 and columns to 3 will divide the tile up into 3 by 3 tiles. This process might be heavy if you try to divide into a large amount of tiles, so make sure to keep it manageable.