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)

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

23. Carpet - AssetPostprocessor
OnPostprocessTexture()

24. Carpet - AssetPostprocessor
OnPostprocessTexture()

25. Ribbon

26. Ribbon - LD

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

28. Ribbon - AssetPostprocessor
OnPostprocessTexture()

29. Ribbon - AssetPostprocessor
OnPostprocessTexture()

30. Ribbon - AssetPostprocessor
OnPostprocessTexture()

31. Ribbon – Geometry

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

33. Ribbon – Spiral Edition!

34. Ribbon – Mushroom Challenge

35. Putting it together

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

37. Bonus: Carpet Components

38. Animation

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

40. Animation – PSD layout

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

42. Animation Rig – Skeleton

43. Animation Rig – Patch Sprite

44. Rendering

45. 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

46. Rendering: Per Slice Effect
Each slice can:
• Have its own lights
• Make some effects (blur, distortion, etc)
• Have custom ambiant color

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

48. Rendering: Lighting
• Front light: simulate diffuse lighting, blend with ambiant color
• Back light: simulate fresnel lighting, reveals details
+ =
Front light Back light Combine

49. 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
+

50. Rendering: Lighting
(a)
(c)
x

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

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

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

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

55. 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)

56. 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

57. 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)

58. Scene Editing

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