Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

NextGenSprites – Modular Shader for Sprites -> Reflections, Liquid, Dissolve & more!

Discussion in 'Assets and Asset Store' started by garrido86, Nov 3, 2015.

  1. garrido86

    garrido86

    Joined:
    Dec 17, 2013
    Posts:
    233



    Hey Everybody,


    I like to present you my Shader-Set for 2D Sprites on which I have been working on lately and it is called NextGenSprites.

    It comes with many Features and I went the extra mile to make this Shader modular, which means that you can toggle any Shader Feature to save performance.

    But what are those Shader Features? At launch the Standard Shader will have:

    • Curvature (Normal mapping)
    • Reflection (Screenspace Projected)
    • Emission
    • Transmission
    • Dissolve (with Edge Emission)






    These features have many properties and even abilities for masking!
    The Standard Shader also comes in 3 Lighting Modes: Multi Lit, Single Lit and Unlit(limited features).

    Furthermore you get 3 super cool FX Shaders for Sprites included:

    • Glass
    • Lava
    • Liquid



    To make development more easy, I have included some goodies for you:

    • Material Creator Widget
    • Easy Material Editor
    • Helper Methods for Scripting
    • Playmaker Actions
    • Bootstrap Assets
    And last but not least, I have also built an Online Wiki for Documentation and Video Tutorials.

    NextGenSprites is now available at the AssetStore:


    Please, if you have any questions, go ask me! :)
     
    Last edited: Nov 13, 2015
  2. Demigiant

    Demigiant

    Joined:
    Jan 27, 2011
    Posts:
    3,239
    This asset is just awesome! Ah! First! :)
     
    garrido86 likes this.
  3. garrido86

    garrido86

    Joined:
    Dec 17, 2013
    Posts:
    233
    Thanks, but I also have to mention that thanks to DoTweens superb Material support, all Shader Properties can be animated in very creative ways! I even have made a Video Tutorial on this:
     
    theANMATOR2b and Demigiant like this.
  4. sicga123

    sicga123

    Joined:
    Jan 26, 2011
    Posts:
    782
    Just purchased it from itchio. Looks like a really good package. Turned up just at the right time.
     
    garrido86 likes this.
  5. garrido86

    garrido86

    Joined:
    Dec 17, 2013
    Posts:
    233
    I am glad that you like this! One thing I didn't mention is, that you can also use the Shader for UI. You just need to set the Canvas Render Mode to World Space :)


    And then on the Image Component you assign a Material with the NGS Shader.
     
    Last edited: Nov 4, 2015
    Demigiant likes this.
  6. sicga123

    sicga123

    Joined:
    Jan 26, 2011
    Posts:
    782
    Thanks for pointing that out. I'll start using this package next week when I'm polishing the art for my game, it will definitely help up the ante on how appealing the art is.
     
  7. garrido86

    garrido86

    Joined:
    Dec 17, 2013
    Posts:
    233
    I have made a basic tutorial for creating Normal Maps and I hope it helps on your creative work together with NGS.


    A Tutorial for the popular Quixel Suite is also on the works! Furthermore I am currently working on some new Features for NGS 1.1 - I hope to show something soon :)

    PS: The Intro you see on all NGS Videos where actually made with NGS and Unity :)
     
    Demigiant likes this.
  8. garrido86

    garrido86

    Joined:
    Dec 17, 2013
    Posts:
    233
    Late night update!
    I have been experimenting with extra Sprite Layers for NGS upcoming 1.1 release:


    So far I have two additional Sprite "Layers" to the Main Sprite and as you can see on the right side, the masking can be controlled by a single image. Next step is adding scrolling to these extra Layers, this could yield some awesome effects :)
     
    Last edited: Nov 7, 2015
    superwendel likes this.
  9. garrido86

    garrido86

    Joined:
    Dec 17, 2013
    Posts:
    233
    Hey guys,

    I am happy to announce that NextGenSprites is finally live on the AssetStore:
    http://u3d.as/kaY

    And with that, I am already working on NGS 1.1 new update:
    1. Multi Layer Sprite with Scrolling:
    This adds two additional Sprites that can also be scrolled.
    No extra Draw Calls or Materials!

    2. Multi Channel Emission Masking with Pulse/Fade Animation
    This allows you to tint your Sprite with 3 different channels individually. The 3rd channel also sports a Pulse Animation!


    NGS 1.1 will be submitted soon to the AssetStore.
    There also new Video Tutorials coming, stay tuned!
     
    Last edited: Nov 13, 2015
  10. Emre_U

    Emre_U

    Joined:
    Jan 27, 2015
    Posts:
    49
    I am considering buying your asset ( I am especially interested in normal maps) but I have a few questions:

    1- Can I use Unity's automatic sprite sheet feature for your asset.

    2- If I have a series of sprites for animation (ofc) should I create a normal map for each of the sprites? And normal maps shader works in that case?

    3- This like a summary but can I create sprites (animation) like these


    I am interested in your asset because I am a total noob in shaders and I will most probably will require your help (at least at start)

    Regards & Peace!
     
  11. garrido86

    garrido86

    Joined:
    Dec 17, 2013
    Posts:
    233
    When it comes to Sprite Animation with Normal mapping, you need indeed a Normal Map for each corresponding Animation Frame. This means that you need to make a separate Sprite-sheet for the Normal Maps.
    But if you use a deformation/spline based animation like RageToolsPro, Anima2D or Puppet2D, then you can use a single Normal Map and happily pack (via Unitys sprite sheet maker) everything into a single Sprite sheet.

    I am working on some Video Tutorials for this specify which should clarify everything.

    No worries, I love to help :)
     
    Last edited: Nov 18, 2015
    Emre_U likes this.
  12. biscito

    biscito

    Joined:
    Apr 3, 2013
    Posts:
    138
    hi, i bought your asset yesterday,

    very cool!

    but i've s small problem, can i scroll picture with transparent ? that or be able to scroll the alpha
     
    Last edited: Nov 22, 2015
  13. garrido86

    garrido86

    Joined:
    Dec 17, 2013
    Posts:
    233
    Hey Everybody,

    I have two important news:

    First: I am working on a System for saving "Sprite and Property Collections" as Assets on your Project. This will be especially practical for Animations where you use separate Sprite Sheets for the main Sprite. I will talk about this at a later point.

    Second and the most important: I have reworked and improved the Multi Sprite Layer feature! The alpha (ie transparency) channels are now supported natively which in turns mean that the Multi Layer Mask is not needed at all. With that, the Main Sprite can now also be scrolled! All this happens without any extra draw calls.

    So please remember, with the next 1.1.2 release, the Multi Layer Mask will be removed from the Shader, Editor and Scripts.

    1.1.2 probably won't be live on the Asset Store before the end of next week (Submission review currently takes more than 5 business days :().

    If you need these new features now - please contact me via PM with your Invoice No. and I will send you the new 1.1.2 Package when it's finished.
     
    abatcat, biscito and superwendel like this.
  14. Emre_U

    Emre_U

    Joined:
    Jan 27, 2015
    Posts:
    49
    Hi Ruben,

    I found the properties oh boy it is soooo easy now :) I am just swapping around my normal map all around, happily I am developing my game for pc but it is all needed for me right now.

    A new question. How can I paint the same sprite's cloths with different colors. Only tint will not save me. I think I need to add a mask layer and then tint it maybe?
     
  15. garrido86

    garrido86

    Joined:
    Dec 17, 2013
    Posts:
    233
    Ah so you want only certain areas of your sprite get tinted? Then you are right, for this task the Emission Mask is your friend :)
     
  16. garrido86

    garrido86

    Joined:
    Dec 17, 2013
    Posts:
    233
    Hey Folks,
    I am currently finishing 1.2 and I made a Video Walkthrough through all features:

    Please enjoy :)
     
  17. superwendel

    superwendel

    Joined:
    Jun 18, 2013
    Posts:
    105
    Looks great! The pulse emission will help bring my sprites to life even further.

    The scrolling sprites is a nice feature. Is there any kind of performance benefit to using the scrolling feature directly in the shader as opposed to scrolling the texture through script?

    The MultiLayer also looks fantastic. I'm excited to try it out!

    What is your estimate on 1.2's release? (itch.io purchase here)
     
  18. garrido86

    garrido86

    Joined:
    Dec 17, 2013
    Posts:
    233
    The Scrolling for the main Sprite is currently indeed just a convenience, but to me it seems important giving Artist such essential tools build into the shader. Regarding performance, Scrolling by the Shader is faster than by scripting but it is not really worth mentioning.

    Yeah I am myself quite happy with it and it yields a lot of potential :)

    So far I am kinda positive with a releases this Friday for itch.io customers :)
     
  19. garrido86

    garrido86

    Joined:
    Dec 17, 2013
    Posts:
    233
    NextGenSprites 1.2 is now online on itch.io!

    The difference to the last Beta Version is:
    • More Bug Fixes
    • Moved more operations to the Vertex Shader
    • Added a Manager and Controller Class for Properties Collections
    • You can now import and export Propertie Collections directly from the Material Inspector
    AssetStore release will follow ASAP!

    Edit
    Version 1.2 has now been submitted to the AssetStore. Now it's a matter of waiting. In the meantime I will work on the Documentation, Tutorials and a new interactive Demo which will be included in the next release :)
     
    Last edited: Dec 5, 2015
    superwendel likes this.
  20. garrido86

    garrido86

    Joined:
    Dec 17, 2013
    Posts:
    233
    1.2 is now live on the AssetStore :)

    Change log:

    * Liquid and Lava can now Scroll by World Position or Time(Auto scrolling)
    * Added Scriptable Object of type "Properties Collection" to store variations of Shader Properties
    * Added a custom Icon for the Properties Collection
    * Properties Collection can be created from the Toolbar, NGS Widget or the Material Inspector
    * Ability to generate a Properties Collection directly from an existing Material
    * Inherit from "Properties Collection Base" for basic Properties Collection handling via scripting
    * Added "Properties Collection Manager" to update the Material from AnimationEvents/Scripts/PlayMaker # Invoke: UpdateMaterial(collectionId)
    * Multi Layer supports now Transparency without the need for a helper Mask
    * Layers can now be individually Tinted
    * Added Stencil (RGB)Masking as a "Soft"-feature for Multi Layer
    * Added an additional 4th Sprite Layer (going now from 0 to 4)
    * Emission operates now by default with Multi Channel Masking
    * Scrolling added as a "Soft"-Shader Feature
    * Emission Pulse Animation added as a "Soft"-Shader Feature * Pulse Animation is now present on all 3 Emission Channels

    UPDATE:
    * Following Features have been changed to "Soft-"Shader Features:
    - Double Sided
    - Pixel Snapping
    - Multi Sprite Layer

    * Added "ShaderFeatureRuntime" Enum to return only Shader Keywords that can be toggled at runtime
    * Removed "Multi Layer Sprite Mask" property from Shaders, Scripts and Inspectors
    * Removed "Multi Channel Emission" Shader Key "EMISSION_MULTILAYER_ON"
    * Renamed "_EmissionToggleAnimation3" to "_EmissionBlendAnimation3"
    * New Shader Properties added to all related Classes and Inspectors
    * Changed PlayMaker Action "SetShaderFeature" Enum to ShaderFeatureRuntime
     
    Emre_U and superwendel like this.
  21. garrido86

    garrido86

    Joined:
    Dec 17, 2013
    Posts:
    233
    Happy new year everybody!

    NextGenSprites has been updated to 1.2.1 with mostly bug fixes and changes here and there, though there is one new feature and that is a method to change materials smoothly from a Properties Collection.
    This Update is already online on itch.io and it is also awaiting for approval from the AssetStore Team.

    Changelog

    +++Please Note+++

    If you come from a previous Version, you may need to delete:

    • *NextGenSprites/Utils/Helpers/PropertiesCollectionManager.cs
    • *NextGenSprites/Utils/Helpers/PropertiesCollectionSoloManager.cs

    NEW

    • Added a method to update materials smoothly by a supplied duration to the Properties Collection Handler and Controller
    UPDATE

    • Renamed Scripts related to Properties Collection to be more explicit about their purpose
    • Some simple custom inspectors for the Properties Collection Proxy classes
    FIX

    • Errors when invoking some buttons on the extras Panel from the Material Inspector
    • Preferences are now saved per Project and not global
    • Several smaller bug fixes on Shaders and Scripts
     
    superwendel and Demigiant like this.
  22. Demigiant

    Demigiant

    Joined:
    Jan 27, 2011
    Posts:
    3,239
    Happy new year!!!! :)
     
    garrido86 likes this.
  23. Fabioisriva

    Fabioisriva

    Joined:
    Feb 3, 2016
    Posts:
    15
    Hello are you planning to integrating with DOTween pro?
     
  24. garrido86

    garrido86

    Joined:
    Dec 17, 2013
    Posts:
    233
    Do you have anything specific in mind? I could add a helper function for tweening Shader property values and also transitions between two materials.

    edit
    There actually is already float and color tweening in dotweening, check DoTweens docu :)
    Example:
    Code (CSharp):
    1. //Tween over 5 seconds the Blur reflection to 0.1
    2. myMaterial.DOFloat(0.1f, ShaderFloat.ReflectionBlur.GetString(), 5f);
    edit2
    I have now requested the DoTween author to add Material transition tweening. Let's hope it comes soon :)
     
    Last edited: Feb 4, 2016
  25. Fabioisriva

    Fabioisriva

    Joined:
    Feb 3, 2016
    Posts:
    15
    :)
    Yes my bad i don't read the doc properly,anyway material transition sounds wonderful
     
  26. garrido86

    garrido86

    Joined:
    Dec 17, 2013
    Posts:
    233
    Your wish shall come true, I have worked today on the material transition and already submitted my new version to the AssetStore :) To use the feature, you need to instantiate an DualMaterial object which you feed two source materials.
    DualMaterials returns the lerped material and the lerp itself can be set via the LerpMaterial method. And from here you can use a Tweening Engine like DoTween to handle the lerping animation.

    I have included a simple demo scenes which explains better how it works. I will also update the wiki asap.

    Please note that DualMaterial only takes the float and color values, textures currently are not supported.

    Some might wonder why I went all the length to implement my own material lerping if unity already provides a Material Lerping feature? Well, the problem is that Unity's lerping method only interpolates internally with an easeInOut easing and this obviously breaks other Tweening Engines.

    Oh and before I forget to mention;

    NextGenSprites is currently 75% Off on sale!

    edit
    I have added an article about the Dual Material to the wiki.
     
    Last edited: Feb 10, 2016
  27. Fabioisriva

    Fabioisriva

    Joined:
    Feb 3, 2016
    Posts:
    15
    Yeayyyyy u made my day...
     
  28. christougher

    christougher

    Joined:
    Mar 6, 2015
    Posts:
    558
    I just purchased this and was super excited and hoped to be able to integrate this on my UI but am using screen space overlay... which looks to be a deal breaker right? There's no way to have these shaders on a screen space overlay or camera correct? Getting a world space canvas to scale for multiple resolutions seems like a major headache... any pointers on how best to do this because I must say these effects are really freaking sweat.

    Edit- ok, never mind, it looks like it works fine with screen space camera. :) saweeet!
     
    Last edited: Feb 17, 2016
    garrido86 likes this.
  29. garrido86

    garrido86

    Joined:
    Dec 17, 2013
    Posts:
    233
    I am glad you got it resolved, if you have any other issue, questions or requests, just let know! :)
     
  30. AndresSepulveda

    AndresSepulveda

    Joined:
    Mar 12, 2014
    Posts:
    52
    Hi Garrido
    i Just bought your asset and i have a problem.
    I am making a isometric game and I had my sprites with a custom shader for solving the z depth /sorting layer issue.
    The problem is that i can't use this shader with your asset because i can't have both running.

    How Could i fix this ?
     
    Last edited: Feb 18, 2016
  31. AndresSepulveda

    AndresSepulveda

    Joined:
    Mar 12, 2014
    Posts:
    52
    The problem happens this way.
    As seen in picture i have 2 sprites that act as background (horizontal) and a character sprite who is vertical.
    the 2 background sprites, the island and the ocean has the nextgen shader. the character has the sprite default shader and as you can see, it looks good.

    But when i activate the nextgen shader in the character it disappears, covered by the 2 background images.

    i can fix it via script with this code


    Code (CSharp):
    1.          GetComponent<SpriteRenderer>().sortingOrder = Mathf.RoundToInt(transform.position.y * 100f) ;
    2.  
    but i hope i could solve this with shaders like I had it before.
    By the way no possibility of cast shadows?

    https://github.com/anlev/Unity-2D-Sprite-cast-and-receive-shadows
     

    Attached Files:

  32. garrido86

    garrido86

    Joined:
    Dec 17, 2013
    Posts:
    233
    Do you mind to send me your old custom shader? Then I can look into it :)

    Edit

    To clarify, you can already cast shadows with NGS Shaders, that's no problem. Just enable Shadow Casting on the Sprite Renderer and you are good to go. But receiving Shadows is not possible but you can always use a plane.
     
    Last edited: Feb 18, 2016
  33. garrido86

    garrido86

    Joined:
    Dec 17, 2013
    Posts:
    233
    Great news!
    I have submitted NextGenSprites 1.3 to the AssetStore and itch.io will follow tomorrow.

    What is new?
    -Shadow Receiving(!)
    -Unlit MegaStack (stack up to 10 Sprites)

    See for yourself:
     
  34. AndresSepulveda

    AndresSepulveda

    Joined:
    Mar 12, 2014
    Posts:
    52
    Code (CSharp):
    1. Shader "Sprites/Bumped Diffuse with Shadows"
    2. {
    3.     Properties
    4.     {
    5.         [PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
    6.         _BumpMap ("Normalmap", 2D) = "bump" {}
    7.         _Color ("Tint", Color) = (1,1,1,1)
    8.         [MaterialToggle] PixelSnap ("Pixel snap", Float) = 0
    9.                 _Cutoff ("Shadow Alpha Cutoff", Range (0,1)) = 0.5
    10.  
    11.     }
    12.  
    13.     SubShader
    14.     {
    15.         Tags
    16.         {
    17.             "Queue"="AlphaTest"
    18.             "IgnoreProjector"="True"
    19.             "RenderType"="TransparentCutOut"
    20.             "PreviewType"="Plane"
    21.             "CanUseSpriteAtlas"="True"
    22.            
    23.         }
    24.             LOD 300
    25.  
    26.  
    27.         Cull Off
    28.         Lighting On
    29.         ZWrite On
    30.         Fog { Mode Off }
    31.        
    32.  
    33.         CGPROGRAM
    34.         #pragma surface surf Lambert alpha vertex:vert addshadow alphatest:_Cutoff
    35.         #pragma multi_compile DUMMY PIXELSNAP_ON
    36.  
    37.         sampler2D _MainTex;
    38.         sampler2D _BumpMap;
    39.         fixed4 _Color;
    40.  
    41.         struct Input
    42.         {
    43.             float2 uv_MainTex;
    44.             float2 uv_BumpMap;
    45.             fixed4 color;
    46.         };
    47.        
    48.         void vert (inout appdata_full v, out Input o)
    49.         {
    50.             #if defined(PIXELSNAP_ON) && !defined(SHADER_API_FLASH)
    51.             v.vertex = UnityPixelSnap (v.vertex);
    52.             #endif
    53.             v.normal = float3(0,0,-1);
    54.             v.tangent =  float4(1, 0, 0, 1);
    55.            
    56.             UNITY_INITIALIZE_OUTPUT(Input, o);
    57.             o.color = _Color;
    58.         }
    59.  
    60.         void surf (Input IN, inout SurfaceOutput o)
    61.         {
    62.             fixed4 c = tex2D(_MainTex, IN.uv_MainTex) * IN.color;
    63.             o.Albedo = c.rgb;
    64.             o.Alpha = c.a;
    65.             o.Normal = UnpackNormal(tex2D(_BumpMap, IN.uv_BumpMap));
    66.         }
    67.         ENDCG
    68.     }
    69.  
    70. Fallback "Transparent/Cutout/Diffuse"
    71. }
    72.  
     
  35. AndresSepulveda

    AndresSepulveda

    Joined:
    Mar 12, 2014
    Posts:
    52
    what happened with this update?
     
  36. garrido86

    garrido86

    Joined:
    Dec 17, 2013
    Posts:
    233
    1.3 is now Live on the AssetStore, have fun!

    [NEW]
    * Added an additional Standard "Shadowy" Shader variation which can receive Shadows.
    * Added MegaStack Shader. Based on Unlit shader and stacks up to 10 Sprites.

    [UPDATE]
    * Unlit now supports Curvature (fixed front directional)
     
    AndresSepulveda likes this.
  37. superwendel

    superwendel

    Joined:
    Jun 18, 2013
    Posts:
    105
    Don't forget about itch.io Ruben. :)

    The last update I received on there was for 1.2.1.
     
  38. garrido86

    garrido86

    Joined:
    Dec 17, 2013
    Posts:
    233
    Please excuse :oops: my delay, 1.3 now uploaded and ready for download!
     
  39. Stevepunk

    Stevepunk

    Joined:
    Oct 20, 2013
    Posts:
    205
    Is this compatible with spritelamp produced data such as normal maps, depth maps, occlusion maps, specular maps, etc.
    Does it allow for self shadowing, specularity, etc?

    Is it compatible with pixel perfect addons?
     
  40. Jonathan-Westfall-8Bits

    Jonathan-Westfall-8Bits

    Joined:
    Sep 17, 2013
    Posts:
    252
    Hey I noticed you put your asset on sale and was wondering how long you were going to keep it at that price? If you don't mind me asking.
     
  41. AndresSepulveda

    AndresSepulveda

    Joined:
    Mar 12, 2014
    Posts:
    52
    Hi
    could you explain better how can i mix different FX plus your standard shader plus other shaders in one sprite?
     
  42. garrido86

    garrido86

    Joined:
    Dec 17, 2013
    Posts:
    233
    NextGenSprites shaders do only need Normal Maps, I might add support for Depth Maps with the next release(which in turn brings the self-shadowing you where asking about). Btw, I personally never used Spritelamp but by the looks of it, it seems overly complicated and of no help at all(well, maybe besides the auto generated Depth Map). Just get SpriteIlluminator or NDO Painter to paint Normal Maps in a natural fashion.

    The sale will run at least until the 13th of this month :)

    You can not mix the FX with the Standard Shader but feel free to write a PM if you need something specific.
     
  43. Jonathan-Westfall-8Bits

    Jonathan-Westfall-8Bits

    Joined:
    Sep 17, 2013
    Posts:
    252
    Alright glad to hear the sale will be going on a little longer. Next check you will have a new customer.
     
  44. AndresSepulveda

    AndresSepulveda

    Joined:
    Mar 12, 2014
    Posts:
    52
    I have a sea background with FX/Liquid
    in The front a island
    in the island, a rock
    if a put the shadowy shader on this rock it disappears covered by the sea
     
  45. garrido86

    garrido86

    Joined:
    Dec 17, 2013
    Posts:
    233
    This is sadly an expected behavior due to how the Render Queue is setup for the Shadow Shader, the Sprite will be always rendered "first" and thus overdrawn by overlapping sprites.
    I am sorry for the inconvenience and I will update the Wiki to be more clear.

    So to make it clear for anyone else, if you want to use the Shadowy shader, you must only use this Shader type alone for the whole scene or else the Shadowy sprites will be occluded.
     
  46. Diet-Chugg

    Diet-Chugg

    Joined:
    Jul 4, 2012
    Posts:
    51
    Do all the features work with 8 bit sprites or do only a limited number do? If so which ones?
     
  47. garrido86

    garrido86

    Joined:
    Dec 17, 2013
    Posts:
    233
    You can use Retro style Sprites with all Shaders, just make sure to set Point filtering on the Texture import settings.
     
  48. garrido86

    garrido86

    Joined:
    Dec 17, 2013
    Posts:
    233
    Version 1.3.1 has been submitted to the AssetStore and it is also aviable for download right now to all itch.io customers!

    This Update brings Hue Shift, so please enjoy!

     
  49. garrido86

    garrido86

    Joined:
    Dec 17, 2013
    Posts:
    233
    Hey everybody,
    I have created a tutorial for making water sprites with NGS, pleas enjoy:



    Please note that Render Texture feature is currently not implemented but a new version with it will submitted soon to the AssetStore.
     
  50. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,936
    can i use it with New Unity UI?
    Please note that my Canvas RenderMode is set to Screen Overlay (and i cant change that due to UI requirements)