Wolfire Games Wiki - User contributions [en]

Making New Models & Textures

2010-12-28T20:42:20Z

Narann: /* Other Resources */

'''This tutorial does not contain all the links and pictures it should yet.'''

This tutorial is based on jo-shadow's tutorial [http://forums.wolfire.com/viewtopic.php?f=13&t=4712 ''How to make your own models for OG''].

This tutorial will teach you everything you need to know to make your own objects and how to get them into the game.

Please keep in mind that this method is by no means the only way of making and adding Objects. It is merely one of very many ways, but doing it this way should be easy to learn and understand for anyone. Some experience with 3D programs would help, but even the most inexperienced beginner should be able to get results with this guide.

== What you will learn ==

This tutorial will cover how to do the following:

* Creating a 3D model.
* UV mapping the model.
* Generating a texture from the UV data.
* Editing the texture.
* Changing the reflectivity of the texture.
* Making a normal map for the texture.
* Setting up the folder.
* Making the XML file.
* Testing the object in the engine.

== What you will need ==

You will need the following for this tutorial:
* A 3D modeling program with simple UV mapping capabilities.
** This tutorial will use [http://en.wikipedia.org/wiki/Wings3d Wings3D], an open source, cross platform polygonal modeler. It is much simpler when it comes to features than [http://en.wikipedia.org/wiki/Blender_(software) Blender] or other major 3D packages, but it should be much easier to learn for beginners.
** If you prefer blender or another program the basic concepts are the same, but this tutorial only covers Wings3D.
* An image editor.
** This tutorial will use [http://en.wikipedia.org/wiki/Photoshop Photoshop], however any image editor will work just fine. As a free, cross-platform alternative I would suggest using [http://en.wikipedia.org/wiki/GIMP GIMP].
* A text editor.
** Any will do. Mac users can use [http://en.wikipedia.org/wiki/Textedit Textedit] and Windows users [http://en.wikipedia.org/wiki/Notepad_(Windows) Notepad].
* The latest [http://blog.wolfire.com/category/alpha/ Overgrowth alpha].
** This tutorial was originally written for and tested on [http://forums.wolfire.com/viewtopic.php?f=13&t=4701 alpha 16].

Please make sure that you have these necessary programs before you start.

== Getting started ==

It is advised, but not necessary, that you first take a look at the [http://internap.dl.sourceforge.net/sourceforge/wings/wings3d_manual1.6.1.pdf Wings3D manual] to help you become comfortable with its interface. It contains some very quick and easy tutorials that will teach you everything you need to know for this tutorial and then some.

Here are some quick Wings3D basics:
* Go into ''Edit -> Preferences''
** Check ''Force Axis-Aligned Ortho''. This will make editing along an axis easier.
** Single-button Mac users should in the ''Camera'' tab select the one button control mode.
* Change between ''Vertex'', ''Edge'', ''Face'' and ''Object'' mode by pressing the buttons on the top bar or the keystrokes: '''V''', '''E''', '''F''' and '''B''' respectively
* Select stuff by clicking on it.
* Deselect with space.
* Focus the view on what you have selected by pressing '''A'''.
* Reset the view with '''R'''.
* Right clicking (control + click will from now on by implied for Macs as right click) brings up a context-dependent drop-down menu. Its contents changes depending on what you have selected. This is where most of the features we will use are located.
* For most of the keyboard shortcuts look under ''Help -> Defined Hotkeys''.

So without further ado, let's begin.

== Creating a 3D model ==

Because it has been so widely requested in the [SPF], and for the sake of simplicity, in this tutorial we will make a simple textured 3D cylinder. However, taking it a step further to more advanced models should not be a problem.

# Open Wings 3D
# Right click anywhere and choose ''Cylinder'' from the drop-down menu. This will spawn a default 16-sided cylinder, to spawn a customized cylinder press the little box on the same line instead. We will now change the proportions of the cylinder to our liking.
[[Image:Model_1.png|800px]]
# Go into object mode ('''B''') and select the cylinder.
[[Image:Model_2.png|800px]]
# Right click anywhere to open the drop-down menu and select ''Scale -> Radial Y''.
[[Image:Model_3.png|800px]]
# Now drag the mouse side to side to change the width of the cylinder. Click once it is scaled to your liking to accept, or press tab to manually input a value.
[[Image:Model_4.png|800px]]
# For the purpose of this tutorial our cylinder model is now finished.

Now we need to generate a UV map for the object so we can texture it.

=== UV Mapping the model ===

When you want to apply a texture to a 3D model, you might run into some problems. The best way we know how to deal with textures is as a 2D image, but how do we take a 3D model, and make a 2D image out of it? Well let's imagine that we have an orange painted like a globe like this:

[[Image:Globe_1.png]]

And we want to make its surface flat kinda like this:

[[Image:Globe_2.png]]

The solution is we peel away the surface, cutting it in a certain way so that it lies flat:

[[Image:Globe_3.png]]

Please note that there are many ways of doing this, but some work better than others. For example one of the more accurate ways of doing this with the earth is what's known as ''Fuller's Projection'':

[[Image:Globe_4.png]]

([http://earthvoyage.googlepages.com/UNFOLD.MOV Click for animation])

This is what we have to do with our cylinder: We have to cut it up so that we can lay it flat on a 2D plane.

Each vertex of the model, which already has a 3D coordinate of (X,Y,Z) will now also have a 2D coordinate on this special plane, so that we know how to fit the texture onto our object. This 2D coordinate is defined as (U,V), which is why this is called [http://en.wikipedia.org/wiki/Uv_mapping UV mapping]. This is a simplified way of describing UV mapping, but for this tutorial it will do.

''Note: there are other methods for applying textures to models, but this guide only covers UV mapping.''

1. Select the entire object, and at the bottom of the drop-down menu choose ''UV Mapping -> Direct''. A new window with the object will pop up with a title of ''AutoUV Segmenting:'' and the name of your object:

[[Image:OG_Tuto_CustomModel_UV_1.png|800px]]

Now we have to Divide the object into different shapes so that it can unfold it properly, just like in the globe example.
This can be done Automatically or Manually. For the sake of practice let's do it by hand:
You can separate different pieces either by marking which edges to cut, by coloring the faces that should go together, or both.

2. In face mode (F) select the top Face and press 'i' (select similar) so both the top and bottom are selected.
Choose one of the nine colors Labeled AuvChart1-9 from the drop-down menu. Doing so will mark these faces as being separate from the rest of the model.

[[Image:OG_Tuto_CustomModel_UV_2.png|800px]]

3. Clear your selection with space, and select one of the vertical side pieces.
Select the rest by selecting similar (i), then mark these with a different color.

4. Because the cylindrical part of the model is still in a loop we need to mark a cut.
In Edge mode (E) select of the vertical edges and choose 'mark edges for cut' from the drop down menu.

[[Image:OG_Tuto_CustomModel_UV_3.png|800px]]

5. The marking of your model is now complete, and it is ready to be unfolded.
Choose Continue->Unfolding from the drop down menu

6. A window showing the unfolded model will open up. This is the UV map.
To show what part of the UV map belongs to what part of the model, there is a colorful grid and letter pattern that you can also see on your model. When you Select a face you see it on both the model and the UV map.

[[Image:OG_Tuto_CustomModel_UV_4.png|800px]]

You can also scale and move parts of the model around on the UV map, and the changes will be apparent on the model. Making a face take up more of the UV map will make give it a denser more detailed texture. This is often used to make important features of a model more detailed, like the hands and dace of a character.

If for whatever reason you don't like how the unfolding ended up you can select your object, and in the drop down menu Choose UV Mapping-> Force Segment (delete previous) to start from a clean slate.

It's important to note that there can be many different ways of cutting an object and the resulting UV maps can look very different.

There are two automated methods, Projection and Feature Detection:

[[Image:OG_Tuto_CustomModel_UV_5.png]]

Depending on your model one might be better than the other, sometimes they both suck and you have to do it manually, and sometimes if your model is simple like this one they will both give you the same result.

If you cut the object in weird ways it will end up unfolding weirdly, like this for example:

[[Image:OG_Tuto_CustomModel_UV_6.png|800px]]

Once again, the best way to understand how this works is to experiment and try out the various features.

Although there are many different ways of mapping any Model, as a rule you want its faces to use the UV space as efficiently as possible, because any texture that isn't under the mapped Faces will not be seen anywhere when the texture is applied.

There are entire programs devoted simply to finding the best way to generate the UV map for any given model, and the tools wings3D provides are much more basic. However they are sufficient for a simple object like this.
With practice you can even manage more complex ones.

Now that We've Finished UV mapping let's generate the texture for the model. Rest assured, the hardest part is done.

== Generating a texture from the UV Data ==

We have our lovely UV map, and now we need to generate a texture we can then edit.

1. With the UV map Window still open, choose 'Create Texture' from the drop-down menu. A small window will pop up:

[[Image:OG_Tuto_CustomModel_Texture_1.png|800px]]

Choose a size depending on how big the object will end up being, and how detailed you want it to be. The larger the image, the more detailed the texture will look on the model.
It wouldn't make sense to have a super-high detailed texture for a fork, and you wouldn't want a low quality texture for a skyscraper either. For this object 512x512 will work just fine.

2. Because we want to edit this texture manually later we need to know where on the texture the edges of the object are, so we know where on the object we are drawing.
Set the first as 'Background' and the second as 'Draw Edges' so the edges appear on the texture. Press OK.

3. It might seem like the UV map disappeared, but don't fear, the texture was created and is now applied to the object. You simply cannot see it well because it is white with black lines that are right under the wire-frame. You can tell when you zoom in really closely:

[[Image:OG_Tuto_CustomModel_Texture_2.png|800px]]

4. Export the model by going into File -> Export -> Wavefront (.obj)

[[Image:OG_Tuto_CustomModel_Texture_3.png|800px]]

Then make a new folder in a location of your choosing and save it as whatever title you like.
It will save a .obj and a .mtl file. Delete the .mtl file. It has to do with materials that we don't need.

5. Sometimes the texture is saved along with the object, but sometimes it isn't. If there is no texture file in the folder you exported to, go into Window->Outliner, and locate the texture:

[[Image:OG_Tuto_CustomModel_Texture_4.png|800px]]

Right click it, Choose export and save it in the same folder as the obj, name it whatever you want, preferably the name of your object plus _Color.
For example:

[[Image:OG_Tuto_CustomModel_Texture_5.png]]

You are now done with Wings3D!

== Editing the texture ==

Now it's time to get creative!

1. Load the Texture file into whichever image editing program of your choice

[[Image:OG_Tuto_CustomModel_Image_1.png|800px]]

2. Create your actual texture now however you wish. It helps to keep your 'Template' in a separate layer than the texture you want to be on your object.

Here is one way of doing it in photoshop, that allows you to keep the Template's lines above your texture for reference:

:* Double click the layer name and accept the pop up prompt to unlock it.
:* Rename the layer "template".
:* Create two layers bellow it, the lower one called background, the upper one called texture.
:* Fill The background layer with white and lock it.
:[[Image:OG_Tuto_CustomModel_Image_2.png]]

:* Select the Template layer, which is above all the other layers, and set its layer mode to multiply.
:[[Image:OG_Tuto_CustomModel_Image_2.png]]

:This will make the white in it transparent, and the black remain as an overlay. you can use it as a guide. lock it as well.
:* Draw in the texture layer to your heart's content.
:[[Image:OG_Tuto_CustomModel_Image_4.png|800px]]

:I just used some stock photography I found online. The area with the red text is wasted space that could have been better managed when I made the UV map. It will not appear on the final Model, but will take up space in memory none-the-less.

:Here is my finished texture:
:[[Image:OG_Tuto_CustomModel_Image_5.png]]

Once done, make sure to save the image -without- the Template, unless you want it as part of the final Texture. Don't worry too much about what format you save it as. Thanks to the built in image converter almost any file type will work in the engine. I personally would advise you to use .tga or .png.

=== Changing the Reflectivity of the texture ===

If you were to use this texture as it is, the resulting object would look very shiny.
That is because Phoenix will set the reflectivity, or inherent 'shininess' of an object depending on the transparency, or alpha value of the texture.

If you want your object to look more matte you need to add transparency to your texture. There are several ways to do this:

The Simple way:
:* This method will make the whole texture less shiny:
:* Look in the Layer window and change the Opacity of the Layer that contains your texture.
:[[Image:OG_Tuto_CustomModel_Reflect_1.png]]

:* You're done. Save the texture, but make sure that the format you save it as supports Transparency. .tga and .png both do.

The Advanced way:
:* This method will allow you to change the shininess of different parts of the texture.
:* Find the Channel window. You should see 3 channels, Red, Green and Blue (RGB is simply the sum of all 3):
:[[Image:OG_Tuto_CustomModel_Reflect_2.png]]

:* Add a new Channel (the icon next to the trashcan) By default this is an Alpha Channel.
:[[Image:OG_Tuto_CustomModel_Reflect_3.png]]

:* Like all channels it is black and white. Black is Transparent, and will make the object matte, and White is Opaque, and will make the object reflective.
:* If you show the rest of the channels while the alpha channel is visible the parts that are hidden will appear red by default:
:[[Image:OG_Tuto_CustomModel_Reflect_4.png]]

:* When Finished save the file, but make sure to save it as .tga The alpha layer will -not- be saved if you choose .png

=== Making a normal map for the texture ===

This tutorial does not yet include Instructions for making a normal map. Until someone writes it up, just use the following blank normal map:

[[Image:OG_Tuto_CustomModel_blanknormal.png]]

== Setting up the folders ==

Phoenix, Overgrowth's engine uses XML files to tell it where an object's files are located.
These XML files are by default located in Data/Objects. For example the Rock1a.xml file:

<pre>
<?xml version="1.0" ?>
<Object>
<Model>Data/Models/Environments/Rocks/Rock1a.obj</Model>
<ColorMap>Data/Textures/Environments/Rocks/Rock1_Color.tga</ColorMap>
<NormalMap>Data/Textures/Environments/Rocks/Rock1_NormalOS.tga</NormalMap>
<ShaderPath>Data/GLSL/cubemapobj</ShaderPath>
<ShaderName>normalmap</ShaderName>
</Object>
</pre>

The way the file works is self explanatory. The tags indicate what the provided file path points to. As you can see all the file paths have Data as their root. Because of this you'll want your files to be inside the Data folder.

For mac users right click the Alpha, click 'Show Package Contents', Contents->Data. For easy access then drag it into your Sidebar:

[[Image:OG_Tuto_CustomModel_Folder_1.png]]

Until the team implements a more elegant solution I suggest that in the Data folder you make a folder called Custom and keep all your files in there. I chose to imitate the file structure in Custom that the Data folder uses by default:

[[Image:OG_Tuto_CustomModel_Folder_2.png|800px]]

However you can save it any way you choose. If you want to share your Objects with others it is be best to keep all the files in one Folder inside Data/Custom. ultimately in the engine it doesn't make a difference, as long as the XML file is defined correctly

== Making the XML file ==

Now that everything is in the right place you can make the xml Object file.
# Copy any .xml file from the Objects Folder, paste it into your custom folder and rename it as whatever you want. make sure to keep the extension ".xml"
# Open the XML file with a text editor and change the paths to match that of your file.
Here's mine:

<pre>
<?xml version="1.0" ?>
<Object>
<Model>Data/Custom/Models/Demo/Cylinder.obj</Model>
<ColorMap>Data/Custom/Textures/Demo/Cylinder_Color.png</ColorMap>
<NormalMap>Data/Custom/Textures/Demo/Blank_Normal.png</NormalMap>
<ShaderPath>Data/GLSL/cubemap</ShaderPath>
<ShaderName>cubemap</ShaderName>
</Object>
</pre>

I don't quite know how the shaders work, but I tested each out and [http://forums.wolfire.com/viewtopic.php?f=13&t=4223&p=72220&hilit=shader#p72220 listed them here].

Cubemap will work best for most objects.

== Testing the object in the engine ==

Now the moment you've been waiting for:

# Start up the Latest Alpha
# Click the first Button in the toolbar
# Find your .xml object file and click Open
# Pray that you've done everything right and click on the terrain
# Breathe a sigh of relief as your object appears:

[[Image:OG_Tuto_CustomModel_Final_1.png|800px]]

The above Object uses a texture without transparency and so looks shiny.

This Object uses a texture with transparency and so has matte areas:

[[Image:OG_Tuto_CustomModel_Final_2.png|800px]]

If you get an error message saying that a file cannot be found make sure that the file-paths in the XML Object file are correct.

Here is the final Custom Folder which I made for this tutorial. It contains two objects: one with changed reflectivity, and one without.

[http://forums.wolfire.com/download/file.php?id=329 OG_Tuto_CustomModel_Custom.zip]

unzip it, make sure the resulting folder is called 'Custom" (otherwise the xml file paths would be incorrect) and place it in the Data folder.

(Notice that I actually did a bad job with the UV mapping, because I chose to automate it and not do it manually, and the texture is not a continuous band, but broken up into 4 parts.)

== Conclusion ==

I really hope that this Guide will be helpful to you.
A-lot of thought and effort went into it, plus at least a good 5+ hours of work

One thing I cannot stress enough is that this guide is by no means perfect, and there are likely better ways of doing this.

My challenge to you is to not just use this guide, but expand on it: Try texturing a sphere, a rock, a Tree, never stop experimenting. Apply what you've learned here and use it to help you make some great content for this game.

If you have ''any'' questions or problems when trying to recreate what is illustrated here, please feel free to ask the friendly people in our [http://www.wolfire.com/irc IRC channel].

== Other Resources ==

Tutorial for UV mapping a sphere in Wings 3D:
http://bbq-px.blogspot.com/2008/06/polar-uv-mapping-in-wings3d.html

UV mapping tutorial for a program called ultimate unwrap 3D, helps clarify some things:
http://www.unwrap3d.com/tutorial_map.aspx

A plethora of 3D tutorials (Thanks Aubrey)
http://www.poopinmymouth.com/tutorial/tutorial.htm

[[Category:Overgrowth]]

Making New Models & Textures

2010-12-28T20:41:39Z

Narann: add links

'''This tutorial does not contain all the links and pictures it should yet.'''

This tutorial is based on jo-shadow's tutorial [http://forums.wolfire.com/viewtopic.php?f=13&t=4712 ''How to make your own models for OG''].

This tutorial will teach you everything you need to know to make your own objects and how to get them into the game.

Please keep in mind that this method is by no means the only way of making and adding Objects. It is merely one of very many ways, but doing it this way should be easy to learn and understand for anyone. Some experience with 3D programs would help, but even the most inexperienced beginner should be able to get results with this guide.

== What you will learn ==

This tutorial will cover how to do the following:

* Creating a 3D model.
* UV mapping the model.
* Generating a texture from the UV data.
* Editing the texture.
* Changing the reflectivity of the texture.
* Making a normal map for the texture.
* Setting up the folder.
* Making the XML file.
* Testing the object in the engine.

== What you will need ==

You will need the following for this tutorial:
* A 3D modeling program with simple UV mapping capabilities.
** This tutorial will use [http://en.wikipedia.org/wiki/Wings3d Wings3D], an open source, cross platform polygonal modeler. It is much simpler when it comes to features than [http://en.wikipedia.org/wiki/Blender_(software) Blender] or other major 3D packages, but it should be much easier to learn for beginners.
** If you prefer blender or another program the basic concepts are the same, but this tutorial only covers Wings3D.
* An image editor.
** This tutorial will use [http://en.wikipedia.org/wiki/Photoshop Photoshop], however any image editor will work just fine. As a free, cross-platform alternative I would suggest using [http://en.wikipedia.org/wiki/GIMP GIMP].
* A text editor.
** Any will do. Mac users can use [http://en.wikipedia.org/wiki/Textedit Textedit] and Windows users [http://en.wikipedia.org/wiki/Notepad_(Windows) Notepad].
* The latest [http://blog.wolfire.com/category/alpha/ Overgrowth alpha].
** This tutorial was originally written for and tested on [http://forums.wolfire.com/viewtopic.php?f=13&t=4701 alpha 16].

Please make sure that you have these necessary programs before you start.

== Getting started ==

It is advised, but not necessary, that you first take a look at the [http://internap.dl.sourceforge.net/sourceforge/wings/wings3d_manual1.6.1.pdf Wings3D manual] to help you become comfortable with its interface. It contains some very quick and easy tutorials that will teach you everything you need to know for this tutorial and then some.

Here are some quick Wings3D basics:
* Go into ''Edit -> Preferences''
** Check ''Force Axis-Aligned Ortho''. This will make editing along an axis easier.
** Single-button Mac users should in the ''Camera'' tab select the one button control mode.
* Change between ''Vertex'', ''Edge'', ''Face'' and ''Object'' mode by pressing the buttons on the top bar or the keystrokes: '''V''', '''E''', '''F''' and '''B''' respectively
* Select stuff by clicking on it.
* Deselect with space.
* Focus the view on what you have selected by pressing '''A'''.
* Reset the view with '''R'''.
* Right clicking (control + click will from now on by implied for Macs as right click) brings up a context-dependent drop-down menu. Its contents changes depending on what you have selected. This is where most of the features we will use are located.
* For most of the keyboard shortcuts look under ''Help -> Defined Hotkeys''.

So without further ado, let's begin.

== Creating a 3D model ==

Because it has been so widely requested in the [SPF], and for the sake of simplicity, in this tutorial we will make a simple textured 3D cylinder. However, taking it a step further to more advanced models should not be a problem.

# Open Wings 3D
# Right click anywhere and choose ''Cylinder'' from the drop-down menu. This will spawn a default 16-sided cylinder, to spawn a customized cylinder press the little box on the same line instead. We will now change the proportions of the cylinder to our liking.
[[Image:Model_1.png|800px]]
# Go into object mode ('''B''') and select the cylinder.
[[Image:Model_2.png|800px]]
# Right click anywhere to open the drop-down menu and select ''Scale -> Radial Y''.
[[Image:Model_3.png|800px]]
# Now drag the mouse side to side to change the width of the cylinder. Click once it is scaled to your liking to accept, or press tab to manually input a value.
[[Image:Model_4.png|800px]]
# For the purpose of this tutorial our cylinder model is now finished.

Now we need to generate a UV map for the object so we can texture it.

=== UV Mapping the model ===

When you want to apply a texture to a 3D model, you might run into some problems. The best way we know how to deal with textures is as a 2D image, but how do we take a 3D model, and make a 2D image out of it? Well let's imagine that we have an orange painted like a globe like this:

[[Image:Globe_1.png]]

And we want to make its surface flat kinda like this:

[[Image:Globe_2.png]]

The solution is we peel away the surface, cutting it in a certain way so that it lies flat:

[[Image:Globe_3.png]]

Please note that there are many ways of doing this, but some work better than others. For example one of the more accurate ways of doing this with the earth is what's known as ''Fuller's Projection'':

[[Image:Globe_4.png]]

([http://earthvoyage.googlepages.com/UNFOLD.MOV Click for animation])

This is what we have to do with our cylinder: We have to cut it up so that we can lay it flat on a 2D plane.

Each vertex of the model, which already has a 3D coordinate of (X,Y,Z) will now also have a 2D coordinate on this special plane, so that we know how to fit the texture onto our object. This 2D coordinate is defined as (U,V), which is why this is called [http://en.wikipedia.org/wiki/Uv_mapping UV mapping]. This is a simplified way of describing UV mapping, but for this tutorial it will do.

''Note: there are other methods for applying textures to models, but this guide only covers UV mapping.''

1. Select the entire object, and at the bottom of the drop-down menu choose ''UV Mapping -> Direct''. A new window with the object will pop up with a title of ''AutoUV Segmenting:'' and the name of your object:

[[Image:OG_Tuto_CustomModel_UV_1.png|800px]]

Now we have to Divide the object into different shapes so that it can unfold it properly, just like in the globe example.
This can be done Automatically or Manually. For the sake of practice let's do it by hand:
You can separate different pieces either by marking which edges to cut, by coloring the faces that should go together, or both.

2. In face mode (F) select the top Face and press 'i' (select similar) so both the top and bottom are selected.
Choose one of the nine colors Labeled AuvChart1-9 from the drop-down menu. Doing so will mark these faces as being separate from the rest of the model.

[[Image:OG_Tuto_CustomModel_UV_2.png|800px]]

3. Clear your selection with space, and select one of the vertical side pieces.
Select the rest by selecting similar (i), then mark these with a different color.

4. Because the cylindrical part of the model is still in a loop we need to mark a cut.
In Edge mode (E) select of the vertical edges and choose 'mark edges for cut' from the drop down menu.

[[Image:OG_Tuto_CustomModel_UV_3.png|800px]]

5. The marking of your model is now complete, and it is ready to be unfolded.
Choose Continue->Unfolding from the drop down menu

6. A window showing the unfolded model will open up. This is the UV map.
To show what part of the UV map belongs to what part of the model, there is a colorful grid and letter pattern that you can also see on your model. When you Select a face you see it on both the model and the UV map.

[[Image:OG_Tuto_CustomModel_UV_4.png|800px]]

You can also scale and move parts of the model around on the UV map, and the changes will be apparent on the model. Making a face take up more of the UV map will make give it a denser more detailed texture. This is often used to make important features of a model more detailed, like the hands and dace of a character.

If for whatever reason you don't like how the unfolding ended up you can select your object, and in the drop down menu Choose UV Mapping-> Force Segment (delete previous) to start from a clean slate.

It's important to note that there can be many different ways of cutting an object and the resulting UV maps can look very different.

There are two automated methods, Projection and Feature Detection:

[[Image:OG_Tuto_CustomModel_UV_5.png]]

Depending on your model one might be better than the other, sometimes they both suck and you have to do it manually, and sometimes if your model is simple like this one they will both give you the same result.

If you cut the object in weird ways it will end up unfolding weirdly, like this for example:

[[Image:OG_Tuto_CustomModel_UV_6.png|800px]]

Once again, the best way to understand how this works is to experiment and try out the various features.

Although there are many different ways of mapping any Model, as a rule you want its faces to use the UV space as efficiently as possible, because any texture that isn't under the mapped Faces will not be seen anywhere when the texture is applied.

There are entire programs devoted simply to finding the best way to generate the UV map for any given model, and the tools wings3D provides are much more basic. However they are sufficient for a simple object like this.
With practice you can even manage more complex ones.

Now that We've Finished UV mapping let's generate the texture for the model. Rest assured, the hardest part is done.

== Generating a texture from the UV Data ==

We have our lovely UV map, and now we need to generate a texture we can then edit.

1. With the UV map Window still open, choose 'Create Texture' from the drop-down menu. A small window will pop up:

[[Image:OG_Tuto_CustomModel_Texture_1.png|800px]]

Choose a size depending on how big the object will end up being, and how detailed you want it to be. The larger the image, the more detailed the texture will look on the model.
It wouldn't make sense to have a super-high detailed texture for a fork, and you wouldn't want a low quality texture for a skyscraper either. For this object 512x512 will work just fine.

2. Because we want to edit this texture manually later we need to know where on the texture the edges of the object are, so we know where on the object we are drawing.
Set the first as 'Background' and the second as 'Draw Edges' so the edges appear on the texture. Press OK.

3. It might seem like the UV map disappeared, but don't fear, the texture was created and is now applied to the object. You simply cannot see it well because it is white with black lines that are right under the wire-frame. You can tell when you zoom in really closely:

[[Image:OG_Tuto_CustomModel_Texture_2.png|800px]]

4. Export the model by going into File -> Export -> Wavefront (.obj)

[[Image:OG_Tuto_CustomModel_Texture_3.png|800px]]

Then make a new folder in a location of your choosing and save it as whatever title you like.
It will save a .obj and a .mtl file. Delete the .mtl file. It has to do with materials that we don't need.

5. Sometimes the texture is saved along with the object, but sometimes it isn't. If there is no texture file in the folder you exported to, go into Window->Outliner, and locate the texture:

[[Image:OG_Tuto_CustomModel_Texture_4.png|800px]]

Right click it, Choose export and save it in the same folder as the obj, name it whatever you want, preferably the name of your object plus _Color.
For example:

[[Image:OG_Tuto_CustomModel_Texture_5.png]]

You are now done with Wings3D!

== Editing the texture ==

Now it's time to get creative!

1. Load the Texture file into whichever image editing program of your choice

[[Image:OG_Tuto_CustomModel_Image_1.png|800px]]

2. Create your actual texture now however you wish. It helps to keep your 'Template' in a separate layer than the texture you want to be on your object.

Here is one way of doing it in photoshop, that allows you to keep the Template's lines above your texture for reference:

:* Double click the layer name and accept the pop up prompt to unlock it.
:* Rename the layer "template".
:* Create two layers bellow it, the lower one called background, the upper one called texture.
:* Fill The background layer with white and lock it.
:[[Image:OG_Tuto_CustomModel_Image_2.png]]

:* Select the Template layer, which is above all the other layers, and set its layer mode to multiply.
:[[Image:OG_Tuto_CustomModel_Image_2.png]]

:This will make the white in it transparent, and the black remain as an overlay. you can use it as a guide. lock it as well.
:* Draw in the texture layer to your heart's content.
:[[Image:OG_Tuto_CustomModel_Image_4.png|800px]]

:I just used some stock photography I found online. The area with the red text is wasted space that could have been better managed when I made the UV map. It will not appear on the final Model, but will take up space in memory none-the-less.

:Here is my finished texture:
:[[Image:OG_Tuto_CustomModel_Image_5.png]]

Once done, make sure to save the image -without- the Template, unless you want it as part of the final Texture. Don't worry too much about what format you save it as. Thanks to the built in image converter almost any file type will work in the engine. I personally would advise you to use .tga or .png.

=== Changing the Reflectivity of the texture ===

If you were to use this texture as it is, the resulting object would look very shiny.
That is because Phoenix will set the reflectivity, or inherent 'shininess' of an object depending on the transparency, or alpha value of the texture.

If you want your object to look more matte you need to add transparency to your texture. There are several ways to do this:

The Simple way:
:* This method will make the whole texture less shiny:
:* Look in the Layer window and change the Opacity of the Layer that contains your texture.
:[[Image:OG_Tuto_CustomModel_Reflect_1.png]]

:* You're done. Save the texture, but make sure that the format you save it as supports Transparency. .tga and .png both do.

The Advanced way:
:* This method will allow you to change the shininess of different parts of the texture.
:* Find the Channel window. You should see 3 channels, Red, Green and Blue (RGB is simply the sum of all 3):
:[[Image:OG_Tuto_CustomModel_Reflect_2.png]]

:* Add a new Channel (the icon next to the trashcan) By default this is an Alpha Channel.
:[[Image:OG_Tuto_CustomModel_Reflect_3.png]]

:* Like all channels it is black and white. Black is Transparent, and will make the object matte, and White is Opaque, and will make the object reflective.
:* If you show the rest of the channels while the alpha channel is visible the parts that are hidden will appear red by default:
:[[Image:OG_Tuto_CustomModel_Reflect_4.png]]

:* When Finished save the file, but make sure to save it as .tga The alpha layer will -not- be saved if you choose .png

=== Making a normal map for the texture ===

This tutorial does not yet include Instructions for making a normal map. Until someone writes it up, just use the following blank normal map:

[[Image:OG_Tuto_CustomModel_blanknormal.png]]

== Setting up the folders ==

Phoenix, Overgrowth's engine uses XML files to tell it where an object's files are located.
These XML files are by default located in Data/Objects. For example the Rock1a.xml file:

<pre>
<?xml version="1.0" ?>
<Object>
<Model>Data/Models/Environments/Rocks/Rock1a.obj</Model>
<ColorMap>Data/Textures/Environments/Rocks/Rock1_Color.tga</ColorMap>
<NormalMap>Data/Textures/Environments/Rocks/Rock1_NormalOS.tga</NormalMap>
<ShaderPath>Data/GLSL/cubemapobj</ShaderPath>
<ShaderName>normalmap</ShaderName>
</Object>
</pre>

The way the file works is self explanatory. The tags indicate what the provided file path points to. As you can see all the file paths have Data as their root. Because of this you'll want your files to be inside the Data folder.

For mac users right click the Alpha, click 'Show Package Contents', Contents->Data. For easy access then drag it into your Sidebar:

[[Image:OG_Tuto_CustomModel_Folder_1.png]]

Until the team implements a more elegant solution I suggest that in the Data folder you make a folder called Custom and keep all your files in there. I chose to imitate the file structure in Custom that the Data folder uses by default:

[[Image:OG_Tuto_CustomModel_Folder_2.png|800px]]

However you can save it any way you choose. If you want to share your Objects with others it is be best to keep all the files in one Folder inside Data/Custom. ultimately in the engine it doesn't make a difference, as long as the XML file is defined correctly

== Making the XML file ==

Now that everything is in the right place you can make the xml Object file.
# Copy any .xml file from the Objects Folder, paste it into your custom folder and rename it as whatever you want. make sure to keep the extension ".xml"
# Open the XML file with a text editor and change the paths to match that of your file.
Here's mine:

<pre>
<?xml version="1.0" ?>
<Object>
<Model>Data/Custom/Models/Demo/Cylinder.obj</Model>
<ColorMap>Data/Custom/Textures/Demo/Cylinder_Color.png</ColorMap>
<NormalMap>Data/Custom/Textures/Demo/Blank_Normal.png</NormalMap>
<ShaderPath>Data/GLSL/cubemap</ShaderPath>
<ShaderName>cubemap</ShaderName>
</Object>
</pre>

I don't quite know how the shaders work, but I tested each out and [http://forums.wolfire.com/viewtopic.php?f=13&t=4223&p=72220&hilit=shader#p72220 listed them here].

Cubemap will work best for most objects.

== Testing the object in the engine ==

Now the moment you've been waiting for:

# Start up the Latest Alpha
# Click the first Button in the toolbar
# Find your .xml object file and click Open
# Pray that you've done everything right and click on the terrain
# Breathe a sigh of relief as your object appears:

[[Image:OG_Tuto_CustomModel_Final_1.png|800px]]

The above Object uses a texture without transparency and so looks shiny.

This Object uses a texture with transparency and so has matte areas:

[[Image:OG_Tuto_CustomModel_Final_2.png|800px]]

If you get an error message saying that a file cannot be found make sure that the file-paths in the XML Object file are correct.

Here is the final Custom Folder which I made for this tutorial. It contains two objects: one with changed reflectivity, and one without.

[http://forums.wolfire.com/download/file.php?id=329 OG_Tuto_CustomModel_Custom.zip]

unzip it, make sure the resulting folder is called 'Custom" (otherwise the xml file paths would be incorrect) and place it in the Data folder.

(Notice that I actually did a bad job with the UV mapping, because I chose to automate it and not do it manually, and the texture is not a continuous band, but broken up into 4 parts.)

== Conclusion ==

I really hope that this Guide will be helpful to you.
A-lot of thought and effort went into it, plus at least a good 5+ hours of work

One thing I cannot stress enough is that this guide is by no means perfect, and there are likely better ways of doing this.

My challenge to you is to not just use this guide, but expand on it: Try texturing a sphere, a rock, a Tree, never stop experimenting. Apply what you've learned here and use it to help you make some great content for this game.

If you have ''any'' questions or problems when trying to recreate what is illustrated here, please feel free to ask the friendly people in our [http://www.wolfire.com/irc IRC channel].

== Other Resources ==

Tutorial for UV mapping a sphere in Wings 3D:
http://bbq-px.blogspot.com/2008/06/pola ... ngs3d.html

UV mapping tutorial for a program called ultimate unwrap 3D, helps clarify some things:
http://www.unwrap3d.com/tutorial_map.aspx

A plethora of 3D tutorials (Thanks Aubrey)
http://www.poopinmymouth.com/tutorial/tutorial.htm

[[Category:Overgrowth]]

Making New Models & Textures

2010-12-28T20:37:33Z

Narann: add pictures

File:OG Tuto CustomModel Final 2.png

2010-12-28T20:23:11Z

Narann:

File:OG Tuto CustomModel Final 1.png

2010-12-28T20:22:42Z

Narann:

Making New Models & Textures

2010-12-28T20:21:09Z

Narann: /* Making the XML file */

'''This tutorial does not contain all the links and pictures it should yet.'''

This tutorial is based on jo-shadow's tutorial [http://forums.wolfire.com/viewtopic.php?f=13&t=4712 ''How to make your own models for OG''].

This tutorial will teach you everything you need to know to make your own objects and how to get them into the game.

Please keep in mind that this method is by no means the only way of making and adding Objects. It is merely one of very many ways, but doing it this way should be easy to learn and understand for anyone. Some experience with 3D programs would help, but even the most inexperienced beginner should be able to get results with this guide.

== What you will learn ==

This tutorial will cover how to do the following:

* Creating a 3D model.
* UV mapping the model.
* Generating a texture from the UV data.
* Editing the texture.
* Changing the reflectivity of the texture.
* Making a normal map for the texture.
* Setting up the folder.
* Making the XML file.
* Testing the object in the engine.

== What you will need ==

You will need the following for this tutorial:
* A 3D modeling program with simple UV mapping capabilities.
** This tutorial will use [http://en.wikipedia.org/wiki/Wings3d Wings3D], an open source, cross platform polygonal modeler. It is much simpler when it comes to features than [http://en.wikipedia.org/wiki/Blender_(software) Blender] or other major 3D packages, but it should be much easier to learn for beginners.
** If you prefer blender or another program the basic concepts are the same, but this tutorial only covers Wings3D.
* An image editor.
** This tutorial will use [http://en.wikipedia.org/wiki/Photoshop Photoshop], however any image editor will work just fine. As a free, cross-platform alternative I would suggest using [http://en.wikipedia.org/wiki/GIMP GIMP].
* A text editor.
** Any will do. Mac users can use [http://en.wikipedia.org/wiki/Textedit Textedit] and Windows users [http://en.wikipedia.org/wiki/Notepad_(Windows) Notepad].
* The latest [http://blog.wolfire.com/category/alpha/ Overgrowth alpha].
** This tutorial was originally written for and tested on [http://forums.wolfire.com/viewtopic.php?f=13&t=4701 alpha 16].

Please make sure that you have these necessary programs before you start.

== Getting started ==

It is advised, but not necessary, that you first take a look at the [http://internap.dl.sourceforge.net/sourceforge/wings/wings3d_manual1.6.1.pdf Wings3D manual] to help you become comfortable with its interface. It contains some very quick and easy tutorials that will teach you everything you need to know for this tutorial and then some.

Here are some quick Wings3D basics:
* Go into ''Edit -> Preferences''
** Check ''Force Axis-Aligned Ortho''. This will make editing along an axis easier.
** Single-button Mac users should in the ''Camera'' tab select the one button control mode.
* Change between ''Vertex'', ''Edge'', ''Face'' and ''Object'' mode by pressing the buttons on the top bar or the keystrokes: '''V''', '''E''', '''F''' and '''B''' respectively
* Select stuff by clicking on it.
* Deselect with space.
* Focus the view on what you have selected by pressing '''A'''.
* Reset the view with '''R'''.
* Right clicking (control + click will from now on by implied for Macs as right click) brings up a context-dependent drop-down menu. Its contents changes depending on what you have selected. This is where most of the features we will use are located.
* For most of the keyboard shortcuts look under ''Help -> Defined Hotkeys''.

So without further ado, let's begin.

== Creating a 3D model ==

Because it has been so widely requested in the [SPF], and for the sake of simplicity, in this tutorial we will make a simple textured 3D cylinder. However, taking it a step further to more advanced models should not be a problem.

# Open Wings 3D
# Right click anywhere and choose ''Cylinder'' from the drop-down menu. This will spawn a default 16-sided cylinder, to spawn a customized cylinder press the little box on the same line instead. We will now change the proportions of the cylinder to our liking.
[[Image:Model_1.png|800px]]
# Go into object mode ('''B''') and select the cylinder.
[[Image:Model_2.png|800px]]
# Right click anywhere to open the drop-down menu and select ''Scale -> Radial Y''.
[[Image:Model_3.png|800px]]
# Now drag the mouse side to side to change the width of the cylinder. Click once it is scaled to your liking to accept, or press tab to manually input a value.
[[Image:Model_4.png|800px]]
# For the purpose of this tutorial our cylinder model is now finished.

Now we need to generate a UV map for the object so we can texture it.

=== UV Mapping the model ===

When you want to apply a texture to a 3D model, you might run into some problems. The best way we know how to deal with textures is as a 2D image, but how do we take a 3D model, and make a 2D image out of it? Well let's imagine that we have an orange painted like a globe like this:

[[Image:Globe_1.png]]

And we want to make its surface flat kinda like this:

[[Image:Globe_2.png]]

The solution is we peel away the surface, cutting it in a certain way so that it lies flat:

[[Image:Globe_3.png]]

Please note that there are many ways of doing this, but some work better than others. For example one of the more accurate ways of doing this with the earth is what's known as ''Fuller's Projection'':

[[Image:Globe_4.png]]

([http://earthvoyage.googlepages.com/UNFOLD.MOV Click for animation])

This is what we have to do with our cylinder: We have to cut it up so that we can lay it flat on a 2D plane.

Each vertex of the model, which already has a 3D coordinate of (X,Y,Z) will now also have a 2D coordinate on this special plane, so that we know how to fit the texture onto our object. This 2D coordinate is defined as (U,V), which is why this is called [http://en.wikipedia.org/wiki/Uv_mapping UV mapping]. This is a simplified way of describing UV mapping, but for this tutorial it will do.

''Note: there are other methods for applying textures to models, but this guide only covers UV mapping.''

1. Select the entire object, and at the bottom of the drop-down menu choose ''UV Mapping -> Direct''. A new window with the object will pop up with a title of ''AutoUV Segmenting:'' and the name of your object:

[[Image:OG_Tuto_CustomModel_UV_1.png|800px]]

Now we have to Divide the object into different shapes so that it can unfold it properly, just like in the globe example.
This can be done Automatically or Manually. For the sake of practice let's do it by hand:
You can separate different pieces either by marking which edges to cut, by coloring the faces that should go together, or both.

2. In face mode (F) select the top Face and press 'i' (select similar) so both the top and bottom are selected.
Choose one of the nine colors Labeled AuvChart1-9 from the drop-down menu. Doing so will mark these faces as being separate from the rest of the model.

[[Image:OG_Tuto_CustomModel_UV_2.png|800px]]

3. Clear your selection with space, and select one of the vertical side pieces.
Select the rest by selecting similar (i), then mark these with a different color.

4. Because the cylindrical part of the model is still in a loop we need to mark a cut.
In Edge mode (E) select of the vertical edges and choose 'mark edges for cut' from the drop down menu.

[[Image:OG_Tuto_CustomModel_UV_3.png|800px]]

5. The marking of your model is now complete, and it is ready to be unfolded.
Choose Continue->Unfolding from the drop down menu

6. A window showing the unfolded model will open up. This is the UV map.
To show what part of the UV map belongs to what part of the model, there is a colorful grid and letter pattern that you can also see on your model. When you Select a face you see it on both the model and the UV map.

[[Image:OG_Tuto_CustomModel_UV_4.png|800px]]

You can also scale and move parts of the model around on the UV map, and the changes will be apparent on the model. Making a face take up more of the UV map will make give it a denser more detailed texture. This is often used to make important features of a model more detailed, like the hands and dace of a character.

If for whatever reason you don't like how the unfolding ended up you can select your object, and in the drop down menu Choose UV Mapping-> Force Segment (delete previous) to start from a clean slate.

It's important to note that there can be many different ways of cutting an object and the resulting UV maps can look very different.

There are two automated methods, Projection and Feature Detection:

[[Image:OG_Tuto_CustomModel_UV_5.png]]

Depending on your model one might be better than the other, sometimes they both suck and you have to do it manually, and sometimes if your model is simple like this one they will both give you the same result.

If you cut the object in weird ways it will end up unfolding weirdly, like this for example:

[[Image:OG_Tuto_CustomModel_UV_6.png|800px]]

Once again, the best way to understand how this works is to experiment and try out the various features.

Although there are many different ways of mapping any Model, as a rule you want its faces to use the UV space as efficiently as possible, because any texture that isn't under the mapped Faces will not be seen anywhere when the texture is applied.

There are entire programs devoted simply to finding the best way to generate the UV map for any given model, and the tools wings3D provides are much more basic. However they are sufficient for a simple object like this.
With practice you can even manage more complex ones.

Now that We've Finished UV mapping let's generate the texture for the model. Rest assured, the hardest part is done.

== Generating a texture from the UV Data ==

We have our lovely UV map, and now we need to generate a texture we can then edit.

1. With the UV map Window still open, choose 'Create Texture' from the drop-down menu. A small window will pop up:

[[Image:OG_Tuto_CustomModel_Texture_1.png|800px]]

Choose a size depending on how big the object will end up being, and how detailed you want it to be. The larger the image, the more detailed the texture will look on the model.
It wouldn't make sense to have a super-high detailed texture for a fork, and you wouldn't want a low quality texture for a skyscraper either. For this object 512x512 will work just fine.

2. Because we want to edit this texture manually later we need to know where on the texture the edges of the object are, so we know where on the object we are drawing.
Set the first as 'Background' and the second as 'Draw Edges' so the edges appear on the texture. Press OK.

3. It might seem like the UV map disappeared, but don't fear, the texture was created and is now applied to the object. You simply cannot see it well because it is white with black lines that are right under the wire-frame. You can tell when you zoom in really closely:

[[Image:OG_Tuto_CustomModel_Texture_2.png|800px]]

4. Export the model by going into File -> Export -> Wavefront (.obj)

[[Image:OG_Tuto_CustomModel_Texture_3.png|800px]]

Then make a new folder in a location of your choosing and save it as whatever title you like.
It will save a .obj and a .mtl file. Delete the .mtl file. It has to do with materials that we don't need.

5. Sometimes the texture is saved along with the object, but sometimes it isn't. If there is no texture file in the folder you exported to, go into Window->Outliner, and locate the texture:

[[Image:OG_Tuto_CustomModel_Texture_4.png|800px]]

Right click it, Choose export and save it in the same folder as the obj, name it whatever you want, preferably the name of your object plus _Color.
For example:

[[Image:OG_Tuto_CustomModel_Texture_5.png]]

You are now done with Wings3D!

== Editing the texture ==

Now it's time to get creative!

1. Load the Texture file into whichever image editing program of your choice

[[Image:OG_Tuto_CustomModel_Image_1.png|800px]]

2. Create your actual texture now however you wish. It helps to keep your 'Template' in a separate layer than the texture you want to be on your object.

Here is one way of doing it in photoshop, that allows you to keep the Template's lines above your texture for reference:

:* Double click the layer name and accept the pop up prompt to unlock it.
:* Rename the layer "template".
:* Create two layers bellow it, the lower one called background, the upper one called texture.
:* Fill The background layer with white and lock it.
:[[Image:OG_Tuto_CustomModel_Image_2.png]]

:* Select the Template layer, which is above all the other layers, and set its layer mode to multiply.
:[[Image:OG_Tuto_CustomModel_Image_2.png]]

:This will make the white in it transparent, and the black remain as an overlay. you can use it as a guide. lock it as well.
:* Draw in the texture layer to your heart's content.
:[[Image:OG_Tuto_CustomModel_Image_4.png|800px]]

:I just used some stock photography I found online. The area with the red text is wasted space that could have been better managed when I made the UV map. It will not appear on the final Model, but will take up space in memory none-the-less.

:Here is my finished texture:
:[[Image:OG_Tuto_CustomModel_Image_5.png]]

Once done, make sure to save the image -without- the Template, unless you want it as part of the final Texture. Don't worry too much about what format you save it as. Thanks to the built in image converter almost any file type will work in the engine. I personally would advise you to use .tga or .png.

=== Changing the Reflectivity of the texture ===

If you were to use this texture as it is, the resulting object would look very shiny.
That is because Phoenix will set the reflectivity, or inherent 'shininess' of an object depending on the transparency, or alpha value of the texture.

If you want your object to look more matte you need to add transparency to your texture. There are several ways to do this:

The Simple way:
:* This method will make the whole texture less shiny:
:* Look in the Layer window and change the Opacity of the Layer that contains your texture.
:[[Image:OG_Tuto_CustomModel_Reflect_1.png]]

:* You're done. Save the texture, but make sure that the format you save it as supports Transparency. .tga and .png both do.

The Advanced way:
:* This method will allow you to change the shininess of different parts of the texture.
:* Find the Channel window. You should see 3 channels, Red, Green and Blue (RGB is simply the sum of all 3):
:[[Image:OG_Tuto_CustomModel_Reflect_2.png]]

:* Add a new Channel (the icon next to the trashcan) By default this is an Alpha Channel.
:[[Image:OG_Tuto_CustomModel_Reflect_3.png]]

:* Like all channels it is black and white. Black is Transparent, and will make the object matte, and White is Opaque, and will make the object reflective.
:* If you show the rest of the channels while the alpha channel is visible the parts that are hidden will appear red by default:
:[[Image:OG_Tuto_CustomModel_Reflect_4.png]]

:* When Finished save the file, but make sure to save it as .tga The alpha layer will -not- be saved if you choose .png

=== Making a normal map for the texture ===

This tutorial does not yet include Instructions for making a normal map. Until someone writes it up, just use the following blank normal map:

[[Image:OG_Tuto_CustomModel_blanknormal.png]]

== Setting up the folders ==

Phoenix, Overgrowth's engine uses XML files to tell it where an object's files are located.
These XML files are by default located in Data/Objects. For example the Rock1a.xml file:

<pre>
<?xml version="1.0" ?>
<Object>
<Model>Data/Models/Environments/Rocks/Rock1a.obj</Model>
<ColorMap>Data/Textures/Environments/Rocks/Rock1_Color.tga</ColorMap>
<NormalMap>Data/Textures/Environments/Rocks/Rock1_NormalOS.tga</NormalMap>
<ShaderPath>Data/GLSL/cubemapobj</ShaderPath>
<ShaderName>normalmap</ShaderName>
</Object>
</pre>

The way the file works is self explanatory. The tags indicate what the provided file path points to. As you can see all the file paths have Data as their root. Because of this you'll want your files to be inside the Data folder.

For mac users right click the Alpha, click 'Show Package Contents', Contents->Data. For easy access then drag it into your Sidebar:

[[Image:OG_Tuto_CustomModel_Folder_1.png]]

Until the team implements a more elegant solution I suggest that in the Data folder you make a folder called Custom and keep all your files in there. I chose to imitate the file structure in Custom that the Data folder uses by default:

[[Image:OG_Tuto_CustomModel_Folder_2.png|800px]]

However you can save it any way you choose. If you want to share your Objects with others it is be best to keep all the files in one Folder inside Data/Custom. ultimately in the engine it doesn't make a difference, as long as the XML file is defined correctly

== Making the XML file ==

Now that everything is in the right place you can make the xml Object file.
# Copy any .xml file from the Objects Folder, paste it into your custom folder and rename it as whatever you want. make sure to keep the extension ".xml"
# Open the XML file with a text editor and change the paths to match that of your file.
Here's mine:

<pre>
<?xml version="1.0" ?>
<Object>
<Model>Data/Custom/Models/Demo/Cylinder.obj</Model>
<ColorMap>Data/Custom/Textures/Demo/Cylinder_Color.png</ColorMap>
<NormalMap>Data/Custom/Textures/Demo/Blank_Normal.png</NormalMap>
<ShaderPath>Data/GLSL/cubemap</ShaderPath>
<ShaderName>cubemap</ShaderName>
</Object>
</pre>

I don't quite know how the shaders work, but I tested each out and [http://forums.wolfire.com/viewtopic.php?f=13&t=4223&p=72220&hilit=shader#p72220 listed them here].

Cubemap will work best for most objects.

== Testing the object in the engine ==

Now the moment you've been waiting for:

# Start up the Latest Alpha
# Click the first Button in the toolbar
# Find your .xml object file and click Open
# Pray that you've done everything right and click on the terrain
# Breathe a sigh of relief as your object appears:

The above Object uses a texture without transparency and so looks shiny.

This Object uses a texture with transparency and so has matte areas:

If you get an error message saying that a file cannot be found make sure that the file-paths in the XML Object file are correct.

Here is the final Custom Folder which I made for this tutorial. It contains two objects: one with changed reflectivity, and one without.

FILE

unzip it, make sure the resulting folder is called 'Custom" (otherwise the xml file paths would be incorrect) and place it in the Data folder.

(Notice that I actually did a bad job with the UV mapping, because I chose to automate it and not do it manually, and the texture is not a continuous band, but broken up into 4 parts.)

== Conclusion ==

I really hope that this Guide will be helpful to you.
A-lot of thought and effort went into it, plus at least a good 5+ hours of work

One thing I cannot stress enough is that this guide is by no means perfect, and there are likely better ways of doing this.

My challenge to you is to not just use this guide, but expand on it: Try texturing a sphere, a rock, a Tree, never stop experimenting. Apply what you've learned here and use it to help you make some great content for this game.

If you have ''any'' questions or problems when trying to recreate what is illustrated here, please feel free to ask the friendly people in our [http://www.wolfire.com/irc IRC channel].

== Other Resources ==

LINKS

[[Category:Overgrowth]]

Making New Models & Textures

2010-12-28T20:20:47Z

Narann: add a link

'''This tutorial does not contain all the links and pictures it should yet.'''

This tutorial is based on jo-shadow's tutorial [http://forums.wolfire.com/viewtopic.php?f=13&t=4712 ''How to make your own models for OG''].

This tutorial will teach you everything you need to know to make your own objects and how to get them into the game.

Please keep in mind that this method is by no means the only way of making and adding Objects. It is merely one of very many ways, but doing it this way should be easy to learn and understand for anyone. Some experience with 3D programs would help, but even the most inexperienced beginner should be able to get results with this guide.

== What you will learn ==

This tutorial will cover how to do the following:

* Creating a 3D model.
* UV mapping the model.
* Generating a texture from the UV data.
* Editing the texture.
* Changing the reflectivity of the texture.
* Making a normal map for the texture.
* Setting up the folder.
* Making the XML file.
* Testing the object in the engine.

== What you will need ==

You will need the following for this tutorial:
* A 3D modeling program with simple UV mapping capabilities.
** This tutorial will use [http://en.wikipedia.org/wiki/Wings3d Wings3D], an open source, cross platform polygonal modeler. It is much simpler when it comes to features than [http://en.wikipedia.org/wiki/Blender_(software) Blender] or other major 3D packages, but it should be much easier to learn for beginners.
** If you prefer blender or another program the basic concepts are the same, but this tutorial only covers Wings3D.
* An image editor.
** This tutorial will use [http://en.wikipedia.org/wiki/Photoshop Photoshop], however any image editor will work just fine. As a free, cross-platform alternative I would suggest using [http://en.wikipedia.org/wiki/GIMP GIMP].
* A text editor.
** Any will do. Mac users can use [http://en.wikipedia.org/wiki/Textedit Textedit] and Windows users [http://en.wikipedia.org/wiki/Notepad_(Windows) Notepad].
* The latest [http://blog.wolfire.com/category/alpha/ Overgrowth alpha].
** This tutorial was originally written for and tested on [http://forums.wolfire.com/viewtopic.php?f=13&t=4701 alpha 16].

Please make sure that you have these necessary programs before you start.

== Getting started ==

It is advised, but not necessary, that you first take a look at the [http://internap.dl.sourceforge.net/sourceforge/wings/wings3d_manual1.6.1.pdf Wings3D manual] to help you become comfortable with its interface. It contains some very quick and easy tutorials that will teach you everything you need to know for this tutorial and then some.

Here are some quick Wings3D basics:
* Go into ''Edit -> Preferences''
** Check ''Force Axis-Aligned Ortho''. This will make editing along an axis easier.
** Single-button Mac users should in the ''Camera'' tab select the one button control mode.
* Change between ''Vertex'', ''Edge'', ''Face'' and ''Object'' mode by pressing the buttons on the top bar or the keystrokes: '''V''', '''E''', '''F''' and '''B''' respectively
* Select stuff by clicking on it.
* Deselect with space.
* Focus the view on what you have selected by pressing '''A'''.
* Reset the view with '''R'''.
* Right clicking (control + click will from now on by implied for Macs as right click) brings up a context-dependent drop-down menu. Its contents changes depending on what you have selected. This is where most of the features we will use are located.
* For most of the keyboard shortcuts look under ''Help -> Defined Hotkeys''.

So without further ado, let's begin.

== Creating a 3D model ==

Because it has been so widely requested in the [SPF], and for the sake of simplicity, in this tutorial we will make a simple textured 3D cylinder. However, taking it a step further to more advanced models should not be a problem.

# Open Wings 3D
# Right click anywhere and choose ''Cylinder'' from the drop-down menu. This will spawn a default 16-sided cylinder, to spawn a customized cylinder press the little box on the same line instead. We will now change the proportions of the cylinder to our liking.
[[Image:Model_1.png|800px]]
# Go into object mode ('''B''') and select the cylinder.
[[Image:Model_2.png|800px]]
# Right click anywhere to open the drop-down menu and select ''Scale -> Radial Y''.
[[Image:Model_3.png|800px]]
# Now drag the mouse side to side to change the width of the cylinder. Click once it is scaled to your liking to accept, or press tab to manually input a value.
[[Image:Model_4.png|800px]]
# For the purpose of this tutorial our cylinder model is now finished.

Now we need to generate a UV map for the object so we can texture it.

=== UV Mapping the model ===

When you want to apply a texture to a 3D model, you might run into some problems. The best way we know how to deal with textures is as a 2D image, but how do we take a 3D model, and make a 2D image out of it? Well let's imagine that we have an orange painted like a globe like this:

[[Image:Globe_1.png]]

And we want to make its surface flat kinda like this:

[[Image:Globe_2.png]]

The solution is we peel away the surface, cutting it in a certain way so that it lies flat:

[[Image:Globe_3.png]]

Please note that there are many ways of doing this, but some work better than others. For example one of the more accurate ways of doing this with the earth is what's known as ''Fuller's Projection'':

[[Image:Globe_4.png]]

([http://earthvoyage.googlepages.com/UNFOLD.MOV Click for animation])

This is what we have to do with our cylinder: We have to cut it up so that we can lay it flat on a 2D plane.

Each vertex of the model, which already has a 3D coordinate of (X,Y,Z) will now also have a 2D coordinate on this special plane, so that we know how to fit the texture onto our object. This 2D coordinate is defined as (U,V), which is why this is called [http://en.wikipedia.org/wiki/Uv_mapping UV mapping]. This is a simplified way of describing UV mapping, but for this tutorial it will do.

''Note: there are other methods for applying textures to models, but this guide only covers UV mapping.''

1. Select the entire object, and at the bottom of the drop-down menu choose ''UV Mapping -> Direct''. A new window with the object will pop up with a title of ''AutoUV Segmenting:'' and the name of your object:

[[Image:OG_Tuto_CustomModel_UV_1.png|800px]]

Now we have to Divide the object into different shapes so that it can unfold it properly, just like in the globe example.
This can be done Automatically or Manually. For the sake of practice let's do it by hand:
You can separate different pieces either by marking which edges to cut, by coloring the faces that should go together, or both.

2. In face mode (F) select the top Face and press 'i' (select similar) so both the top and bottom are selected.
Choose one of the nine colors Labeled AuvChart1-9 from the drop-down menu. Doing so will mark these faces as being separate from the rest of the model.

[[Image:OG_Tuto_CustomModel_UV_2.png|800px]]

3. Clear your selection with space, and select one of the vertical side pieces.
Select the rest by selecting similar (i), then mark these with a different color.

4. Because the cylindrical part of the model is still in a loop we need to mark a cut.
In Edge mode (E) select of the vertical edges and choose 'mark edges for cut' from the drop down menu.

[[Image:OG_Tuto_CustomModel_UV_3.png|800px]]

5. The marking of your model is now complete, and it is ready to be unfolded.
Choose Continue->Unfolding from the drop down menu

6. A window showing the unfolded model will open up. This is the UV map.
To show what part of the UV map belongs to what part of the model, there is a colorful grid and letter pattern that you can also see on your model. When you Select a face you see it on both the model and the UV map.

[[Image:OG_Tuto_CustomModel_UV_4.png|800px]]

You can also scale and move parts of the model around on the UV map, and the changes will be apparent on the model. Making a face take up more of the UV map will make give it a denser more detailed texture. This is often used to make important features of a model more detailed, like the hands and dace of a character.

If for whatever reason you don't like how the unfolding ended up you can select your object, and in the drop down menu Choose UV Mapping-> Force Segment (delete previous) to start from a clean slate.

It's important to note that there can be many different ways of cutting an object and the resulting UV maps can look very different.

There are two automated methods, Projection and Feature Detection:

[[Image:OG_Tuto_CustomModel_UV_5.png]]

Depending on your model one might be better than the other, sometimes they both suck and you have to do it manually, and sometimes if your model is simple like this one they will both give you the same result.

If you cut the object in weird ways it will end up unfolding weirdly, like this for example:

[[Image:OG_Tuto_CustomModel_UV_6.png|800px]]

Once again, the best way to understand how this works is to experiment and try out the various features.

Although there are many different ways of mapping any Model, as a rule you want its faces to use the UV space as efficiently as possible, because any texture that isn't under the mapped Faces will not be seen anywhere when the texture is applied.

There are entire programs devoted simply to finding the best way to generate the UV map for any given model, and the tools wings3D provides are much more basic. However they are sufficient for a simple object like this.
With practice you can even manage more complex ones.

Now that We've Finished UV mapping let's generate the texture for the model. Rest assured, the hardest part is done.

== Generating a texture from the UV Data ==

We have our lovely UV map, and now we need to generate a texture we can then edit.

1. With the UV map Window still open, choose 'Create Texture' from the drop-down menu. A small window will pop up:

[[Image:OG_Tuto_CustomModel_Texture_1.png|800px]]

Choose a size depending on how big the object will end up being, and how detailed you want it to be. The larger the image, the more detailed the texture will look on the model.
It wouldn't make sense to have a super-high detailed texture for a fork, and you wouldn't want a low quality texture for a skyscraper either. For this object 512x512 will work just fine.

2. Because we want to edit this texture manually later we need to know where on the texture the edges of the object are, so we know where on the object we are drawing.
Set the first as 'Background' and the second as 'Draw Edges' so the edges appear on the texture. Press OK.

3. It might seem like the UV map disappeared, but don't fear, the texture was created and is now applied to the object. You simply cannot see it well because it is white with black lines that are right under the wire-frame. You can tell when you zoom in really closely:

[[Image:OG_Tuto_CustomModel_Texture_2.png|800px]]

4. Export the model by going into File -> Export -> Wavefront (.obj)

[[Image:OG_Tuto_CustomModel_Texture_3.png|800px]]

Then make a new folder in a location of your choosing and save it as whatever title you like.
It will save a .obj and a .mtl file. Delete the .mtl file. It has to do with materials that we don't need.

5. Sometimes the texture is saved along with the object, but sometimes it isn't. If there is no texture file in the folder you exported to, go into Window->Outliner, and locate the texture:

[[Image:OG_Tuto_CustomModel_Texture_4.png|800px]]

Right click it, Choose export and save it in the same folder as the obj, name it whatever you want, preferably the name of your object plus _Color.
For example:

[[Image:OG_Tuto_CustomModel_Texture_5.png]]

You are now done with Wings3D!

== Editing the texture ==

Now it's time to get creative!

1. Load the Texture file into whichever image editing program of your choice

[[Image:OG_Tuto_CustomModel_Image_1.png|800px]]

2. Create your actual texture now however you wish. It helps to keep your 'Template' in a separate layer than the texture you want to be on your object.

Here is one way of doing it in photoshop, that allows you to keep the Template's lines above your texture for reference:

:* Double click the layer name and accept the pop up prompt to unlock it.
:* Rename the layer "template".
:* Create two layers bellow it, the lower one called background, the upper one called texture.
:* Fill The background layer with white and lock it.
:[[Image:OG_Tuto_CustomModel_Image_2.png]]

:* Select the Template layer, which is above all the other layers, and set its layer mode to multiply.
:[[Image:OG_Tuto_CustomModel_Image_2.png]]

:This will make the white in it transparent, and the black remain as an overlay. you can use it as a guide. lock it as well.
:* Draw in the texture layer to your heart's content.
:[[Image:OG_Tuto_CustomModel_Image_4.png|800px]]

:I just used some stock photography I found online. The area with the red text is wasted space that could have been better managed when I made the UV map. It will not appear on the final Model, but will take up space in memory none-the-less.

:Here is my finished texture:
:[[Image:OG_Tuto_CustomModel_Image_5.png]]

Once done, make sure to save the image -without- the Template, unless you want it as part of the final Texture. Don't worry too much about what format you save it as. Thanks to the built in image converter almost any file type will work in the engine. I personally would advise you to use .tga or .png.

=== Changing the Reflectivity of the texture ===

If you were to use this texture as it is, the resulting object would look very shiny.
That is because Phoenix will set the reflectivity, or inherent 'shininess' of an object depending on the transparency, or alpha value of the texture.

If you want your object to look more matte you need to add transparency to your texture. There are several ways to do this:

The Simple way:
:* This method will make the whole texture less shiny:
:* Look in the Layer window and change the Opacity of the Layer that contains your texture.
:[[Image:OG_Tuto_CustomModel_Reflect_1.png]]

:* You're done. Save the texture, but make sure that the format you save it as supports Transparency. .tga and .png both do.

The Advanced way:
:* This method will allow you to change the shininess of different parts of the texture.
:* Find the Channel window. You should see 3 channels, Red, Green and Blue (RGB is simply the sum of all 3):
:[[Image:OG_Tuto_CustomModel_Reflect_2.png]]

:* Add a new Channel (the icon next to the trashcan) By default this is an Alpha Channel.
:[[Image:OG_Tuto_CustomModel_Reflect_3.png]]

:* Like all channels it is black and white. Black is Transparent, and will make the object matte, and White is Opaque, and will make the object reflective.
:* If you show the rest of the channels while the alpha channel is visible the parts that are hidden will appear red by default:
:[[Image:OG_Tuto_CustomModel_Reflect_4.png]]

:* When Finished save the file, but make sure to save it as .tga The alpha layer will -not- be saved if you choose .png

=== Making a normal map for the texture ===

This tutorial does not yet include Instructions for making a normal map. Until someone writes it up, just use the following blank normal map:

[[Image:OG_Tuto_CustomModel_blanknormal.png]]

== Setting up the folders ==

Phoenix, Overgrowth's engine uses XML files to tell it where an object's files are located.
These XML files are by default located in Data/Objects. For example the Rock1a.xml file:

<pre>
<?xml version="1.0" ?>
<Object>
<Model>Data/Models/Environments/Rocks/Rock1a.obj</Model>
<ColorMap>Data/Textures/Environments/Rocks/Rock1_Color.tga</ColorMap>
<NormalMap>Data/Textures/Environments/Rocks/Rock1_NormalOS.tga</NormalMap>
<ShaderPath>Data/GLSL/cubemapobj</ShaderPath>
<ShaderName>normalmap</ShaderName>
</Object>
</pre>

The way the file works is self explanatory. The tags indicate what the provided file path points to. As you can see all the file paths have Data as their root. Because of this you'll want your files to be inside the Data folder.

For mac users right click the Alpha, click 'Show Package Contents', Contents->Data. For easy access then drag it into your Sidebar:

[[Image:OG_Tuto_CustomModel_Folder_1.png]]

Until the team implements a more elegant solution I suggest that in the Data folder you make a folder called Custom and keep all your files in there. I chose to imitate the file structure in Custom that the Data folder uses by default:

[[Image:OG_Tuto_CustomModel_Folder_2.png|800px]]

However you can save it any way you choose. If you want to share your Objects with others it is be best to keep all the files in one Folder inside Data/Custom. ultimately in the engine it doesn't make a difference, as long as the XML file is defined correctly

== Making the XML file ==

Now that everything is in the right place you can make the xml Object file.
# Copy any .xml file from the Objects Folder, paste it into your custom folder and rename it as whatever you want. make sure to keep the extension ".xml"
# Open the XML file with a text editor and change the paths to match that of your file.
Here's mine:

<pre>
<?xml version="1.0" ?>
<Object>
<Model>Data/Custom/Models/Demo/Cylinder.obj</Model>
<ColorMap>Data/Custom/Textures/Demo/Cylinder_Color.png</ColorMap>
<NormalMap>Data/Custom/Textures/Demo/Blank_Normal.png</NormalMap>
<ShaderPath>Data/GLSL/cubemap</ShaderPath>
<ShaderName>cubemap</ShaderName>
</Object>
</code>
</pre>

I don't quite know how the shaders work, but I tested each out and [http://forums.wolfire.com/viewtopic.php?f=13&t=4223&p=72220&hilit=shader#p72220 listed them here].

Cubemap will work best for most objects.

== Testing the object in the engine ==

Now the moment you've been waiting for:

# Start up the Latest Alpha
# Click the first Button in the toolbar
# Find your .xml object file and click Open
# Pray that you've done everything right and click on the terrain
# Breathe a sigh of relief as your object appears:

The above Object uses a texture without transparency and so looks shiny.

This Object uses a texture with transparency and so has matte areas:

If you get an error message saying that a file cannot be found make sure that the file-paths in the XML Object file are correct.

Here is the final Custom Folder which I made for this tutorial. It contains two objects: one with changed reflectivity, and one without.

FILE

unzip it, make sure the resulting folder is called 'Custom" (otherwise the xml file paths would be incorrect) and place it in the Data folder.

(Notice that I actually did a bad job with the UV mapping, because I chose to automate it and not do it manually, and the texture is not a continuous band, but broken up into 4 parts.)

== Conclusion ==

I really hope that this Guide will be helpful to you.
A-lot of thought and effort went into it, plus at least a good 5+ hours of work

One thing I cannot stress enough is that this guide is by no means perfect, and there are likely better ways of doing this.

My challenge to you is to not just use this guide, but expand on it: Try texturing a sphere, a rock, a Tree, never stop experimenting. Apply what you've learned here and use it to help you make some great content for this game.

If you have ''any'' questions or problems when trying to recreate what is illustrated here, please feel free to ask the friendly people in our [http://www.wolfire.com/irc IRC channel].

== Other Resources ==

LINKS

[[Category:Overgrowth]]

Making New Models & Textures

2010-12-28T20:19:06Z

Narann: add pictures

'''This tutorial does not contain all the links and pictures it should yet.'''

This tutorial is based on jo-shadow's tutorial [http://forums.wolfire.com/viewtopic.php?f=13&t=4712 ''How to make your own models for OG''].

This tutorial will teach you everything you need to know to make your own objects and how to get them into the game.

Please keep in mind that this method is by no means the only way of making and adding Objects. It is merely one of very many ways, but doing it this way should be easy to learn and understand for anyone. Some experience with 3D programs would help, but even the most inexperienced beginner should be able to get results with this guide.

== What you will learn ==

This tutorial will cover how to do the following:

* Creating a 3D model.
* UV mapping the model.
* Generating a texture from the UV data.
* Editing the texture.
* Changing the reflectivity of the texture.
* Making a normal map for the texture.
* Setting up the folder.
* Making the XML file.
* Testing the object in the engine.

== What you will need ==

You will need the following for this tutorial:
* A 3D modeling program with simple UV mapping capabilities.
** This tutorial will use [http://en.wikipedia.org/wiki/Wings3d Wings3D], an open source, cross platform polygonal modeler. It is much simpler when it comes to features than [http://en.wikipedia.org/wiki/Blender_(software) Blender] or other major 3D packages, but it should be much easier to learn for beginners.
** If you prefer blender or another program the basic concepts are the same, but this tutorial only covers Wings3D.
* An image editor.
** This tutorial will use [http://en.wikipedia.org/wiki/Photoshop Photoshop], however any image editor will work just fine. As a free, cross-platform alternative I would suggest using [http://en.wikipedia.org/wiki/GIMP GIMP].
* A text editor.
** Any will do. Mac users can use [http://en.wikipedia.org/wiki/Textedit Textedit] and Windows users [http://en.wikipedia.org/wiki/Notepad_(Windows) Notepad].
* The latest [http://blog.wolfire.com/category/alpha/ Overgrowth alpha].
** This tutorial was originally written for and tested on [http://forums.wolfire.com/viewtopic.php?f=13&t=4701 alpha 16].

Please make sure that you have these necessary programs before you start.

== Getting started ==

It is advised, but not necessary, that you first take a look at the [http://internap.dl.sourceforge.net/sourceforge/wings/wings3d_manual1.6.1.pdf Wings3D manual] to help you become comfortable with its interface. It contains some very quick and easy tutorials that will teach you everything you need to know for this tutorial and then some.

Here are some quick Wings3D basics:
* Go into ''Edit -> Preferences''
** Check ''Force Axis-Aligned Ortho''. This will make editing along an axis easier.
** Single-button Mac users should in the ''Camera'' tab select the one button control mode.
* Change between ''Vertex'', ''Edge'', ''Face'' and ''Object'' mode by pressing the buttons on the top bar or the keystrokes: '''V''', '''E''', '''F''' and '''B''' respectively
* Select stuff by clicking on it.
* Deselect with space.
* Focus the view on what you have selected by pressing '''A'''.
* Reset the view with '''R'''.
* Right clicking (control + click will from now on by implied for Macs as right click) brings up a context-dependent drop-down menu. Its contents changes depending on what you have selected. This is where most of the features we will use are located.
* For most of the keyboard shortcuts look under ''Help -> Defined Hotkeys''.

So without further ado, let's begin.

== Creating a 3D model ==

Because it has been so widely requested in the [SPF], and for the sake of simplicity, in this tutorial we will make a simple textured 3D cylinder. However, taking it a step further to more advanced models should not be a problem.

# Open Wings 3D
# Right click anywhere and choose ''Cylinder'' from the drop-down menu. This will spawn a default 16-sided cylinder, to spawn a customized cylinder press the little box on the same line instead. We will now change the proportions of the cylinder to our liking.
[[Image:Model_1.png|800px]]
# Go into object mode ('''B''') and select the cylinder.
[[Image:Model_2.png|800px]]
# Right click anywhere to open the drop-down menu and select ''Scale -> Radial Y''.
[[Image:Model_3.png|800px]]
# Now drag the mouse side to side to change the width of the cylinder. Click once it is scaled to your liking to accept, or press tab to manually input a value.
[[Image:Model_4.png|800px]]
# For the purpose of this tutorial our cylinder model is now finished.

Now we need to generate a UV map for the object so we can texture it.

=== UV Mapping the model ===

When you want to apply a texture to a 3D model, you might run into some problems. The best way we know how to deal with textures is as a 2D image, but how do we take a 3D model, and make a 2D image out of it? Well let's imagine that we have an orange painted like a globe like this:

[[Image:Globe_1.png]]

And we want to make its surface flat kinda like this:

[[Image:Globe_2.png]]

The solution is we peel away the surface, cutting it in a certain way so that it lies flat:

[[Image:Globe_3.png]]

Please note that there are many ways of doing this, but some work better than others. For example one of the more accurate ways of doing this with the earth is what's known as ''Fuller's Projection'':

[[Image:Globe_4.png]]

([http://earthvoyage.googlepages.com/UNFOLD.MOV Click for animation])

This is what we have to do with our cylinder: We have to cut it up so that we can lay it flat on a 2D plane.

Each vertex of the model, which already has a 3D coordinate of (X,Y,Z) will now also have a 2D coordinate on this special plane, so that we know how to fit the texture onto our object. This 2D coordinate is defined as (U,V), which is why this is called [http://en.wikipedia.org/wiki/Uv_mapping UV mapping]. This is a simplified way of describing UV mapping, but for this tutorial it will do.

''Note: there are other methods for applying textures to models, but this guide only covers UV mapping.''

1. Select the entire object, and at the bottom of the drop-down menu choose ''UV Mapping -> Direct''. A new window with the object will pop up with a title of ''AutoUV Segmenting:'' and the name of your object:

[[Image:OG_Tuto_CustomModel_UV_1.png|800px]]

Now we have to Divide the object into different shapes so that it can unfold it properly, just like in the globe example.
This can be done Automatically or Manually. For the sake of practice let's do it by hand:
You can separate different pieces either by marking which edges to cut, by coloring the faces that should go together, or both.

2. In face mode (F) select the top Face and press 'i' (select similar) so both the top and bottom are selected.
Choose one of the nine colors Labeled AuvChart1-9 from the drop-down menu. Doing so will mark these faces as being separate from the rest of the model.

[[Image:OG_Tuto_CustomModel_UV_2.png|800px]]

3. Clear your selection with space, and select one of the vertical side pieces.
Select the rest by selecting similar (i), then mark these with a different color.

4. Because the cylindrical part of the model is still in a loop we need to mark a cut.
In Edge mode (E) select of the vertical edges and choose 'mark edges for cut' from the drop down menu.

[[Image:OG_Tuto_CustomModel_UV_3.png|800px]]

5. The marking of your model is now complete, and it is ready to be unfolded.
Choose Continue->Unfolding from the drop down menu

6. A window showing the unfolded model will open up. This is the UV map.
To show what part of the UV map belongs to what part of the model, there is a colorful grid and letter pattern that you can also see on your model. When you Select a face you see it on both the model and the UV map.

[[Image:OG_Tuto_CustomModel_UV_4.png|800px]]

You can also scale and move parts of the model around on the UV map, and the changes will be apparent on the model. Making a face take up more of the UV map will make give it a denser more detailed texture. This is often used to make important features of a model more detailed, like the hands and dace of a character.

If for whatever reason you don't like how the unfolding ended up you can select your object, and in the drop down menu Choose UV Mapping-> Force Segment (delete previous) to start from a clean slate.

It's important to note that there can be many different ways of cutting an object and the resulting UV maps can look very different.

There are two automated methods, Projection and Feature Detection:

[[Image:OG_Tuto_CustomModel_UV_5.png]]

Depending on your model one might be better than the other, sometimes they both suck and you have to do it manually, and sometimes if your model is simple like this one they will both give you the same result.

If you cut the object in weird ways it will end up unfolding weirdly, like this for example:

[[Image:OG_Tuto_CustomModel_UV_6.png|800px]]

Once again, the best way to understand how this works is to experiment and try out the various features.

Although there are many different ways of mapping any Model, as a rule you want its faces to use the UV space as efficiently as possible, because any texture that isn't under the mapped Faces will not be seen anywhere when the texture is applied.

There are entire programs devoted simply to finding the best way to generate the UV map for any given model, and the tools wings3D provides are much more basic. However they are sufficient for a simple object like this.
With practice you can even manage more complex ones.

Now that We've Finished UV mapping let's generate the texture for the model. Rest assured, the hardest part is done.

== Generating a texture from the UV Data ==

We have our lovely UV map, and now we need to generate a texture we can then edit.

1. With the UV map Window still open, choose 'Create Texture' from the drop-down menu. A small window will pop up:

[[Image:OG_Tuto_CustomModel_Texture_1.png|800px]]

Choose a size depending on how big the object will end up being, and how detailed you want it to be. The larger the image, the more detailed the texture will look on the model.
It wouldn't make sense to have a super-high detailed texture for a fork, and you wouldn't want a low quality texture for a skyscraper either. For this object 512x512 will work just fine.

2. Because we want to edit this texture manually later we need to know where on the texture the edges of the object are, so we know where on the object we are drawing.
Set the first as 'Background' and the second as 'Draw Edges' so the edges appear on the texture. Press OK.

3. It might seem like the UV map disappeared, but don't fear, the texture was created and is now applied to the object. You simply cannot see it well because it is white with black lines that are right under the wire-frame. You can tell when you zoom in really closely:

[[Image:OG_Tuto_CustomModel_Texture_2.png|800px]]

4. Export the model by going into File -> Export -> Wavefront (.obj)

[[Image:OG_Tuto_CustomModel_Texture_3.png|800px]]

Then make a new folder in a location of your choosing and save it as whatever title you like.
It will save a .obj and a .mtl file. Delete the .mtl file. It has to do with materials that we don't need.

5. Sometimes the texture is saved along with the object, but sometimes it isn't. If there is no texture file in the folder you exported to, go into Window->Outliner, and locate the texture:

[[Image:OG_Tuto_CustomModel_Texture_4.png|800px]]

Right click it, Choose export and save it in the same folder as the obj, name it whatever you want, preferably the name of your object plus _Color.
For example:

[[Image:OG_Tuto_CustomModel_Texture_5.png]]

You are now done with Wings3D!

== Editing the texture ==

Now it's time to get creative!

1. Load the Texture file into whichever image editing program of your choice

[[Image:OG_Tuto_CustomModel_Image_1.png|800px]]

2. Create your actual texture now however you wish. It helps to keep your 'Template' in a separate layer than the texture you want to be on your object.

Here is one way of doing it in photoshop, that allows you to keep the Template's lines above your texture for reference:

:* Double click the layer name and accept the pop up prompt to unlock it.
:* Rename the layer "template".
:* Create two layers bellow it, the lower one called background, the upper one called texture.
:* Fill The background layer with white and lock it.
:[[Image:OG_Tuto_CustomModel_Image_2.png]]

:* Select the Template layer, which is above all the other layers, and set its layer mode to multiply.
:[[Image:OG_Tuto_CustomModel_Image_2.png]]

:This will make the white in it transparent, and the black remain as an overlay. you can use it as a guide. lock it as well.
:* Draw in the texture layer to your heart's content.
:[[Image:OG_Tuto_CustomModel_Image_4.png|800px]]

:I just used some stock photography I found online. The area with the red text is wasted space that could have been better managed when I made the UV map. It will not appear on the final Model, but will take up space in memory none-the-less.

:Here is my finished texture:
:[[Image:OG_Tuto_CustomModel_Image_5.png]]

Once done, make sure to save the image -without- the Template, unless you want it as part of the final Texture. Don't worry too much about what format you save it as. Thanks to the built in image converter almost any file type will work in the engine. I personally would advise you to use .tga or .png.

=== Changing the Reflectivity of the texture ===

If you were to use this texture as it is, the resulting object would look very shiny.
That is because Phoenix will set the reflectivity, or inherent 'shininess' of an object depending on the transparency, or alpha value of the texture.

If you want your object to look more matte you need to add transparency to your texture. There are several ways to do this:

The Simple way:
:* This method will make the whole texture less shiny:
:* Look in the Layer window and change the Opacity of the Layer that contains your texture.
:[[Image:OG_Tuto_CustomModel_Reflect_1.png]]

:* You're done. Save the texture, but make sure that the format you save it as supports Transparency. .tga and .png both do.

The Advanced way:
:* This method will allow you to change the shininess of different parts of the texture.
:* Find the Channel window. You should see 3 channels, Red, Green and Blue (RGB is simply the sum of all 3):
:[[Image:OG_Tuto_CustomModel_Reflect_2.png]]

:* Add a new Channel (the icon next to the trashcan) By default this is an Alpha Channel.
:[[Image:OG_Tuto_CustomModel_Reflect_3.png]]

:* Like all channels it is black and white. Black is Transparent, and will make the object matte, and White is Opaque, and will make the object reflective.
:* If you show the rest of the channels while the alpha channel is visible the parts that are hidden will appear red by default:
:[[Image:OG_Tuto_CustomModel_Reflect_4.png]]

:* When Finished save the file, but make sure to save it as .tga The alpha layer will -not- be saved if you choose .png

=== Making a normal map for the texture ===

This tutorial does not yet include Instructions for making a normal map. Until someone writes it up, just use the following blank normal map:

[[Image:OG_Tuto_CustomModel_blanknormal.png]]

== Setting up the folders ==

Phoenix, Overgrowth's engine uses XML files to tell it where an object's files are located.
These XML files are by default located in Data/Objects. For example the Rock1a.xml file:

<pre>
<?xml version="1.0" ?>
<Object>
<Model>Data/Models/Environments/Rocks/Rock1a.obj</Model>
<ColorMap>Data/Textures/Environments/Rocks/Rock1_Color.tga</ColorMap>
<NormalMap>Data/Textures/Environments/Rocks/Rock1_NormalOS.tga</NormalMap>
<ShaderPath>Data/GLSL/cubemapobj</ShaderPath>
<ShaderName>normalmap</ShaderName>
</Object>
</pre>

The way the file works is self explanatory. The tags indicate what the provided file path points to. As you can see all the file paths have Data as their root. Because of this you'll want your files to be inside the Data folder.

For mac users right click the Alpha, click 'Show Package Contents', Contents->Data. For easy access then drag it into your Sidebar:

[[Image:OG_Tuto_CustomModel_Folder_1.png]]

Until the team implements a more elegant solution I suggest that in the Data folder you make a folder called Custom and keep all your files in there. I chose to imitate the file structure in Custom that the Data folder uses by default:

[[Image:OG_Tuto_CustomModel_Folder_2.png|800px]]

However you can save it any way you choose. If you want to share your Objects with others it is be best to keep all the files in one Folder inside Data/Custom. ultimately in the engine it doesn't make a difference, as long as the XML file is defined correctly

== Making the XML file ==

Now that everything is in the right place you can make the xml Object file.
# Copy any .xml file from the Objects Folder, paste it into your custom folder and rename it as whatever you want. make sure to keep the extension ".xml"
# Open the XML file with a text editor and change the paths to match that of your file.
Here's mine:

<pre>
<?xml version="1.0" ?>
<Object>
<Model>Data/Custom/Models/Demo/Cylinder.obj</Model>
<ColorMap>Data/Custom/Textures/Demo/Cylinder_Color.png</ColorMap>
<NormalMap>Data/Custom/Textures/Demo/Blank_Normal.png</NormalMap>
<ShaderPath>Data/GLSL/cubemap</ShaderPath>
<ShaderName>cubemap</ShaderName>
</Object>
</code>
</pre>

I don't quite know how the shaders work, but I tested each out and listed them here.
Cubemap will work best for most objects.

== Testing the object in the engine ==

Now the moment you've been waiting for:

# Start up the Latest Alpha
# Click the first Button in the toolbar
# Find your .xml object file and click Open
# Pray that you've done everything right and click on the terrain
# Breathe a sigh of relief as your object appears:

The above Object uses a texture without transparency and so looks shiny.

This Object uses a texture with transparency and so has matte areas:

If you get an error message saying that a file cannot be found make sure that the file-paths in the XML Object file are correct.

Here is the final Custom Folder which I made for this tutorial. It contains two objects: one with changed reflectivity, and one without.

FILE

unzip it, make sure the resulting folder is called 'Custom" (otherwise the xml file paths would be incorrect) and place it in the Data folder.

(Notice that I actually did a bad job with the UV mapping, because I chose to automate it and not do it manually, and the texture is not a continuous band, but broken up into 4 parts.)

== Conclusion ==

I really hope that this Guide will be helpful to you.
A-lot of thought and effort went into it, plus at least a good 5+ hours of work

One thing I cannot stress enough is that this guide is by no means perfect, and there are likely better ways of doing this.

My challenge to you is to not just use this guide, but expand on it: Try texturing a sphere, a rock, a Tree, never stop experimenting. Apply what you've learned here and use it to help you make some great content for this game.

If you have ''any'' questions or problems when trying to recreate what is illustrated here, please feel free to ask the friendly people in our [http://www.wolfire.com/irc IRC channel].

== Other Resources ==

LINKS

[[Category:Overgrowth]]

File:OG Tuto CustomModel Folder 2.png

2010-12-28T20:17:31Z

Narann:

File:OG Tuto CustomModel Folder 1.png

2010-12-28T20:16:41Z

Narann:

Making New Models & Textures

2010-12-28T20:14:49Z

Narann: add pictures

'''This tutorial does not contain all the links and pictures it should yet.'''

This tutorial is based on jo-shadow's tutorial [http://forums.wolfire.com/viewtopic.php?f=13&t=4712 ''How to make your own models for OG''].

This tutorial will teach you everything you need to know to make your own objects and how to get them into the game.

Please keep in mind that this method is by no means the only way of making and adding Objects. It is merely one of very many ways, but doing it this way should be easy to learn and understand for anyone. Some experience with 3D programs would help, but even the most inexperienced beginner should be able to get results with this guide.

== What you will learn ==

This tutorial will cover how to do the following:

* Creating a 3D model.
* UV mapping the model.
* Generating a texture from the UV data.
* Editing the texture.
* Changing the reflectivity of the texture.
* Making a normal map for the texture.
* Setting up the folder.
* Making the XML file.
* Testing the object in the engine.

== What you will need ==

You will need the following for this tutorial:
* A 3D modeling program with simple UV mapping capabilities.
** This tutorial will use [http://en.wikipedia.org/wiki/Wings3d Wings3D], an open source, cross platform polygonal modeler. It is much simpler when it comes to features than [http://en.wikipedia.org/wiki/Blender_(software) Blender] or other major 3D packages, but it should be much easier to learn for beginners.
** If you prefer blender or another program the basic concepts are the same, but this tutorial only covers Wings3D.
* An image editor.
** This tutorial will use [http://en.wikipedia.org/wiki/Photoshop Photoshop], however any image editor will work just fine. As a free, cross-platform alternative I would suggest using [http://en.wikipedia.org/wiki/GIMP GIMP].
* A text editor.
** Any will do. Mac users can use [http://en.wikipedia.org/wiki/Textedit Textedit] and Windows users [http://en.wikipedia.org/wiki/Notepad_(Windows) Notepad].
* The latest [http://blog.wolfire.com/category/alpha/ Overgrowth alpha].
** This tutorial was originally written for and tested on [http://forums.wolfire.com/viewtopic.php?f=13&t=4701 alpha 16].

Please make sure that you have these necessary programs before you start.

== Getting started ==

It is advised, but not necessary, that you first take a look at the [http://internap.dl.sourceforge.net/sourceforge/wings/wings3d_manual1.6.1.pdf Wings3D manual] to help you become comfortable with its interface. It contains some very quick and easy tutorials that will teach you everything you need to know for this tutorial and then some.

Here are some quick Wings3D basics:
* Go into ''Edit -> Preferences''
** Check ''Force Axis-Aligned Ortho''. This will make editing along an axis easier.
** Single-button Mac users should in the ''Camera'' tab select the one button control mode.
* Change between ''Vertex'', ''Edge'', ''Face'' and ''Object'' mode by pressing the buttons on the top bar or the keystrokes: '''V''', '''E''', '''F''' and '''B''' respectively
* Select stuff by clicking on it.
* Deselect with space.
* Focus the view on what you have selected by pressing '''A'''.
* Reset the view with '''R'''.
* Right clicking (control + click will from now on by implied for Macs as right click) brings up a context-dependent drop-down menu. Its contents changes depending on what you have selected. This is where most of the features we will use are located.
* For most of the keyboard shortcuts look under ''Help -> Defined Hotkeys''.

So without further ado, let's begin.

== Creating a 3D model ==

Because it has been so widely requested in the [SPF], and for the sake of simplicity, in this tutorial we will make a simple textured 3D cylinder. However, taking it a step further to more advanced models should not be a problem.

# Open Wings 3D
# Right click anywhere and choose ''Cylinder'' from the drop-down menu. This will spawn a default 16-sided cylinder, to spawn a customized cylinder press the little box on the same line instead. We will now change the proportions of the cylinder to our liking.
[[Image:Model_1.png|800px]]
# Go into object mode ('''B''') and select the cylinder.
[[Image:Model_2.png|800px]]
# Right click anywhere to open the drop-down menu and select ''Scale -> Radial Y''.
[[Image:Model_3.png|800px]]
# Now drag the mouse side to side to change the width of the cylinder. Click once it is scaled to your liking to accept, or press tab to manually input a value.
[[Image:Model_4.png|800px]]
# For the purpose of this tutorial our cylinder model is now finished.

Now we need to generate a UV map for the object so we can texture it.

=== UV Mapping the model ===

When you want to apply a texture to a 3D model, you might run into some problems. The best way we know how to deal with textures is as a 2D image, but how do we take a 3D model, and make a 2D image out of it? Well let's imagine that we have an orange painted like a globe like this:

[[Image:Globe_1.png]]

And we want to make its surface flat kinda like this:

[[Image:Globe_2.png]]

The solution is we peel away the surface, cutting it in a certain way so that it lies flat:

[[Image:Globe_3.png]]

Please note that there are many ways of doing this, but some work better than others. For example one of the more accurate ways of doing this with the earth is what's known as ''Fuller's Projection'':

[[Image:Globe_4.png]]

([http://earthvoyage.googlepages.com/UNFOLD.MOV Click for animation])

This is what we have to do with our cylinder: We have to cut it up so that we can lay it flat on a 2D plane.

Each vertex of the model, which already has a 3D coordinate of (X,Y,Z) will now also have a 2D coordinate on this special plane, so that we know how to fit the texture onto our object. This 2D coordinate is defined as (U,V), which is why this is called [http://en.wikipedia.org/wiki/Uv_mapping UV mapping]. This is a simplified way of describing UV mapping, but for this tutorial it will do.

''Note: there are other methods for applying textures to models, but this guide only covers UV mapping.''

1. Select the entire object, and at the bottom of the drop-down menu choose ''UV Mapping -> Direct''. A new window with the object will pop up with a title of ''AutoUV Segmenting:'' and the name of your object:

[[Image:OG_Tuto_CustomModel_UV_1.png|800px]]

Now we have to Divide the object into different shapes so that it can unfold it properly, just like in the globe example.
This can be done Automatically or Manually. For the sake of practice let's do it by hand:
You can separate different pieces either by marking which edges to cut, by coloring the faces that should go together, or both.

2. In face mode (F) select the top Face and press 'i' (select similar) so both the top and bottom are selected.
Choose one of the nine colors Labeled AuvChart1-9 from the drop-down menu. Doing so will mark these faces as being separate from the rest of the model.

[[Image:OG_Tuto_CustomModel_UV_2.png|800px]]

3. Clear your selection with space, and select one of the vertical side pieces.
Select the rest by selecting similar (i), then mark these with a different color.

4. Because the cylindrical part of the model is still in a loop we need to mark a cut.
In Edge mode (E) select of the vertical edges and choose 'mark edges for cut' from the drop down menu.

[[Image:OG_Tuto_CustomModel_UV_3.png|800px]]

5. The marking of your model is now complete, and it is ready to be unfolded.
Choose Continue->Unfolding from the drop down menu

6. A window showing the unfolded model will open up. This is the UV map.
To show what part of the UV map belongs to what part of the model, there is a colorful grid and letter pattern that you can also see on your model. When you Select a face you see it on both the model and the UV map.

[[Image:OG_Tuto_CustomModel_UV_4.png|800px]]

You can also scale and move parts of the model around on the UV map, and the changes will be apparent on the model. Making a face take up more of the UV map will make give it a denser more detailed texture. This is often used to make important features of a model more detailed, like the hands and dace of a character.

If for whatever reason you don't like how the unfolding ended up you can select your object, and in the drop down menu Choose UV Mapping-> Force Segment (delete previous) to start from a clean slate.

It's important to note that there can be many different ways of cutting an object and the resulting UV maps can look very different.

There are two automated methods, Projection and Feature Detection:

[[Image:OG_Tuto_CustomModel_UV_5.png]]

Depending on your model one might be better than the other, sometimes they both suck and you have to do it manually, and sometimes if your model is simple like this one they will both give you the same result.

If you cut the object in weird ways it will end up unfolding weirdly, like this for example:

[[Image:OG_Tuto_CustomModel_UV_6.png|800px]]

Once again, the best way to understand how this works is to experiment and try out the various features.

Although there are many different ways of mapping any Model, as a rule you want its faces to use the UV space as efficiently as possible, because any texture that isn't under the mapped Faces will not be seen anywhere when the texture is applied.

There are entire programs devoted simply to finding the best way to generate the UV map for any given model, and the tools wings3D provides are much more basic. However they are sufficient for a simple object like this.
With practice you can even manage more complex ones.

Now that We've Finished UV mapping let's generate the texture for the model. Rest assured, the hardest part is done.

== Generating a texture from the UV Data ==

We have our lovely UV map, and now we need to generate a texture we can then edit.

1. With the UV map Window still open, choose 'Create Texture' from the drop-down menu. A small window will pop up:

[[Image:OG_Tuto_CustomModel_Texture_1.png|800px]]

Choose a size depending on how big the object will end up being, and how detailed you want it to be. The larger the image, the more detailed the texture will look on the model.
It wouldn't make sense to have a super-high detailed texture for a fork, and you wouldn't want a low quality texture for a skyscraper either. For this object 512x512 will work just fine.

2. Because we want to edit this texture manually later we need to know where on the texture the edges of the object are, so we know where on the object we are drawing.
Set the first as 'Background' and the second as 'Draw Edges' so the edges appear on the texture. Press OK.

3. It might seem like the UV map disappeared, but don't fear, the texture was created and is now applied to the object. You simply cannot see it well because it is white with black lines that are right under the wire-frame. You can tell when you zoom in really closely:

[[Image:OG_Tuto_CustomModel_Texture_2.png|800px]]

4. Export the model by going into File -> Export -> Wavefront (.obj)

[[Image:OG_Tuto_CustomModel_Texture_3.png|800px]]

Then make a new folder in a location of your choosing and save it as whatever title you like.
It will save a .obj and a .mtl file. Delete the .mtl file. It has to do with materials that we don't need.

5. Sometimes the texture is saved along with the object, but sometimes it isn't. If there is no texture file in the folder you exported to, go into Window->Outliner, and locate the texture:

[[Image:OG_Tuto_CustomModel_Texture_4.png|800px]]

Right click it, Choose export and save it in the same folder as the obj, name it whatever you want, preferably the name of your object plus _Color.
For example:

[[Image:OG_Tuto_CustomModel_Texture_5.png]]

You are now done with Wings3D!

== Editing the texture ==

Now it's time to get creative!

1. Load the Texture file into whichever image editing program of your choice

[[Image:OG_Tuto_CustomModel_Image_1.png|800px]]

2. Create your actual texture now however you wish. It helps to keep your 'Template' in a separate layer than the texture you want to be on your object.

Here is one way of doing it in photoshop, that allows you to keep the Template's lines above your texture for reference:

:* Double click the layer name and accept the pop up prompt to unlock it.
:* Rename the layer "template".
:* Create two layers bellow it, the lower one called background, the upper one called texture.
:* Fill The background layer with white and lock it.
:[[Image:OG_Tuto_CustomModel_Image_2.png]]

:* Select the Template layer, which is above all the other layers, and set its layer mode to multiply.
:[[Image:OG_Tuto_CustomModel_Image_2.png]]

:This will make the white in it transparent, and the black remain as an overlay. you can use it as a guide. lock it as well.
:* Draw in the texture layer to your heart's content.
:[[Image:OG_Tuto_CustomModel_Image_4.png|800px]]

:I just used some stock photography I found online. The area with the red text is wasted space that could have been better managed when I made the UV map. It will not appear on the final Model, but will take up space in memory none-the-less.

:Here is my finished texture:
:[[Image:OG_Tuto_CustomModel_Image_5.png]]

Once done, make sure to save the image -without- the Template, unless you want it as part of the final Texture. Don't worry too much about what format you save it as. Thanks to the built in image converter almost any file type will work in the engine. I personally would advise you to use .tga or .png.

=== Changing the Reflectivity of the texture ===

If you were to use this texture as it is, the resulting object would look very shiny.
That is because Phoenix will set the reflectivity, or inherent 'shininess' of an object depending on the transparency, or alpha value of the texture.

If you want your object to look more matte you need to add transparency to your texture. There are several ways to do this:

The Simple way:
:* This method will make the whole texture less shiny:
:* Look in the Layer window and change the Opacity of the Layer that contains your texture.
:[[Image:OG_Tuto_CustomModel_Reflect_1.png]]

:* You're done. Save the texture, but make sure that the format you save it as supports Transparency. .tga and .png both do.

The Advanced way:
:* This method will allow you to change the shininess of different parts of the texture.
:* Find the Channel window. You should see 3 channels, Red, Green and Blue (RGB is simply the sum of all 3):
:[[Image:OG_Tuto_CustomModel_Reflect_2.png]]

:* Add a new Channel (the icon next to the trashcan) By default this is an Alpha Channel.
:[[Image:OG_Tuto_CustomModel_Reflect_3.png]]

:* Like all channels it is black and white. Black is Transparent, and will make the object matte, and White is Opaque, and will make the object reflective.
:* If you show the rest of the channels while the alpha channel is visible the parts that are hidden will appear red by default:
:[[Image:OG_Tuto_CustomModel_Reflect_4.png]]

:* When Finished save the file, but make sure to save it as .tga The alpha layer will -not- be saved if you choose .png

=== Making a normal map for the texture ===

This tutorial does not yet include Instructions for making a normal map. Until someone writes it up, just use the following blank normal map:

[[Image:OG_Tuto_CustomModel_blanknormal.png]]

== Setting up the folders ==

Phoenix, Overgrowth's engine uses XML files to tell it where an object's files are located.
These XML files are by default located in Data/Objects. For example the Rock1a.xml file:

<pre>
<?xml version="1.0" ?>
<Object>
<Model>Data/Models/Environments/Rocks/Rock1a.obj</Model>
<ColorMap>Data/Textures/Environments/Rocks/Rock1_Color.tga</ColorMap>
<NormalMap>Data/Textures/Environments/Rocks/Rock1_NormalOS.tga</NormalMap>
<ShaderPath>Data/GLSL/cubemapobj</ShaderPath>
<ShaderName>normalmap</ShaderName>
</Object>
</pre>

The way the file works is self explanatory. The tags indicate what the provided file path points to. As you can see all the file paths have Data as their root. Because of this you'll want your files to be inside the Data folder.

For mac users right click the Alpha, click 'Show Package Contents', Contents->Data. For easy access then drag it into your Sidebar:
Folder_1.png (46.58 KiB) Viewed 563 times

Until the team implements a more elegant solution I suggest that in the Data folder you make a folder called Custom and keep all your files in there. I chose to imitate the file structure in Custom that the Data folder uses by default:
PICTURE

However you can save it any way you choose. If you want to share your Objects with others it is be best to keep all the files in one Folder inside Data/Custom. ultimately in the engine it doesn't make a difference, as long as the XML file is defined correctly

== Making the XML file ==

Now that everything is in the right place you can make the xml Object file.
# Copy any .xml file from the Objects Folder, paste it into your custom folder and rename it as whatever you want. make sure to keep the extension ".xml"
# Open the XML file with a text editor and change the paths to match that of your file.
Here's mine:

<pre>
<?xml version="1.0" ?>
<Object>
<Model>Data/Custom/Models/Demo/Cylinder.obj</Model>
<ColorMap>Data/Custom/Textures/Demo/Cylinder_Color.png</ColorMap>
<NormalMap>Data/Custom/Textures/Demo/Blank_Normal.png</NormalMap>
<ShaderPath>Data/GLSL/cubemap</ShaderPath>
<ShaderName>cubemap</ShaderName>
</Object>
</code>
</pre>

I don't quite know how the shaders work, but I tested each out and listed them here.
Cubemap will work best for most objects.

== Testing the object in the engine ==

Now the moment you've been waiting for:

# Start up the Latest Alpha
# Click the first Button in the toolbar
# Find your .xml object file and click Open
# Pray that you've done everything right and click on the terrain
# Breathe a sigh of relief as your object appears:

The above Object uses a texture without transparency and so looks shiny.

This Object uses a texture with transparency and so has matte areas:

If you get an error message saying that a file cannot be found make sure that the file-paths in the XML Object file are correct.

Here is the final Custom Folder which I made for this tutorial. It contains two objects: one with changed reflectivity, and one without.

FILE

unzip it, make sure the resulting folder is called 'Custom" (otherwise the xml file paths would be incorrect) and place it in the Data folder.

(Notice that I actually did a bad job with the UV mapping, because I chose to automate it and not do it manually, and the texture is not a continuous band, but broken up into 4 parts.)

== Conclusion ==

I really hope that this Guide will be helpful to you.
A-lot of thought and effort went into it, plus at least a good 5+ hours of work

One thing I cannot stress enough is that this guide is by no means perfect, and there are likely better ways of doing this.

My challenge to you is to not just use this guide, but expand on it: Try texturing a sphere, a rock, a Tree, never stop experimenting. Apply what you've learned here and use it to help you make some great content for this game.

If you have ''any'' questions or problems when trying to recreate what is illustrated here, please feel free to ask the friendly people in our [http://www.wolfire.com/irc IRC channel].

== Other Resources ==

LINKS

[[Category:Overgrowth]]

File:OG Tuto CustomModel blanknormal.png

2010-12-28T20:06:53Z

Narann:

File:OG Tuto CustomModel Reflect 4.png

2010-12-28T20:04:19Z

Narann:

File:OG Tuto CustomModel Reflect 3.png

2010-12-28T20:03:40Z

Narann:

File:OG Tuto CustomModel Reflect 2.png

2010-12-28T20:03:26Z

Narann:

File:OG Tuto CustomModel Reflect 1.png

2010-12-28T20:01:55Z

Narann:

File:OG Tuto CustomModel Image 5.png

2010-12-28T20:00:37Z

Narann:

File:OG Tuto CustomModel Image 4.png

2010-12-28T19:59:59Z

Narann:

File:OG Tuto CustomModel Image 3.png

2010-12-28T19:59:29Z

Narann:

File:OG Tuto CustomModel Image 2.png

2010-12-28T19:58:09Z

Narann:

File:OG Tuto CustomModel Image 1.png

2010-12-28T19:56:23Z

Narann:

Making New Models & Textures

2010-12-28T19:54:41Z

Narann: Put picture to 800px

'''This tutorial does not contain all the links and pictures it should yet.'''

This tutorial is based on jo-shadow's tutorial [http://forums.wolfire.com/viewtopic.php?f=13&t=4712 ''How to make your own models for OG''].

This tutorial will teach you everything you need to know to make your own objects and how to get them into the game.

Please keep in mind that this method is by no means the only way of making and adding Objects. It is merely one of very many ways, but doing it this way should be easy to learn and understand for anyone. Some experience with 3D programs would help, but even the most inexperienced beginner should be able to get results with this guide.

== What you will learn ==

This tutorial will cover how to do the following:

* Creating a 3D model.
* UV mapping the model.
* Generating a texture from the UV data.
* Editing the texture.
* Changing the reflectivity of the texture.
* Making a normal map for the texture.
* Setting up the folder.
* Making the XML file.
* Testing the object in the engine.

== What you will need ==

You will need the following for this tutorial:
* A 3D modeling program with simple UV mapping capabilities.
** This tutorial will use [http://en.wikipedia.org/wiki/Wings3d Wings3D], an open source, cross platform polygonal modeler. It is much simpler when it comes to features than [http://en.wikipedia.org/wiki/Blender_(software) Blender] or other major 3D packages, but it should be much easier to learn for beginners.
** If you prefer blender or another program the basic concepts are the same, but this tutorial only covers Wings3D.
* An image editor.
** This tutorial will use [http://en.wikipedia.org/wiki/Photoshop Photoshop], however any image editor will work just fine. As a free, cross-platform alternative I would suggest using [http://en.wikipedia.org/wiki/GIMP GIMP].
* A text editor.
** Any will do. Mac users can use [http://en.wikipedia.org/wiki/Textedit Textedit] and Windows users [http://en.wikipedia.org/wiki/Notepad_(Windows) Notepad].
* The latest [http://blog.wolfire.com/category/alpha/ Overgrowth alpha].
** This tutorial was originally written for and tested on [http://forums.wolfire.com/viewtopic.php?f=13&t=4701 alpha 16].

Please make sure that you have these necessary programs before you start.

== Getting started ==

It is advised, but not necessary, that you first take a look at the [http://internap.dl.sourceforge.net/sourceforge/wings/wings3d_manual1.6.1.pdf Wings3D manual] to help you become comfortable with its interface. It contains some very quick and easy tutorials that will teach you everything you need to know for this tutorial and then some.

Here are some quick Wings3D basics:
* Go into ''Edit -> Preferences''
** Check ''Force Axis-Aligned Ortho''. This will make editing along an axis easier.
** Single-button Mac users should in the ''Camera'' tab select the one button control mode.
* Change between ''Vertex'', ''Edge'', ''Face'' and ''Object'' mode by pressing the buttons on the top bar or the keystrokes: '''V''', '''E''', '''F''' and '''B''' respectively
* Select stuff by clicking on it.
* Deselect with space.
* Focus the view on what you have selected by pressing '''A'''.
* Reset the view with '''R'''.
* Right clicking (control + click will from now on by implied for Macs as right click) brings up a context-dependent drop-down menu. Its contents changes depending on what you have selected. This is where most of the features we will use are located.
* For most of the keyboard shortcuts look under ''Help -> Defined Hotkeys''.

So without further ado, let's begin.

== Creating a 3D model ==

Because it has been so widely requested in the [SPF], and for the sake of simplicity, in this tutorial we will make a simple textured 3D cylinder. However, taking it a step further to more advanced models should not be a problem.

# Open Wings 3D
# Right click anywhere and choose ''Cylinder'' from the drop-down menu. This will spawn a default 16-sided cylinder, to spawn a customized cylinder press the little box on the same line instead. We will now change the proportions of the cylinder to our liking.
[[Image:Model_1.png|800px]]
# Go into object mode ('''B''') and select the cylinder.
[[Image:Model_2.png|800px]]
# Right click anywhere to open the drop-down menu and select ''Scale -> Radial Y''.
[[Image:Model_3.png|800px]]
# Now drag the mouse side to side to change the width of the cylinder. Click once it is scaled to your liking to accept, or press tab to manually input a value.
[[Image:Model_4.png|800px]]
# For the purpose of this tutorial our cylinder model is now finished.

Now we need to generate a UV map for the object so we can texture it.

=== UV Mapping the model ===

When you want to apply a texture to a 3D model, you might run into some problems. The best way we know how to deal with textures is as a 2D image, but how do we take a 3D model, and make a 2D image out of it? Well let's imagine that we have an orange painted like a globe like this:

[[Image:Globe_1.png]]

And we want to make its surface flat kinda like this:

[[Image:Globe_2.png]]

The solution is we peel away the surface, cutting it in a certain way so that it lies flat:

[[Image:Globe_3.png]]

Please note that there are many ways of doing this, but some work better than others. For example one of the more accurate ways of doing this with the earth is what's known as ''Fuller's Projection'':

[[Image:Globe_4.png]]

([http://earthvoyage.googlepages.com/UNFOLD.MOV Click for animation])

This is what we have to do with our cylinder: We have to cut it up so that we can lay it flat on a 2D plane.

Each vertex of the model, which already has a 3D coordinate of (X,Y,Z) will now also have a 2D coordinate on this special plane, so that we know how to fit the texture onto our object. This 2D coordinate is defined as (U,V), which is why this is called [http://en.wikipedia.org/wiki/Uv_mapping UV mapping]. This is a simplified way of describing UV mapping, but for this tutorial it will do.

''Note: there are other methods for applying textures to models, but this guide only covers UV mapping.''

1. Select the entire object, and at the bottom of the drop-down menu choose ''UV Mapping -> Direct''. A new window with the object will pop up with a title of ''AutoUV Segmenting:'' and the name of your object:

[[Image:OG_Tuto_CustomModel_UV_1.png|800px]]

Now we have to Divide the object into different shapes so that it can unfold it properly, just like in the globe example.
This can be done Automatically or Manually. For the sake of practice let's do it by hand:
You can separate different pieces either by marking which edges to cut, by coloring the faces that should go together, or both.

2. In face mode (F) select the top Face and press 'i' (select similar) so both the top and bottom are selected.
Choose one of the nine colors Labeled AuvChart1-9 from the drop-down menu. Doing so will mark these faces as being separate from the rest of the model.

[[Image:OG_Tuto_CustomModel_UV_2.png|800px]]

3. Clear your selection with space, and select one of the vertical side pieces.
Select the rest by selecting similar (i), then mark these with a different color.

4. Because the cylindrical part of the model is still in a loop we need to mark a cut.
In Edge mode (E) select of the vertical edges and choose 'mark edges for cut' from the drop down menu.

[[Image:OG_Tuto_CustomModel_UV_3.png|800px]]

5. The marking of your model is now complete, and it is ready to be unfolded.
Choose Continue->Unfolding from the drop down menu

6. A window showing the unfolded model will open up. This is the UV map.
To show what part of the UV map belongs to what part of the model, there is a colorful grid and letter pattern that you can also see on your model. When you Select a face you see it on both the model and the UV map.

[[Image:OG_Tuto_CustomModel_UV_4.png|800px]]

You can also scale and move parts of the model around on the UV map, and the changes will be apparent on the model. Making a face take up more of the UV map will make give it a denser more detailed texture. This is often used to make important features of a model more detailed, like the hands and dace of a character.

If for whatever reason you don't like how the unfolding ended up you can select your object, and in the drop down menu Choose UV Mapping-> Force Segment (delete previous) to start from a clean slate.

It's important to note that there can be many different ways of cutting an object and the resulting UV maps can look very different.

There are two automated methods, Projection and Feature Detection:

[[Image:OG_Tuto_CustomModel_UV_5.png]]

Depending on your model one might be better than the other, sometimes they both suck and you have to do it manually, and sometimes if your model is simple like this one they will both give you the same result.

If you cut the object in weird ways it will end up unfolding weirdly, like this for example:

[[Image:OG_Tuto_CustomModel_UV_6.png|800px]]

Once again, the best way to understand how this works is to experiment and try out the various features.

Although there are many different ways of mapping any Model, as a rule you want its faces to use the UV space as efficiently as possible, because any texture that isn't under the mapped Faces will not be seen anywhere when the texture is applied.

There are entire programs devoted simply to finding the best way to generate the UV map for any given model, and the tools wings3D provides are much more basic. However they are sufficient for a simple object like this.
With practice you can even manage more complex ones.

Now that We've Finished UV mapping let's generate the texture for the model. Rest assured, the hardest part is done.

== Generating a texture from the UV Data ==

We have our lovely UV map, and now we need to generate a texture we can then edit.

1. With the UV map Window still open, choose 'Create Texture' from the drop-down menu. A small window will pop up:

[[Image:OG_Tuto_CustomModel_Texture_1.png|800px]]

Choose a size depending on how big the object will end up being, and how detailed you want it to be. The larger the image, the more detailed the texture will look on the model.
It wouldn't make sense to have a super-high detailed texture for a fork, and you wouldn't want a low quality texture for a skyscraper either. For this object 512x512 will work just fine.

2. Because we want to edit this texture manually later we need to know where on the texture the edges of the object are, so we know where on the object we are drawing.
Set the first as 'Background' and the second as 'Draw Edges' so the edges appear on the texture. Press OK.

3. It might seem like the UV map disappeared, but don't fear, the texture was created and is now applied to the object. You simply cannot see it well because it is white with black lines that are right under the wire-frame. You can tell when you zoom in really closely:

[[Image:OG_Tuto_CustomModel_Texture_2.png|800px]]

4. Export the model by going into File -> Export -> Wavefront (.obj)

[[Image:OG_Tuto_CustomModel_Texture_3.png|800px]]

Then make a new folder in a location of your choosing and save it as whatever title you like.
It will save a .obj and a .mtl file. Delete the .mtl file. It has to do with materials that we don't need.

5. Sometimes the texture is saved along with the object, but sometimes it isn't. If there is no texture file in the folder you exported to, go into Window->Outliner, and locate the texture:

[[Image:OG_Tuto_CustomModel_Texture_4.png|800px]]

Right click it, Choose export and save it in the same folder as the obj, name it whatever you want, preferably the name of your object plus _Color.
For example:

[[Image:OG_Tuto_CustomModel_Texture_5.png]]

You are now done with Wings3D!

== Editing the texture ==

Now it's time to get creative!

# Load the Texture file into whichever image editing program of your choice

# Create your actual texture now however you wish. It helps to keep your 'Template' in a separate layer than the texture you want to be on your object.

Here is one way of doing it in photoshop, that allows you to keep the Template's lines above your texture for reference:

* Double click the layer name and accept the pop up prompt to unlock it.
* Rename the layer "template".
* Create two layers bellow it, the lower one called background, the upper one called texture.
* Fill The background layer with white and lock it.
Image_2.png (19.76 KiB) Viewed 579 times

* Select the Template layer, which is above all the other layers, and set its layer mode to multiply.
Image_3.png (37.59 KiB) Viewed 580 times

This will make the white in it transparent, and the black remain as an overlay. you can use it as a guide. lock it as well.
* Draw in the texture layer to your heart's content.

I just used some stock photography I found online. The area with the red text is wasted space that could have been better managed when I made the UV map. It will not appear on the final Model, but will take up space in memory none-the-less.

Here is my finished texture:
Image_5.png (326.33 KiB) Viewed 578 times

Once done, make sure to save the image -without- the Template, unless you want it as part of the final Texture. Don't worry too much about what format you save it as. Thanks to the built in image converter almost any file type will work in the engine. I personally would advise you to use .tga or .png.

=== Changing the Reflectivity of the texture ===

If you were to use this texture as it is, the resulting object would look very shiny.
That is because Phoenix will set the reflectivity, or inherent 'shininess' of an object depending on the transparency, or alpha value of the texture.

If you want your object to look more matte you need to add transparency to your texture. There are several ways to do this:

The Simple way:
* This method will make the whole texture less shiny:
* Look in the Layer window and change the Opacity of the Layer that contains your texture.
Reflect_1.png (15.61 KiB) Viewed 576 times

* You're done. Save the texture, but make sure that the format you save it as supports Transparency. .tga and .png both do.

The Advanced way:
* This method will allow you to change the shininess of different parts of the texture.
* Find the Channel window. You should see 3 channels, Red, Green and Blue (RGB is simply the sum of all 3):
Reflect_2.png (15.26 KiB) Viewed 575 times

* Add a new Channel (the icon next to the trashcan) By default this is an Alpha Channel.
Reflect_3.png (15.46 KiB) Viewed 570 times

* Like all channels it is black and white. Black is Transparent, and will make the object matte, and White is Opaque, and will make the object reflective.
* If you show the rest of the channels while the alpha channel is visible the parts that are hidden will appear red by default:
* When Finished save the file, but make sure to save it as .tga The alpha layer will -not- be saved if you choose .png

=== Making a normal map for the texture ===

This tutorial does not yet include Instructions for making a normal map. Until someone writes it up, just use the following blank normal map:
blanknormal.png (5.36 KiB) Viewed 566 times

== Setting up the folders ==

Phoenix, Overgrowth's engine uses XML files to tell it where an object's files are located.
These XML files are by default located in Data/Objects. For example the Rock1a.xml file:

<pre>
<?xml version="1.0" ?>
<Object>
<Model>Data/Models/Environments/Rocks/Rock1a.obj</Model>
<ColorMap>Data/Textures/Environments/Rocks/Rock1_Color.tga</ColorMap>
<NormalMap>Data/Textures/Environments/Rocks/Rock1_NormalOS.tga</NormalMap>
<ShaderPath>Data/GLSL/cubemapobj</ShaderPath>
<ShaderName>normalmap</ShaderName>
</Object>
</pre>

The way the file works is self explanatory. The tags indicate what the provided file path points to. As you can see all the file paths have Data as their root. Because of this you'll want your files to be inside the Data folder.

For mac users right click the Alpha, click 'Show Package Contents', Contents->Data. For easy access then drag it into your Sidebar:
Folder_1.png (46.58 KiB) Viewed 563 times

Until the team implements a more elegant solution I suggest that in the Data folder you make a folder called Custom and keep all your files in there. I chose to imitate the file structure in Custom that the Data folder uses by default:
PICTURE

However you can save it any way you choose. If you want to share your Objects with others it is be best to keep all the files in one Folder inside Data/Custom. ultimately in the engine it doesn't make a difference, as long as the XML file is defined correctly

== Making the XML file ==

Now that everything is in the right place you can make the xml Object file.
# Copy any .xml file from the Objects Folder, paste it into your custom folder and rename it as whatever you want. make sure to keep the extension ".xml"
# Open the XML file with a text editor and change the paths to match that of your file.
Here's mine:

<pre>
<?xml version="1.0" ?>
<Object>
<Model>Data/Custom/Models/Demo/Cylinder.obj</Model>
<ColorMap>Data/Custom/Textures/Demo/Cylinder_Color.png</ColorMap>
<NormalMap>Data/Custom/Textures/Demo/Blank_Normal.png</NormalMap>
<ShaderPath>Data/GLSL/cubemap</ShaderPath>
<ShaderName>cubemap</ShaderName>
</Object>
</code>
</pre>

I don't quite know how the shaders work, but I tested each out and listed them here.
Cubemap will work best for most objects.

== Testing the object in the engine ==

Now the moment you've been waiting for:

# Start up the Latest Alpha
# Click the first Button in the toolbar
# Find your .xml object file and click Open
# Pray that you've done everything right and click on the terrain
# Breathe a sigh of relief as your object appears:

The above Object uses a texture without transparency and so looks shiny.

This Object uses a texture with transparency and so has matte areas:

If you get an error message saying that a file cannot be found make sure that the file-paths in the XML Object file are correct.

Here is the final Custom Folder which I made for this tutorial. It contains two objects: one with changed reflectivity, and one without.

FILE

unzip it, make sure the resulting folder is called 'Custom" (otherwise the xml file paths would be incorrect) and place it in the Data folder.

(Notice that I actually did a bad job with the UV mapping, because I chose to automate it and not do it manually, and the texture is not a continuous band, but broken up into 4 parts.)

== Conclusion ==

I really hope that this Guide will be helpful to you.
A-lot of thought and effort went into it, plus at least a good 5+ hours of work

One thing I cannot stress enough is that this guide is by no means perfect, and there are likely better ways of doing this.

My challenge to you is to not just use this guide, but expand on it: Try texturing a sphere, a rock, a Tree, never stop experimenting. Apply what you've learned here and use it to help you make some great content for this game.

If you have ''any'' questions or problems when trying to recreate what is illustrated here, please feel free to ask the friendly people in our [http://www.wolfire.com/irc IRC channel].

== Other Resources ==

LINKS

[[Category:Overgrowth]]

Making New Models & Textures

2010-12-28T19:53:29Z

Narann: Put picture to 800px

'''This tutorial does not contain all the links and pictures it should yet.'''

This tutorial is based on jo-shadow's tutorial [http://forums.wolfire.com/viewtopic.php?f=13&t=4712 ''How to make your own models for OG''].

This tutorial will teach you everything you need to know to make your own objects and how to get them into the game.

Please keep in mind that this method is by no means the only way of making and adding Objects. It is merely one of very many ways, but doing it this way should be easy to learn and understand for anyone. Some experience with 3D programs would help, but even the most inexperienced beginner should be able to get results with this guide.

== What you will learn ==

This tutorial will cover how to do the following:

* Creating a 3D model.
* UV mapping the model.
* Generating a texture from the UV data.
* Editing the texture.
* Changing the reflectivity of the texture.
* Making a normal map for the texture.
* Setting up the folder.
* Making the XML file.
* Testing the object in the engine.

== What you will need ==

You will need the following for this tutorial:
* A 3D modeling program with simple UV mapping capabilities.
** This tutorial will use [http://en.wikipedia.org/wiki/Wings3d Wings3D], an open source, cross platform polygonal modeler. It is much simpler when it comes to features than [http://en.wikipedia.org/wiki/Blender_(software) Blender] or other major 3D packages, but it should be much easier to learn for beginners.
** If you prefer blender or another program the basic concepts are the same, but this tutorial only covers Wings3D.
* An image editor.
** This tutorial will use [http://en.wikipedia.org/wiki/Photoshop Photoshop], however any image editor will work just fine. As a free, cross-platform alternative I would suggest using [http://en.wikipedia.org/wiki/GIMP GIMP].
* A text editor.
** Any will do. Mac users can use [http://en.wikipedia.org/wiki/Textedit Textedit] and Windows users [http://en.wikipedia.org/wiki/Notepad_(Windows) Notepad].
* The latest [http://blog.wolfire.com/category/alpha/ Overgrowth alpha].
** This tutorial was originally written for and tested on [http://forums.wolfire.com/viewtopic.php?f=13&t=4701 alpha 16].

Please make sure that you have these necessary programs before you start.

== Getting started ==

It is advised, but not necessary, that you first take a look at the [http://internap.dl.sourceforge.net/sourceforge/wings/wings3d_manual1.6.1.pdf Wings3D manual] to help you become comfortable with its interface. It contains some very quick and easy tutorials that will teach you everything you need to know for this tutorial and then some.

Here are some quick Wings3D basics:
* Go into ''Edit -> Preferences''
** Check ''Force Axis-Aligned Ortho''. This will make editing along an axis easier.
** Single-button Mac users should in the ''Camera'' tab select the one button control mode.
* Change between ''Vertex'', ''Edge'', ''Face'' and ''Object'' mode by pressing the buttons on the top bar or the keystrokes: '''V''', '''E''', '''F''' and '''B''' respectively
* Select stuff by clicking on it.
* Deselect with space.
* Focus the view on what you have selected by pressing '''A'''.
* Reset the view with '''R'''.
* Right clicking (control + click will from now on by implied for Macs as right click) brings up a context-dependent drop-down menu. Its contents changes depending on what you have selected. This is where most of the features we will use are located.
* For most of the keyboard shortcuts look under ''Help -> Defined Hotkeys''.

So without further ado, let's begin.

== Creating a 3D model ==

Because it has been so widely requested in the [SPF], and for the sake of simplicity, in this tutorial we will make a simple textured 3D cylinder. However, taking it a step further to more advanced models should not be a problem.

# Open Wings 3D
# Right click anywhere and choose ''Cylinder'' from the drop-down menu. This will spawn a default 16-sided cylinder, to spawn a customized cylinder press the little box on the same line instead. We will now change the proportions of the cylinder to our liking.
[[Image:Model_1.png|800px]]
# Go into object mode ('''B''') and select the cylinder.
[[Image:Model_2.png|800px]]
# Right click anywhere to open the drop-down menu and select ''Scale -> Radial Y''.
[[Image:Model_3.png|800px]]
# Now drag the mouse side to side to change the width of the cylinder. Click once it is scaled to your liking to accept, or press tab to manually input a value.
[[Image:Model_4.png|800px]]
# For the purpose of this tutorial our cylinder model is now finished.

Now we need to generate a UV map for the object so we can texture it.

=== UV Mapping the model ===

When you want to apply a texture to a 3D model, you might run into some problems. The best way we know how to deal with textures is as a 2D image, but how do we take a 3D model, and make a 2D image out of it? Well let's imagine that we have an orange painted like a globe like this:

[[Image:Globe_1.png]]

And we want to make its surface flat kinda like this:

[[Image:Globe_2.png]]

The solution is we peel away the surface, cutting it in a certain way so that it lies flat:

[[Image:Globe_3.png]]

Please note that there are many ways of doing this, but some work better than others. For example one of the more accurate ways of doing this with the earth is what's known as ''Fuller's Projection'':

[[Image:Globe_4.png]]

([http://earthvoyage.googlepages.com/UNFOLD.MOV Click for animation])

This is what we have to do with our cylinder: We have to cut it up so that we can lay it flat on a 2D plane.

Each vertex of the model, which already has a 3D coordinate of (X,Y,Z) will now also have a 2D coordinate on this special plane, so that we know how to fit the texture onto our object. This 2D coordinate is defined as (U,V), which is why this is called [http://en.wikipedia.org/wiki/Uv_mapping UV mapping]. This is a simplified way of describing UV mapping, but for this tutorial it will do.

''Note: there are other methods for applying textures to models, but this guide only covers UV mapping.''

1. Select the entire object, and at the bottom of the drop-down menu choose ''UV Mapping -> Direct''. A new window with the object will pop up with a title of ''AutoUV Segmenting:'' and the name of your object:

[[Image:OG_Tuto_CustomModel_UV_1.png|800px]]

Now we have to Divide the object into different shapes so that it can unfold it properly, just like in the globe example.
This can be done Automatically or Manually. For the sake of practice let's do it by hand:
You can separate different pieces either by marking which edges to cut, by coloring the faces that should go together, or both.

2. In face mode (F) select the top Face and press 'i' (select similar) so both the top and bottom are selected.
Choose one of the nine colors Labeled AuvChart1-9 from the drop-down menu. Doing so will mark these faces as being separate from the rest of the model.

[[Image:OG_Tuto_CustomModel_UV_2.png|800px]]

3. Clear your selection with space, and select one of the vertical side pieces.
Select the rest by selecting similar (i), then mark these with a different color.

4. Because the cylindrical part of the model is still in a loop we need to mark a cut.
In Edge mode (E) select of the vertical edges and choose 'mark edges for cut' from the drop down menu.

[[Image:OG_Tuto_CustomModel_UV_3.png|800px]]

5. The marking of your model is now complete, and it is ready to be unfolded.
Choose Continue->Unfolding from the drop down menu

6. A window showing the unfolded model will open up. This is the UV map.
To show what part of the UV map belongs to what part of the model, there is a colorful grid and letter pattern that you can also see on your model. When you Select a face you see it on both the model and the UV map.

[[Image:OG_Tuto_CustomModel_UV_4.png|800px]]

You can also scale and move parts of the model around on the UV map, and the changes will be apparent on the model. Making a face take up more of the UV map will make give it a denser more detailed texture. This is often used to make important features of a model more detailed, like the hands and dace of a character.

If for whatever reason you don't like how the unfolding ended up you can select your object, and in the drop down menu Choose UV Mapping-> Force Segment (delete previous) to start from a clean slate.

It's important to note that there can be many different ways of cutting an object and the resulting UV maps can look very different.

There are two automated methods, Projection and Feature Detection:

[[Image:OG_Tuto_CustomModel_UV_5.png]]

Depending on your model one might be better than the other, sometimes they both suck and you have to do it manually, and sometimes if your model is simple like this one they will both give you the same result.

If you cut the object in weird ways it will end up unfolding weirdly, like this for example:

[[Image:OG_Tuto_CustomModel_UV_6.png|800px]]

Once again, the best way to understand how this works is to experiment and try out the various features.

Although there are many different ways of mapping any Model, as a rule you want its faces to use the UV space as efficiently as possible, because any texture that isn't under the mapped Faces will not be seen anywhere when the texture is applied.

There are entire programs devoted simply to finding the best way to generate the UV map for any given model, and the tools wings3D provides are much more basic. However they are sufficient for a simple object like this.
With practice you can even manage more complex ones.

Now that We've Finished UV mapping let's generate the texture for the model. Rest assured, the hardest part is done.

== Generating a texture from the UV Data ==

We have our lovely UV map, and now we need to generate a texture we can then edit.

1. With the UV map Window still open, choose 'Create Texture' from the drop-down menu. A small window will pop up:

[[Image:OG_Tuto_CustomModel_Texture_1.png]]

Choose a size depending on how big the object will end up being, and how detailed you want it to be. The larger the image, the more detailed the texture will look on the model.
It wouldn't make sense to have a super-high detailed texture for a fork, and you wouldn't want a low quality texture for a skyscraper either. For this object 512x512 will work just fine.

2. Because we want to edit this texture manually later we need to know where on the texture the edges of the object are, so we know where on the object we are drawing.
Set the first as 'Background' and the second as 'Draw Edges' so the edges appear on the texture. Press OK.

3. It might seem like the UV map disappeared, but don't fear, the texture was created and is now applied to the object. You simply cannot see it well because it is white with black lines that are right under the wire-frame. You can tell when you zoom in really closely:

[[Image:OG_Tuto_CustomModel_Texture_2.png]]

4. Export the model by going into File -> Export -> Wavefront (.obj)

[[Image:OG_Tuto_CustomModel_Texture_3.png]]

Then make a new folder in a location of your choosing and save it as whatever title you like.
It will save a .obj and a .mtl file. Delete the .mtl file. It has to do with materials that we don't need.

5. Sometimes the texture is saved along with the object, but sometimes it isn't. If there is no texture file in the folder you exported to, go into Window->Outliner, and locate the texture:

[[Image:OG_Tuto_CustomModel_Texture_4.png]]

Right click it, Choose export and save it in the same folder as the obj, name it whatever you want, preferably the name of your object plus _Color.
For example:

[[Image:OG_Tuto_CustomModel_Texture_5.png]]

You are now done with Wings3D!

== Editing the texture ==

Now it's time to get creative!

# Load the Texture file into whichever image editing program of your choice

# Create your actual texture now however you wish. It helps to keep your 'Template' in a separate layer than the texture you want to be on your object.

Here is one way of doing it in photoshop, that allows you to keep the Template's lines above your texture for reference:

* Double click the layer name and accept the pop up prompt to unlock it.
* Rename the layer "template".
* Create two layers bellow it, the lower one called background, the upper one called texture.
* Fill The background layer with white and lock it.
Image_2.png (19.76 KiB) Viewed 579 times

* Select the Template layer, which is above all the other layers, and set its layer mode to multiply.
Image_3.png (37.59 KiB) Viewed 580 times

This will make the white in it transparent, and the black remain as an overlay. you can use it as a guide. lock it as well.
* Draw in the texture layer to your heart's content.

I just used some stock photography I found online. The area with the red text is wasted space that could have been better managed when I made the UV map. It will not appear on the final Model, but will take up space in memory none-the-less.

Here is my finished texture:
Image_5.png (326.33 KiB) Viewed 578 times

Once done, make sure to save the image -without- the Template, unless you want it as part of the final Texture. Don't worry too much about what format you save it as. Thanks to the built in image converter almost any file type will work in the engine. I personally would advise you to use .tga or .png.

=== Changing the Reflectivity of the texture ===

If you were to use this texture as it is, the resulting object would look very shiny.
That is because Phoenix will set the reflectivity, or inherent 'shininess' of an object depending on the transparency, or alpha value of the texture.

If you want your object to look more matte you need to add transparency to your texture. There are several ways to do this:

The Simple way:
* This method will make the whole texture less shiny:
* Look in the Layer window and change the Opacity of the Layer that contains your texture.
Reflect_1.png (15.61 KiB) Viewed 576 times

* You're done. Save the texture, but make sure that the format you save it as supports Transparency. .tga and .png both do.

The Advanced way:
* This method will allow you to change the shininess of different parts of the texture.
* Find the Channel window. You should see 3 channels, Red, Green and Blue (RGB is simply the sum of all 3):
Reflect_2.png (15.26 KiB) Viewed 575 times

* Add a new Channel (the icon next to the trashcan) By default this is an Alpha Channel.
Reflect_3.png (15.46 KiB) Viewed 570 times

* Like all channels it is black and white. Black is Transparent, and will make the object matte, and White is Opaque, and will make the object reflective.
* If you show the rest of the channels while the alpha channel is visible the parts that are hidden will appear red by default:
* When Finished save the file, but make sure to save it as .tga The alpha layer will -not- be saved if you choose .png

=== Making a normal map for the texture ===

This tutorial does not yet include Instructions for making a normal map. Until someone writes it up, just use the following blank normal map:
blanknormal.png (5.36 KiB) Viewed 566 times

== Setting up the folders ==

Phoenix, Overgrowth's engine uses XML files to tell it where an object's files are located.
These XML files are by default located in Data/Objects. For example the Rock1a.xml file:

<pre>
<?xml version="1.0" ?>
<Object>
<Model>Data/Models/Environments/Rocks/Rock1a.obj</Model>
<ColorMap>Data/Textures/Environments/Rocks/Rock1_Color.tga</ColorMap>
<NormalMap>Data/Textures/Environments/Rocks/Rock1_NormalOS.tga</NormalMap>
<ShaderPath>Data/GLSL/cubemapobj</ShaderPath>
<ShaderName>normalmap</ShaderName>
</Object>
</pre>

The way the file works is self explanatory. The tags indicate what the provided file path points to. As you can see all the file paths have Data as their root. Because of this you'll want your files to be inside the Data folder.

For mac users right click the Alpha, click 'Show Package Contents', Contents->Data. For easy access then drag it into your Sidebar:
Folder_1.png (46.58 KiB) Viewed 563 times

Until the team implements a more elegant solution I suggest that in the Data folder you make a folder called Custom and keep all your files in there. I chose to imitate the file structure in Custom that the Data folder uses by default:
PICTURE

However you can save it any way you choose. If you want to share your Objects with others it is be best to keep all the files in one Folder inside Data/Custom. ultimately in the engine it doesn't make a difference, as long as the XML file is defined correctly

== Making the XML file ==

Now that everything is in the right place you can make the xml Object file.
# Copy any .xml file from the Objects Folder, paste it into your custom folder and rename it as whatever you want. make sure to keep the extension ".xml"
# Open the XML file with a text editor and change the paths to match that of your file.
Here's mine:

<pre>
<?xml version="1.0" ?>
<Object>
<Model>Data/Custom/Models/Demo/Cylinder.obj</Model>
<ColorMap>Data/Custom/Textures/Demo/Cylinder_Color.png</ColorMap>
<NormalMap>Data/Custom/Textures/Demo/Blank_Normal.png</NormalMap>
<ShaderPath>Data/GLSL/cubemap</ShaderPath>
<ShaderName>cubemap</ShaderName>
</Object>
</code>
</pre>

I don't quite know how the shaders work, but I tested each out and listed them here.
Cubemap will work best for most objects.

== Testing the object in the engine ==

Now the moment you've been waiting for:

# Start up the Latest Alpha
# Click the first Button in the toolbar
# Find your .xml object file and click Open
# Pray that you've done everything right and click on the terrain
# Breathe a sigh of relief as your object appears:

The above Object uses a texture without transparency and so looks shiny.

This Object uses a texture with transparency and so has matte areas:

If you get an error message saying that a file cannot be found make sure that the file-paths in the XML Object file are correct.

Here is the final Custom Folder which I made for this tutorial. It contains two objects: one with changed reflectivity, and one without.

FILE

unzip it, make sure the resulting folder is called 'Custom" (otherwise the xml file paths would be incorrect) and place it in the Data folder.

(Notice that I actually did a bad job with the UV mapping, because I chose to automate it and not do it manually, and the texture is not a continuous band, but broken up into 4 parts.)

== Conclusion ==

I really hope that this Guide will be helpful to you.
A-lot of thought and effort went into it, plus at least a good 5+ hours of work

One thing I cannot stress enough is that this guide is by no means perfect, and there are likely better ways of doing this.

My challenge to you is to not just use this guide, but expand on it: Try texturing a sphere, a rock, a Tree, never stop experimenting. Apply what you've learned here and use it to help you make some great content for this game.

If you have ''any'' questions or problems when trying to recreate what is illustrated here, please feel free to ask the friendly people in our [http://www.wolfire.com/irc IRC channel].

== Other Resources ==

LINKS

[[Category:Overgrowth]]

Making New Models & Textures

2010-12-28T19:49:49Z

Narann: /* UV Mapping the model */

'''This tutorial does not contain all the links and pictures it should yet.'''

This tutorial is based on jo-shadow's tutorial [http://forums.wolfire.com/viewtopic.php?f=13&t=4712 ''How to make your own models for OG''].

This tutorial will teach you everything you need to know to make your own objects and how to get them into the game.

Please keep in mind that this method is by no means the only way of making and adding Objects. It is merely one of very many ways, but doing it this way should be easy to learn and understand for anyone. Some experience with 3D programs would help, but even the most inexperienced beginner should be able to get results with this guide.

== What you will learn ==

This tutorial will cover how to do the following:

* Creating a 3D model.
* UV mapping the model.
* Generating a texture from the UV data.
* Editing the texture.
* Changing the reflectivity of the texture.
* Making a normal map for the texture.
* Setting up the folder.
* Making the XML file.
* Testing the object in the engine.

== What you will need ==

You will need the following for this tutorial:
* A 3D modeling program with simple UV mapping capabilities.
** This tutorial will use [http://en.wikipedia.org/wiki/Wings3d Wings3D], an open source, cross platform polygonal modeler. It is much simpler when it comes to features than [http://en.wikipedia.org/wiki/Blender_(software) Blender] or other major 3D packages, but it should be much easier to learn for beginners.
** If you prefer blender or another program the basic concepts are the same, but this tutorial only covers Wings3D.
* An image editor.
** This tutorial will use [http://en.wikipedia.org/wiki/Photoshop Photoshop], however any image editor will work just fine. As a free, cross-platform alternative I would suggest using [http://en.wikipedia.org/wiki/GIMP GIMP].
* A text editor.
** Any will do. Mac users can use [http://en.wikipedia.org/wiki/Textedit Textedit] and Windows users [http://en.wikipedia.org/wiki/Notepad_(Windows) Notepad].
* The latest [http://blog.wolfire.com/category/alpha/ Overgrowth alpha].
** This tutorial was originally written for and tested on [http://forums.wolfire.com/viewtopic.php?f=13&t=4701 alpha 16].

Please make sure that you have these necessary programs before you start.

== Getting started ==

It is advised, but not necessary, that you first take a look at the [http://internap.dl.sourceforge.net/sourceforge/wings/wings3d_manual1.6.1.pdf Wings3D manual] to help you become comfortable with its interface. It contains some very quick and easy tutorials that will teach you everything you need to know for this tutorial and then some.

Here are some quick Wings3D basics:
* Go into ''Edit -> Preferences''
** Check ''Force Axis-Aligned Ortho''. This will make editing along an axis easier.
** Single-button Mac users should in the ''Camera'' tab select the one button control mode.
* Change between ''Vertex'', ''Edge'', ''Face'' and ''Object'' mode by pressing the buttons on the top bar or the keystrokes: '''V''', '''E''', '''F''' and '''B''' respectively
* Select stuff by clicking on it.
* Deselect with space.
* Focus the view on what you have selected by pressing '''A'''.
* Reset the view with '''R'''.
* Right clicking (control + click will from now on by implied for Macs as right click) brings up a context-dependent drop-down menu. Its contents changes depending on what you have selected. This is where most of the features we will use are located.
* For most of the keyboard shortcuts look under ''Help -> Defined Hotkeys''.

So without further ado, let's begin.

== Creating a 3D model ==

Because it has been so widely requested in the [SPF], and for the sake of simplicity, in this tutorial we will make a simple textured 3D cylinder. However, taking it a step further to more advanced models should not be a problem.

[[Image:Model_4.png|200px|thumb|right|Our finished cylinder.]]
# Open Wings 3D
# Right click anywhere and choose ''Cylinder'' from the drop-down menu. This will spawn a default 16-sided cylinder, to spawn a customized cylinder press the little box on the same line instead. We will now change the proportions of the cylinder to our liking.
[[Image:Model_1.png]]
# Go into object mode ('''B''') and select the cylinder.
[[Image:Model_2.png]]
# Right click anywhere to open the drop-down menu and select ''Scale -> Radial Y''.
[[Image:Model_3.png]]
# Now drag the mouse side to side to change the width of the cylinder. Click once it is scaled to your liking to accept, or press tab to manually input a value.
# For the purpose of this tutorial our cylinder model is now finished.

Now we need to generate a UV map for the object so we can texture it.

=== UV Mapping the model ===

When you want to apply a texture to a 3D model, you might run into some problems. The best way we know how to deal with textures is as a 2D image, but how do we take a 3D model, and make a 2D image out of it? Well let's imagine that we have an orange painted like a globe like this:

[[Image:Globe_1.png]]

And we want to make its surface flat kinda like this:

[[Image:Globe_2.png]]

The solution is we peel away the surface, cutting it in a certain way so that it lies flat:

[[Image:Globe_3.png]]

Please note that there are many ways of doing this, but some work better than others. For example one of the more accurate ways of doing this with the earth is what's known as ''Fuller's Projection'':

[[Image:Globe_4.png]]

([http://earthvoyage.googlepages.com/UNFOLD.MOV Click for animation])

This is what we have to do with our cylinder: We have to cut it up so that we can lay it flat on a 2D plane.

Each vertex of the model, which already has a 3D coordinate of (X,Y,Z) will now also have a 2D coordinate on this special plane, so that we know how to fit the texture onto our object. This 2D coordinate is defined as (U,V), which is why this is called [http://en.wikipedia.org/wiki/Uv_mapping UV mapping]. This is a simplified way of describing UV mapping, but for this tutorial it will do.

''Note: there are other methods for applying textures to models, but this guide only covers UV mapping.''

1. Select the entire object, and at the bottom of the drop-down menu choose ''UV Mapping -> Direct''. A new window with the object will pop up with a title of ''AutoUV Segmenting:'' and the name of your object:

[[Image:OG_Tuto_CustomModel_UV_1.png]]

Now we have to Divide the object into different shapes so that it can unfold it properly, just like in the globe example.
This can be done Automatically or Manually. For the sake of practice let's do it by hand:
You can separate different pieces either by marking which edges to cut, by coloring the faces that should go together, or both.

2. In face mode (F) select the top Face and press 'i' (select similar) so both the top and bottom are selected.
Choose one of the nine colors Labeled AuvChart1-9 from the drop-down menu. Doing so will mark these faces as being separate from the rest of the model.

[[Image:OG_Tuto_CustomModel_UV_2.png]]

3. Clear your selection with space, and select one of the vertical side pieces.
Select the rest by selecting similar (i), then mark these with a different color.

4. Because the cylindrical part of the model is still in a loop we need to mark a cut.
In Edge mode (E) select of the vertical edges and choose 'mark edges for cut' from the drop down menu.

[[Image:OG_Tuto_CustomModel_UV_3.png]]

5. The marking of your model is now complete, and it is ready to be unfolded.
Choose Continue->Unfolding from the drop down menu

6. A window showing the unfolded model will open up. This is the UV map.
To show what part of the UV map belongs to what part of the model, there is a colorful grid and letter pattern that you can also see on your model. When you Select a face you see it on both the model and the UV map.

[[Image:OG_Tuto_CustomModel_UV_4.png]]

You can also scale and move parts of the model around on the UV map, and the changes will be apparent on the model. Making a face take up more of the UV map will make give it a denser more detailed texture. This is often used to make important features of a model more detailed, like the hands and dace of a character.

If for whatever reason you don't like how the unfolding ended up you can select your object, and in the drop down menu Choose UV Mapping-> Force Segment (delete previous) to start from a clean slate.

It's important to note that there can be many different ways of cutting an object and the resulting UV maps can look very different.

There are two automated methods, Projection and Feature Detection:

[[Image:OG_Tuto_CustomModel_UV_5.png]]

Depending on your model one might be better than the other, sometimes they both suck and you have to do it manually, and sometimes if your model is simple like this one they will both give you the same result.

If you cut the object in weird ways it will end up unfolding weirdly, like this for example:

[[Image:OG_Tuto_CustomModel_UV_6.png]]

Once again, the best way to understand how this works is to experiment and try out the various features.

Although there are many different ways of mapping any Model, as a rule you want its faces to use the UV space as efficiently as possible, because any texture that isn't under the mapped Faces will not be seen anywhere when the texture is applied.

There are entire programs devoted simply to finding the best way to generate the UV map for any given model, and the tools wings3D provides are much more basic. However they are sufficient for a simple object like this.
With practice you can even manage more complex ones.

Now that We've Finished UV mapping let's generate the texture for the model. Rest assured, the hardest part is done.

== Generating a texture from the UV Data ==

We have our lovely UV map, and now we need to generate a texture we can then edit.

1. With the UV map Window still open, choose 'Create Texture' from the drop-down menu. A small window will pop up:

[[Image:OG_Tuto_CustomModel_Texture_1.png]]

Choose a size depending on how big the object will end up being, and how detailed you want it to be. The larger the image, the more detailed the texture will look on the model.
It wouldn't make sense to have a super-high detailed texture for a fork, and you wouldn't want a low quality texture for a skyscraper either. For this object 512x512 will work just fine.

2. Because we want to edit this texture manually later we need to know where on the texture the edges of the object are, so we know where on the object we are drawing.
Set the first as 'Background' and the second as 'Draw Edges' so the edges appear on the texture. Press OK.

3. It might seem like the UV map disappeared, but don't fear, the texture was created and is now applied to the object. You simply cannot see it well because it is white with black lines that are right under the wire-frame. You can tell when you zoom in really closely:

[[Image:OG_Tuto_CustomModel_Texture_2.png]]

4. Export the model by going into File -> Export -> Wavefront (.obj)

[[Image:OG_Tuto_CustomModel_Texture_3.png]]

Then make a new folder in a location of your choosing and save it as whatever title you like.
It will save a .obj and a .mtl file. Delete the .mtl file. It has to do with materials that we don't need.

5. Sometimes the texture is saved along with the object, but sometimes it isn't. If there is no texture file in the folder you exported to, go into Window->Outliner, and locate the texture:

[[Image:OG_Tuto_CustomModel_Texture_4.png]]

Right click it, Choose export and save it in the same folder as the obj, name it whatever you want, preferably the name of your object plus _Color.
For example:

[[Image:OG_Tuto_CustomModel_Texture_5.png]]

You are now done with Wings3D!

== Editing the texture ==

Now it's time to get creative!

# Load the Texture file into whichever image editing program of your choice

# Create your actual texture now however you wish. It helps to keep your 'Template' in a separate layer than the texture you want to be on your object.

Here is one way of doing it in photoshop, that allows you to keep the Template's lines above your texture for reference:

* Double click the layer name and accept the pop up prompt to unlock it.
* Rename the layer "template".
* Create two layers bellow it, the lower one called background, the upper one called texture.
* Fill The background layer with white and lock it.
Image_2.png (19.76 KiB) Viewed 579 times

* Select the Template layer, which is above all the other layers, and set its layer mode to multiply.
Image_3.png (37.59 KiB) Viewed 580 times

This will make the white in it transparent, and the black remain as an overlay. you can use it as a guide. lock it as well.
* Draw in the texture layer to your heart's content.

I just used some stock photography I found online. The area with the red text is wasted space that could have been better managed when I made the UV map. It will not appear on the final Model, but will take up space in memory none-the-less.

Here is my finished texture:
Image_5.png (326.33 KiB) Viewed 578 times

Once done, make sure to save the image -without- the Template, unless you want it as part of the final Texture. Don't worry too much about what format you save it as. Thanks to the built in image converter almost any file type will work in the engine. I personally would advise you to use .tga or .png.

=== Changing the Reflectivity of the texture ===

If you were to use this texture as it is, the resulting object would look very shiny.
That is because Phoenix will set the reflectivity, or inherent 'shininess' of an object depending on the transparency, or alpha value of the texture.

If you want your object to look more matte you need to add transparency to your texture. There are several ways to do this:

The Simple way:
* This method will make the whole texture less shiny:
* Look in the Layer window and change the Opacity of the Layer that contains your texture.
Reflect_1.png (15.61 KiB) Viewed 576 times

* You're done. Save the texture, but make sure that the format you save it as supports Transparency. .tga and .png both do.

The Advanced way:
* This method will allow you to change the shininess of different parts of the texture.
* Find the Channel window. You should see 3 channels, Red, Green and Blue (RGB is simply the sum of all 3):
Reflect_2.png (15.26 KiB) Viewed 575 times

* Add a new Channel (the icon next to the trashcan) By default this is an Alpha Channel.
Reflect_3.png (15.46 KiB) Viewed 570 times

* Like all channels it is black and white. Black is Transparent, and will make the object matte, and White is Opaque, and will make the object reflective.
* If you show the rest of the channels while the alpha channel is visible the parts that are hidden will appear red by default:
* When Finished save the file, but make sure to save it as .tga The alpha layer will -not- be saved if you choose .png

=== Making a normal map for the texture ===

This tutorial does not yet include Instructions for making a normal map. Until someone writes it up, just use the following blank normal map:
blanknormal.png (5.36 KiB) Viewed 566 times

== Setting up the folders ==

Phoenix, Overgrowth's engine uses XML files to tell it where an object's files are located.
These XML files are by default located in Data/Objects. For example the Rock1a.xml file:

<pre>
<?xml version="1.0" ?>
<Object>
<Model>Data/Models/Environments/Rocks/Rock1a.obj</Model>
<ColorMap>Data/Textures/Environments/Rocks/Rock1_Color.tga</ColorMap>
<NormalMap>Data/Textures/Environments/Rocks/Rock1_NormalOS.tga</NormalMap>
<ShaderPath>Data/GLSL/cubemapobj</ShaderPath>
<ShaderName>normalmap</ShaderName>
</Object>
</pre>

The way the file works is self explanatory. The tags indicate what the provided file path points to. As you can see all the file paths have Data as their root. Because of this you'll want your files to be inside the Data folder.

For mac users right click the Alpha, click 'Show Package Contents', Contents->Data. For easy access then drag it into your Sidebar:
Folder_1.png (46.58 KiB) Viewed 563 times

Until the team implements a more elegant solution I suggest that in the Data folder you make a folder called Custom and keep all your files in there. I chose to imitate the file structure in Custom that the Data folder uses by default:
PICTURE

However you can save it any way you choose. If you want to share your Objects with others it is be best to keep all the files in one Folder inside Data/Custom. ultimately in the engine it doesn't make a difference, as long as the XML file is defined correctly

== Making the XML file ==

Now that everything is in the right place you can make the xml Object file.
# Copy any .xml file from the Objects Folder, paste it into your custom folder and rename it as whatever you want. make sure to keep the extension ".xml"
# Open the XML file with a text editor and change the paths to match that of your file.
Here's mine:

<pre>
<?xml version="1.0" ?>
<Object>
<Model>Data/Custom/Models/Demo/Cylinder.obj</Model>
<ColorMap>Data/Custom/Textures/Demo/Cylinder_Color.png</ColorMap>
<NormalMap>Data/Custom/Textures/Demo/Blank_Normal.png</NormalMap>
<ShaderPath>Data/GLSL/cubemap</ShaderPath>
<ShaderName>cubemap</ShaderName>
</Object>
</code>
</pre>

I don't quite know how the shaders work, but I tested each out and listed them here.
Cubemap will work best for most objects.

== Testing the object in the engine ==

Now the moment you've been waiting for:

# Start up the Latest Alpha
# Click the first Button in the toolbar
# Find your .xml object file and click Open
# Pray that you've done everything right and click on the terrain
# Breathe a sigh of relief as your object appears:

The above Object uses a texture without transparency and so looks shiny.

This Object uses a texture with transparency and so has matte areas:

If you get an error message saying that a file cannot be found make sure that the file-paths in the XML Object file are correct.

Here is the final Custom Folder which I made for this tutorial. It contains two objects: one with changed reflectivity, and one without.

FILE

unzip it, make sure the resulting folder is called 'Custom" (otherwise the xml file paths would be incorrect) and place it in the Data folder.

(Notice that I actually did a bad job with the UV mapping, because I chose to automate it and not do it manually, and the texture is not a continuous band, but broken up into 4 parts.)

== Conclusion ==

I really hope that this Guide will be helpful to you.
A-lot of thought and effort went into it, plus at least a good 5+ hours of work

One thing I cannot stress enough is that this guide is by no means perfect, and there are likely better ways of doing this.

My challenge to you is to not just use this guide, but expand on it: Try texturing a sphere, a rock, a Tree, never stop experimenting. Apply what you've learned here and use it to help you make some great content for this game.

If you have ''any'' questions or problems when trying to recreate what is illustrated here, please feel free to ask the friendly people in our [http://www.wolfire.com/irc IRC channel].

== Other Resources ==

LINKS

[[Category:Overgrowth]]

File:OG Tuto CustomModel Texture 5.png

2010-12-28T19:49:28Z

Narann:

File:OG Tuto CustomModel Texture 4.png

2010-12-28T19:49:03Z

Narann:

File:OG Tuto CustomModel Texture 3.png

2010-12-28T19:47:33Z

Narann:

File:OG Tuto CustomModel Texture 2.png

2010-12-28T19:47:18Z

Narann:

File:OG Tuto CustomModel Texture 1.png

2010-12-28T19:46:26Z

Narann:

File:OG Tuto CustomModel UV 6.png

2010-12-28T19:43:52Z

Narann:

File:OG Tuto CustomModel UV 5.png

2010-12-28T19:43:26Z

Narann:

File:OG Tuto CustomModel UV 4.png

2010-12-28T19:42:41Z

Narann:

File:OG Tuto CustomModel UV 3.png

2010-12-28T19:42:20Z

Narann:

File:OG Tuto CustomModel UV 2.png

2010-12-28T19:41:18Z

Narann:

File:OG Tuto CustomModel UV 1.png

2010-12-28T19:39:16Z

Narann:

Making New Models & Textures

2010-12-28T19:34:39Z

Narann: /* Creating a 3D model */

'''This tutorial does not contain all the links and pictures it should yet.'''

This tutorial is based on jo-shadow's tutorial [http://forums.wolfire.com/viewtopic.php?f=13&t=4712 ''How to make your own models for OG''].

This tutorial will teach you everything you need to know to make your own objects and how to get them into the game.

Please keep in mind that this method is by no means the only way of making and adding Objects. It is merely one of very many ways, but doing it this way should be easy to learn and understand for anyone. Some experience with 3D programs would help, but even the most inexperienced beginner should be able to get results with this guide.

== What you will learn ==

This tutorial will cover how to do the following:

* Creating a 3D model.
* UV mapping the model.
* Generating a texture from the UV data.
* Editing the texture.
* Changing the reflectivity of the texture.
* Making a normal map for the texture.
* Setting up the folder.
* Making the XML file.
* Testing the object in the engine.

== What you will need ==

You will need the following for this tutorial:
* A 3D modeling program with simple UV mapping capabilities.
** This tutorial will use [http://en.wikipedia.org/wiki/Wings3d Wings3D], an open source, cross platform polygonal modeler. It is much simpler when it comes to features than [http://en.wikipedia.org/wiki/Blender_(software) Blender] or other major 3D packages, but it should be much easier to learn for beginners.
** If you prefer blender or another program the basic concepts are the same, but this tutorial only covers Wings3D.
* An image editor.
** This tutorial will use [http://en.wikipedia.org/wiki/Photoshop Photoshop], however any image editor will work just fine. As a free, cross-platform alternative I would suggest using [http://en.wikipedia.org/wiki/GIMP GIMP].
* A text editor.
** Any will do. Mac users can use [http://en.wikipedia.org/wiki/Textedit Textedit] and Windows users [http://en.wikipedia.org/wiki/Notepad_(Windows) Notepad].
* The latest [http://blog.wolfire.com/category/alpha/ Overgrowth alpha].
** This tutorial was originally written for and tested on [http://forums.wolfire.com/viewtopic.php?f=13&t=4701 alpha 16].

Please make sure that you have these necessary programs before you start.

== Getting started ==

It is advised, but not necessary, that you first take a look at the [http://internap.dl.sourceforge.net/sourceforge/wings/wings3d_manual1.6.1.pdf Wings3D manual] to help you become comfortable with its interface. It contains some very quick and easy tutorials that will teach you everything you need to know for this tutorial and then some.

Here are some quick Wings3D basics:
* Go into ''Edit -> Preferences''
** Check ''Force Axis-Aligned Ortho''. This will make editing along an axis easier.
** Single-button Mac users should in the ''Camera'' tab select the one button control mode.
* Change between ''Vertex'', ''Edge'', ''Face'' and ''Object'' mode by pressing the buttons on the top bar or the keystrokes: '''V''', '''E''', '''F''' and '''B''' respectively
* Select stuff by clicking on it.
* Deselect with space.
* Focus the view on what you have selected by pressing '''A'''.
* Reset the view with '''R'''.
* Right clicking (control + click will from now on by implied for Macs as right click) brings up a context-dependent drop-down menu. Its contents changes depending on what you have selected. This is where most of the features we will use are located.
* For most of the keyboard shortcuts look under ''Help -> Defined Hotkeys''.

So without further ado, let's begin.

== Creating a 3D model ==

Because it has been so widely requested in the [SPF], and for the sake of simplicity, in this tutorial we will make a simple textured 3D cylinder. However, taking it a step further to more advanced models should not be a problem.

[[Image:Model_4.png|200px|thumb|right|Our finished cylinder.]]
# Open Wings 3D
# Right click anywhere and choose ''Cylinder'' from the drop-down menu. This will spawn a default 16-sided cylinder, to spawn a customized cylinder press the little box on the same line instead. We will now change the proportions of the cylinder to our liking.
[[Image:Model_1.png]]
# Go into object mode ('''B''') and select the cylinder.
[[Image:Model_2.png]]
# Right click anywhere to open the drop-down menu and select ''Scale -> Radial Y''.
[[Image:Model_3.png]]
# Now drag the mouse side to side to change the width of the cylinder. Click once it is scaled to your liking to accept, or press tab to manually input a value.
# For the purpose of this tutorial our cylinder model is now finished.

Now we need to generate a UV map for the object so we can texture it.

=== UV Mapping the model ===

When you want to apply a texture to a 3D model, you might run into some problems. The best way we know how to deal with textures is as a 2D image, but how do we take a 3D model, and make a 2D image out of it? Well let's imagine that we have an orange painted like a globe like this:

[[Image:Globe_1.png]]

And we want to make its surface flat kinda like this:

[[Image:Globe_2.png]]

The solution is we peel away the surface, cutting it in a certain way so that it lies flat:

[[Image:Globe_3.png]]

Please note that there are many ways of doing this, but some work better than others. For example one of the more accurate ways of doing this with the earth is what's known as ''Fuller's Projection'':

[[Image:Globe_4.png]]

([http://earthvoyage.googlepages.com/UNFOLD.MOV Click for animation])

This is what we have to do with our cylinder: We have to cut it up so that we can lay it flat on a 2D plane.

Each vertex of the model, which already has a 3D coordinate of (X,Y,Z) will now also have a 2D coordinate on this special plane, so that we know how to fit the texture onto our object. This 2D coordinate is defined as (U,V), which is why this is called [http://en.wikipedia.org/wiki/Uv_mapping UV mapping]. This is a simplified way of describing UV mapping, but for this tutorial it will do.

''Note: there are other methods for applying textures to models, but this guide only covers UV mapping.''

# Select the entire object, and at the bottom of the drop-down menu choose ''UV Mapping -> Direct''. A new window with the object will pop up with a title of ''AutoUV Segmenting''.
PICTURE

and the name of your object:
PICTURE

Now we have to Divide the object into different shapes so that it can unfold it properly, just like in the globe example.
This can be done Automatically or Manually. For the sake of practice let's do it by hand:
You can separate different pieces either by marking which edges to cut, by coloring the faces that should go together, or both.

# In face mode (F) select the top Face and press 'i' (select similar) so both the top and bottom are selected.
Choose one of the nine colors Labeled AuvChart1-9 from the drop-down menu. Doing so will mark these faces as being separate from the rest of the model.

# Clear your selection with space, and select one of the vertical side pieces.
Select the rest by selecting similar (i), then mark these with a different color.

# Because the cylindrical part of the model is still in a loop we need to mark a cut.
In Edge mode (E) select of the vertical edges and choose 'mark edges for cut' from the drop down menu.

# The marking of your model is now complete, and it is ready to be unfolded.
Choose Continue->Unfolding from the drop down menu

# A window showing the unfolded model will open up. This is the UV map.
To show what part of the UV map belongs to what part of the model, there is a colorful grid and letter pattern that you can also see on your model. When you Select a face you see it on both the model and the UV map.

You can also scale and move parts of the model around on the UV map, and the changes will be apparent on the model. Making a face take up more of the UV map will make give it a denser more detailed texture. This is often used to make important features of a model more detailed, like the hands and dace of a character.

If for whatever reason you don't like how the unfolding ended up you can select your object, and in the drop down menu Choose UV Mapping-> Force Segment (delete previous) to start from a clean slate.

It's important to note that there can be many different ways of cutting an object and the resulting UV maps can look very different.

There are two automated methods, Projection and Feature Detection:
UV_5.png (12.56 KiB) Viewed 597 times

Depending on your model one might be better than the other, sometimes they both suck and you have to do it manually, and sometimes if your model is simple like this one they will both give you the same result.

If you cut the object in weird ways it will end up unfolding weirdly, like this for example:
PICTURE

Once again, the best way to understand how this works is to experiment and try out the various features.

Although there are many different ways of mapping any Model, as a rule you want its faces to use the UV space as efficiently as possible, because any texture that isn't under the mapped Faces will not be seen anywhere when the texture is applied.

There are entire programs devoted simply to finding the best way to generate the UV map for any given model, and the tools wings3D provides are much more basic. However they are sufficient for a simple object like this.
With practice you can even manage more complex ones.

Now that We've Finished UV mapping let's generate the texture for the model. Rest assured, the hardest part is done.

Generating a texture from the UV Data

We have our lovely UV map, and now we need to generate a texture we can then edit.

# With the UV map Window still open, choose 'Create Texture' from the drop-down menu. A small window will pop up:

Choose a size depending on how big the object will end up being, and how detailed you want it to be. The larger the image, the more detailed the texture will look on the model.
It wouldn't make sense to have a super-high detailed texture for a fork, and you wouldn't want a low quality texture for a skyscraper either. For this object 512x512 will work just fine.

# Because we want to edit this texture manually later we need to know where on the texture the edges of the object are, so we know where on the object we are drawing.
Set the first as 'Background' and the second as 'Draw Edges' so the edges appear on the texture. Press OK.

# It might seem like the UV map disappeared, but don't fear, the texture was created and is now applied to the object. You simply cannot see it well because it is white with black lines that are right under the wire-frame. You can tell when you zoom in really closely:

# Export the model by going into File -> Export -> Wavefront (.obj)

Then make a new folder in a location of your choosing and save it as whatever title you like.
It will save a .obj and a .mtl file. Delete the .mtl file. It has to do with materials that we don't need.

# Sometimes the texture is saved along with the object, but sometimes it isn't. If there is no texture file in the folder you exported to, go into Window->Outliner, and locate the texture:
PICTURE

Right click it, Choose export and save it in the same folder as the obj, name it whatever you want, preferably the name of your object plus _Color.
For example:

Texture_5.png (13.25 KiB) Viewed 582 times

You are now done with Wings3D!

== Editing the texture ==

Now it's time to get creative!

# Load the Texture file into whichever image editing program of your choice

# Create your actual texture now however you wish. It helps to keep your 'Template' in a separate layer than the texture you want to be on your object.

Here is one way of doing it in photoshop, that allows you to keep the Template's lines above your texture for reference:

* Double click the layer name and accept the pop up prompt to unlock it.
* Rename the layer "template".
* Create two layers bellow it, the lower one called background, the upper one called texture.
* Fill The background layer with white and lock it.
Image_2.png (19.76 KiB) Viewed 579 times

* Select the Template layer, which is above all the other layers, and set its layer mode to multiply.
Image_3.png (37.59 KiB) Viewed 580 times

This will make the white in it transparent, and the black remain as an overlay. you can use it as a guide. lock it as well.
* Draw in the texture layer to your heart's content.

I just used some stock photography I found online. The area with the red text is wasted space that could have been better managed when I made the UV map. It will not appear on the final Model, but will take up space in memory none-the-less.

Here is my finished texture:
Image_5.png (326.33 KiB) Viewed 578 times

Once done, make sure to save the image -without- the Template, unless you want it as part of the final Texture. Don't worry too much about what format you save it as. Thanks to the built in image converter almost any file type will work in the engine. I personally would advise you to use .tga or .png.

=== Changing the Reflectivity of the texture ===

If you were to use this texture as it is, the resulting object would look very shiny.
That is because Phoenix will set the reflectivity, or inherent 'shininess' of an object depending on the transparency, or alpha value of the texture.

If you want your object to look more matte you need to add transparency to your texture. There are several ways to do this:

The Simple way:
* This method will make the whole texture less shiny:
* Look in the Layer window and change the Opacity of the Layer that contains your texture.
Reflect_1.png (15.61 KiB) Viewed 576 times

* You're done. Save the texture, but make sure that the format you save it as supports Transparency. .tga and .png both do.

The Advanced way:
* This method will allow you to change the shininess of different parts of the texture.
* Find the Channel window. You should see 3 channels, Red, Green and Blue (RGB is simply the sum of all 3):
Reflect_2.png (15.26 KiB) Viewed 575 times

* Add a new Channel (the icon next to the trashcan) By default this is an Alpha Channel.
Reflect_3.png (15.46 KiB) Viewed 570 times

* Like all channels it is black and white. Black is Transparent, and will make the object matte, and White is Opaque, and will make the object reflective.
* If you show the rest of the channels while the alpha channel is visible the parts that are hidden will appear red by default:
* When Finished save the file, but make sure to save it as .tga The alpha layer will -not- be saved if you choose .png

=== Making a normal map for the texture ===

This tutorial does not yet include Instructions for making a normal map. Until someone writes it up, just use the following blank normal map:
blanknormal.png (5.36 KiB) Viewed 566 times

== Setting up the folders ==

Phoenix, Overgrowth's engine uses XML files to tell it where an object's files are located.
These XML files are by default located in Data/Objects. For example the Rock1a.xml file:

<pre>
<?xml version="1.0" ?>
<Object>
<Model>Data/Models/Environments/Rocks/Rock1a.obj</Model>
<ColorMap>Data/Textures/Environments/Rocks/Rock1_Color.tga</ColorMap>
<NormalMap>Data/Textures/Environments/Rocks/Rock1_NormalOS.tga</NormalMap>
<ShaderPath>Data/GLSL/cubemapobj</ShaderPath>
<ShaderName>normalmap</ShaderName>
</Object>
</pre>

The way the file works is self explanatory. The tags indicate what the provided file path points to. As you can see all the file paths have Data as their root. Because of this you'll want your files to be inside the Data folder.

For mac users right click the Alpha, click 'Show Package Contents', Contents->Data. For easy access then drag it into your Sidebar:
Folder_1.png (46.58 KiB) Viewed 563 times

Until the team implements a more elegant solution I suggest that in the Data folder you make a folder called Custom and keep all your files in there. I chose to imitate the file structure in Custom that the Data folder uses by default:
PICTURE

However you can save it any way you choose. If you want to share your Objects with others it is be best to keep all the files in one Folder inside Data/Custom. ultimately in the engine it doesn't make a difference, as long as the XML file is defined correctly

== Making the XML file ==

Now that everything is in the right place you can make the xml Object file.
# Copy any .xml file from the Objects Folder, paste it into your custom folder and rename it as whatever you want. make sure to keep the extension ".xml"
# Open the XML file with a text editor and change the paths to match that of your file.
Here's mine:

<pre>
<?xml version="1.0" ?>
<Object>
<Model>Data/Custom/Models/Demo/Cylinder.obj</Model>
<ColorMap>Data/Custom/Textures/Demo/Cylinder_Color.png</ColorMap>
<NormalMap>Data/Custom/Textures/Demo/Blank_Normal.png</NormalMap>
<ShaderPath>Data/GLSL/cubemap</ShaderPath>
<ShaderName>cubemap</ShaderName>
</Object>
</code>
</pre>

I don't quite know how the shaders work, but I tested each out and listed them here.
Cubemap will work best for most objects.

== Testing the object in the engine ==

Now the moment you've been waiting for:

# Start up the Latest Alpha
# Click the first Button in the toolbar
# Find your .xml object file and click Open
# Pray that you've done everything right and click on the terrain
# Breathe a sigh of relief as your object appears:

The above Object uses a texture without transparency and so looks shiny.

This Object uses a texture with transparency and so has matte areas:

If you get an error message saying that a file cannot be found make sure that the file-paths in the XML Object file are correct.

Here is the final Custom Folder which I made for this tutorial. It contains two objects: one with changed reflectivity, and one without.

FILE

unzip it, make sure the resulting folder is called 'Custom" (otherwise the xml file paths would be incorrect) and place it in the Data folder.

(Notice that I actually did a bad job with the UV mapping, because I chose to automate it and not do it manually, and the texture is not a continuous band, but broken up into 4 parts.)

== Conclusion ==

I really hope that this Guide will be helpful to you.
A-lot of thought and effort went into it, plus at least a good 5+ hours of work

One thing I cannot stress enough is that this guide is by no means perfect, and there are likely better ways of doing this.

My challenge to you is to not just use this guide, but expand on it: Try texturing a sphere, a rock, a Tree, never stop experimenting. Apply what you've learned here and use it to help you make some great content for this game.

If you have ''any'' questions or problems when trying to recreate what is illustrated here, please feel free to ask the friendly people in our [http://www.wolfire.com/irc IRC channel].

== Other Resources ==

LINKS

[[Category:Overgrowth]]

Custom Terrain

2010-12-28T16:23:48Z

Narann: Remove the link wich is in the tutorial now.

{{stub}}

Tutorials on how to create and import your custom terrain into Overgrowth. The two tutorials cover two entirely different approaches.
* [[How to make your own Terrains for OG - Crash Course]]
* [http://forums.wolfire.com/viewtopic.php?f=13&t=5457 Custom Terrain Tutorial]

[[Category:Overgrowth]]

How to make your own Terrains for OG - Crash Course

2010-12-28T16:21:09Z

Narann: First version of the page. should be the good one! :D

== Introduction ==

This tutorial is a "copy" of the "Secret Preorder Forum"'s tutorial that can be found here: http://forums.wolfire.com/viewtopic.php?f=13&t=4732

By Jo-Shadow

This is a Quick guide for those of you who want to make custom terrains, and want to do it now.

For those of you that want to make your own maps here is a small taste of my up-coming tutorial, which I am waiting on making due to some bugs in the engine (that hopefully should be fixed soon) and myself not having figured a few things out yet to the point where I feel comfortable that my guide woulld work for anyone.

That being said, use at your own risk. I can't guarantee that this guide will work without complications, but as usual I'll try to help figure out any problems.

It also won't be as detailed in step by step screenshots as my other guide. Again, this will come in the later, more complete version.

Once again, this guide assumes you are using Photoshop, but most things should work in principle with Gimp.

Note: some of the files that come with OG might be compressed as *.dds, with a filename like "greenhills_color.tga_converted.dds" to make them easier to load for the engine. To edit this file you can use the wolfire image converter, set it to 'tga' and drag the *.dds file in.
The resulting File should be greenhills_color.tga_converted.tga"
Rename that file what the name was without the "_converted.dds", in this case "greenhills_color.tga"
When OG loads it will automatically generate a .dds file again, so if you edit the tga file make sure to delete the .dds file again just to be sure.

== Making Heightmaps ==

* Height-maps have to be 16 bit, single channel (so greyscale) *.png images. So far you cannot use *.tga files.

* So far only the .png files exported from World machine work. if you try making your own file directly from within Photoshop, even if you set it properly to 16 bit and single channel gray-scale, and try to have it load into OG it will -not- load properly. You will just see a completely flat plane. (If you want to know why exactly this is happening go ask Phillip. It has something to do with their implementation of FreeImage doing something weird with the *.png formats with the heightmaps. I don't remember nor really understand it :lol: )

* A work-around for this is to create your map ontop of the existing heightmaps:

0. Duplicate one of the existing Heightmaps (found in Data/Textures/Terrain/...)

1. Open The Heightmap in Photoshop. it should say (Gray/16) after the filename in the title. This means that the image is in the right mode to be used as a heightmap for OG. anything else would be a problem.

[[Image:OG_Tuto_CustomTerrain_Gray16.png‎]]

2. Use layers ontop of the original to make your Heightmap.
* If you are using a 3rd party app to make a terrain like terragen or open source images from the web this is where you would paste them in. (I'm not sure if their formats would be supported as the engine stands right now. this way will make sure they work)
* using the gradient tool will help you make smooth inclines

[[Image:OG_Tuto_CustomTerrain_GradientTool.png]]

* useful would also be Filter->Render->Clouds and Filter->Noise->Add Noise to generate randomness

3. Once done flatten all the layers with Layers->Merge Visible.

[[Image:OG_Tuto_CustomTerrain_MergeVisible.png]]

Note: This step is crittical. If you try to save with multiple layers photoshop will ask you what format so save as, and if you then save as *.png it will not retain the original *.png formatting!

So that your Heightmap works correctly there are two more things you can do:
4. Filter->Blur->Gaussian Blur and do about 10-20 pixels. Even if you want to have a sharp wall, due to the current method that is used to simplify the Heightmap before rendering, the edges become very jagged and uneven when you try to have a sharp corner. I have found that Heightmaps look much better when you blur them a bit.

5. Image->Adjustments->Levels and for output levels put in 1 and 254. The engine will act up a bit if your Heightmap reaches to the max height and the lowest height, so this will make sure that none of your blacks are 100% black and none of the whites are 100% white.

[[Image:OG_Tuto_CustomTerrain_Levels.png]]

6. Save. if you did everything correctly no file browser should pop up telling you where to save. this would mean that you saved the file correctly.

Note: I haven't had a chance to try making custom heightmaps in gimp, which might for some reason save as the proper *.png format. Feel free to try making your own 16bit/Grayscale image *.png and tell me if it works or doesn't work. if it doesn't you should still be able to use the above method to work on-top of an existing Heightmap.

You can also just modify small parts of the terrain, or just flatten small parts:

1. Open the Original Height-map

2. Use the lasso tool (L) or the Marquee tool (M) to select the part you want flattened, and make sure to set a feather value. this will make the edges of the selection blurry and so the edges won't look that hard.

[[Image:OG_Tuto_CustomTerrain_LassoTool.png]]

3. Filter->Blur->Average to make it all one color, or use Gaussian blur to gradually make the selected part flatter.

4. Make sure that all the layers are flattened.

5. Save.

* Now that the file is saved feel free to change its file name to whatever you want, but don't do 'Save As'. as I mentioned before, this will not work.

== Making Colormaps ==

* The color maps that go with terrain can be any image format. as usual *.png or *.tga would be preferred.

* if you want to make a grid for organizing your map here's an easy way:

1. Make a new, small image (about 32x32, 64x64 or 128x128 will do. the size doesn't have to be power of two, but it will fit nicer later) this image will be one piece that will be tiled to make the grid.

2. Using the pencil tool draw out lines on the left hand and top edge, and if you want in the center. make sure to keep in mind that this texture will be tiled, so there is no reason to draw on both edges. Here are two I made:

[[Image:OG_Tuto_CustomTerrain_grid1.png]]

[[Image:OG_Tuto_CustomTerrain_grid2.png]]

3. Go into Edit->Define Pattern... and save the pattern. just enter a name, or leave it as is and press ok. You can now close that window, now need to save.

4. Create a new image or an existing one. make sure it's the same size as your Heightmap, a large size like 2048x2048.
Note: it might be interesting to know that at this size, rabbot only barely takes up one pixel on the map.

5. To use the grid select the paintbrush tool (same place as the gradient tool), set it to pattern mode, then select your grid pattern and click on the canvas.

[[Image:OG_Tuto_CustomTerrain_GridPattern.png]]

it should fill the entire image with your grid. (do it in a new layer if you have trouble with getting it everywhere)

6. Once done, if you want elements of your Heightmap to line up with elements of your Color Map make sure to Flip vertically (make the top the bottom, and the bottom the top, and keeping left on the left, and right on the right). For some silly reason one of these is flipped when they are loaded (I think this should be changed btw. If you are listening phillip or david: it's silly and confusing. Work it into your WM2 pipeline if you have to, but the images that a user saves should look like they'd line up when you look at the images.)

6. Save the image.

== Getting Terrain into the Engine ==

Your heightmap and Color map should be reasonably named (name_c.tga and name_hm.png for example), and they should both be in a folder inside the Data Folder.

Currently loading a level via the 'load' console command does not work. As a result, the only current way to test your terrain is by modifying the default Level file "GreenHills.xml" (Phillip hints that this might be fixed or improved entirely in the next alpha)

When you look at the file it is set up like this:

<?xml version="1.0" ?>
<Terrain>
<Heightmap>Data/Textures/Terrain/greenhills/greenhills_height.png</Heightmap>
<DetailMap>Data/Textures/ground_normal.tga</DetailMap>
<NormalMap>Data/Textures/Terrain/ProcDesert/ProcDesert_n.tga</NormalMap>
<ColorMap>Data/Textures/Terrain/greenhills/greenhills_color.tga</ColorMap>
</Terrain>
<Sky>
<DomeTexture>Data/Textures/skies/Blue2.png</DomeTexture>
</Sky>
<SpawnPoints>
<SpawnPoint t0="0.000000" t1="140.000000" t2="0.000000" s0="1.000000" s1="1.000000" s2="1.000000" r0="0.935894" r1="0.057120" r2="0.347610" r3="0.000000" r4="-0.054953" r5="0.998357" r6="-0.016100" r7="0.000000" r8="-0.347960" r9="-0.004034" r10="0.937498" r11="0.000000" r12="0.000000" r13="0.000000" r14="0.000000" r15="1.000000" />
</SpawnPoints>
<Objects>
...STUFF!!...
</Objects>

* The first part is self explanatory: put in the Filepaths for your files.
* DetailMap is a normal map. Feel free to leave it as is. It is tiled and adds some texture to the terrain when you look really closely at your map.
* The normal map part actually seems to not be vestigial. This would have been a normal map for the entire map, and can be found in some older alphas.
* DomeTexture is the sky. there are a bunch of other ones in Data/Textures/skies

* Spawnpoints defines the position/rotation/etc. of rabbot and the view at startup.
From what I can tell, only the first three matter much, t1, t2 and t3, describe the x, y and z coordinates of the spawn point. Feel free to change them to see what does what. Just make sure not to have Rabbot spawn under the map, or too high over the map, as with the physics as they are right now, he could fall through after too great a fall.

* The objects section contains all the data for the objects in the map, including the information normally found in the Object's XML file, but also its Groupings and transformations, similar to those in the spawnpoint, but here they also modify the X, Y and Z translation, rotation and scaling. Again, if you feel so inclined, mess with them to see which is which.

Plug in your terrain color and Heightmap filepaths and you should have no problems.

Here is what the above Heightmap and grid look like together:

[[Image:OG_Tuto_CustomTerrain_ScreenShot01.png]]

[[Image:OG_Tuto_CustomTerrain_ScreenShot02.png]]

[[Image:OG_Tuto_CustomTerrain_ScreenShot03.png]]

(note the skymap is wrong because i was too lazy to change the sky, and so it did not update its texture to match this terrain)

Here is a terrain I used for testing the range of the full height possible in OG, and the one I created in this tutorial (both feature the same large ramp-style):

If you have access to the wolfire's forums the tga files can be download here:

http://forums.wolfire.com/download/file.php?id=400

Some things to remember:

* The only important files in your terrain folder are the original heightmap and the original colormap files. The program will generate a bunch of files like name_lighting.png (calculated light) name_shadows (calculated shadows) and name_baked.png (the color map with shadows, and lighting baked on, changes depending on the sky) as well as a bunch of converted _dds files. all of these will be regenerated using the height and color map if you delete any of them so don't worry about any but the height and colormaps.

* Your terrain's shadows/lightings are calculated only when 1. The filepath in the level file changes or 2. Any of the baked files are not present.

* This also means that if you change your heightmap or even colormap, make sure to delete all of the baked files first, because otherwise the program might not realize that you changed anything

* The terrain is used to make the pre-baked sky. However unfortunately it only recreates this pre-baked sky if one of the baked sky files is missing or the sky path in the Levels file is changed. this means you might end up with your old terrain in the background after you changed to a different heightmap/color map. you have to delete the baked sky texture first.

* I'm probably forgetting something right now (why do I always write this stuff when it's 4:00 in the morning XD) so if something doesn't work or you have questions, comment or PM me.

A lot of changes should come with alpha 17, and as such hopefully some of the bugs mentioned in this quick guide will be fixed soon. Once I feel confident enough about it working reliably I will put out a full tutorial.

-Jo

File:OG Tuto CustomTerrain ScreenShot03.png

2010-12-28T16:03:49Z

Narann:

File:OG Tuto CustomTerrain ScreenShot02.png

2010-12-28T16:03:36Z

Narann:

File:OG Tuto CustomTerrain ScreenShot01.png

2010-12-28T16:03:23Z

Narann:

File:OG Tuto CustomTerrain GridPattern.png

2010-12-28T16:01:32Z

Narann:

File:OG Tuto CustomTerrain grid2.png

2010-12-28T16:00:28Z

Narann:

File:OG Tuto CustomTerrain grid1.png

2010-12-28T16:00:12Z

Narann:

File:OG Tuto CustomTerrain LassoTool.png

2010-12-28T15:59:18Z

Narann:

File:OG Tuto CustomTerrain Levels.png

2010-12-28T15:58:22Z

Narann:

File:OG Tuto CustomTerrain MergeVisible.png

2010-12-28T15:57:03Z

Narann:

File:OG Tuto CustomTerrain GradientTool.png

2010-12-28T15:55:57Z

Narann:

File:OG Tuto CustomTerrain Gray16.png

2010-12-28T15:54:37Z

Narann:

User talk:Narann

2010-12-28T15:40:21Z

Narann: Removing all content from page