RageSpline - Create smooth 2D graphics inside Unity Editor - RELEASED

Discussion in 'Assets and Asset Store' started by keely, Apr 23, 2011.

  1. keely

    keely

    Unity Technologies

    Joined:
    Sep 9, 2010
    Messages:
    889
    Version 1.0 is now available for 50$ at the Asset Store.

    Here is the original thread that I updated during the final days of development.
    Here are some of the plans for future development.

    Features list:
    • Creating 2D meshes and lines with bézier-based splines.
    • Outlining with single color, variable width per control point + natural/sharp switch per point.
    • Solid one color fills.
    • Linear gradient fills with two colors and GUI-adjustable scale, offset position and rotation.
    • Emboss styling with two colors and GUI-adjustable adjustable scale, rotation and smoothness variable.
    • Texturing support with GUI-adjustable scale, offset and rotation.
    • Automatic physics generator.
    • Adjustable vertex count for outline, fill, emboss and physics.
    • Example game included: RageCar.

    These are the RageSpline related videos from the Youtube:





     
    Last edited: May 1, 2011
  2. etomp10291

    etomp10291

    New Member

    Joined:
    Jan 11, 2010
    Messages:
    108
    can you import vector art into plugin to be modified or used in game??
     
  3. keely

    keely

    Unity Technologies

    Joined:
    Sep 9, 2010
    Messages:
    889
    There is currently no such feature, but this is definitely one of the possible future features that I'm going to investigate. Can't make any promises at this stage, though.
     
  4. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,424
    Sounds to me like a good opportunity for the community to extend it. SVG curve importing would be a nice little feature if anyone where inclined to write a little parser.
     
  5. pixelsteam

    pixelsteam

    Member

    Joined:
    May 1, 2009
    Messages:
    671
    I agree being able to import vector artwork would be fantastic...
    I just bought it. Thanks alot Keely.
     
  6. serendip

    serendip

    New Member

    Joined:
    Feb 27, 2011
    Messages:
    6
    I just bought it and getting up to speed with it.

    My question, how can I take a transparent image (.png) and rage it. See example below. I would want the shape to be close or match the outline of the image.

    [​IMG]
     
  7. Veli

    Veli

    New Member

    Joined:
    Mar 10, 2009
    Messages:
    301
    Does this work on iPhone?
     
  8. keely

    keely

    Unity Technologies

    Joined:
    Sep 9, 2010
    Messages:
    889
    Yes, kyllä :)
     
  9. keely

    keely

    Unity Technologies

    Joined:
    Sep 9, 2010
    Messages:
    889
    I think the supported workflow in the RageSpline is generating the shape in the Editor and texturing that. What you are trying to do is generating the shape somewhere else and trying to bend RageSpline into it.

    I'm not sure what you are after, but I'd consider making your texture square (remove the alpha and fill the white part with your blue/gray) and then generate your shape with the spline and texture that.

    Am I making any sense?
     
  10. Veli

    Veli

    New Member

    Joined:
    Mar 10, 2009
    Messages:
    301
    Hyvä, hyvä.

    What about texture support? Can I have a texture on the shapes (kinda like how photoshop does texture overlay).

    EDIT: Just watched the last video which answered that question. Looking good.

    Another EDIT: Does it support multiple textures? Or tranparency?
     
    Last edited: Apr 24, 2011
  11. keely

    keely

    Unity Technologies

    Joined:
    Sep 9, 2010
    Messages:
    889
    Currently only single uv-channel is used, so no multiple textures yet. The v1.1 will have more texturing features, but I'm still figuring out how it's going to play out.

    You can now use the alpha channel in the texture. There's a shader included for that. You can set the fill color (or gradient colors) alphas to something between 0..1 for transparency too.
     
  12. p6r

    p6r

    Member

    Joined:
    Nov 6, 2010
    Messages:
    898
    If someone wonders if we can texture the RageSplines :

    [​IMG]

    6R
     
  13. keely

    keely

    Unity Technologies

    Joined:
    Sep 9, 2010
    Messages:
    889
    I love it! Keep the screenshots coming everyone.
     
  14. serendip

    serendip

    New Member

    Joined:
    Feb 27, 2011
    Messages:
    6
    What I am looking for is to be able to set collision points, like the blue numbers (would be the white dots in ragespline) and have the bitmap in the background.

    [​IMG]

    This is what I have come up with.

    [​IMG]

    Is there a better way to create this, as it does not have hard edges and wraps the image around.

    [​IMG]

    How do you make the collision squares smaller.
     
    Last edited: Apr 24, 2011
  15. keely

    keely

    Unity Technologies

    Joined:
    Sep 9, 2010
    Messages:
    889
    If I understand you correctly, you want to have a texture in the background and then create physics with the RageSpline?

    One way to do this is create two RageSpline objects. The other is for the texture and the other is for the physics.

    For the texture-RageSpline, you just use the rectangular shape and texture it. You seem to have already done this.

    For the other one (which I would put as a child of the first), set Outline: None and Fill: None and Physics: Boxed.

    This way you can modify the physics separately of the background image.
     
  16. keely

    keely

    Unity Technologies

    Joined:
    Sep 9, 2010
    Messages:
    889
    I'm sorry they are currently fixed size. I'm going to make them adjustable for the next version. In the meantime, if you make everything else bigger in relation, it will help.

    If this is a huge problem, I can point you the exact place in the source code where the depth of the boxes are set, but any change you make is going to be overrided when you update.
     
  17. p6r

    p6r

    Member

    Joined:
    Nov 6, 2010
    Messages:
    898
    * Thanks keely...
    With the different tools I could insert the textures and give them the right size for each spline and especially the right direction !!!!
    By changing the parameters or dragging the gizmos we can have "another" platform with the same shape ! Great !!!

    * How do you create squares instead of circles for the points around a spline ???
    For example your red arrow showing the end of the "race" in your example has a lot of squares around the shape...
    When I create points, they are all round by me !?!

    * How can we select a point at runtime (mouse click) to deform a shape ???
    For example if I want a young child can make a simple star from a circle (with 5 points) to adjust it to the star shape I show in the background...

    * For people who hesitate to buy this tool, it can't be easier to use !!!!!!!!!!!!!!!!!!!!!!!!!!
    They are so many parameters to change to make your own shapes. It's incredible !!!

    6R
     
  18. keely

    keely

    Unity Technologies

    Joined:
    Sep 9, 2010
    Messages:
    889
    There's a review box in the Asset Store. Just sayin' :)
     
  19. Acumen

    Acumen

    Member

    Joined:
    Nov 20, 2010
    Messages:
    1,035
    wow, that textured example looks superbe.
    Now someone get working on the procedural approach so we can all do tiny games

    Said it before and again, this is some brilliant piece of work. Great job you did !
     
  20. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,424
    @keely, when I mentioned the ability to have borders be inner or outer this image would be an example of an inner border. An inner border with a separated UV map would be an awesome addition for adding variety to the splines.
     
  21. p6r

    p6r

    Member

    Joined:
    Nov 6, 2010
    Messages:
    898
    OK keely !!!
    I have reviewed it on the asset store., (Only positive things of course !!!) :)

    6R
     
  22. p6r

    p6r

    Member

    Joined:
    Nov 6, 2010
    Messages:
    898
    Hey, Users of RageSpline...
    What about a bank of RageSpline Creations !?! We could exchange them here !?! (Without textures if they are copyrighted like my door texture from a guy here on this forum (hand painted textures !)
    For example, the included game offers us nice cactuses, rocks, clouds... We could add more and more little by little !?!

    I have tested my textured door with a simple rotation javascript and it works !!! It has not the perfect effect but it's enough for the kind of games we can make with this tool...

    6R
     
  23. serendip

    serendip

    New Member

    Joined:
    Feb 27, 2011
    Messages:
    6
    After you create a point (double click), single click on the point and use the N key to change from square/circle.
     
  24. serendip

    serendip

    New Member

    Joined:
    Feb 27, 2011
    Messages:
    6
    Keely

    Thanks, that works fantastic. I have change the outline vertex count to 1 and this helped get the colliders to line up better.

    What would be awesome: Be to able change the point from spline to straight line (no handles), and when you move the point, the line grows/shrinks. Line a rubber band.
     
    Last edited: Apr 24, 2011
  25. Acumen

    Acumen

    Member

    Joined:
    Nov 20, 2010
    Messages:
    1,035
    I'd much rather like so see just some awesome screenshots of what you guys can come up with.
    That makes others jealous and wanting to purchase the plugin, as well as shows greatly what awesome results you can get with the tool. Too much talk in here, anyways ;)
    So keely gets a nice gallery of examples, you never know for what he could use it !
     
  26. giyomu

    giyomu

    Member

    Joined:
    Oct 6, 2008
    Messages:
    1,064
    awesome tool !

    just bought it and play with it, really fun ;)
     
  27. p6r

    p6r

    Member

    Joined:
    Nov 6, 2010
    Messages:
    898
    Here are some various shapes and effects we can do so easily with RageSpline :

    [​IMG]

    6R
     
  28. keely

    keely

    Unity Technologies

    Joined:
    Sep 9, 2010
    Messages:
    889
    Great stuff again!! If there was such a thing as a RageSpline t-shirt, I would send it to you right now :)
     
  29. p6r

    p6r

    Member

    Joined:
    Nov 6, 2010
    Messages:
    898
    :D:D:D
    Thanks keely...

    Wish (if no T-shirt !!!) :
    * Spline with a whole to make letters for example : For example a default circle with a whole spline in it where we could change the outline only (color and form).
    So we could make funny cartoon titles for example... Actually we can use a spline with the color of the background to solve this problem but it isn't the simplest way.

    6R
     
  30. p6r

    p6r

    Member

    Joined:
    Nov 6, 2010
    Messages:
    898
    Other tests :

    [​IMG]

    6R
     
  31. p6r

    p6r

    Member

    Joined:
    Nov 6, 2010
    Messages:
    898
    Other test for backgrounds with Circle and Line splines (way of BD Createur) :

    [​IMG]

    6R
     
  32. MikeGerace

    MikeGerace

    New Member

    Joined:
    Apr 24, 2011
    Messages:
    13
    Keely,
    You should put up the source code for your little square in RageCube... That is a cool little Mouse catapult game, And the script for pulling him back and projecting him will help me immensly
     
  33. keely

    keely

    Unity Technologies

    Joined:
    Sep 9, 2010
    Messages:
    889
    That planetary background is pure awesomeness. I thought RageSpline would be used mostly for the level building and not for the more artsy stuff, but it took you 2 days to prove me wrong. Keep the screenshots coming ppl. I need to get a feel of what the tool is being used for, in order to make it better.

    If you mean a hole inside a spline, the algorithm triangulating arbitrary spline with holes gets very complicated and I can envision a possible user interface nightmare too, so I have to shoot this one down :(
     
  34. hima

    hima

    New Member

    Joined:
    Oct 1, 2010
    Messages:
    179
    It looks incredibly awesome and I'd love to buy this but I'd like to see the performance on iPhone/Android first. Can anybody please fill me in on this information? Or will there be a demo or free version for us to try before we buy?
     
  35. keely

    keely

    Unity Technologies

    Joined:
    Sep 9, 2010
    Messages:
    889
    iOS performance is good. The example game RageCar runs ~60fps on iPhone 3GS.

    All I know about Android performance is that it works and nobody is complaining.

    I'm currently away from my home office, but I can give you something to test with in the next couple of hours if you want more proof.
     
  36. p6r

    p6r

    Member

    Joined:
    Nov 6, 2010
    Messages:
    898
    OK ! No problem... It was a suggestion but I can understand it is complicated.

    Yes... We can create backgrounds too. With various artstyles : with or without outlines !!!
    More I play with RageSpline and more I see why this tool had an immeditaley interest for me, when I saw your first thread about it.

    Here another example with a Terrain (without texture and no light inserted) for quick made mountains :

    [​IMG]

    6R
     
  37. p6r

    p6r

    Member

    Joined:
    Nov 6, 2010
    Messages:
    898
    Another example with more funny style : Terrain with a quick made funny colored texture !
    (Yes, I know : If the mountains are so crazy, why are the other backgrounds so normal !?! Just for tests of mixing Terrain + splines !!!)

    [​IMG]

    6R
     
  38. defjr

    defjr

    Member

    Joined:
    Apr 27, 2009
    Messages:
    436
    These images are making me want to buy this even more. :)
     
  39. ibyte

    ibyte

    Member

    Joined:
    Aug 14, 2009
    Messages:
    536
    Hi,

    I am wondering what the cost is (in terms of resources used) when one designs something like p6r has above in ragespline vs doing the same thing in inkscape and importing as a texture to be mapped a simple mesh?

    I know it's kind of a vague question but I am wondering now when is the right time to use either approach?

    iByte
     
  40. keely

    keely

    Unity Technologies

    Joined:
    Sep 9, 2010
    Messages:
    889
    I've been thinking about this a lot ever since I started doing these tools that eventually became RageSpline.

    Even though Unity is rather painless with assets, and things could be so much worse, I still lose my mojo everytime I have to leave the Editor, switch to Photoshop/Inkscape/blender/whatever, modify the asset, save, come back. It doesn't seem like a huge deal, but a 2 seconds of difference in iteration time is a huge thing imo.

    Of course, if you are not a lone wolf like me, you will have different people working with the arts anyway. There RageSpline might not make too big of a difference in terms of iteration time with graphics iteration. I'm sure most artist rather use the tool they are already comfortable with vs. using RageSpline. Inkscape and Photoshop have 10x more power and features vs. RageSpline. You are somewhat limited by the certain "look" that RageSpline has. I must say that limitations are sometimes good for creativity, though. RageSpline could still make a lot of sense in prototyping and as a design tool, even if you do the finalized graphics somewhere else.

    I myself wouldn't make background art with RageSpline. I will most likely use it on doing stuff that benefits from automatic physics and simple props. It's so much more easier to draw, copy-paste and tweak 10 different looking prop trees with RageSpline, than to draw them separately in Inkscape and import the whole shebang as texture atlas or 10 separate texture files.
     
  41. p6r

    p6r

    Member

    Joined:
    Nov 6, 2010
    Messages:
    898
    good question iByte...

    6R
     
  42. ibyte

    ibyte

    Member

    Joined:
    Aug 14, 2009
    Messages:
    536
    keely,

    Thanks for the reply. I agree RageSpline offers a lot of value even if you *might* not run the results as a final product.

    I know we can do screen captures from Unity but how difficult would it be to have a RageSpline (or any other mesh) object render to texture option?

    iByte
     
  43. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,424
    @iByte, you are definitely better off using images for things like that. RageSpline is an awesome tool but it is not a replacement for an image editor. That would be a pretty poor use of your vertex budget. It is a testament to the tool's abilities that things like that can be created so easily though.

    You *could* use render to texture then dump an image to disk but why not just use a dedicated image editor at that point and get the best quality art assets possible?
     
  44. ibyte

    ibyte

    Member

    Joined:
    Aug 14, 2009
    Messages:
    536
    @prime31,

    Was just thinking of ways to save some work if you already spent a bit of time getting an object to look the way you wanted it with RageSpline but choose to go the image route in your final game. I guess an export to SVG might help in that direction as well.

    iByte
     
  45. keely

    keely

    Unity Technologies

    Joined:
    Sep 9, 2010
    Messages:
    889
    I agree to this up to a point.

    I'm ofc biased, since I'm selling the damned thing, but I would say that in SOME cases it makes sense to replace your image editor with RageSpline almost 100%. I'm most likely doing it with my current game and seems like p6r is going to do that too.

    In MOST cases, you can move some portion of your art workload from image editor to RageSpline. The very least you can do is make prototype art. Those RageSplines sure beat the primitive boxes :). Ofc some ppl think that ugly prototype art has a function and I can relate, but it's great to have options. The more you move you're work to RageSpline, the more you gain in iteration power, but lose visual control, and in some extreme cases you might lose some performance. Hopefully some of the texturing features in the upcoming v1.1 could push this balance a little bit.

    My main disagreement with your post is that I really strongly believe, that in the year of 2000 and 11, if you are making a 2D game, things like vertex budget shouldn't be even in your top100 list of concerns. So far all the RageSpline stuff has ran so smoothly in every scenario, that I have stopped paying attention to Unity Editor stats.

    Baking those shapes into textures isn't actually too far fetched when I think about it, but given that I don't think the performance is even an issue, this would give very little gain vs. lot of complexity + it only works for static stuff. Isn't rendering in the texture only functional in the pro version anyways?
     
  46. keely

    keely

    Unity Technologies

    Joined:
    Sep 9, 2010
    Messages:
    889
    I could see how this would make sense in some cases. You create your level design and at some point you "lock it down" and if you want to add fine details on top of RageSpline objects with let's say via Photoshop, you might use those renders as your base "gizmos" in the image editor or something.

    I have to play around to see if any of this makes sense.

    edit: Maybe rendering the whole scene into one single big image would be cool (if it's possible)!
     
  47. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,424
    @keely, I LOVE RageSpline and it has a permanent place in my toolshed for sure. I'm pretty biased too since RageSpline is *almost* exactly the tool I started making until you took care of it all for me :) I guess I have a slightly different perspective being almost exclusively on the mobile world though. Us mobile devs don't have the extra cycles to display high vert objects that eat up a draw call. A simple example would be a tree that is duplicated a few times. If using images, this is a single draw call and and a handful of verts. If the tree were a RageSpline then that is multiple draw calls and a large VBO. Using RageSpline for artwork also forces your artist into Unity when they have an incomparable experience in a dedicated image editor where they are surely more comfortable. That being said, doing prototypes in RageSpline seems to work quite well. I could see the potential (like @iByte is looking for) to be able to select a RageSpline and export as SVG so that you can mock up the assets than pass them off to an artist to do up in the vector editor of their choice.
     
  48. keely

    keely

    Unity Technologies

    Joined:
    Sep 9, 2010
    Messages:
    889
    I'd like to consider myself a mobile developer too, but I think we can agree that in very short time, the mobiles will get so powerful that we can just laugh at this. Ofc situation in the mobile currently is such, that it makes sense performance-wise to do some of your static and more complex art textured. I agree 100% on that.
     
  49. keely

    keely

    Unity Technologies

    Joined:
    Sep 9, 2010
    Messages:
    889
    The more I think about this, the more my pants get wet.

    Consider this (purely hypothetical) workflow:

    You made a rock+physics with RageSpline, you want to finetune it's appearance. Export to image, draw on top of image in Photoshop, save new image and press a magic button in RageSpline, which changes the mesh to 4 vertex quad, slams the newly created image on top, still uses same physics. Later you are not happy with your rock design, you press the magic button again, it switches back to original RageSpline, you repeat.

    HOW cool would that be! I think very.
     
  50. prime31

    prime31

    Member

    Joined:
    Oct 9, 2008
    Messages:
    6,424
    @keely, that would be superb! Will it make it into 1.1? :)