1. Modern 2D Techniquesfor indie teams with UnityBenoit FOULETIER - @benblo42Guillaume MARTINSwing Swing Submarine - @swingswingsubUnity Day GameConnection Europe 2014

2. Swing Swing Submarinedesign 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 toBlocks That Matterwith touch friendlycontrols 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 onRayman 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 - AssetPostprocessorOnPostprocessTexture() 23. Carpet - AssetPostprocessorOnPostprocessTexture() 24. Ribbon 25. Ribbon - LD 26. Ribbon TextureBase Tile 1TileTile 2Tip== == == 27. Ribbon - AssetPostprocessorOnPostprocessTexture() 28. Ribbon - AssetPostprocessorOnPostprocessTexture() 29. Ribbon - AssetPostprocessorOnPostprocessTexture() 30. Ribbon Geometry 31. Ribbon Gettin creative2048x20484096 x 2048 32. Ribbon Spiral Edition! 33. Ribbon Mushroom Challenge 34. Putting it together 35. Bonus: AssetPostprocessor - PSD PluginPSD Pluginhttp://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 - SpritesheetAssetPostprocessorAssetPostprocessor with PSD Pluginhttp://psdplugin.codeplex.com 41. Animation Rig Skeleton 42. Animation Rig Patch Sprite 43. Rendering 44. background 2background 1playgroundforegroundRendering: Slices Each slice is blending with the previous ones Overdraw land! Overdraw can be limited with Z prepass 45. Rendering: Per Slice EffectEach 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 coloron 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, computeback 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)xRendering: 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 ConsPros: Scalable (unlimited number oflights) High blending control Reuse carpet Dont need precise shapes Sprites can be used if precisionneeded 54. Rendering: Lighting, Pros and ConsPros: Scalable (unlimited number oflights) High blending control Reuse carpet Dont need precise shapes Sprites can be used if precisionneeded Slices decomposition makescene edition very clearCons: Need back mask (we donthave normals) Hard to make volumetric lights(will require extra buffers) Lights have no orientation (willrequire extra buffers) Slices decomposition havesome limitation (a light oreffect will at least affect thewhole slice) 55. Rendering: SortingUsing 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 renderingFront lightZ position sub object order Hash based on Renderer 56. Rendering: Implementation & impovementsCurrent implementation based on: Renderer.sortingOrder GameObject.layer Camera.clearFlagsCamera.targetTextureCamera.cullingMaskCamera.RenderFront lightImprovements: CommandBuffer (Unity5)?Will allow a better control onrendering sequence but we will have toreimplement things (culling) and stuff in SceneView will bebroken (picking) 57. Scene Editing 58. Questions?Benoit FOULETIER - @benblo42Guillaume MARTINSwing Swing Submarine - @swingswingsubUnity Day GameConnection Europe 2014