RageTools: Flash-like 2D Vectors and GUI for Unity

Hi Maddox, been experimenting with the pivotools feature. Here is my scenario. Back to the eyeball thing.

So I have two rage spline objects. The eyeball and the eye pupil. I made a parent GO and they are now children of the parent. I applied a pivotools component to the parent which also applied a RageGroup component. If I click on centre in the pivotools dialog with the defaults set then it does (as according to the manual) set the pivot to the average geometric centre of both objects.

What I would like to have is the pivot set to the centre of the eyeball. What I tried to do was change the mode to reference, then drag and dropped the eyeball RSGO to the slot. When i click centre then the pivot goes way off to the left even though I still have inplace selected.

Any suggestions?

Edit: I also tried adding the pivotools component to the eyeball itself and got the same pivot positioning which is odd as it is not in the centre as far as "eye" can tell

iByte

 

I can't seem to get RageTools to work in a webplayer project - I always get "`System.IO.File' does not contain a definition for `ReadAllText'" errors on various scripts. What am I missing?

 

Hi polytrpoi,
Web player does not support System.IO by default.

 

Oh, right... so what's the process of getting imported SVGs into a webplayer project? I guess one might just use a standalone project to do SVG importing, and then bring the converted objects into a web project? A little clarity on the specifics of webplayer project support for RageTools would be appreciated.

 

I would like to know more about the text functionality of this.

Does the text generator support line breaks? How good does the text look when you scale it up and down? How good do simple plain fonts looks? Could the text system be used to make text that looks as good as native OS text? Like the text right here in this post?

Could you make a demo scene with a number of different fonts on display, including just a plain black 12 point arial, and then post it as a webplayer? I would purchase this if I could use it as a new font system.

 

For fairness sake, what you see there is not the full half-meg file, just a sub-set of it As soon as I finish adding some not-so-common SVG command support to SVG-In, Taylor's original art will come in without the need to manually remove the unsupported features in illustrator like I did here, then we'll be able to get the "full picture"

Talking of which, yesterday I've finished coding-in ellipse and transform matrices support to SVG-In. BTW iByte, thanks for the hint but your sample was too generic like you said yourself. I had to derive a way, based off the circle command, to calculate the horizontal and vertical tangents. One of those things that are so obvious that it hurts when you figure it out, but it's not obvious at all until then

Sure, I've replicated something similar to what you describe and got the same result. Problem is with nested transformations on the reference GameObject, it's currently unsupported. I'll work on that for the next release, hopefully a simple switch to use World coordinates will do but I'll have to check what else it affects (especially the 'offset' feature which is quite handy). For now simply do this:

 

Hi Maddox, By default it looks like you set the pivot point of each object being imported to be 0,0. Can we have a import option that sets the pivot point for each svgObject to be the centre of itself as it is imported?

I think this would be the most useful to me. And then if we need to modify it further then we could add a RageGroup/Pivotools combo component and adjust it further as needed.

iByte

 

Sure polytropoi, we're also working on a FAQ, I'll include this one. Right now for the webplayer you have to rely on SVGs imported in the editor, after that you can remove SVG-In completely. RageGroups and RageSplines both serialize (ie. are "memorized in the scene") properly. Like Ippokratis said, System.IO isn't supported in the webplayer. The "import on start" option of SVG-In is, like mentioned in the manual, useful just for quick tests as it stands. The original functionality I intend it for was a kind of "generate mesh on start" instead (so you wouldn't need to store the polygons in your project, huge space savings!). Anyways that'll probably be best kept in the RageGroup component, but it'll require some re-engineering. We're discussing about it these days in fact, np, we'll get it figured it out.

Thanks for the questions eem, I'm sure many have them as well so I'll do my best to answer it.

Not currently and probably not in the first version, yet it's planned for a subsequent release. Right now it is already superior in every aspect to Unity's standard Text Mesh component, with alignment and tracking fully working and easily animatable. You can get a glimpse of it's current functionality by pausing in the video section which shows its editor interface. It's worth mentioning that, down the road, our goal is making SVG-In able to import text directly from SVG files.

Sorry for getting a bit passionate but I can't resist.. f'ing AWESOME, RageText uses *vectors*, bitmap fonts suck!!
Seriously, who wants text that can't be scaled up and down while keeping crystal-crisp? Oh yeah, performance. For how long will the "performance" excuse persist while even the cheapest mobile devices gfx power increase on a galloping fashion - and you're not even sure if the fixed resolution you're working on will be the next generation iPhone's resolution?

I'll tell you what, we're working hard to make EdgeTune (the component that keeps vectors look as good as it gets while scaling up and down) work easily and smoothly with RageText - in full honesty right now it works but it's quite a chore to set it up.

For the record, I say 'we' 'coz, although RageTools was my side project so far, the two other coders of the Freakow team are now focusing on RageTools Pro. We really want to get it out ASAP, but only when it reaches the high quality standards that we strive for. We're definitely not after some quick dough for an unfinished product, be sure of that.

As a matter of fact you can set the anti-aliasing to look as crisp or smooth as you want, using RageGroup tweak mode on the "RageFont" container object. RageText is smart enough to read these settings and apply them on the fly as it juggles the letters around. Look-wise, there are obviously restrictions on what you'd get from very fine text and super-smooth ("blurry") anti-aliasing, mostly related to how RageSpline generates these shapes. I don't imagine many circumstances where that'd be needed, maybe for a text blur transition, yet as long as it's a quick transition, artifacts wouldn't be noticeable.

Sure, that's one of my personal goals for the RT Pro release. We still have to mature a bit the system before that though, I have some wild ideas on how to make EdgeTune way more flexible and performatic than it already is, keep tuned!

PS.: Bear in mind that if you just want static text and icons for your GUI, all you need is standard RageTools. You can upgrade to RT Pro later and only pay the difference.

 

Very good suggestion iByte. I actually thought about doing something similar before, but it wouldn't work *during* import due to the way SVG stores its coordinates. Right after import it's quite possible though, but do you think it should be an SVG-In option or a new Pivotools center mode? I'm asking it 'coz I imagine if you're creating multiple nested shapes directly in the editor with RageSpline, having a Pivotools 'per element' option would be quite handy.

 

Thank you for answers all my questions maddox.

But when I asked this:
"Could you make a demo scene with a number of different fonts on display, including just a plain black 12 point arial, and then post it as a webplayer? I would purchase this if I could use it as a new font system."

I was actually asking if you could do it, not just in a hypothetical sense. But could you actually make that scene and post it back here to this forum? If I could see some of this vector text in action I'd be less hesitant about purchasing.

I just want to see a couple title sized fonts and then what a front looks like if it's at a size on screen comparable to like 10 or 12 point arial. Having the ability to zoom in and out on the text would be nice as well.

 

eem, not sure if I get you right. RageText is part of RageTools Pro, it's still a work in progress. If you mean you'd like to see some vectorized text in a webplayer to know how it'll look like, with EdgeTune applied to display the zoom-in-out quality, I can cook it up. Even if it's not what you meant, it'd probably be a nice thing to have

BTW, I was originally intending to provide Verdana with RT Pro, I find it a sober yet more stylished font than Arial. Do you think I should do Arial instead, for its ubiquitous nature?

 

Hello,

i'm a RageSpline user and I find your tool really useful and impressive.
Now I see this add on and I'm very interresting to use the SVG Importer in my project.
My question is, for a Windows Only Standalone deployement, is it possible to import the SVG in the runtime standalone? I mean, create a SVG Importer function in my application.

Best Regards,

Pierre

 

Hi elpierrot, thanks for your kind words

Actually if you're deploying to runtime standalone only you don't even need a script, the 'import on start' option of SVG-In should work just fine. If you want you can even make some sort of streaming (triggered by time or collider contact, depending on what you want) with a simple script which sets its public SvgFile variable and then calls the ImportSvg() function.

The only drawback with SVG-In for standalone builds is that, for using the System library, it increases your executable size by one megabyte or so. I'm testing a way to make its compilation conditional considering the target platform and a user-set option. At the end of the day, you should also be able to import your SVG files directly from your web site if you're running it from the web plugin. I'll work on this later today.

 

Cool, Thanks for the answer.
There is no problem about the file size as I already use System.IO in other modules.
But you speak about a import on start which suppose that the svg file is already there. My goal is to add a button "import svg file", open a open dialog box to choose the file from disk and import it.
Is it possible?

Thanks again.

 

After reading again your answer, I suppose the answer is yes...

 

Indeed

 

so you have a new client !

 

Hey guys.. just picked up both RageSpline and RageTools for a project.. I am having a slight issue.
Let me state that I am a 3D guy, barely know enough illustrator to make me dangerous (to myself)
I took screen shots of the issues..
Basically paths are acting weird, you can see on the mouth paths that at the ends of the paths it is closing it.
Also, one of the eyeballs is just gone, I cant find it in unity at all.
I checked all the objects and they are all just paths, as far as I can tell hahaha

 

And of course, right after I post I finally find the option in RageSpline to not have it do that lol
On the individual subpath object setting the "outline" setting to "free" is what is needed
But I still cant figure out why the eyeball is gone

 

Just a guess, but seems like you might have the perspective camera on. Try setting it to orthographic by right-clicking the axis gizmo in the top-right corner of the scene view.

 

I have multiple cameras up and my game camera is ortho for sure..
I actually click thru every subPath object that is created and no geometry or curve highlights in the window.

I just ran a test, I deleted everything else from the file except for the one path that wasnt coming in, they black part of the eye, and saved that as a SVG. When I import it from SVGin nothing happens. I dont know enough about illustrator to know why this one object out of all of them wont import
I attached a zipped up version of just the eyeball svg file here
As far as I can tell.. its just a path

View attachment $yelloweye.zip

 

Also, hopefully this is the right place to ask questions, but when I import my SVG file, its way larger than I want it to be, after I instantiate the object i can scale it down, but this seems like the wrong way to do it.. is there a way to adjust the scale on import?
I tried adjusting the artboard size in illustrator but having to scale it down by such a large amount meant the outlines were then the whole drawing.

 

Hi ShreddinPB, looking at that file I can see the svgObject is an ellipse which is not supported in the current version of RageTools SVGIn code. MaDDox does have that in an unreleased version of RageTools. In the meantime you can try to convert that ellipse to a path in illustrator first before import.

 

Cool, thanks for taking a look! like I said, I dont know illustrator at all, but when I did select the eye at the top of the windows it said "path" so I figured it was just a path like everything else..
thanks again!

What about scaling tho? is there a way to say how big an item is when imported? or does it go off the size of the artboard?

 

Hi ShreddinPB! I've worked in the last couple days to squash some bugs in SVG-In, some of them related exactly to styling, which should be the case with your open-path-importing-as-closed shape. As for the missing eye ball, it's surely an "ellipse" command, not supported in the currently released version as noted in the docs. Illustrator 'Convert to outlines' should work for ellipses, but as a matter of fact I've tried it once and it didn't, except if you slightly offset one the vertices, not sure if Inkscape would do this right. In any case, like iByte said the next version will have ellipse support as well, so you shouldn't need to 'touch up' the RageSplines individually like this anymore. I've just tried it with your sample and it worked fine.

It currently uses the size of the artboard so that, no matter what unit your source art uses (pixel, points, ems) it'll always make that unit correspond to one Unity unit (no pun intended ). You can still size up or down the container game object of course. Some times that's not the ideal, to prevent those nasty nested transformations, so I suspect that what you want is what we're planning for a forthcoming pivotools feature, to be able to "freeze the scale" of the object. It's not especially hard to code-in in comparison to what we're doing on RageMagnet (which, btw, just yesterday got "twirl" rotation added in, thanks Raff ), I just want to finish some much needed improvements on EdgeTune first.

BTW, if you guys got any urgent issue or question please hit me through the support e-mail too, it'll prolly be quicker. Thanks!

 

Thanks for looking into it, yeah I read that ellipses wernt supported yet, but like I said I thought it was just a regular path.. I dont know much about illustrator
I just coppied the other eyeball and matched it to the bad one and that worked fine

I will just adjust the container objects scale right now then, its no big deal just thought id ask.. thanks!

 

And I know even less as I use Inkscape which did identify it as an ellipse and I was able to convert it to a path by selecting the object to path menu item.

Since your not that familiar with Illustrator you might give Inkscape a go as well. It's a very nice open source program.

Cheers

iByte

 

It's true iByte, Inkscape does an amazing job with its object-to-path menu, I definitely recommend it to anyone having problems parsing SVG files with the current version. Talking about the new version, yesterday I did a huge refactor in SVG-In which fixed all the remaining style issues I had found. I also received a file from Greg Chudecke today which brought to my attention some missing features - path high-level transparency (vs the standard fill transparency) and disabled layers/groups which weren't coming through, so I've coded both features in today and sent him the beta so he could test it. By the way, disabled layers are cool to create switch-frame type animations, you import the alternate frames disabled (read: invisible) and then you enable/disable them in the proper time using the Animation editor. Sa-weet

I hope to send the new version to the Asset Store along the weekend.

 

Hi MaDDoX, in my case there are very few nested shapes in my particular file, although there are logical groups of RSO's that make up each character (the file contains 9 distinct animal characters). I was proposing a SVG-in option as I wanted a one time adjustment of the pivot to be the center of each RSO (which i think makes more sense as a default) and would only add a Pivotool component if any particular RSO or group needed further "tweaking".

FYI after the import I created a parent GO for character and moved the appropriate RSO's for each logical group per character under it. I also added a Pivotools component to the parent GO and did the Center operation but that only adjust the pivot for the over all character and not any of the other RSO's in the logical group (note there is no object hierarchy in my case)

GO
--> RSO 1
--> RSO 2
--> RSO 3
--> RSO 4

iByte

 

@MaDDoX,
Any chance for animation import features in the future? (e.g Manga/Anime Studio or even Flash?

Thanks buddy

 

Cool, let's start from there then The code will probably be inside pivotools anyways (called by SVG-In automatically after import), so adding a button in pivotools as well will be trivial. As for your problem with pivotools, I can't imagine where it failed (I couldn't re-create the problem here), would you mind sending me your sample scene so I can take a closer look?

Curious, I've spent some time studying the SVG animation specs lately recently and it's quite straightforward and easy to parse in fact, so I would consider that (SVG animation import) a possibility. Nothing in the near future though, our priority really is on RageMagnet since it's a much superior solution - not just to SVG animation but to anything out there. Trust me, I've worked with all those toys . In the end, most of what you can do with SVG animation is what you can already do, and easier, with iTween + PlayMaker, uScript or Universe. The point-by-point animation would probably be quite slow if not heavily optimized, so in the end such an approach would only be useful for cross-platform applications - for instance, "baking" an animation from RageTools for later usage in another animation package, or bring-in previously created animation to RageTools. So, in short, nothing to hold the breath for - but definitely a possibility

 

My previous statement was not accurate ... When I clicked on Center on the pivot tools that was added to the plain GO parent - all children RSO's had their pivot set to the same center as the overall object not left as they were before as I stated earlier. Sorry for the confusion. I was trying so many things I got confused.

 

How's Pro coming along?

 

NP iByte, actually all this world vs local space and nested transformations confuse me as well more often than not

RageMagnet (the animation component) got a nice boost this week, I hope to do the same for RageText next week. I'm still spending a lot of time on SVG-In fixes and improvements, this is the user's #1 tool in the package from the messages I got, so I'm working hard to make it as good as possible. But yeah, RageTools Pro is what I want to be doing, ASAP

 

Since it is an addon, you would need to purchase RageSpline first?

 

Yes - it says this in the first post.

 

Is pro here yet? Is it here yet? Mommy, are we there yet? ?

 

LOL not yet Triomferus, gotta keep folks fully happy with RageTools first before putting more weight on RT Pro. And by "folks" I'm including the most demanding of them all - myself

 

Update: Major revision on SVG-In done, many more command combinations are now supported making for a sensibly more solid importer. Thanks to everyone who submitted their SVG illustrations so I could check it against the code, update and test it.

Yesterday we also hit a big milestone - RageMagnet (RageTools Pro deformation and animation component) controllers now work with rotation and scale! Early tests with a couple production characters were excellent, I got really excited by the results One step away from vector-bones now.

 

Can I not deploy a web project with RageSpline in my project? Since it web does not contain "System.IO.File". What is the fix for this besides removing and re-adding RageSvgIn every time?

Also, I seem to be getting some strange gradient issues when I use Pivot Tools, it's almost like it's movign the gradient center. Has anyone else experienced this?

Thanks

 

I still didn't get to that problem but surely will before submitting the next version to the Asset Store. I'm making that either a conditional compile or, preferably, automatically switch it to read files from your web folder when it's run from the web plugin.
BTW, completely unchecked but I got a report from a user that he managed to make it run (without errors) by setting his .Net from SubSet to Full before deploying the package.

To be honest I haven't tested Pivotools with gradient shapes before, I can imagine what goes wrong when you do since I'm only moving the points and not the gradient coordinates. I will check that out, should be an easy fix. Pivotools is certainly the component to give me the most headache, coincidentally I've spent a good chunk of time today working on it (I'm adding the per-item feature that iByte suggested). Bottom line: major pain in the back. I gotta tame that beast!

 

Hi,
As a quick workaround on the System.IO problem:

1. Place files that contain it in Editor folder.
2. Put all the code on those files between #if UNITY_EDITOR #endif like that :

Code (csharp):

1.  
2. #if UNITY_EDITOR
3. import System.IO;
4.  
5. //...rest of the code
6.  
7. #endif
8.  

Also, do not use those files during gameplay, use them to create assets in Editor.
I do not have Rage Tools or Rage Spline and I do not know the workflow. I make assumptions based on similar problems I had in a project I develop. Hope that helps,
-Ippokratis

 

Hi Ippokratis! Thanks, I was actually aware of those two approaches. Putting the import code in the Editor folder wouldn't be the best option since it would prevent custom classes from importing SVG files. Some users told me they'd go down that path (they'll use standalone deploy), so I don't want to put a blocker on their way. Best way would be to use the conditional compile statement (like #if UNITY_EDITOR) to make it import from the web folder when it's running from the web browser, instead of trying to access the local file folder - not supported by the unity plugin, or by any web plugin, due to security reasons.

I have lots of new features going on at once (we've got a new editor system working, and yesterday I've finished the pivotools per-item option), but I don't want to hold up the next version release any longer so I'll probably do it the simpler way for starters.

 

Hey Maddox - One approach that's worked for me is to separate code such as this from MonoBehaviours. Instead I move it to a dedicated editor class, and write a custom Inspector to handle the functionality. For your SVG import, I'd move the System.IO stuff into the Inspector and that will effectively remove the code from web builds. Or put the System.IO into a static class, and then call the class from various Inspectors (if you find you are duplicating the SVG import in multiple Inspectors). Just a thought, but that's worked for me. I had to write XML importing for the Conversation Engine

 

Hey gus.. I made a SVG file in Inkscape and I cant get it to import.. looks like it has something to do with gradients, but I tried removing all the gradients and it still had the error.
the whole error message is here..

Code (csharp):

1. ArgumentException: An element with the same key already exists in the dictionary.
2. System.Collections.Generic.Dictionary`2[System.String,RagetoolsCommon.GradientItem].Add (System.String key, RagetoolsCommon.GradientItem value)
3. RageSvgIn.ParseGradient (.XMLNode svgEntry, GradientType gradientType) (at Assets/RageTools/RageSvgIn.cs:281)
4. RageSvgIn.ParseSvg (.XMLNode svgRoot) (at Assets/RageTools/RageSvgIn.cs:128)
5. RageSvgIn.ParseSvg (.XMLNode svgRoot) (at Assets/RageTools/RageSvgIn.cs:173)
6. RageSvgIn.ParseSvg (.XMLNode svgRoot) (at Assets/RageTools/RageSvgIn.cs:173)
7. RageSvgIn.FindSvgRoot (.XMLNode node) (at Assets/RageTools/RageSvgIn.cs:97)
8. RageSvgIn.BeginSvgImport () (at Assets/RageTools/RageSvgIn.cs:78)
9. RageSvgIn.ImportSvg () (at Assets/RageTools/RageSvgIn.cs:59)
10. RageSvgInEditor.OnInspectorGUI () (at Assets/RageTools/Editor/RageSvgInEditor.cs:33)
11. UnityEditor.InspectorWindow.DrawEditors (Boolean isRepaintEvent, UnityEditor.Editor[] editors, Boolean eyeDropperDirty) (at C:/BuildAgent/work/842f9557127e852/Editor/Mono/Inspector/InspectorWindow.cs:495)
12. UnityEditor.InspectorWindow.OnGUI () (at C:/BuildAgent/work/842f9557127e852/Editor/Mono/Inspector/InspectorWindow.cs:190)
13. System.Reflection.MonoMethod.Invoke (System.Object obj, BindingFlags invokeAttr, System.Reflection.Binder binder, System.Object[] parameters, System.Globalization.CultureInfo culture)

 

Thanks for the hints djinni! I'm working on that at this very moment, let's see what I can do

Hi Shreddin! From the error debug log it looks a lot like a bug I've fixed some time ago. If by any means possible, please send the SVG to me through the support contact e-mail, if it works with the current beta I'll send it to you, I've done that with some users already. If you can't send the SVG for some reason, the next version will kick in at the Asset Store in the next few days and should import it fine.

 

Hi MaDDox, did you get my PM from a few days ago?

iByte

 

I did iByte, it imported fine at first run - a glad surprise after having received some "this SVG won't work!" e-mails The good thing is that those files helped me to detect a couple nasty hidden bugs and the most important missing features in SVG-In, it performs much more solidly now. Just send me an e-mail so you can get the beta files while I wrap up the next Asset Store version.

Talking of which, I've glad to announce some massive progress:

- Web Player deploy now works without the need to remove SVG-In from the project.
- SVG-In no longer uses the system library, resulting in sensibly smaller (~1Mb less) deploys
- Massive Edgetune performance boost, it now refreshes the grouped splines in chunks instead of all at once.

Edgetune is now finally usable for more complex SVG art, in a test scene I went all the way from 6 FPS to 20 FPS, with the same size/density. I've spent a long time researching and testing what would be the best approach for the SVG-In Web Deploy compatibility, in the end I did manage to make "Import on Start" work using an external SVG file next to the web player folder. The problem is that it can't access the proper RageSpline texture after creation, so the splines get all purple. To make that work some deep changes in RageSpline would be needed, and it's probably not worth the effort. Instead, I'm going for a "Reset on Start" toggle on RageGroup, which'll basically re-construct your splines as you defined them in the editor (with the Update button), as soon as the web player runs. This way you'll be able to store the actual polygons with density zero to make the file size as small as possible, then re-construct the curve density with either RageGroup or the EdgeTune/RageGroup combo, in the very first frame of your game - Edgetune is also gaining a much-needed "Start-only" toggle.

I still gotta finish some stuff on Pivotools, test SVG-In with the Mac OSX to make sure nothing broke, then it'll be Asset Store time - hopefully in the next couple days.

 

I'd really love to see an example (like the RageSpline ones) of the one of the main uses of this tool - using RageSpline for a GUI. Could you make a screen-space and world-space clickable button thingy or something?

 

Sent to "contact" @freakow.com that was the only email I saw on the site
thanks!