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

1. Modern 2D Techniques for indie teams with Unity Benoit FOULETIER - @benblo42 Guillaume MARTIN Swing Swing Submarine - @swingswingsub Unity Day – GameConnection Europe 2014

2. Swing Swing Submarine design code code art sound

3. Blocks That Matter • Mix Mario / Tetris / Minecraft • XNA on Xbox • Java port (!) for PC

4. Tetrobot and Co. • Spiritual sequel to Blocks That Matter with touch friendly controls • Pure puzzler • Unity • PC / Wii U / mobile (soon)

5. Seasons after Fall

6. So... 2D?

7. So... 2D?

8. So... “modern 2D”? • Flat objects in a 3D world • Perspective rendering • Reusable assets • In-engine composition • Organic design (no grids)

9. Been There Done That™ • UbiArt games* • Broken Age • Ori and the Blind Forest • Vanillaware • many others… * Benoit worked on Rayman Origins & Legends

10. The Asset Store & Elsewhere • Uni2D • Ferr2D • Animation: Spine, SmoothMoves, Puppet2D, ... • Paper2D (Unreal Engine 4)

11. Carpet

12. Carpet - LD

13. Carpet - Collider

14. So how do you make those?

15. Carpet Geometry • Fill mesh: triangle decomposition (Earclip from Farseer) • Outline mesh

16. Carpet - Fill texture

17. 9-sliced texture

18. 9-sliced texture, 2 tiles

19. 9-sliced texture, inside corners

20. Double-9-sliced texture, aka The Donut

21. Double-9-sliced texture, a.k.a The Donut

22. Carpet - AssetPostprocessor OnPostprocessTexture()

23. Carpet - AssetPostprocessor OnPostprocessTexture()

24. Ribbon

25. Ribbon - LD

26. Ribbon – Texture Base Tile 1TileTile 2 Tip == == ==

27. Ribbon - AssetPostprocessor OnPostprocessTexture()

30. Ribbon – Geometry

31. Ribbon – Gettin’ creative… 2048 x 2048 4096 x 2048

32. Ribbon – Spiral Edition!

33. Ribbon – Mushroom Challenge

34. Putting it together

35. Bonus: AssetPostprocessor - PSD Plugin PSD Plugin http://psdplugin.codeplex.com

36. Bonus: Carpet Components

37. Animation

38. Animation • Skeletal animation (sprite puppet) • Deformable sprites (Bezier patch) • Sprite-swap / flipbook body parts • Uses Unity animation, Mecanim etc.

39. Animation – PSD layout

40. Animation - Spritesheet AssetPostprocessor AssetPostprocessor with PSD Plugin http://psdplugin.codeplex.com

41. Animation Rig – Skeleton

42. Animation Rig – Patch Sprite

43. Rendering

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. Rendering: Per Slice Effect Each slice can: • Have its own lights • Make some effects (blur, distortion, etc) • Have custom ambiant color

46. Rendering: Lighting & Vector Masks • Carpet geometry • No texture necessary • Fade out with vertex color on outline

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. 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. Rendering: Lighting (a) (c) x

50. (b) (d) x Rendering: Lighting

51. Rendering: Lighting + (a) x (c) (b) x (d)

52. Rendering: Post Process • Post Process consists mainly of Bloom (HDR on) • Color remap is somthing we will certainly use

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. 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. 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. 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. Scene Editing

58. Questions? Benoit FOULETIER - @benblo42 Guillaume MARTIN Swing Swing Submarine - @swingswingsub Unity Day – GameConnection Europe 2014