Benoit fouletier guillaume martin unity day- modern 2 d techniques-gce2014
Download as PPTX, PDF•5 likes•6,308 views
The document discusses modern 2D techniques for indie game development using Unity, emphasizing flat objects in a 3D environment and various rendering strategies. It highlights tools for asset creation, animation, and rendering effects, such as light blending and slice-based rendering. The presentation also addresses the advantages and challenges of these techniques, including scalability and the complexity of implementing volumetric lights.
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)
- 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
- 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()
- 32. Ribbon – Gettin’ creative… 2048 x 2048 4096 x 2048
- 33. Ribbon – Spiral Edition!
- 34. Ribbon – Mushroom Challenge
- 36. Bonus: AssetPostprocessor - PSD Plugin PSD Plugin http://psdplugin.codeplex.com
- 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
Editor's Notes
- #7: Shovel Knight, by Yacht Club Games
- #8: Donkey Kong Country: Tropical Freeze, by Retro Studios
- #9: Perspective + flat objects, lush textures
- #13: vidéo de création d’une carpet
- #14: vidéo de collision
- #21: This debug texture here is a little weird because there’s no alpha; usually the inside borders are supposed to fade out to blend with the filling texture.
- #27: vidéo de création d’un arbre
- #28: vidéo de collision
- #37: vidéo “produit fini”: montrer qu’on peut avoir des kilomètres de LD avec quelques assets