Vector graphics support?

Is Construct going to support 2D vector graphics any time soon? The new "export to Windows 8 Metro app" option has made me look at Construct but as far as i can tell theirs no support for vectors of any kind? Which is a REALLY important feature for Windows 8 devices being as their will be all kinds of screen resolutions from lower res tablets to monitors like mine that are 2560x1600, and on top of this all Metro apps run full screen.

It's one of the best things about Flash but obviously i cant make Metro apps with that. But in Flash i could have a vector graphic that scales to infinite resolution and only takes up 1KB or less! It's the one missing feature about Construct that instantly stands out to me and is stopping me from using it :(

There's been some experimentation with vectors. Pode make a plugin to use it: LINK

But officially, it still hasn't appeared on Ashley "What should I do next?" regular topics, so I don't think we'll see it soon.

I also agree it is a good feature! Being able to import vector graphics instead of images as frames for the sprite object is something I'd love to see!

Thanks i'm looking at that now but it seems quite limited...

I think it's crazy that Construct dont support vectors/SVG graphics. This is such an important feature! Not only would it have the massive benefit of games that can be scaled to ANY size but all the web based stuff could have WAY smaller file sizes if it used SVG. Until Construct uses vectors it just dont compare to Flash.

Beany : what important feature do you feel isn't in the SVG plugin and you want to see ?

Thanks i'm looking at that now but it seems quite limited...

I think it's crazy that Construct dont support vectors/SVG graphics. This is such an important feature! Not only would it have the massive benefit of games that can be scaled to ANY size but all the web based stuff could have WAY smaller file sizes if it used SVG. Until Construct uses vectors it just dont compare to Flash.

I'm a super fan of SVG but I don't think it is all crazy not to support SVG right now. Almost no one on the planet is using it and most people think it is dead. Compare the use of Photoshop vs. Illustrator. Most people think in bitmaps, not vectors. Thinking in vectors is more work.

Is there anyone using SVG for games anywhere?

Beany : what important feature do you feel isn't in the SVG plugin and you want to see ?

I've been thinking about using vector shapes to make water... so it could deform when the player entered, to create a wave or whatever. Not sure how much work that would be.

I'm a super fan of SVG but I don't think it is all crazy not to support SVG right now. Almost no one on the planet is using it and most people think it is dead. Compare the use of Photoshop vs. Illustrator. Most people think in bitmaps, not vectors. Thinking in vectors is more work.

Photoshop and Illustrator are intended for totally different things so just because more people use Photoshop doesn't mean anything.

Vectors are commonly used in games, just not web based. And Flash uses vectors and look how popular that is for gaming, it's actually the biggest gaming platform on the planet (including game consoles) and HTML5 is not making any of us Flash game developers leave Flash in favour of HTML5. One of the main reasons is that theirs hardly any HTML5 game creation tools that support vectors/SVG (and a ton of other reasons).

But Adobe now support SVG with their new 'Edge' HTML5 animation software. I just quickly made this SVG animation with it! <img src="smileys/smiley17.gif" border="0" align="middle">

Edge isn't really intended for creating games at the moment (just animations and interactions) but you can make very simple games with it, and Edge is progressing quite fast with each new preview release so maybe a year or two from now it will be a decent alternative to Flash game developers, or just anyone who already uses HTML5 tools that lack something as simple as SVG support. I think the only reason SVG hasn't really taken off yet is because browsers were slow to adopt it at first, but now all the major browsers have support so theres no reason not to have it.

Pode: i replied in your plugin thread.

Both the Canvas plugin and SVG Canvas plugin provide ways to utilize vector graphics in Construct 2 currently.

While I love vector graphics and would love to see inbuilt support for them in C2, I agree with Bob Thulfram that they're just not as popular as sprites, so I'm doubtful that'll be integrated anytime soon.

I'm more keen to see further advancement of the SVG Canvas plugin myself. I'd like to see it have more Sprite-like features, like overlap detection and resizing/rotating. I'll have to ask Pode more about that in his plugin thread. :)

Just to make it clear too, Pode's SVG Canvas can be used to animate SVG's as well. While it's not quite the drag and drop operation of Flash's timeline, it can be done.

Here's a quick example showing text moving on an animated curve.

svgcanvas-text-on-an-animated-curve.capx

> I'm a super fan of SVG but I don't think it is all crazy not to support SVG right now. Almost no one on the planet is using it and most people think it is dead. Compare the use of Photoshop vs. Illustrator. Most people think in bitmaps, not vectors. Thinking in vectors is more work.

Photoshop and Illustrator are intended for totally different things so just because more people use Photoshop doesn't mean anything.

But Adobe now support SVG with their new 'Edge' HTML5 animation software. I just quickly made this SVG animation with it! <img src="smileys/smiley17.gif" border="0" align="middle">

My point was that for most game developers and artists, it is easier to work with bitmaps than with vectors. That's why Canvas has caught on so fast. Right now Construct 2 is bitmap and Canvas-based and I don't expect that to change fast or get a lot of support.

I couldn't figure out your sample. What am I supposed to be seeing?

Adobe has been the major supporter of SVG since the beginning, but they've not done very well with it. The only really good SVG application right now is Inkscape, but I haven't seen any SVG-based application design tools.

I still haven't tried out the SVG plugin, but I'm still not sure what it really does. I'll get to it!

SVG is extremely cool but none of the big kids are giving much focus to it. One the one hand there are historical reasons. I have all 12 books on SVG but most of them are out of print or not very useful.

Oddly enough, all major browsers support most of SVG but there are nooks and crannies that don't quite work well and aren't clear.

Still, SVG is fascinating, but I think too advanced for the average developer of games. Prove me wrong!   <img src="smileys/smiley2.gif" border="0" align="middle">

>

> > I'm a super fan of SVG but I don't think it is all crazy not to support SVG right now. Almost no one on the planet is using it and most people think it is dead. Compare the use of Photoshop vs. Illustrator. Most people think in bitmaps, not vectors. Thinking in vectors is more work.

>

> Photoshop and Illustrator are intended for totally different things so just because more people use Photoshop doesn't mean anything.

>

> But Adobe now support SVG with their new 'Edge' HTML5 animation software. I just quickly made this SVG animation with it! <img src="smileys/smiley17.gif" border="0" align="middle">

My point was that for most game developers and artists, it is easier to work with bitmaps than with vectors. That's why Canvas has caught on so fast. Right now Construct 2 is bitmap and Canvas-based and I don't expect that to change fast or get a lot of support.

I couldn't figure out your sample. What am I supposed to be seeing?

Adobe has been the major supporter of SVG since the beginning, but they've not done very well with it. The only really good SVG application right now is Inkscape, but I haven't seen any SVG-based application design tools.

I still haven't tried out the SVG plugin, but I'm still not sure what it really does. I'll get to it!

SVG is extremely cool but none of the big kids are giving much focus to it. One the one hand there are historical reasons. I have all 12 books on SVG but most of them are out of print or not very useful.

Oddly enough, all major browsers support most of SVG but there are nooks and crannies that don't quite work well and aren't clear.

Still, SVG is fascinating, but I think too advanced for the average developer of games. Prove me wrong!   <img src="smileys/smiley2.gif" border="0" align="middle">

For my example you should being seeing a SVG graphic of a guys head, which just does a loop animation when you click it. Very simple example! <img src="smileys/smiley17.gif" border="0" align="middle">

Being as it's SVG if you use the browser to zoom in as much as possible (CTRL +), you'll see that the image does not distort or get pixelated being as it's vector based.

Now heres my problem... if you do the same with a HTML5 bitmap game created in Construct (or anything else) it becomes a blurry mess, being as it uses bitmaps it has to run at a specific window size, like 800x420 or whatever, you cant scale it. So if i wanted to turn that game in to a fullscreen phone or Windows 8 app, and if a person with a high res screen ran the game fullscreen it's going to look like a blurry pixelated mess being scaled up to something like 1920x1080 (and even phone screens range from 480x320 all the way to 1280x720 res). So this is the main reason i want vectors/SVG, so i dont have to worry about really poor looking blurry bitmaps on different screen sizes and resolutions.

Windows 8 Metro apps also fully support SVG, so if it works in IE10 (which is used to render HTML5 based apps on Win 8) then i'm not bothered if any other browsers have a problem with SVG because it wont be running in another browser anyway. Or even if i make a web based game that uses SVG, for all the tests i've done so far SVG renders and animates correctly in all the main browsers and their latest versions. So i dont think browser support or bugs is any issue here.

And i'm curious why you think that using vectors is more work?

With design tools like Illustrator or Flash, creating vector graphics for games is often the near same process of how you would create the same graphics in Photoshop. Theres some limits to vectors but for most 2D games the process would be almost exactly the same. And Photoshop actually uses vectors for some of the drawing tools! But unlike Flash or Illustrator you cant save the work in a vector or SVG format for web, it instead gets converted to bitmap.

Or do you mean the more technical side of things? Because Flash and it's success is the best possible example of how easy it is to use and create games with vectors and why Construct REALLY needs it. Flash has had this support since it came out in 1996 and no one has ever complained about vectors being too hard to use. With Flash it's never really affected how i work, or even had much affect of performance. Maybe it's different in some HTML5 tools (? i dont have much experience here apart from Adobe Edge but SVG is easy to use in that as well!) but with Flash it's VERY easy, if not better, because i often have more control over vectors compared to bitmaps and can easily edit vector art.

So as someone who's been using vector art in Flash/AIR, 3D game engines and web content since around 2001 it feels as though tools that lack support is like going backwards in time to the 90's as it really is superior in so many ways <img src="smileys/smiley18.gif" border="0" align="middle">

.... Sorry for long post! LOL

Nice one! I think Edge could to kill Adobe Flash lol

Beany : one of the problem of SVG, is that it's a retained-mode (in contrast to Canvas - immediate-mode).

And, when you are starting to have a lot of vectors elements onscreen, browsers are going to stutter. The Flash VM handle this differently (and was built from the ground up to deal with vectors). However, browser are optimized for raster.

Although I'm the developper of the SVG plugin, I don't think a whole game made only with SVG can be good (performance wise). You need to use SVG for effects and GUI, for example, in that context.

I'm planning to add more functionnalities to the plugin, anyway.

Vector graphics are easier for storage purposes, but they are terrible in a couple of other crucial aspects that makes them problematic as an end-all-be-all graphics solution.

First, it is very very difficult to create a high level of detail with vector graphics without using several layers. If you want grunge, you do that one, lighting, shading, several masks and gradients later and you have something acceptable.

With bitmaps, you just paint it, and it's always one layer. Which brings us to my next point:

Vectors are much, much harder on the machine. Calculating them and redrawing them - especially when there are multiple layers involved(such as with one shape with a little shading) is time-consuming and severely limits how much detail you can allow.

The best solution to this is to simply draw in vector, and then render it to raster for performance purposes.

This is fine in theory, especially for simple shapes that do not require a lot of animation. But when it comes to animated vectors? Can't do it. You're back to loading it all onto the CPU or pre-rendering every animation sequence at the desired FPS.

My favorite middle ground is Anime Studio. Good cheap vector animations that can be rendered out to raster, but usually need a little clean up.

I'm going to have to look at SVG though - I've got something that has some odd collision detection requirements I'm hoping it can help with.

Actually there are both advantages and disadvantages of using vector images. I am a graphics designer and mostly using CorelDRAW, one of the best vector image software.

I'm new on game designing but i start to develop a platform game. When i'm designing visual elements like chracter, prize coins, platforms, backgrounds etc. CorelDRAW is my platform. It is sad that i have to export my vector designs as bitmap images because of the quality and file size.

You can compare visual quality diffrence between bitmap&vector image.

<img src="http://i50.tinypic.com/whav8.jpg" border="0" />

That one is a sprite of the game. It's a small image and file size is better as transparent png. 5kb vs 23 kb. But don't forget it is just a small image. Bigger png image will increase the file size but bigger svg will not that much.

So far it is quite logical to use vector images. But we have a problem with vector images. One of our friend mentioned about it, if you want more realistic image like a glossy car with shadows etc. you must use lots of gradients/lenses.

You may say "So what? We also use those effects, gradients and fancy stuff with photoshoped images." Thats correct in one way, you use those effects on ps and when you save your image as jpg, gif, png kind of file, those effects will not effects anymore. They are just reflections of those effects on a still image and does not need complex calculations.

But vectors are re-drawn when you want to display it. Color gradients re calculated and drawn, glare effects recalculated and drawn so it use more cpu & gpu than a bitmap.

When its an example like the given previous posts (head of a guy) its ok but if you want to use lots of effects or lots of vector images on a game, it will use lots of cpu, gpu and memory.

BUT!

It will be so magnificent if we have vector image support on C2. Lots of benefits when we use it wisely. Especially on adventure games like monkey's island, broken sword or 2D platformers.