Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] Move relevant tutorials and guides to openage-modding #2

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 12 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,18 @@ for [openage](https://github.com/SFTtech/openage).
Content
=======

So far, no information is stored in the repo.
Start writing a guide!
Styleguide
----------

Have a look at our [styleguide](doc/assets/styleguide.md) if you want to create assets.

3D modelling
------------

Tutorial about creating 3D in blender:

* [Introduction](doc/assets/3d_models/0_introduction.md)
* [Part 1: Setup and rendering](doc/assets/3d_models/1_setup_and_rendering.md)


License
Expand Down
52 changes: 52 additions & 0 deletions doc/assets/3d_models/0_introduction.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
# Introduction

*Disclaimer: Thanks to Jan dc on the AoK.heaven forums who lets us use this tutorial series. If you want to ask him questions about the guide or simply admre his work, visit [this](http://aok.heavengames.com/cgi-bin/forums/display.cgi?action=st&fn=9&tn=44487&st=recent&f=9,44487,0,10) thread.*

Hey everyone. Those who know me, might remember that I used to be a fervent fan of copy paste graphics. Since then however, I have made a 360° turn and have been spending quite some time time learning 3D modeling. To me 3D modeling has been more of a pastime than anything else, so I haven't been learning it as quickly as I would have wanted to, but nonetheless I think I have made some decent progress. Units and their animations are still a challenge for me, which is why I am going to talk in this thread only about buildings and eye candy, but I do hope to make threads about those as well in the future.

A while back, I started making Age of Empires 1 graphics. This is because the buildings are much smaller and have less detail than the Age of Empires 2 graphics, making it easier to model them. The textures and lighting are also simpler, which is good for someone who is new to modeling, and doesn't know advanced texturing or lighting techniques. I made a few models for Age of Empires 1 but to my own acknowledgement, they were quiet mediocre. Still at first I was the only 3D modeler/artist on aoe.heaven so people had no other choice than to praise my work (at least I had that going for me)\* Much changed when I got my hands on the original Age of Empires I models which were posted on aoe.heaven (thanks to CeaseDaFire, XLightningStormL and Phatfish) (Sorry if I missed someone). It still was not easy recreating the exact setting in blender since the original models were made in 3D max and all textures were missing. After much trial and error I got close to the originals though.

\*Other great graphics designers have also greatly contributed to the site since then, like Yohomes2 and Toddler.

One of my latest aoe I models

![AoE 1 model](images/intro_aoe_model.png)

Of course I also worked on some other stuff which didn't really fit the Age of Empires II style but was still fun to do.

An indoor scene of a fantasy medieval building

![Fantasy Medieval Building](images/intro_indoor_fantasy_medieval.png)

This weekend I wanted to have another go at an Age of Empires II building, making it from scratch but armed with the knowledge I had acquired in the past months. In my opinion the best way to try to mimic a style is to recreate an existing building and so I started on the Castle Age Western European Town Center. I posted a wip in the "Your works of art" thread already but here is my latest version. The one thing I am still struggling with is figuring out how to do the roof tiles properly, so suggestions for that from other 3D artists are welcome. It's a start and I hope it is a solid foundation for future work.

An attempt at recreating the WE Castle Age Town Center

![Castle Age TC](images/intro_tc.gif)

## Expectations
Since I have very little free time and am already committed to several projects, I will not be joining any new projects soon. So instead of me making graphics for you, I want to teach you guys how to make the graphics yourselves. In fact if there is enough interest I want to make tutorials and even maybe start a weekly challenge to practice a bit. Something simple like creating a wheelbarrow, or a small wooden bridge. It would be fun I think.

I know there are several other 3D artists here, but so far it seems like not much knowledge has been passed on. I will share my setup and knowledge of blender and I hope it will inspire others to do the same. It would be great if we can give feedback to each other and improve our 3D skills even further. You know, that would be pretty sick Bro.

## Why Blender?
There are many great 3D modeling programs out there, many arguably better than Blender. However Blender is free and since most of us are just hobby modders,
it is the most obvious one.

## The Stuff
Okay as promised, next up is the first tutorial. Post below what you think and share your ideas and interests. I will also be answering any modelling related questions you guys have.

Here's a little something for those who were willing to read through my long rant.

![Castle Age Progression](images/intro_tc_progression.gif)

------------------------------------------------------------------------------------------------------------------------------------------------------


## Q&A

Q: How do you manage to reduce the loose in quality while converting to 8 bit format?

A: I try to stick to colors that can be found in the AoE palette. If you did this and the colors still mess up, then the issue might be with your program or its settings.

![Color Palette](images/intro_color_palette.png)
85 changes: 85 additions & 0 deletions doc/assets/3d_models/1_setup_and_rendering.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
# Part I: Blender Setup and Rendering

*Disclaimer: Thanks to Jan dc on the AoK.heaven forums who lets us use this tutorial series. If you want to ask him questions about the guide or simply admre his work, visit [this](http://aok.heavengames.com/cgi-bin/forums/display.cgi?action=st&fn=9&tn=44487&st=recent&f=9,44487,0,10) thread.*

* **Content**: Basic Blender Aoe2 Setup Tutorial
* **Requirements**: Some knowledge of Blender and Photoshop
* **Estimated Time**: Short

## Expectations

So what can you expect from me and what do I expect from you. To be honest I have far too many times promised to help out other people with their projects, when I lacked the time or motivation to go through with it. This is why I am now saying in advance, that I am not inclined to help out other people's projects directly anymore. However instead I do want to help the people who are interested in learning 3D modeling. Something about teaching men to fish I guess. Either way I am willing to share my blender setup and material in the hopes that more people will learn this great skill. And maybe in the future we can share our work and techniques to further improve this already great modding community. It is not easy to learn 3D modeling but once you get the hang of it, it becomes very fun and rewarding to do.

How do you start? First download blender (use the site of blender itself to avoid malware) and look up some tutorials on the internet on how to do simple modeling. Start simple, by learning how to make objects and how to edit them. If there is enough interest in this tutorial maybe we can start a weekly challenge to learn blender together. For example simple exercises like making a barrel.

WARNING: Advanced content ahead. Only proceed if you know blender, or are willing to get confused.

## Lighting

Here I am using a variation of the three point lighting technique. A common mistake among beginner modelers (one which I also made) is to overload the scene with lights. To have a more realistic and better looking 3D scene, it is very important to show strong contrast between light and shadow. So keep the amount of lights to a minimum.
There is one deviation in this scene which is a fourth light, underneath the sun. As you may have noticed none of my lights cast shadows, except for the sun which only casts a shadow and no light. This is because the sun casts a very strong shadow, which is necessary for the ground shadow. The other front light is there to provide the front side of the building with light and soften the shadows cast by the sun on the building itself.

![Lighting](images/setup_lighting.png)

[1] Spot, behind the building. (Energy: 2.0) (Distance: 25.0) (Downwards angle: 52°) (No Shadow) (Specular and Diffuse)

[2] Spot, left of the building. (Energy: 1.0) (Distance: 10.0) (Downwards angle: 56°) (No Shadow) (Specular and Diffuse)

[3] Sun, in front of the building. (Energy: 2.0) (Downwards angle: 22°) (Only Shadows) (Specular and Diffuse)

[4] Point, in front of the building. (Energy: 7.0) (Distance: 25.0) (Downwards angle: 25°) (No Shadow) (Specular and Diffuse)

[5] (Indoor lighting, usually a yellow/orange area light)

## Camera

The camera in my setup is an orthographic one with value 11.5, it has a rotation of x:60° y:0° z:-135°\* and its coordinates are x:-12 y:12 z:10.

\*some say it is 59° along the x axis but doesn't matter much.

![Camera](images/setup_camera.png)

## Rendering

When rendering the graphic I am using 90% of a 1200 x 1024 resolution, Anti-Aliasing with a size of 1.3 pixels and a transparent background. Keep in mind that you need to get rid of the anti-aliasing pixels on the outside of the graphic as well. I have a technique for that, but it is not optimal. I will add it to this tutorial once it is has been improved.

![Rendering](images/setup_rendering.png)

## Layers

To get the best result, and to make it easier to convert the image to the right format, I use key frames and the timeline to hide certain materials. It is certainly not the best technique but it works well for buildings. In my setup I have four different layers.

* Ground shadows + Basic Material + Player Color
* Basic Material + Player Color
* Player Color
* Ground shadows

The advantage of this, is that I can process the different layers separately in Photoshop, and combine them once I am done. Since the Player Color is also separate I can use a Player Color only palette to make sure it uses the correct colors.

To use this technique you have to make use of the timeline (should be visible by default) and a transparency mask for all the materials. Set the current frame to 1 and key the Transparency Mask for all materials to 1. Then go to the second frame and set the Transparency Mask for all materials, except the Player Color ones to 0. Then set them all to 0 for the last frame. The ground plane, which has a material that only catches shadows, has its Transparency Mask set to 1 for frame zero and three, and set to 0 for frame one and two.

![Layers](images/setup_layers.png)

Town Center with all materials visible

![Towncenter (everything)](images/setup_tc_all.png)

Town Center with no Ground Shadows

![Towncenter (no shadows)](images/setup_tc_no_shadows.png)

Town Center with only Player Color

![Towncenter (player colors)](images/setup_tc_color.png)

Town Center with only Ground Shadows

![Towncenter (only shadows)](images/setup_tc_only_shadows.png)

Conclusion
This is about all you need to know for this tutorial. If you have any more questions or want to express your interest in learning 3D modelling, post in the [original forum thread](http://aok.heavengames.com/cgi-bin/forums/display.cgi?action=ct&f=26,42291,,10) at AoK Heaven.

Thanks,
Jan

PS: For those data nerds among you, who say, "Don't we need to render the town center pieces separately?" The answer is no. If you look closely at the original town center graphics you can clearly see that the pieces are cut out in Photoshop, instead of rendered separately.
Binary file added doc/assets/3d_models/basic.setup.blend
Binary file not shown.
Binary file added doc/assets/3d_models/basic_setup_v0.1.blend
Binary file not shown.
Binary file added doc/assets/3d_models/images/intro_aoe_model.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added doc/assets/3d_models/images/intro_tc.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added doc/assets/3d_models/images/setup_camera.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added doc/assets/3d_models/images/setup_layers.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added doc/assets/3d_models/images/setup_lighting.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added doc/assets/3d_models/images/setup_rendering.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added doc/assets/3d_models/images/setup_tc_all.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added doc/assets/3d_models/images/setup_tc_color.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
74 changes: 74 additions & 0 deletions doc/assets/styleguide.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
# Styleguide - Do's and Don't's

Please adhere to this guide if you want to contribute any assets to the project.

## Why you should follow this guide

Game assets usually have a purpose beyond looking pretty. They are also visual aides to the player, helping them to achieve what they want. Players might admire your shiny graphic asset at first but in a tense multiplayer battle there will be no time for that. Therefore, your assets should not only be nicely drawn but also recognizable, functional and fitting for players' needs.

Don't worry, you still have a lot of creative freedom!

## Buildings

### Civ architecture

* Building sprites should use the architecture of their civilization.
* Keep in mind that every architecture requires building sprites for Feudal, Castle and Imperial Age for some buildings.

### Shape

* Most buildings have unique shape (Examples to be done) that is consistent throughout civilization architectures. Try to follow that shape, when you create a building from scratch.
* You don't have to follow the exact shape for every architecture. As a rule of thumb: The more a player frequents a building, the closer it should follow its unique shape. Examples are below.
* High frequency: Town center, barracks, archery range, stable
* Medium frequency: Market, mill, lumber/mining camp
* Low frequency: University, house
* Monasteries and wonders have no fixed unique shape. Be creative with your models here.

### Size

* Building sprites should neither exceed their foundations nor be smaller than them. Otherwise players who use buildings to wall off their base will get confused whether there are holes in their defense.

### Colors

* Building sprites should have markings that can be used for the player colors. They shouldn't dominate the building but also shouldn't be too subtle.
* Make sure that all 8 supported player colors will be visible on the markings. None of them should blend in with the building.

## Units

### Models

* Unit models don't have to be historically accurate.
* Models should be recognizable and not be too similar to other unit models.
* Parts of the armor have to be reserved for the player colors. Make sure that all 8 supported colors work with your model.
* Also make sure that the above rules are guaranteed **for every direction** the unit can face.

### Animations

* Attack animations should be clearly visible **for every direction** the unit can face.
* You should provide the following animations for each unit:
* idle
* walking
* attacking
* dying
* decaying
* Try to fit the length of an animation to the units attack speed.

## Sounds

* Sounds should not be longer than 3 seconds.
* Try to make sounds as short as possible, preferrably 1 second or shorter.
* Sounds that are used in combination with animations (e.g. attacking, dying, etc.) should not exceed the length of the animation.
* Sounds should be distinctive. Don't use similar sounds for completly different actions.
* Try to minimize repetition in a sound.

## Music

* We may prefer a soundtrack that is close to the original tunes (e.g. medieval themed songs) but you can do everything you want.
* If you would like to sing something, go for it! It might not end up as the ingame soundtrack but we will find a use for it.
* Please don't plagiarize other people's work.

## Interface

* Buttons should depict their function with an icon. Don't use text on buttons.
* Buttons that create a unit should always show the upper half of the actual unit model.
* When drawing an icon, make sure it doesn't blend in with other interface elements. Keep in mind, that different civilizations can have different backgrounds for their Interface