Crocotile 3D Guide
Overview
Ground Tiles
Cliff Tiles
Water Tiles
Pixel Bleeding
Animating Tiles
Billboard Objects
House Tiles
Tree Tiles
Miscellaneous Tiles
End
Ground Tiles
Cliff Tiles
Water Tiles
Pixel Bleeding
Animating Tiles
Billboard Objects
House Tiles
Tree Tiles
Miscellaneous Tiles
End
This is a guide that will walk you through the process of creating a scene in Crocotile 3D. On this page you will find instructions for every step of the process. All you have to do is follow along. If you run into any issues or cannot understand something, check the Documentation, otherwise please get in touch, and we will be happy to help. If you have any suggestions on how to improve this guide, let us know!
The Crocotile project files for this scene are available for download if you need them:
📝
Would you like to translate this document to another language? Your help would be appreciated!
To translate this document click on any text and replace it with your translation. Click Save at the top of the document to export the data. You can import the data you've previously saved by clicking Load.
In this section of the guide, we will create some basic ground tiles in a new blank tileset. First we will need to add a new blank tileset to use. Once the tileset is added, we will select an area of the tileset that we want to edit, then we will go to the Painting panel. Inside the Painting panel we can draw the ground tiles to the tileset using various paint tools. So, let's begin!
Tileset
- Add a blank tileset
Find the Tileset menu button located in the Tileset panel. Clicking it will reveal a menu that holds the option Add Blank Tileset. Click this option.
- Blank Tileset Panel
In the tileset panel, change Opaque to Transparent. This will ensure the background is empty when it is created. Click the Create button and the new tileset will be added to the project.
- Select area of tileset
Now change the UV Tilesize to have a width and height of 8 pixels. The tiles we create will be 8 pixels in dimension, and setting the UV Tilesize will ensure that when we select from the tileset, it will select using that measurement.
With the new tileset now added, select a portion of the tileset. Click somewhere on the tileset and drag the mouse to select an area.
With the new tileset now added, select a portion of the tileset. Click somewhere on the tileset and drag the mouse to select an area.
- Open the Painting panel
With the area selected in the Tileset, click the Painting tab to open the Painting panel where you will find various tools you can use to edit the tileset image. Here you will draw the tiles onto the tileset.
Painting
- Marquee select
Click the Marquee tool or press the M key. The Marquee tool allows you to select a rectangular portion of the canvas. With it selected, it will restrict your drawing to within the selection. You can also cut and paste selections too. For now, select a spot on the canvas where you want the tile. Hold Ctrl while you click and drag to snap the selection to the tilesize. Select just one tile. If you make a mistake while selecting, you can click outside the selection to clear the selection, or press Ctrl+D.
You may want to zoom in to make it easier to select a single tile space. You can use the Zoom dropdown menu located in the top-right of the panel, or the scroll wheel on your mouse. You can also press Ctrl+Plus and Ctrl+Minus to zoom in and out.
You may want to zoom in to make it easier to select a single tile space. You can use the Zoom dropdown menu located in the top-right of the panel, or the scroll wheel on your mouse. You can also press Ctrl+Plus and Ctrl+Minus to zoom in and out.
- Paint Bucket
With your tile space selected, choose the Paint Bucket tool next. You can press G to switch to the tool. Select a color similar to one of the example tiles by adjusting the R, G, and B values on the color sliders. Then click within the selection on the canvas to fill it with your chosen color. You can save your color to the color palette by right-clicking within the palette area and choosing Add Color from the context-menu that appears. Repeat this process for all the ground tiles so that you have something like shown in the image.
- Paint the details
Once you have the tile spaces filled in with a solid color, you can switch to the Pencil tool or press the B key and begin drawing in details for the tile. Change your color if you need to. You can also Eyedrop existing colors from the canvas by using the Eyedrop tool. There are shortcuts you can use, so that you don't have to switch back and forther between tools. You can hold Alt and Click to eyedrop a color without selecting the Eyedrop tool. This makes it easier to switch colors while you draw on the canvas. Continue painting the details of the tiles until you have something that looks like the example.
3D Draw
- Select a grass tile
Once you have all of these tiles drawn onto your tileset, you are ready to start placing them into the 3d scene. Go back to the Tileset panel and select a grass tile by clicking on it.
- Orient the camera
Make sure you are in Draw Mode. There is a button at the top of the 3d viewport that can toggle between Draw Mode and Edit Mode. Alternatively you can press the Tab key to toggle modes. By default the mode is set to Draw.
Before drawing tiles into the scene, you'll want to face the camera downwards so that the invisible crosshair plane that the Tilebrush aligns itself on will span across the X and Z axis. The crosshair plane intersects the 3d crosshair (depicted as the white lines), and will orientate itself based on the orientation of the camera.
To orient the camera, hold down the Spacebar and left-click and drag the mouse. This will rotate the camera, and the Tilebrush will always face towards the nearest cardinal direction that points towards the camera.
Before drawing tiles into the scene, you'll want to face the camera downwards so that the invisible crosshair plane that the Tilebrush aligns itself on will span across the X and Z axis. The crosshair plane intersects the 3d crosshair (depicted as the white lines), and will orientate itself based on the orientation of the camera.
To orient the camera, hold down the Spacebar and left-click and drag the mouse. This will rotate the camera, and the Tilebrush will always face towards the nearest cardinal direction that points towards the camera.
- Draw 3d tiles
Begin drawing the tiles into the 3d scene. Click the Left mouse button to place a tile into the scene. You can drag the mouse while holding down the button to draw multiple tiles into the scene. Draw a couple patches of grass. Make sure there is space between them where the water tiles will be placed later.
You may want to Pan the camera while you work, by holding Spacebar and Right-clicking and dragging the mouse. This will allow you to shift the camera to focus on your work. Use the Scroll wheel to zoom in and out, or click and drag the middle mouse button. Alternatively you can also press the + and - keys.
You may want to Pan the camera while you work, by holding Spacebar and Right-clicking and dragging the mouse. This will allow you to shift the camera to focus on your work. Use the Scroll wheel to zoom in and out, or click and drag the middle mouse button. Alternatively you can also press the + and - keys.
- Draw more 3d tiles
Choose other tiles from the tileset and place them into the 3d scene as well. You can erase tiles from the 3d scene by hovering the tilebrush over an existing tile and right-clicking. Lay out some tiles similar to the example. We want to have some grass areas, rock areas, and space for water to run through. You can press the Q and E keys to rotate the Tilebrush. We will need to rotate the Tilebrush so that we can draw the grass edges and rock edges appropriately connected. We'll also need to do this for other tiles as well, such as the ones that transition from grass to rock, and shaded grass and unshaded grass. You may also need to Flip or Mirror the Tilebrush as well by pressing F and R.
3D Edit
- Select the vertices
Once we have some tiles drawn into the scene, we can begin editing their shape. We want to angle downwards the tiles that will connect to the cliff walls, as well as the tiles that will connect to the water. First switch to Edit Mode.
With Edit mode enabled, you can select the vertices, edges, and faces of tiles. Select the vertices shown in the image. You can simply click on the vertices (the white squares), or you can click and drag a marquee box around the vertices to select multiple. To deselect them, you can click them again, or hold Alt and click and drag a marquee box to deselect multiple vertices. You can also deselect every vertex by pressing Ctrl+D.
With Edit mode enabled, you can select the vertices, edges, and faces of tiles. Select the vertices shown in the image. You can simply click on the vertices (the white squares), or you can click and drag a marquee box around the vertices to select multiple. To deselect them, you can click them again, or hold Alt and click and drag a marquee box to deselect multiple vertices. You can also deselect every vertex by pressing Ctrl+D.
- Edit the geometry
With the vertices now selected, use the W,A,S, and D keys to move them around. The direction they move is relative to the camera's orientation, so you may need to reorient the camera. It will also move the 3d crosshair depicted by the white lines. W moves it up, S moves it down, A moves it left, and D moves it right. You can also hold Spacebar and press W to move it away from the camera, or hold Spacebar and press S to move it towards the camera. These keys allow you to move it along the six cardinal directions.
The amount it moves is based on the Grid rounding value, located in the bottom-right corner of the Tileset panel. This is set to 8 pixels by default, but it can be changed to provide more precision. For now, 8 pixels is fine.
Move the selected vertices so that it looks similar to the example image. They should be raised so that the edges of the grass are angled downwards. Make sure to deselect the vertices afterwards so that they don't get moved any further.
The amount it moves is based on the Grid rounding value, located in the bottom-right corner of the Tileset panel. This is set to 8 pixels by default, but it can be changed to provide more precision. For now, 8 pixels is fine.
Move the selected vertices so that it looks similar to the example image. They should be raised so that the edges of the grass are angled downwards. Make sure to deselect the vertices afterwards so that they don't get moved any further.
- Triangular tiles
Some tiles will need to have one triangle hidden, since we drew a limited variety of tiles, in order to make things look seamless. This will allow us to shape the corners of the grass areas. To make a tile triangular instead of square, simply move one of the vertices onto another vertex of the tile. You may have to flip the direction of the diagonal line in the tile by pressing Shift+F, so that it will triangulate better. Make sure to select the face of the tile before pressing Shift+F, as this operation is applied to any selected tiles.
If there are multiple vertices overlapping each other, and you only want to select one of them, hover over the tile that contains the vertex you want to select and then hold Ctrl and click the tile. It will select the nearest vertex belonging to the tile you are hovering over. If it is already selected, then it will deselect it.
Use these operations to create the corner pieces for the grass. Remember to switch to Draw Mode when you want to add another tile, and back to Edit Mode when you want to edit tiles. You will end up with two triangular tiles like shown in the image.
If there are multiple vertices overlapping each other, and you only want to select one of them, hover over the tile that contains the vertex you want to select and then hold Ctrl and click the tile. It will select the nearest vertex belonging to the tile you are hovering over. If it is already selected, then it will deselect it.
Use these operations to create the corner pieces for the grass. Remember to switch to Draw Mode when you want to add another tile, and back to Edit Mode when you want to edit tiles. You will end up with two triangular tiles like shown in the image.
- Continue shaping
Work to shape the rest of the tiles like shown in the example image. You will have to move the vertices to raise the grass, as well as create triangular pieces for some of the corners. Alternatively, you could go into the Painting panel and paint a tile into the tileset that could be used as a corner piece, if you don't want to make triangular tiles.
To toggle the wireframe on and off, press Ctrl+9. The wireframe will help you visualize the geometry of the tiles.
To toggle the wireframe on and off, press Ctrl+9. The wireframe will help you visualize the geometry of the tiles.
The ground is basically complete for now. Notice how we can achieve a nice variety of shapes and textures using just a few tiles from a tileset and constructing them in 3d. Now we can move onto the cliff tiles in the next section. Don't forget to save your project! Crocotile will save a backup every 5 minutes in the folder where Crocotile resides, but it is good practice to keep backups of your own.
The cliff tiles will be used to connect the lower ground tiles with the higher ground tiles. Together they will construct a vertical wall, and in the middle of this wall is where the waterfall will be located.
Painting
- Paint the cliff tiles
First we need to paint the tiles onto the tileset, so repeat the same steps as before. In the Tileset panel select the area of the tileset that you want to edit, then go to the Painting panel and use the paint tools. Select the Marquee tool to select a tile space, and fill it in with a color using the Paint Bucket tool. Then paint the details using the Pencil tool. You can always return to the Painting panel to make edits to the tileset and add more details, so don't worry about making it perfect the first time.
3D
- Create space for cliff
Now make sure that Edit Mode is activated and select the two patches of grass in the 3d scene that will be used at the top of the cliff. You can hold Shift and click and drag the mouse to select the faces of multiple tiles, instead of the vertices. You can also hold Shift+Alt and click and drag to deselect the faces of multiple tiles.
Use the W, A, S, and D keys to raise them higher. You can also click and drag the 3d Gizmo to move selected tiles if you don't want to use the keys.
The 3d Gizmo can be hidden / revealed by pressing the X key, or by clicking the corresponding button at the top of the 3d viewport.
Use the W, A, S, and D keys to raise them higher. You can also click and drag the 3d Gizmo to move selected tiles if you don't want to use the keys.
The 3d Gizmo can be hidden / revealed by pressing the X key, or by clicking the corresponding button at the top of the 3d viewport.
- Add cliff tiles to the scene
Now open the Tileset panel and select a cliff tile from the tileset and begin adding them to the 3d scene. Remember to activate Draw Mode, so that you can draw the tiles into the scene. Orient the camera so that the Tilebrush stands vertically, and positition the 3d crosshair on the edge of the grass tiles. You can hover over a grass tile and press Alt+C to position the 3d crosshair to the nearest vertex belonging to the tile; That way you can quickly align the Tilebrush next to existing tiles. Add the cliff tiles as shown in the example image. You will have to select different cliff tiles from the tileset as you construct the various levels of the wall. If you need to; rotate, flip, or mirror the Tilebrush to get them placed correctly.
- Select some cliff tiles
Select the faces of the tiles shown in the image, and then press Ctrl+A to select all the vertices that belong to those selected faces. Then press Ctrl+A again to select any overlapping vertices that don't belong to the selected tiles. This will allow you to move the selected tiles while also moving the vertices of tiles that touch them.
- Shape the cliff tiles
With the cliff tiles selected, move them like shown in the image. The geometry will remain connected due to selecting the vertices that touch the highlighted faces.
- Continue shaping tiles
Deselect everything by pressing Ctrl+D twice (once to deselect any vertices, and again to deselect any faces). Continue editing the geometry of the cliff by moving the vertices around. You may have to create some triangular tiles near the corner of the cliff where it changes direction.
Once you have the shape of the tiles set to how you like them, you may want to replace a tile with a different one from the tileset. You can do this easily by selecting the tile from the tileset, enabling Draw Mode and then hold Alt and Left-click a tile in the 3d scene to apply the new tile to it. You can also hold Alt and Right-click tiles in the scene to eyedrop them to the Tilebrush.
Once you have the shape of the tiles set to how you like them, you may want to replace a tile with a different one from the tileset. You can do this easily by selecting the tile from the tileset, enabling Draw Mode and then hold Alt and Left-click a tile in the 3d scene to apply the new tile to it. You can also hold Alt and Right-click tiles in the scene to eyedrop them to the Tilebrush.
If you have got this far, you are doing great! Don't forget to save your work!
Now that the cliff tiles have been added and shaped, we can move on to the water tiles.
Painting
- Paint the tileset
Repeat the same steps as before. In the Tileset panel, select the area on the tileset that you want to edit, then go to the Painting panel and paint the tiles onto the tileset. Once you've added all of them, you should end up with something that looks like the example.
The three tiles in the lower left of the image will be used for the surface under the water. The six tiles to the lower right will be used for the waterfall. We will animate the tiles later, but first let's begin drawing the tiles into the 3d scene.
The three tiles in the lower left of the image will be used for the surface under the water. The six tiles to the lower right will be used for the waterfall. We will animate the tiles later, but first let's begin drawing the tiles into the 3d scene.
3D
- Draw the 3d tiles
Go back to the Tileset panel and select a water tile to add to the 3d scene. Make sure you are in Draw Mode so that you can draw the tiles into the 3d scene. Orient the camera and begin placing the tiles like shown in the example image. You may have to rotate, flip, mirror the Tilebrush to align the tiles correctly. You will also need to position the 3d crosshair so that the Tilebrush aligns with other tiles. Refer back to previous steps on how to handle that, if you need to.
You may want to add the tiles that go under the water before placing the water above it, as it will be easier to edit them that way. However, you could set the key bindings for the Hide Tiles and Show Tiles actions in the Edit > Buttons > Edit Mode panel. Then you can use those keys to Hide and Show any selected tiles. You can also group tiles together into their own Objects, but we'll explore that later.
You may want to add the tiles that go under the water before placing the water above it, as it will be easier to edit them that way. However, you could set the key bindings for the Hide Tiles and Show Tiles actions in the Edit > Buttons > Edit Mode panel. Then you can use those keys to Hide and Show any selected tiles. You can also group tiles together into their own Objects, but we'll explore that later.
- Shaped tiles
At this point, you should now have everything shaped like shown in the image. But if you turn off the wireframe, you may notice some pixels flickering along the edges of tiles as you rotate the camera. This is a common problem related to 3d rendering and floating point numbers. In the next section we will look at how to solve this issue.
A common issue that arises when working with 3d graphics, is pixel bleeding. This occurs where pixels that sit along the seams of UVs appear to crossover from one side to the other and become visible. If you don't know what UVs are, then that might not make any sense to you. Up until this point in this guide, we haven't mentioned UVs. So it is worth explaining briefly what UVs are.
- UVs
First make sure you are in Edit Mode and select the face of a tile. Then go to the UVs panel, and look for the corresponding tile on the tileset. You should see some dashed lines along the edges of the tile as well as a diagonal line running through it. These lines connect to four coordinates that we refer to as UVs. Each UV coordinate belongs to one Vertex in the tile. Each tile has four Vertices, and thus also has four UVs.
- Edit a UV
If you click and drag one of the UV coordinates, it will alter the area that gets displayed on the 3d tile. Notice how the tile changes in the 3d scene as you edit the UV coordinates. Any pixels within the space indicated by the dashed lines will be rendered to the tile in the 3d scene.
- Pixel Bleeding
As a 3d renderer renders to the screen, it will use the UVs to help determine what to sample from the texture image (in this case our tileset). Due to inaccuracies with floating point numbers, when sampling along the edges of the UVs, it may sample a pixel that resides outside of the area defined by the UVs. This may cause noticeable seams if you have drastically different pixel colors neighboring each other along the edges. In our case, we have transparent pixels neighboring opaque pixels, which results in the appearance of small holes and gaps. These visual artifacts can be avoided, so let's take a look at some solutions.
Solutions
- Padding
Select the area of Cliff tiles from the Tileset panel, and then go to the Painting panel so that you can edit the tileset. Extend the edges outwards by one pixel on all sides of the tiles. You can eyedrop the colors as you paint along the edges. You can also click the Grid Lines button at the top to reveal a grid.
- Fixed artifacts
Notice how the gaps disappear in the 3d scene as you paint around the edges. Adding some padding to your tiles will ensure that whether the renderer samples the pixels outside of the UV area or inside, it will always appear the same. Thus there won't be any visual artifacts.
Crocotile has a way of automatically adding padding to tiles when exporting, however it requires all the tiles in the tileset to be square and the same size. When exporting, use the Tile Spacing value to specify how much padding. Alternatively, you can manage it yourself, and use the UV Padding values in the Tileset panel.
Crocotile has a way of automatically adding padding to tiles when exporting, however it requires all the tiles in the tileset to be square and the same size. When exporting, use the Tile Spacing value to specify how much padding. Alternatively, you can manage it yourself, and use the UV Padding values in the Tileset panel.
- Group similar tiles
Another way to mitigate the artifacts is to group similar colored tiles together. So if you have a handful of tiles that share the same colors like the grass tiles for example, you can position those next to each other. As long as the pixels outside the edge of the UV area are similar to the pixels inside it, the likelihood of any pixel bleeding is minimized.
You can easily reposition tiles in your tileset by going to the Tileset panel, selecting a tile, and then Right-clicking and dragging the tile to a new location on the tileset.
This image shows an example on how you can position tiles next to similar tiles so that the outside areas match the inside areas. In this example, there are still transparent pixels along some of the edges, so you would still need to pad those by either extending the pixels out or by placing similar colored tiles next to them.
You can easily reposition tiles in your tileset by going to the Tileset panel, selecting a tile, and then Right-clicking and dragging the tile to a new location on the tileset.
This image shows an example on how you can position tiles next to similar tiles so that the outside areas match the inside areas. In this example, there are still transparent pixels along some of the edges, so you would still need to pad those by either extending the pixels out or by placing similar colored tiles next to them.
At this point, we are ready to begin animating the water tiles. Using animated tiles is a great way to add more life and energy to a scene. The movement attracts the attention of the eyes, and allows the mind to become absorbed in the events that are occurring. In this section we will go through the process of setting up various animated tiles for use in the waterfall.
Painting
- Multiple frames
At the moment, the waterfall just appears static and unmoving. In order to animate it, there must be multiple frames to cycle through that will give the illusion that the water is flowing. Take a look at the example image and use the previous steps you have learnt to add these new tiles to the tileset. It should be noted that there is a one-pixel sized padding around the tiles and groups of tiles to avoid any pixel bleeding.
- Frame details
Each frame in the animation has the details painted slightly differently to give the appearance of motion. By translating the pixel details across the space of the tile, the water appears to flow, and when the frames are repeated in a loop the water flows continuously.
In this animation, the ripples faintly appear at the top and become more bold as they travel downwards. They transition into a darker ripple in the middle tile, and then fade away in the bottom tile. Each tile is simple when viewed alone, but together they construct a greater picture, providing contextual weight to the scene.
In this animation, the ripples faintly appear at the top and become more bold as they travel downwards. They transition into a darker ripple in the middle tile, and then fade away in the bottom tile. Each tile is simple when viewed alone, but together they construct a greater picture, providing contextual weight to the scene.
UVs
- Add Animation
After the new tiles have been painted to the tileset, open the UVs panel. This panel is where you can setup your tile animations. There is an animation menu button near the bottom-right of the tileset canvas.
Choose the option to Add Animation. This will create a new tile animation for the currently selected tileset. The animation will appear listed in the animation palette area below the animation menu button.
Click on the new animation to select it. Some new buttons will appear next to the menu button as well as the default name of the animation. When an animation is selected, the frames belonging to the animation will appear on the UVs canvas. By default it creates a single frame located in the top left of the tileset. Click and drag it over to the waterfall tile like shown in the image. Add three more frames and position those over the corresponding waterfall tiles.
Choose the option to Add Animation. This will create a new tile animation for the currently selected tileset. The animation will appear listed in the animation palette area below the animation menu button.
Click on the new animation to select it. Some new buttons will appear next to the menu button as well as the default name of the animation. When an animation is selected, the frames belonging to the animation will appear on the UVs canvas. By default it creates a single frame located in the top left of the tileset. Click and drag it over to the waterfall tile like shown in the image. Add three more frames and position those over the corresponding waterfall tiles.
- Frame duration
Select all the frame's UVs by click and dragging a marquee box around them, then set the Frame Duration input box to 0.3. Then click the Set Frame Duration button to the right of it to set the duration of the selected frames to the new value. Small values will make the frames play quicker than larger values. You can also change the name of the animation by double-clicking on the name and typing in a new one.
Once you make those changes, instead of recreating similar animations for the other tiles, we can simply duplicate the one we just created. Right-click the animation in the palette area, and select Duplicate Animation from the context-menu.
Once you make those changes, instead of recreating similar animations for the other tiles, we can simply duplicate the one we just created. Right-click the animation in the palette area, and select Duplicate Animation from the context-menu.
- Duplicate animation
Duplicating an animation will create a new one with the same animation data. Select the new animation and then select all the frames in the animation and drag them to a new position on the tileset. Repeat this process to create animations for the rest of the waterfall tiles. You should have something that looks like the example image.
3d
- Place animations into scene
Now begin adding the tile animations into the 3d scene. Select an animation from the animation palette, then press the ` key to focus the 3d viewport. Then hold Alt and click one of the waterfall tiles in the scene to apply the tile animation to it. You can also place them without holding Alt, however you will have to position the 3d crosshair and orient the camera. Using Alt is a simple way to quickly replace tiles. If the tile animation doesn't get applied correctly, then you may have to rotate, mirror, or flip the Tilebrush to get the tile animation applied in the correct orientation. Continue applying the rest of the tile animations for the waterfall.
Painting
- Extra details
Let's add some more animated details to the waterfall, underwater, and grass areas. Take a look at the example image and paint the new graphics into the tileset. Refer to previous steps if you need to. We will be adding a splash, ripple, seaweed, and fish animation. We'll also add a butterfly and flower animation.
UVs
- Extra Animations
Next, create tile animations with the new graphics. The frames for the fish animation should span across two tiles. To make a frame span across two tiles, simply select two of the UVs and drag them to the side so that the area encompasses a larger space. Check the example image to see how the fish frames should look. The fish animations should have four frames.
3d
- Splash
Now select the Splash animation from the animation palette. Make sure you are in Draw Mode and position the 3d crosshair somewhere near the bottom of the waterfall. It doesn't have to be touching the waterfall, because we will be editing the splash tiles and will need room to work on them. We will move them into position after they have been shaped.
Draw the animated tile into the 3d scene. You'll want to place four tiles in a row, then switch to Edit Mode and move the vertices so that they look similar to the example image. Also, make sure to apply the Ripple animation at the bottom of the waterfall if you haven't already done so.
Draw the animated tile into the 3d scene. You'll want to place four tiles in a row, then switch to Edit Mode and move the vertices so that they look similar to the example image. Also, make sure to apply the Ripple animation at the bottom of the waterfall if you haven't already done so.
- Grid Rounding value
Once you've shaped the tiles like this, you'll have to change the Grid rounding value for the next step. The Grid rounding value controls how many pixels the 3d crosshair moves, and thus also how many pixels any selected vertices, edges, and faces move. The Grid rounding value was mentioned earlier in this guide during the Ground Tiles section, but up until now we have left it set at 8 pixels.
Change the Grid rounding value to 4. Then select the Edge or the Vertices located in the middle of the splash tiles and move them inwards. Notice that the amount it moves is at smaller intervals because you set the Grid rounding value to be smaller. Moving the pointed angle of the tiles inwards slightly results with a splash that curves around the waterfall. Select all the splash tiles and move it into position at the base of the waterfall. A couple of the tiles will intersect the cliff walls, but that is fine.
Change the Grid rounding value to 4. Then select the Edge or the Vertices located in the middle of the splash tiles and move them inwards. Notice that the amount it moves is at smaller intervals because you set the Grid rounding value to be smaller. Moving the pointed angle of the tiles inwards slightly results with a splash that curves around the waterfall. Select all the splash tiles and move it into position at the base of the waterfall. A couple of the tiles will intersect the cliff walls, but that is fine.
- Flowers and Seaweed
Next, add the seaweed and flower animations to the 3d scene. Adding the flowers will be simple; you can just apply those to existing tiles. As for the seaweed, position the 3d crosshair underwater and draw those tiles somewhere along the bottom. The result should look similar to the example image.
Excellent! Now the scene is looking a lot more lively. If you have reached this point in the guide, you are doing fantastic! There is still the butterfly and fish to add, but you will need to use a billboarded object for those. In the next section we will accomplish that.
Excellent! Now the scene is looking a lot more lively. If you have reached this point in the guide, you are doing fantastic! There is still the butterfly and fish to add, but you will need to use a billboarded object for those. In the next section we will accomplish that.
Crocotile allows you to create Objects. These basically act as containers for your tiles. They are useful for grouping tiles together and isolating them from other things in the scene. You also can have multiple Instances of an Object in the scene, and any edits to the Object are applied to all the Instances. One of the properties you can enable on an Object is called Billboard mode. Billboard mode makes the Object always face the camera. We will use this mode for the Butterfly and Fish, so that they always face the camera.
3d
- Butterfly
Select the butterfly animation from the palette in the UVs panel. Then draw it somewhere in the scene. Make sure that the tile faces the same direction as the Z axis of the scene. The Z axis is the solid blue line that intersects with the red and green lines. The red corresponds to the X axis, and the green corresponds with the Y axis.
Another way to check the orientation, is to look at the Crocotile viewcube in the lower left of the viewport. If it is facing the same direction as the viewcube, then it has been placed into the scene correctly. The tile needs to be facing that way, because when it is Billboarded, the Object's local Z axis will align itself towards the camera. So, if the tile is facing along a different axis, then it wouldn't face the camera and it wouldn't be viewable.
Another way to check the orientation, is to look at the Crocotile viewcube in the lower left of the viewport. If it is facing the same direction as the viewcube, then it has been placed into the scene correctly. The tile needs to be facing that way, because when it is Billboarded, the Object's local Z axis will align itself towards the camera. So, if the tile is facing along a different axis, then it wouldn't face the camera and it wouldn't be viewable.
Scene
- Butterfly Object
Make sure the 3d crosshair is positioned in the center of the butterfly tile. The 3d crosshair position will be used to define the origin point of the Object when it is created. This is important so that it pivots around the center of the butterfly when the Billboarding effect is activated. You can change the origin point of the Object after it has been created if you need to.
Make sure the butterfly tile is selected in the 3d scene. The butterfly tile should be the only tile selected since we don't want any other tiles added to the Object. Then open the Scene panel and click the Create Object button.
After creating the new Object, it will be listed in the Object list inside the Scene panel. There is also the Instance list below the Object list that will show all the Instances that exist in the 3d Scene. If you like, you can double-click the name of the Object to change it.
Make sure the butterfly tile is selected in the 3d scene. The butterfly tile should be the only tile selected since we don't want any other tiles added to the Object. Then open the Scene panel and click the Create Object button.
After creating the new Object, it will be listed in the Object list inside the Scene panel. There is also the Instance list below the Object list that will show all the Instances that exist in the 3d Scene. If you like, you can double-click the name of the Object to change it.
- Object Properties
Right-click on the listed Object in the Scene panel and select Properties to open the Object's Properties panel.
- Billboarding
Click the Billboarding option to open the properties for billboarding and then click the checkbox to enable it. Once it is enabled, click the Close button to close the panel. Now the butterfly should be billboarded!
- Billboarded Butterfly
Try moving and rotating the camera around to test the effect. If you don't see the butterfly, it most likely means that you didn't face the tile in the correct direction before creating the Object (it should face along the Z axis). If that's the case, just Undo and try again.
- Billboarded Fish
Now repeat the same steps to create the billboarded fish. The only difference is that the fish will have a width of 16 pixels instead of 8. To make the Tilebrush larger than a single tile, go to the Tileset panel and select the fish by clicking and dragging so that the selection area consists of the two tiles. Then when you go to place the animated tile into the 3d scene, it will be the correct size.
Remember to place the 3d crosshair in the center of the fish before creating the Object. And aftwards, position the fish underwater in the location you desire. Since it is an Object now, you can press Ctrl+Shift+D to deselect it. Ctrl+D only applies to Tiles.
Remember to place the 3d crosshair in the center of the fish before creating the Object. And aftwards, position the fish underwater in the location you desire. Since it is an Object now, you can press Ctrl+Shift+D to deselect it. Ctrl+D only applies to Tiles.
- Animation Complete!
Congratulations, you should now have all the animated tiles in the scene! If you like, you can create other animated graphics and place them into the scene as well. Otherwise, continue on with this guide for steps on how to add a little house on top of the cliff as well as some trees!
In this section of the guide we will create a little house that sits on top of the cliff. Everything you have learnt in previous sections can be applied in this one, so it should be very straight-forward.
Painting
- House tiles
First add these house tiles to your tileset. Remember to select the area of the tileset in the Tileset panel. Then go to the Painting panel and begin painting the tiles into the tileset. You can also add some padding around the tiles to prevent pixel bleeding, if you like.
3d
- Clifftop
Move the camera to the clifftop. This is where the house will be built. To help focus the camera on something, you can press C to center the camera on the current selection.
- Edit terrain
Select the face of the grass tile closest to the waterfall and then press Ctrl+A to select all the vertices that belong to the selected tile. Then press Ctrl+A again to select any vertices touching the tile. Now change the grid rounding value to 2, because we want to move the tile only a short distance. Lower the tile so that it looks like the example image.
- Open terrain
Press Ctrl+D to deselect the vertices, then press Ctrl+D again to deselect the faces. We will need return a few of the vertices to their original position, so that a couple of the grass tiles remain flat. To select specific vertices belonging to a tile, hold Ctrl and click the face of the tile near the vertex you want to select. It will select the nearest vertex belonging to the tile that you clicked. You can do the same for deselecting specific vertices if they are already selected.
You'll want to select the three vertices shown in the image (two are overlapping) and move them so that it results in a gap between the tiles. It should end up looking like the example image.
You'll want to select the three vertices shown in the image (two are overlapping) and move them so that it results in a gap between the tiles. It should end up looking like the example image.
- Wood floor
Now open the Tileset panel and select the wooden floor tile from the tileset. Draw over some of the existing grass tiles, and add a few that extend beyond the edge.
- Wood deck
Next add the other wooden tiles from the tileset in to the 3d scene. These tiles will represent the support structures that hold up the floor, as well as a railings that go around the perimeter.
Use the R key to mirror the Tilebrush when you need to. You'll have to mirror certain tiles so that their pixels connect seamlessly between each other. For instance, the corner where the tiles change direction is also where the tiles are mirrored.
Use the R key to mirror the Tilebrush when you need to. You'll have to mirror certain tiles so that their pixels connect seamlessly between each other. For instance, the corner where the tiles change direction is also where the tiles are mirrored.
- Roof
Now select these eight floor tiles and raise them up about three tiles high. If it helps, set your Grid Rounding value back to 8. These tiles will become the roof of the house.
- Walls
Select each wall tile and add them to the 3d scene. The wall tiles will connect the floor with the roof. Also use the roof tile from the tileset and apply it to the tiles on top of the house that we raised in the previous step.
- Roof Edge
Add more roof tiles that extend beyond the edge of the wall and then move their vertices so that they are shaped like the example image. You will have to rotate the Tilebrush when placing some of the tiles by pressing Q or E. And you may have to flip the diagonal line of the corner tile by selecting it's face and pressing Shift+F.
- Split tile
Add the chimney tile somewhere on the roof. In this case, we'll just select the 8x8 tile from the tileset even though half of it is empty. Then select the face of the tile and press Shift+Enter to enable Active-Edit Mode. You can split and sub-divide tiles when this mode is active.
Hover the mouse over the tile. A yellow line will appear, indicating where you can split the tile. You can adjust the Tile Splitting value to get more precision. By default the Tile Splitting value is set to 4. It is located at the bottom-right corner of the Tileset panel.
Hover over the tile so that the line is positioned along the side of the chimney. Press Alt+S to split the tile into two tiles. Then hover over the left tile and split it in half horizontally so that you end up with a 4x4 tile for the top of the chimney and a 4x4 tile for the side of the chimney.
Press Shift+Enter to exit Active-Edit Mode (you can also click the middle mouse button). Then select only the tile with empty pixels and press Delete key to remove the tile from the scene.
You may have realized that we could have just set the UV Tilesize to 4x4 pixels, and simply select the 4x4 pieces from the tileset and place them into the scene, however, it is worth knowing how to split tiles.
Hover the mouse over the tile. A yellow line will appear, indicating where you can split the tile. You can adjust the Tile Splitting value to get more precision. By default the Tile Splitting value is set to 4. It is located at the bottom-right corner of the Tileset panel.
Hover over the tile so that the line is positioned along the side of the chimney. Press Alt+S to split the tile into two tiles. Then hover over the left tile and split it in half horizontally so that you end up with a 4x4 tile for the top of the chimney and a 4x4 tile for the side of the chimney.
Press Shift+Enter to exit Active-Edit Mode (you can also click the middle mouse button). Then select only the tile with empty pixels and press Delete key to remove the tile from the scene.
You may have realized that we could have just set the UV Tilesize to 4x4 pixels, and simply select the 4x4 pieces from the tileset and place them into the scene, however, it is worth knowing how to split tiles.
- Chimney
Select the tile that represents the top of the chimney. Then position the 3d crosshair to one of the bottom vertices. Orient the camera so that it is looking downwards like shown in the example and press Q to rotate it 90 degrees. The pivot point of the rotation is located wherever the 3d crosshair is positioned, hence why we moved it to the vertex to make things simpler.
Then deselect everything and then select the tile that represents the side of the chimney. Press Ctrl+C to copy the tile. Then press Ctrl+V to paste a copy of the tile into the scene. The new tile will be overlapping the other unless you have moved the crosshair after copying. Move it and rotate it so that it connects with the other chimney pieces like shown in the example. Paste two more tiles and place those on the other side of the chimney. You can also move the chimney to whatever position that you like on the roof.
Then deselect everything and then select the tile that represents the side of the chimney. Press Ctrl+C to copy the tile. Then press Ctrl+V to paste a copy of the tile into the scene. The new tile will be overlapping the other unless you have moved the crosshair after copying. Move it and rotate it so that it connects with the other chimney pieces like shown in the example. Paste two more tiles and place those on the other side of the chimney. You can also move the chimney to whatever position that you like on the roof.
- House finished!
The house is now complete! That was simple, wasn't it? This shows that you can attain interesting results without using any complicated details or geometry. Every part, as simple as it is, adds to the whole context of what is being shown. The sum of the entire composition becomes more impressive as you build everything up piece by piece.
Congratulations on making it this far, but we are not done yet! Next we will add some trees to the scene. At first glance, it may seem rather intimidating due to all the irregular tiles that make up the branches, but we will walk through the process every step of the way so that it is simple to follow. You will soon realize that it is easier than you think.
Painting
- Tree tiles
First add these tree tiles to your tileset. Remember to select the area of the tileset in the Tileset panel. Then go to the Painting panel and begin painting the tiles into the tileset.
The leaves of the tree branches will extend beyond one tile space. You can use the Eraser tool to remove pixels from the tileset so that it is transparent. The shortcut for the Eraser tool is E. You can switch back and forth between the Eraser tool and Pencil tool by pressing E and B.
Remember that you can also hold Alt to sample a color from the canvas, allowing you to quickly switch between colors while you are painting the details.
The leaves of the tree branches will extend beyond one tile space. You can use the Eraser tool to remove pixels from the tileset so that it is transparent. The shortcut for the Eraser tool is E. You can switch back and forth between the Eraser tool and Pencil tool by pressing E and B.
Remember that you can also hold Alt to sample a color from the canvas, allowing you to quickly switch between colors while you are painting the details.
3d
- Tree Trunk
After the new graphics have been added to the tileset, open the Tileset panel and select the lower tree trunk tile. Then add it to the scene near the darker toned patch of grass.
Then select the edge of the tile and move it so that the tile has an angle like shown in the example image. Deselect the edge by pressing Ctrl+D.
Then select the edge of the tile and move it so that the tile has an angle like shown in the example image. Deselect the edge by pressing Ctrl+D.
- Tapered tile
Select one of the vertices on top of the tile and move it four pixels towards the position behind the tile (towards where the central axis of the tree trunk would be). Do the same for the other vertex on top of the tile so that the tile becomes tapered at the top.
The example image shows the 3d crosshair located on the central axis of the tree, and you can see how the vertices of the tile sit on the crosshair lines.
The example image shows the 3d crosshair located on the central axis of the tree, and you can see how the vertices of the tile sit on the crosshair lines.
- Copy and paste
Make sure to position the 3d crosshair as shown in the image, then select the face of the tile and copy it by pressing Ctrl+C. Then paste the copy by pressing Ctrl+V. Then press Q or E to rotate the new tile 90 degrees.
Since the 3d crosshair is positioned exactly where the center of the tree would be, the new tile rotates right into place. Paste two more copies, and rotate each one to make the other sides of the tree trunk.
Now select all the tree trunk tiles and create an Object with them. We will create the Object now rather than later so that we can begin learning how to edit and work with Objects. To create an Object, open the Scene panel and click the Create Object button.
Since the 3d crosshair is positioned exactly where the center of the tree would be, the new tile rotates right into place. Paste two more copies, and rotate each one to make the other sides of the tree trunk.
Now select all the tree trunk tiles and create an Object with them. We will create the Object now rather than later so that we can begin learning how to edit and work with Objects. To create an Object, open the Scene panel and click the Create Object button.
Object
- Edit Object
Rename the Object to Tree Trunk. It is recommended that you name your Objects so that it is easy to manage them in your Object and Instance lists when you have created more.
To edit an Object, select the Instance of the Object that is in the 3d scene and then press Enter. Alternatively, you can right-click it after it is selected, and choose Edit Object. This will activate Object Edit Mode and you will see a yellow box appear around the Object in the scene. If you want to exit this mode, you can simply hit Enter again to stop editing the Object.
To edit an Object, select the Instance of the Object that is in the 3d scene and then press Enter. Alternatively, you can right-click it after it is selected, and choose Edit Object. This will activate Object Edit Mode and you will see a yellow box appear around the Object in the scene. If you want to exit this mode, you can simply hit Enter again to stop editing the Object.
- Object origin point
When you create an Object, it checks where the 3d crosshair is positioned and uses that to determine where the Object's origin point will be positioned. You can reveal where the origin point of the Object is by selecting it from the Points list at the bottom of the Scene panel.
Make sure you are still in Object Edit Mode otherwise no points will be listed.
The point will display as a white diamond shape. You can see it in the example image where the 3d crosshair is located. Let's reposition the origin point so that it is located at the bottom of the tree trunk instead of the top.
Move the 3d crosshair down to the base of the tree trunk, and then click the Move point to crosshair button next to the Points list to reposition the origin point.
Make sure you are still in Object Edit Mode otherwise no points will be listed.
The point will display as a white diamond shape. You can see it in the example image where the 3d crosshair is located. Let's reposition the origin point so that it is located at the bottom of the tree trunk instead of the top.
Move the 3d crosshair down to the base of the tree trunk, and then click the Move point to crosshair button next to the Points list to reposition the origin point.
- Add tiles
While we are in Object Edit Mode let's add more tiles to the Object to extend the tree trunk upwards. Open the Tileset panel and select the other tree trunk tiles and place them into the 3d scene. Since the Object is being edited, it will place the new tiles into the Object instead of the scene and the yellow box will expand to show the dimensions of the Object.
Add the tiles and shape them like shown in the example image. Remember that you can Copy and Paste the tiles and rotate them into place. The middle section of the tree trunk is one and a half tiles high, and the pointed top section of the tree trunk is five tiles high.
Add the tiles and shape them like shown in the example image. Remember that you can Copy and Paste the tiles and rotate them into place. The middle section of the tree trunk is one and a half tiles high, and the pointed top section of the tree trunk is five tiles high.
Tree Branches
- New Object
Now it is time to create a new Object, so first you must exit Object Edit Mode by pressing Enter. We will be creating a tree branch Object. Then we will use Instances of the Object to add multiple branches onto the tree.
Begin by selecting a section of the tree branch in the Tileset. We'll adjust the UVs of the tile after placing it into the scene, so it doesn't matter that it isn't completely selected.
Place the tile into the 3d scene somewhere next to the tree trunk.
Begin by selecting a section of the tree branch in the Tileset. We'll adjust the UVs of the tile after placing it into the scene, so it doesn't matter that it isn't completely selected.
Place the tile into the 3d scene somewhere next to the tree trunk.
- Edit UVs
Select the tile and then open the UVs panel. Find the UV coordinates on the tileset and drag the UVs on the right side to the center of the tree branch.
You will have to set the UV Precision values to 2 pixels, so that you can move the coordinates to the correct position. The UV Precision input boxes are located at the bottom of the UVs panel.
Alternatively, you can hold Shift while you drag UVs to use a precision of 1 pixel.
You will have to set the UV Precision values to 2 pixels, so that you can move the coordinates to the correct position. The UV Precision input boxes are located at the bottom of the UVs panel.
Alternatively, you can hold Shift while you drag UVs to use a precision of 1 pixel.
- Split branch
Press the ` key to focus the 3d view. Then press Shift+Enter to enable Active-Edit Mode. Hover the mouse in the center and split the tree branch tile in half so that there is a tile above and below.
Then exit Active-Edit Mode by pressing Shift+Enter again. Finally, deselect the tiles by pressing Ctrl+D.
Then exit Active-Edit Mode by pressing Shift+Enter again. Finally, deselect the tiles by pressing Ctrl+D.
- Shape the branch
Edit the vertices of the branch tiles so that it is shaped like the example. Make sure to set your Grid Rounding value to 4 if it is set to something else. Then move the top left vertex back eight pixels, then move it down four pixels, and then four pixels to the right.
Deselect the vertex and then select the top right vertex. Move that vertex back four pixels.
Deselect the vertex and then select the top right vertex. Move that vertex back four pixels.
- Continue shaping
Orient the camera so that you are looking at the branch from the side. Select the two vertices on the upper right and move them up four pixels. Then move them four pixels to the right. Now deselect the top vertex and move the bottom vertex twelve pixels to the right and four pixels down.
- Finish shaping
Now select the bottom left vertex and move it twelve pixels to the right and four pixels down. Then select the other vertex and move it four pixels down.
You should now have half of the branch shaped nicely. It doesn't have to be exactly the same as the example, the idea is simply to fan out the vertices downwards at an angle similar to how a pine tree might be shaped. You can always adjust things later to fine-tune your work.
You should now have half of the branch shaped nicely. It doesn't have to be exactly the same as the example, the idea is simply to fan out the vertices downwards at an angle similar to how a pine tree might be shaped. You can always adjust things later to fine-tune your work.
- Mirror the branch
Let's create the other side of the tree branch, but instead of repeating the previous steps, we can simply copy and paste the tiles and then mirror them.
Select the tiles and move the 3d crosshair to where the center of the branch will be. Copy and paste the tiles using Ctrl+C and Ctrl+V. Then press R to mirror the new tiles to the other side of the 3d crosshair.
Mirroring will move the vertices; so after that operation the faces of the tiles will end up facing the other direction. Press Shift+R to reverse the faces of the tiles so that they face the correct direction. (Note: in the latest version of Crocotile, it should auto-reverse faces when mirroring/flipping. So this step may not be necessary.)
Select the tiles and move the 3d crosshair to where the center of the branch will be. Copy and paste the tiles using Ctrl+C and Ctrl+V. Then press R to mirror the new tiles to the other side of the 3d crosshair.
Mirroring will move the vertices; so after that operation the faces of the tiles will end up facing the other direction. Press Shift+R to reverse the faces of the tiles so that they face the correct direction. (Note: in the latest version of Crocotile, it should auto-reverse faces when mirroring/flipping. So this step may not be necessary.)
- Branch Object
Now that the tree branch is completed, it's time to group all these branch tiles into their own Object. Position the 3d crosshair towards the back of the branch where the center axis of the tree trunk would be located. This is where the origin point of the Object will be when it is created. Select the faces of the branch tiles and then open the Scene panel and click the Create Object button.
Rename the Object to Tree Branch. Then click on the listed Object in the Object list. When you do this, it will become highlighted, and you will be able to draw the Object into the 3d scene. Focus the 3d view by pressing ` and then hit Tab to switch to Draw Mode. You should be able to see a Tree Branch object following your mouse around as you move it in the scene.
Rename the Object to Tree Branch. Then click on the listed Object in the Object list. When you do this, it will become highlighted, and you will be able to draw the Object into the 3d scene. Focus the 3d view by pressing ` and then hit Tab to switch to Draw Mode. You should be able to see a Tree Branch object following your mouse around as you move it in the scene.
- Prefab Brush
The object that follows the mouse is called the Prefab brush and you can set which object represents the brush by selecting them from the Object list in the Scene panel. To deactivate it, simply deselect the Object in the list, or choose a tile from the tileset. The Prefab brush functions similar to the Tilebrush, except it uses Objects that you've created instead of singular tiles. With the Prefab brush activated, click in the 3d scene to add an Instance of the Object.
Use Shift+Q and Shift+E to rotate the Prefab brush. You can also use Q and E too, but it will rotate around a different axis which may be useful depending on the orientation of the camera or how you intend to position the Object. Add the Instances of the Object into the scene so that you have four of them that surround the tree trunk.
Use Shift+Q and Shift+E to rotate the Prefab brush. You can also use Q and E too, but it will rotate around a different axis which may be useful depending on the orientation of the camera or how you intend to position the Object. Add the Instances of the Object into the scene so that you have four of them that surround the tree trunk.
- Nested Instances
To help organize our scene, we can nest Instances inside of other Instances. Open the Scene panel and look for the Tree Branch objects listed in the Instance list. Click and drag the Tree Branch instances into the Tree Trunk instance like shown in the example image.
Now when you move the Tree Trunk instance, it will also move all the nested instances as well. The Tree Trunk instance acts like a container for the other instances.
Now when you move the Tree Trunk instance, it will also move all the nested instances as well. The Tree Trunk instance acts like a container for the other instances.
- Duplicate Instances
First, make sure you are in Edit Mode. Then select the four Tree Branch instances in the 3d view and then right-click on them. A context-menu will appear. Click the option to Duplicate Instance(s).
- Rotate Instances
If the selection Gizmo is hidden, press X to reveal the Gizmo, and then press Shift+X to switch the Gizmo mode to Rotation. You can use Shift+X to switch between Translate, Rotate, and Scale modes. The appearance of the Gizmo will change according to the mode it is in.
When the Gizmo is set to Rotate mode, click and drag the green circle to rotate the selection around the Y axis. Rotate it 45 degrees and then move the selection up by about four pixels. The new instances will help to fill in the spaces between the previous made branches. Afterwards, deselect the Instances by pressing Ctrl+Shift+D.
When the Gizmo is set to Rotate mode, click and drag the green circle to rotate the selection around the Y axis. Rotate it 45 degrees and then move the selection up by about four pixels. The new instances will help to fill in the spaces between the previous made branches. Afterwards, deselect the Instances by pressing Ctrl+Shift+D.
- Clone Object
Now we'll make another Tree Branch object slightly smaller than the current ones. We can clone the Object so that we don't have to recreate it. Open the Scene panel and right-click on the Tree Branch object in the Object list. In the context-menu that appears, select Clone Object.
Rename the new Object to Medium Tree Branch, and then place one of them into the 3d view. You can right-click on the listed object and choose Add to Scene. It will be added where the 3d crosshair is positioned. Alternatively, you can use the Prefab Brush to draw it into the scene.
Once you have added it to the scene the new Instance will be listed in the Instance list. Drag the listed Instance into the Tree Trunk instance so that it becomes nested.
Rename the new Object to Medium Tree Branch, and then place one of them into the 3d view. You can right-click on the listed object and choose Add to Scene. It will be added where the 3d crosshair is positioned. Alternatively, you can use the Prefab Brush to draw it into the scene.
Once you have added it to the scene the new Instance will be listed in the Instance list. Drag the listed Instance into the Tree Trunk instance so that it becomes nested.
- Edit Branch
Edit the new Instance by selecting it in the 3d view and pressing Enter to activate Object Edit Mode. Then select the vertices on the end of the branch and move them back by eight pixels and up by 4 pixels. This will cause the tree branch to become shorter.
- Finish Branch
Now select the vertices on the left and right side where the branch bends. Move those vertices up by four pixels and then deselect them. Then select the top vertices in the middle and move them up eight pixels and four pixels backwards.
Move the remaining vertices that haven't been moved yet up to the previously moved vertices at the top to form a sharp point. You can click and drag a vertex with the mouse to move it, and then hold Shift to snap the vertex to another vertex that you hover over. This is a great way to quickly connect a vertex to another vertex.
When you click and drag on a group of overlapping vertices, it will only drag one of them. This is useful for quickly separating vertices that need to be separated.
Move the remaining vertices that haven't been moved yet up to the previously moved vertices at the top to form a sharp point. You can click and drag a vertex with the mouse to move it, and then hold Shift to snap the vertex to another vertex that you hover over. This is a great way to quickly connect a vertex to another vertex.
When you click and drag on a group of overlapping vertices, it will only drag one of them. This is useful for quickly separating vertices that need to be separated.
- Add more instances
Now that the Medium Tree Branch has been shaped hit Enter to exit Object Edit mode. Select the instance and position it so that it connects to the Tree Trunk like shown in the example image. Add three more instances to surround the Tree Trunk on every side. Remember to nest them inside the Tree Trunk instance as well.
- Hide instances
Before we move on to the top of the tree, let's add some simple branches underneath these instances. To make it easier to add them, click the eye icons located on the listed Objects in the Scene panel. This will hide the instances so that they aren't in the way. Their names will also become greyed out to indicate that they are hidden.
- Add branch tile
Add a branch tile to the scene and then open the UVs panel to edit the UVs. Drag the right two UV coordinates to the right to fit the width of the branch on the tile.
- Create new Object
Now move the vertices to shape the tile like shown in the example image. Then copy and paste the tile so that you have them surrounding the Tree Trunk. Afterwards, position the 3d crosshair at the center of the trunk and then create a new object with the selected branches. We'll put them all into a single Object since they are simple. Don't forget to drag the new instance into the tree trunk instance to nest it.
- Edit tree shape
To see how the new branches look with the rest of the branches, reveal the Objects that are hidden by clicking their Eye icons in the Scene panel.
The largest branches seem to stick out too much, so if you like, edit the Instance by selecting it and pressing Enter, then move the vertices to adjust the length of the branch. When you edit one of the Instances, any changes will be applied to all the Instances. When you are done, press Enter to stop editing the object.
The largest branches seem to stick out too much, so if you like, edit the Instance by selecting it and pressing Enter, then move the vertices to adjust the length of the branch. When you edit one of the Instances, any changes will be applied to all the Instances. When you are done, press Enter to stop editing the object.
- Tree Top
Open the Tileset panel and change the UV Tilesize to have a width of 4 and a height of 4. Then select the other tree branch graphic from the tileset and add it to the scene near the top of the tree. You will have to click and drag to select all of the branch in the tileset. After it is drawn to the 3d view, click on the tile and flip the diagonal line by pressing Shift+F.
- Copy and paste
Copy and paste the tile so that there are two tiles. Move the new tile so that they are positioned corner to corner. Then select and move the vertices like shown in the example image. Next, we will edit their UVs to make the texture seamlessly connect.
- UVs
Select the face of the bottom right tile and open the UVs panel. Find the UV coordinates in the tileset and adjust the coordinates so that they look like this.
You may have to change your UV Precision x and y values to 2. Then deselect the tile and select the other tile so that the UVs for the other tile appear. Change those UV coordinates so that they look like this.
You may have to change your UV Precision x and y values to 2. Then deselect the tile and select the other tile so that the UVs for the other tile appear. Change those UV coordinates so that they look like this.
- Shape the top
Now shape the tiles so that they fit ontop of the tree. Move the top vertex to the tip of the tree trunk. Move the side vertices so that they touch the other branches, and adjust the other vertices to get the same shape as shown in the example image.
- Finish Tree Top
Copy and paste the tiles so that you have them on every side of the tree trunk. Remember to position the 3d crosshair on the tree trunk so that you can easily rotate the pieces into place. Then create a new Object with them and add the Instance into the Tree Trunk instance so that it is nested.
- Duplicate the Tree
At this point the tree is complete! Now that the tree is finished, open the Scene panel and select the Tree Trunk instance in the Instance list. It will assign this Instance along with all of the nested instances to the Prefab Brush. Then you can place a copy of the entire Tree into the 3d scene! Another way is to right-click the listed Instance and choose Add to Scene and it will add it where the 3d crosshair is positioned.
There are only a few things left to do with this scene. Let's add the finishing touches by adding some rocks at the base of the cliff, some tall grass behind the trees, some bushes, and a custom skybox.
Rocks
- 3d
We've already added the rock tiles to the tileset back when we made the cliff tiles. You may have noticed that they weren't used. Well, now let's put them to use!
Select a couple ground tiles in the scene near the base of the cliff.
Select a couple ground tiles in the scene near the base of the cliff.
- Extrude
Open the Tileset panel and select the tile that will be used for the sides of the rock. By selecting the tile, it becomes applied to your Tilebrush.
Then, open the Transform panel and scroll to the bottom to the Extrude section. Uncheck the Extrude UVs option so that extrusions use the Tilebrush UV coordinates for newly extruded tiles. Also, set the Distance to 6 pixels.
Click Apply to extrude the selected tiles! Pretty cool, right?
Then, open the Transform panel and scroll to the bottom to the Extrude section. Uncheck the Extrude UVs option so that extrusions use the Tilebrush UV coordinates for newly extruded tiles. Also, set the Distance to 6 pixels.
Click Apply to extrude the selected tiles! Pretty cool, right?
- Finish the rocks
Now apply the lighter colored rock tile to the top of these rocks. Remember that you can hold Alt and left click a tile to apply the Tilebrush to an existing tile in the scene. Afterwards select the vertices and move them inwards 1 pixel on both the X and Z axis, so that the rocks have a tapered shape. Remember to set your Grid Rounding value if you need to.
That's all you need to do for the rocks. Let's add some grass and bushes next!
That's all you need to do for the rocks. Let's add some grass and bushes next!
Grass and Bush
- Tiles
Add these graphics to your tileset. Remember to select the area in the Tileset panel, and then switch to the Painting panel to paint the details into the tileset.
- 3d
Once those have been painted into the tileset, switch to the Tileset panel and select the grass tiles and place those into the scene. They should go behind the trees along the edge of the ground tiles.
Then take the bush and place that into the scene as well. You can adjust the size of the bush by moving the vertices around. In the example image, I've placed two bushes, with one bush being slightly larger than the other. I also adjusted some of the vertices on the grass tiles to make it a bit irregular.
Then take the bush and place that into the scene as well. You can adjust the size of the bush by moving the vertices around. In the example image, I've placed two bushes, with one bush being slightly larger than the other. I also adjusted some of the vertices on the grass tiles to make it a bit irregular.
Miscellaneous
- Tiles
You may want to add some dark colored tiles around the outside of the scene to give the illusion that the ground is solid. This will help make the scene look more complete.
You can also press the 9 key to toggle Double-Sided mode for the tileset. This will make the tileset appear double-sided. This might make the trees and some other tiles look better at certain angles.
You can also press the 9 key to toggle Double-Sided mode for the tileset. This will make the tileset appear double-sided. This might make the trees and some other tiles look better at certain angles.
Skybox
- Skybox shape
In the menubar at the top click on Edit > Settings to open the Settings panel. Click on the Project menu item and find the Skybox Shape option. There are three skybox shapes to choose from; Box, Cylinder, and Sphere. Select Cylinder and then close the Settings panel.
Download this .png image: skybox.png
Then in Crocotile, in the menubar, click Edit > Skybox > Select Image and select the file that you just downloaded. It will become applied to the skybox in the project. If you need examples on how to layout the image for other skybox shapes, the default skybox images are located in the Misc folder where Crocotile is installed.
Download this .png image: skybox.png
Then in Crocotile, in the menubar, click Edit > Skybox > Select Image and select the file that you just downloaded. It will become applied to the skybox in the project. If you need examples on how to layout the image for other skybox shapes, the default skybox images are located in the Misc folder where Crocotile is installed.
Congratulations on successfully completing the waterfall scene! You have learnt many skills through this process, and should now be able to apply them all to the future work that you do. I hope that this has helped you become more familiar with the functions in Crocotile 3d. There is quite a lot that has not been covered in this guide, so I suggest reading the documentation to learn more, or watch the youtube videos on the Crocotile youtube channel. If you have any feedback or suggestions for future guides, please get in contact. If anything was confusing or could be improved, get in touch and let me know. Thanks! 🐊
Files: Links: