O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
Modern 2D Techniques 
for indie teams with Unity 
Benoit FOULETIER - @benblo42 
Guillaume MARTIN 
Swing Swing Submarine - ...
Swing Swing Submarine 
design code code art sound
Blocks That Matter 
• Mix Mario / Tetris / 
Minecraft 
• XNA on Xbox 
• Java port (!) for PC
Tetrobot and Co. 
• Spiritual sequel to 
Blocks That Matter 
with touch friendly 
controls 
• Pure puzzler 
• Unity 
• PC ...
Seasons after Fall
So... 2D?
So... 2D?
So... “modern 2D”? 
• Flat objects in a 3D world 
• Perspective rendering 
• Reusable assets 
• In-engine composition 
• O...
Been There Done That™ 
• UbiArt games* 
• Broken Age 
• Ori and the Blind Forest 
• Vanillaware 
• many others… 
* Benoit ...
The Asset Store & Elsewhere 
• Uni2D 
• Ferr2D 
• Animation: Spine, SmoothMoves, Puppet2D, ... 
• Paper2D (Unreal Engine 4...
Carpet
Carpet - LD
Carpet - Collider
So how do you make those?
Carpet Geometry 
• Fill mesh: 
triangle decomposition 
(Earclip from Farseer) 
• Outline mesh
Carpet - Fill texture
9-sliced texture
9-sliced texture, 2 tiles
9-sliced texture, inside corners
Double-9-sliced texture, aka The Donut
Double-9-sliced texture, a.k.a The Donut
Carpet - AssetPostprocessor 
OnPostprocessTexture()
Carpet - AssetPostprocessor 
OnPostprocessTexture()
Ribbon
Ribbon - LD
Ribbon – Texture 
Base Tile 1TileTile 2 
Tip 
== == ==
Ribbon - AssetPostprocessor 
OnPostprocessTexture()
Ribbon - AssetPostprocessor 
OnPostprocessTexture()
Ribbon - AssetPostprocessor 
OnPostprocessTexture()
Ribbon – Geometry
Ribbon – Gettin’ creative… 
2048 
x 
2048 
4096 x 2048
Ribbon – Spiral Edition!
Ribbon – Mushroom Challenge
Putting it together
Bonus: AssetPostprocessor - PSD Plugin 
PSD Plugin 
http://psdplugin.codeplex.com
Bonus: Carpet Components
Animation
Animation 
• Skeletal animation (sprite puppet) 
• Deformable sprites (Bezier patch) 
• Sprite-swap / flipbook body parts ...
Animation – PSD layout
Animation - Spritesheet 
AssetPostprocessor 
AssetPostprocessor with PSD Plugin 
http://psdplugin.codeplex.com
Animation Rig – Skeleton
Animation Rig – Patch Sprite
Rendering
background 2 
background 1 
playground 
foreground 
Rendering: Slices 
• Each slice is blending with the previous ones 
• ...
Rendering: Per Slice Effect 
Each slice can: 
• Have its own lights 
• Make some effects (blur, distortion, etc) 
• Have c...
Rendering: Lighting & Vector Masks 
• Carpet geometry 
• No texture necessary 
• Fade out with vertex color 
on outline
Rendering: Lighting 
• Front light: simulate diffuse lighting, blend with ambiant color 
• Back light: simulate fresnel li...
Rendering passed for 1 slice: 
• Light pass: 
render back (a) and front (b) 
light buffers (~G-Buffers) 
• Objects pass: 
...
Rendering: Lighting 
(a) 
(c) 
x
(b) 
(d) 
x 
Rendering: Lighting
Rendering: Lighting 
+ 
(a) x (c) 
(b) x (d)
Rendering: Post Process 
• Post Process consists mainly of Bloom (HDR on) 
• Color remap is somthing we will certainly use
Rendering: Lighting, Pros and Cons 
Pros: 
• Scalable (unlimited number of 
lights) 
• High blending control 
• Reuse carp...
Rendering: Lighting, Pros and Cons 
Pros: 
• Scalable (unlimited number of 
lights) 
• High blending control 
• Reuse carp...
Rendering: Sorting 
Using Order in Layer: 
• Maintain a list of RenderItems (a RenderItem linked to each Renderer) 
Most s...
Rendering: Implementation & impovements 
Current implementation based on: 
• Renderer.sortingOrder 
• GameObject.layer 
• ...
Scene Editing
Questions? 
Benoit FOULETIER - @benblo42 
Guillaume MARTIN 
Swing Swing Submarine - @swingswingsub 
Unity Day – GameConnec...
Benoit fouletier guillaume martin   unity day- modern 2 d techniques-gce2014
Benoit fouletier guillaume martin   unity day- modern 2 d techniques-gce2014
Próximos SlideShares
Carregando em…5
×

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)

  • Seja o primeiro a comentar

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

×