Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Benoit fouletier guillaume martin unity day- modern 2 d techniques-gce2014

Using lessons learned from working on AAA 2D games, a 4-strong indie team set out to create a complete pipeline for creating modern 2D games with an organic feel and a high level of polish... on indie-scale resources.
The tools and techniques developed to reach that ambitious goal will be presented, from the innovative animation system, the terrain, vegetation and level art system, to the effective but powerful rendering model, and more.

Intended audience & prerequisites: Anyone working on a 2D game: programmers, animators, level designers, level artists.
The talk will be of particular interest to teams using Unity, but rather than being purely technical, the talk will outline principles that can be applied in any engine.

Session takeaway: I believe 2D has a great future ahead of her, and that we can do much more with it. I intend to demonstrate how to improve the production pipeline, and invest in tools to become more technical the way 3D does, while retaining the unique advantages of 2D.

Game Credits:
Rayman Origins (Ubisoft Montpellier)
Rayman Legends (Ubisoft Montpellier)
Tetrobot and Co. (Swing Swing Submarine)
Seasons After Fall [working title] (Swing Swing Submarine)

  • Login to see the comments

Benoit fouletier guillaume martin unity day- modern 2 d techniques-gce2014

  1. 1. Modern 2D Techniques for indie teams with Unity Benoit FOULETIER - @benblo42 Guillaume MARTIN Swing Swing Submarine - @swingswingsub Unity Day – GameConnection Europe 2014
  2. 2. Swing Swing Submarine design code code art sound
  3. 3. Blocks That Matter • Mix Mario / Tetris / Minecraft • XNA on Xbox • Java port (!) for PC
  4. 4. Tetrobot and Co. • Spiritual sequel to Blocks That Matter with touch friendly controls • Pure puzzler • Unity • PC / Wii U / mobile (soon)
  5. 5. Seasons after Fall
  6. 6. So... 2D?
  7. 7. So... 2D?
  8. 8. So... “modern 2D”? • Flat objects in a 3D world • Perspective rendering • Reusable assets • In-engine composition • Organic design (no grids)
  9. 9. Been There Done That™ • UbiArt games* • Broken Age • Ori and the Blind Forest • Vanillaware • many others… * Benoit worked on Rayman Origins & Legends
  10. 10. The Asset Store & Elsewhere • Uni2D • Ferr2D • Animation: Spine, SmoothMoves, Puppet2D, ... • Paper2D (Unreal Engine 4)
  11. 11. Carpet
  12. 12. Carpet - LD
  13. 13. Carpet - Collider
  14. 14. So how do you make those?
  15. 15. Carpet Geometry • Fill mesh: triangle decomposition (Earclip from Farseer) • Outline mesh
  16. 16. Carpet - Fill texture
  17. 17. 9-sliced texture
  18. 18. 9-sliced texture, 2 tiles
  19. 19. 9-sliced texture, inside corners
  20. 20. Double-9-sliced texture, aka The Donut
  21. 21. Double-9-sliced texture, a.k.a The Donut
  22. 22. Carpet - AssetPostprocessor OnPostprocessTexture()
  23. 23. Carpet - AssetPostprocessor OnPostprocessTexture()
  24. 24. Ribbon
  25. 25. Ribbon - LD
  26. 26. Ribbon – Texture Base Tile 1TileTile 2 Tip == == ==
  27. 27. Ribbon - AssetPostprocessor OnPostprocessTexture()
  28. 28. Ribbon - AssetPostprocessor OnPostprocessTexture()
  29. 29. Ribbon - AssetPostprocessor OnPostprocessTexture()
  30. 30. Ribbon – Geometry
  31. 31. Ribbon – Gettin’ creative… 2048 x 2048 4096 x 2048
  32. 32. Ribbon – Spiral Edition!
  33. 33. Ribbon – Mushroom Challenge
  34. 34. Putting it together
  35. 35. Bonus: AssetPostprocessor - PSD Plugin PSD Plugin http://psdplugin.codeplex.com
  36. 36. Bonus: Carpet Components
  37. 37. Animation
  38. 38. Animation • Skeletal animation (sprite puppet) • Deformable sprites (Bezier patch) • Sprite-swap / flipbook body parts • Uses Unity animation, Mecanim etc.
  39. 39. Animation – PSD layout
  40. 40. Animation - Spritesheet AssetPostprocessor AssetPostprocessor with PSD Plugin http://psdplugin.codeplex.com
  41. 41. Animation Rig – Skeleton
  42. 42. Animation Rig – Patch Sprite
  43. 43. Rendering
  44. 44. background 2 background 1 playground foreground Rendering: Slices • Each slice is blending with the previous ones • Overdraw land! • Overdraw can be limited with Z prepass
  45. 45. Rendering: Per Slice Effect Each slice can: • Have its own lights • Make some effects (blur, distortion, etc) • Have custom ambiant color
  46. 46. Rendering: Lighting & Vector Masks • Carpet geometry • No texture necessary • Fade out with vertex color on outline
  47. 47. Rendering: Lighting • Front light: simulate diffuse lighting, blend with ambiant color • Back light: simulate fresnel lighting, reveals details + = Front light Back light Combine
  48. 48. Rendering passed for 1 slice: • Light pass: render back (a) and front (b) light buffers (~G-Buffers) • Objects pass: while rendering objects, compute back mask (c) and front pixel color (d). Access light buffers to know pixel lighting (e) • Post slice effect can occurs (blur, distortion) Repeat the process for all slices (e) Rendering: Lighting (a) (c) x (b) (d) x +
  49. 49. Rendering: Lighting (a) (c) x
  50. 50. (b) (d) x Rendering: Lighting
  51. 51. Rendering: Lighting + (a) x (c) (b) x (d)
  52. 52. Rendering: Post Process • Post Process consists mainly of Bloom (HDR on) • Color remap is somthing we will certainly use
  53. 53. Rendering: Lighting, Pros and Cons Pros: • Scalable (unlimited number of lights) • High blending control • Reuse carpet • Don’t need precise shapes • Sprites can be used if precision needed
  54. 54. Rendering: Lighting, Pros and Cons Pros: • Scalable (unlimited number of lights) • High blending control • Reuse carpet • Don’t need precise shapes • Sprites can be used if precision needed • Slices decomposition make scene edition very clear Cons: • Need « back mask » (we don’t have normals) • Hard to make volumetric lights (will require extra buffers) • Lights have no orientation (will require extra buffers) • Slices decomposition have some limitation (a light or effect will at least affect the whole slice)
  55. 55. Rendering: Sorting Using Order in Layer: • Maintain a list of RenderItems (a RenderItem linked to each Renderer) Most significant bit Least significant bit • Sort the list based on a custom sorting weight: • Inject the index in the list in Order In Layer before rendering Front light Z position « sub object order » Hash based on Renderer
  56. 56. Rendering: Implementation & impovements Current implementation based on: • Renderer.sortingOrder • GameObject.layer • Camera.clearFlags Camera.targetTexture Camera.cullingMask Camera.Render Front light Improvements: • CommandBuffer (Unity5)? Will allow a better control on rendering sequence… … but we will have to reimplement things (culling) … and stuff in SceneView will be broken (picking)
  57. 57. Scene Editing
  58. 58. Questions? Benoit FOULETIER - @benblo42 Guillaume MARTIN Swing Swing Submarine - @swingswingsub Unity Day – GameConnection Europe 2014

×