Difference between pages "Level Art: Ideas for New Levels" and "3D Asset Workflow: Sway"

From Frozenbyte Wiki
(Difference between pages)
Jump to: navigation, search
 
(Created page with "<div style="border-bottom:2px solid #99aac7; background:#d0def5; padding:0.4em 0.5em; font-size:130%; margin-bottom: 25px; text-align: center; float:top;"> ⬑ 3D Asset Wor...")
 
Line 1: Line 1:
−
{{:Level Art}} <!-- Link list transcluded from main Level Art page -->
+
<div style="border-bottom:2px solid #99aac7; background:#d0def5; padding:0.4em 0.5em; font-size:130%; margin-bottom: 25px; text-align: center; float:top;">
−
* How to get visual ideas to kickstart a new level?
+
⬑  [[3D Asset Workflow]]</div>
−
* All Trine levels have their own theme, but there is a lot of variation and different areas inside levels as well
 
−
* Searching for ideas, inspiration and reference images is always beneficial when determining the themes for the level you are working on
 
−
* Creating mood boards and collecting a reference image library will help you during the creative process
 
−
* Reference images are super important in the process of forming a clear vision of the level you want to create
 
−
* Sure, you can come up with cool stuff off the top of your head, but why not use the fantastic resources available to get even better results?
 
  
−
= Idea & Concept Process =
+
<div style="padding-right: 10px; padding-left: 1000px; padding-top: 60px; padding-bottom: 80px;">
−
* The lead artist will combine preliminary references for different level themes that indicate what kind of mood and theme are wanted
+
{{#lst:3D Asset Workflow}} <!-- Link list transcluded from main 3D Asset Workflow page -->
−
* The concept artist might make some kind of concept art to further flesh out the ideas. However these concepts are often quite vague and focus more on the big general picture, so the level artist needs to come up with most of the details
+
</div>
−
* Once the level artist starts working on the level they should go through the materials already available internally: The script, level wiki site, concepts and existing reference images
 
−
* Communicating with the AD/art lead and designers, the writer and possibly with the 3D artists is important
 
−
* Consider all the materials and start thinking about how the level could look like
 
−
* Based on the existing materials, search for your own reference images online and save the best ones to the shared level reference image folders
 
−
* Use the best ideas from your reference images and your imagination and combine everything in your unique level. Don't directly copy and paste stuff from reference images, but add your own touch.
 
−
* You can go back to the reference images at any point during the level art process.
 
−
* You might even forget some great ideas along the way, so refreshing your brain by returning to the reference once in a while is a good practice.
 
−
* If you feel stuck with a scene at any point when creating the level, you can just find a reference image or two with cool-looking ideas and try utilizing them in your design.
 
−
* The level art process is an iterative process. There is no need to get everything placed perfectly from the get-go, as that's very seldom how our creative processes work. The process takes a lot of experimenting, trial and error.
 
−
* In some cases it might be best to rework a scene completely to find something better.
 
  
−
<gallery widths=400px heights=400px mode="nolines">
+
= Summary =
 +
* This wiki page guides you through the process of how to:
 +
# Create swaymaps
 +
# Make them work in the Editor
 +
* The sway map is essential for any vegetation or foliage to appear moving in the wind
 +
** The way sway works in Editor is by using vertex color
 +
** Each color channel has a different function, separately they look like in the picture below
 +
[[File:sway_map_channels.jpg|800px|center]]
  
−
File:Lakes and rivers preview.png
+
= Workflow Steps =
−
File:WIP_RiversAndLakes_concept_220817_v2.png
+
== Creating Swaymaps in Modo ==
−
File:LakesAndRivers rocks concept 160817.png
+
* Note: We use an in-house Modo script for creating sway map, and that is not listed on this public wiki page series
−
File:WIP Lakes concept levelStructure 110518.png
+
* In essence, you paint phase offsets by hand, create a sway texture map in Substance Painter or Photoshop for the leaves, and the scripts handle the rest
 +
** You select a starting vertex, and the script crawls through the mesh, creating a gradient from root to top
 +
*** After this, the leaf texture is transferred to the marked leaves' vertex colors
  
−
</gallery>
+
=== Checking the Sway in Modo===
 +
* You can check assets sway vertex colors by:
 +
# Changing the view port to display vertex color
 +
# From the '''List''', select '''Other maps'''
 +
# In Other Maps, select the channel that has RGBA type (picture below showing this)
 +
#* Black color means less sway, and other colors work like in the picture on the top of this page<br/>
 +
[[File:vertex_color_in_modo.jpg|400px]]<br/>
  
−
= Where to Get the Best References =
+
'''Second uv channel'''<br/>
−
* You can find ideas everywhere, from '''movies''', '''documentaries''' or even your '''daily bus trips''' to work
+
* Vegetation needs to have second uv-channel for leaf_map, this enables the leafs to have sway as well
−
* '''Look around you''', study the formations of nature, geography and architecture with a level artist's point of view!
+
* To create a second uv-channel in Modo:
−
* There are tons of photo and art references online but don't forget you can also do some '''fieldwork''' yourself and take your own reference photos. When stumbling into an interesting location in your real life, don't forget to take in the place with all your senses, this you can't do with online materials.
+
# Lists → UV Maps click (new map)
−
* '''[https://www.pinterest.com Pinterest]''' is an excellent reference image site. You'll get a bunch of related images for each good reference image, and it's easy to end up with an impressive amount of open tabs brimming with reference ideas. The only downside is that you have to be logged in to use the site, which can be annoying, but still worth it.
+
# Rename it “leaf_map”
−
* '''[https://www.artstation.com/ Artstation]''' is another absolutely inspiring site for ideas. It's full of amazing art. Of course, with other people's art, it's very important to not copy stuff directly, but that should go without saying when using any reference. Make it your own!
+
# Right click on the Texture UV channel, press copy, right click → paste to the new “leaf_map” channel
 +
# Now you should have same UVs on both channels
 +
#* You might have to do changes in the second UV channel, so that the leaf UV islands are not touching each other, i.e. add padding
 +
#** You can have overlapping UV islands, but makes sure leaves have same direction in those cases
  
−
== Something to consider when using references ==
+
==== Backfaces ====
−
* Reference images from online are never a perfect representation of what is wanted for the final asset/level/product.
+
* All planes that will sway (e.g. vegetation) '''need to have backfaces'''
−
* For example, if the AD offers some reference images, they are meant to flesh out the general idea and point you in the right direction, but never to be copied directly.
+
* Simplest way to create these in Modo is to select all the planes' UV islands, copy paste the selection in the Modeling Window, and flip polygons
−
* This can be a bit tricky sometimes, as everybody will probably pick out different things from the same reference image.
+
** Note: '''Don't merge the vertices of the planes together''', they're easier to control that way
−
* If we used already existing reference material as it is, there would be no need for concept art, nor as much space for our own imagination or creativity. Most likely the end result wouldn't be very coherent and unique either.
+
** If you need to remove the backfaces, Modo’s “Mesh cleanup” function can do it
−
* Consider reference images as vague pointers and concepts, rather than pieces designed specifically for Trine games.
 
−
* Trine games are meant to be unique-looking - that needs original ideas, so it's never good practice to copy anything straight from a reference image.
 
−
* It's an important skill to know how to use the reference creatively to support your own imagination instead of letting the reference determine everything for you.
 
  
 +
=== Making Changes to Existing Sway Maps ===
 +
* If you need to make changes to an asset after sway has already been created for it, make sure that the sway and vertex colors still looks correct after your edits
 +
** E.g., welding triangles might break it, and create strong color change on some edge
 +
** For smaller broken vertex coloring issues you can do fixes yourself
 +
** Larger changes might require you to run the scripts again
 +
*** Larger changes done after sway can be e.g.:
 +
# Big rotations to branches or leafs
 +
# Big scale changes in the mesh
 +
* To fix those small vertex color issues you need a plugin for Modo, that enables you to pick color from the mesh
 +
** With the plugin you can paint correct vertex colors to any places where the color has broken, by color picking the right color from next to the area that has the colors broke
  
−
[[File:trine_4_lakes_and_rivers_reference_photos_by_charlotta_tiuri.jpg|800px]]
+
* You can also use the Sway Creator script to separate the color map into its components, and edit them separately
 +
** '''Note''' that if you are editing an fbx, the separate maps function won't work without running Mesh Cleanup with 'Merge Disco Values' '''only''' selected
 +
** The separator only works if the map's name is 'ah_swaycolor_complete'
 +
 
 +
[[File:broken_vertex_coloring.jpg|400px]]<br/>
 +
 +
* Tutorial on how to vertex paint in Modo
 +
{{#ev:youtube|https://www.youtube.com/watch?v=ABvI99U90tw}}
 +
 
 +
* Name the vertex color map you area painting on to be "color"
 +
** Otherwise color picking wont work
 +
* Make sure you have the model set to be visible in the item list
 +
* '''After editing an asset like this, always check in Editor that the sway still works!'''
 +
 
 +
== How to Make the Assets Sway in the Editor ==
 +
* Once the swaymaps are done, you need to make them work in the Editor
 +
 
 +
===Part A: Ensure the .fbxmodel resource supports sway to begin with===
 +
# Ensure '''View -> Resources (Ctrl+F4)''' and '''Properties (Ctrl+P)''' panels are open and visible.
 +
# Look for the .fbxmodel resource(s) you want to enable Sway on in the '''Resources panel''' and select them.
 +
# Enable '''AllowVertexColors''' in the .fbxmodel Resource Properties.
 +
## '''If''' it's already enabled and committed, you can skip the rest of this section.
 +
# Reprocess the resource after flipping the checkbox by Right-Click -> '''Process Resource(s)''' on the resource in the Resources panel, otherwise the changes may not apply.
 +
## Alternatively File -> '''Save resources''' should also reprocess the resource while also saving it.
 +
# Remember to '''save and commit''' this change.
 +
 
 +
===Part B: Creating and adding SwayComponent to the .fbxmodel type(s)===
 +
# Navigate to the .fbxmodel type(s) in the '''Types panel'''.
 +
# Select '''one''' of the .fbxmodels you want to add SwayComponents on
 +
# Right-Click and '''Add component type''' on the .fbxmodel type in the Types panel.
 +
# In the dialog that opens, '''search for SwayComponent'''
 +
# Look for a component that is '''closest''' to your needs, e.g. TreeSwayComponent for trees or VegetationSwayComponent for any grassy assets.
 +
# Select the closest candidate and 'then ''Add and inherit''' a new one.
 +
## Note: SwayComponent uses a different naming convention from 3D-assets in the type tree, please '''name the new component''' manually to match. E.g. for a set of poplar trees it could be something like a '''PoplarTreeSwayComponent''', or for meadow flower set it could be like a '''MeadowFlowerVegetationSwayComponent'''.
 +
## '''If you're not sure''', you can simply "Add" some existing component first and see how they play out before deciding, delete the component from the Type afterwards and repeat the process.
 +
# '''Ensure the asset works''' as intended by selecting it from the '''Types panel''' and placing it into the scene.
 +
## You can search for the newly inherited SwayComponent variation in the Types panel and tweak settings if needed. Mainly you'll find the '''Frequency, Amplitude, Direction and Leaf''' variations of that interesting. You can read more behind SwayComponent or ask animators or level artists for more info or tips.
 +
# Once you're satisfied enough, you can then '''select all the .fbxmodels''' in the Types panel you want to apply this to.
 +
# Right-Click the selected .fbxmodels and again '''Add component type'''
 +
# In the dialog that opens, search for the SwayComponent variation that was created. Select it and now press '''Add'''
 +
# The component has now been added to all the 3D-asset types. You can go through them and ensure they all work.
 +
# Once everything is in order, '''File -> Save Types'''
 +
# '''Commit''' all the .fbt files that were created or modified.

Latest revision as of 16:19, 28 July 2023

⬑ 3D Asset Workflow

Summary

  • This wiki page guides you through the process of how to:
  1. Create swaymaps
  2. Make them work in the Editor
  • The sway map is essential for any vegetation or foliage to appear moving in the wind
    • The way sway works in Editor is by using vertex color
    • Each color channel has a different function, separately they look like in the picture below
Sway map channels.jpg

Workflow Steps

Creating Swaymaps in Modo

  • Note: We use an in-house Modo script for creating sway map, and that is not listed on this public wiki page series
  • In essence, you paint phase offsets by hand, create a sway texture map in Substance Painter or Photoshop for the leaves, and the scripts handle the rest
    • You select a starting vertex, and the script crawls through the mesh, creating a gradient from root to top
      • After this, the leaf texture is transferred to the marked leaves' vertex colors

Checking the Sway in Modo

  • You can check assets sway vertex colors by:
  1. Changing the view port to display vertex color
  2. From the List, select Other maps
  3. In Other Maps, select the channel that has RGBA type (picture below showing this)
    • Black color means less sway, and other colors work like in the picture on the top of this page

Vertex color in modo.jpg

Second uv channel

  • Vegetation needs to have second uv-channel for leaf_map, this enables the leafs to have sway as well
  • To create a second uv-channel in Modo:
  1. Lists → UV Maps click (new map)
  2. Rename it “leaf_map”
  3. Right click on the Texture UV channel, press copy, right click → paste to the new “leaf_map” channel
  4. Now you should have same UVs on both channels
    • You might have to do changes in the second UV channel, so that the leaf UV islands are not touching each other, i.e. add padding
      • You can have overlapping UV islands, but makes sure leaves have same direction in those cases

Backfaces

  • All planes that will sway (e.g. vegetation) need to have backfaces
  • Simplest way to create these in Modo is to select all the planes' UV islands, copy paste the selection in the Modeling Window, and flip polygons
    • Note: Don't merge the vertices of the planes together, they're easier to control that way
    • If you need to remove the backfaces, Modo’s “Mesh cleanup” function can do it

Making Changes to Existing Sway Maps

  • If you need to make changes to an asset after sway has already been created for it, make sure that the sway and vertex colors still looks correct after your edits
    • E.g., welding triangles might break it, and create strong color change on some edge
    • For smaller broken vertex coloring issues you can do fixes yourself
    • Larger changes might require you to run the scripts again
      • Larger changes done after sway can be e.g.:
  1. Big rotations to branches or leafs
  2. Big scale changes in the mesh
  • To fix those small vertex color issues you need a plugin for Modo, that enables you to pick color from the mesh
    • With the plugin you can paint correct vertex colors to any places where the color has broken, by color picking the right color from next to the area that has the colors broke
  • You can also use the Sway Creator script to separate the color map into its components, and edit them separately
    • Note that if you are editing an fbx, the separate maps function won't work without running Mesh Cleanup with 'Merge Disco Values' only selected
    • The separator only works if the map's name is 'ah_swaycolor_complete'

Broken vertex coloring.jpg

  • Tutorial on how to vertex paint in Modo
  • Name the vertex color map you area painting on to be "color"
    • Otherwise color picking wont work
  • Make sure you have the model set to be visible in the item list
  • After editing an asset like this, always check in Editor that the sway still works!

How to Make the Assets Sway in the Editor

  • Once the swaymaps are done, you need to make them work in the Editor

Part A: Ensure the .fbxmodel resource supports sway to begin with

  1. Ensure View -> Resources (Ctrl+F4) and Properties (Ctrl+P) panels are open and visible.
  2. Look for the .fbxmodel resource(s) you want to enable Sway on in the Resources panel and select them.
  3. Enable AllowVertexColors in the .fbxmodel Resource Properties.
    1. If it's already enabled and committed, you can skip the rest of this section.
  4. Reprocess the resource after flipping the checkbox by Right-Click -> Process Resource(s) on the resource in the Resources panel, otherwise the changes may not apply.
    1. Alternatively File -> Save resources should also reprocess the resource while also saving it.
  5. Remember to save and commit this change.

Part B: Creating and adding SwayComponent to the .fbxmodel type(s)

  1. Navigate to the .fbxmodel type(s) in the Types panel.
  2. Select one of the .fbxmodels you want to add SwayComponents on
  3. Right-Click and Add component type on the .fbxmodel type in the Types panel.
  4. In the dialog that opens, search for SwayComponent
  5. Look for a component that is closest to your needs, e.g. TreeSwayComponent for trees or VegetationSwayComponent for any grassy assets.
  6. Select the closest candidate and 'then Add and inherit' a new one.
    1. Note: SwayComponent uses a different naming convention from 3D-assets in the type tree, please name the new component manually to match. E.g. for a set of poplar trees it could be something like a PoplarTreeSwayComponent, or for meadow flower set it could be like a MeadowFlowerVegetationSwayComponent.
    2. If you're not sure, you can simply "Add" some existing component first and see how they play out before deciding, delete the component from the Type afterwards and repeat the process.
  7. Ensure the asset works as intended by selecting it from the Types panel and placing it into the scene.
    1. You can search for the newly inherited SwayComponent variation in the Types panel and tweak settings if needed. Mainly you'll find the Frequency, Amplitude, Direction and Leaf variations of that interesting. You can read more behind SwayComponent or ask animators or level artists for more info or tips.
  8. Once you're satisfied enough, you can then select all the .fbxmodels in the Types panel you want to apply this to.
  9. Right-Click the selected .fbxmodels and again Add component type
  10. In the dialog that opens, search for the SwayComponent variation that was created. Select it and now press Add
  11. The component has now been added to all the 3D-asset types. You can go through them and ensure they all work.
  12. Once everything is in order, File -> Save Types
  13. Commit all the .fbt files that were created or modified.
Retrieved from "https://wiki.frozenbyte.com/index.php?title=Level_Art:_Ideas_for_New_Levels&oldid=980"