Vector graphics support?

Discussion and feedback on Construct 2

Post » Mon Apr 30, 2012 9:56 am

[QUOTE=Bob Thulfram] [QUOTE=Beany] [QUOTE=Bob Thulfram]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.[/QUOTE]

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! [/QUOTE]

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!    [/QUOTE]

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!

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

.... Sorry for long post! LOLBeany2012-04-30 10:00:34
B
1
Posts: 7
Reputation: 239

Post » Mon Apr 30, 2012 10:11 am

Nice one! I think Edge could to kill Adobe Flash lol
B
96
S
25
G
20
Posts: 3,055
Reputation: 22,644

Post » Mon Apr 30, 2012 12:55 pm

@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.
B
33
S
9
G
6
Posts: 709
Reputation: 6,704

Post » Mon Mar 25, 2013 6:45 pm

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.
B
10
S
3
G
4
Posts: 13
Reputation: 3,264

Post » Wed Apr 17, 2013 9:09 am

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.



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.
B
20
S
4
G
4
Posts: 160
Reputation: 3,746

Post » Wed Apr 17, 2013 10:01 am

I know I'll probably get a lot of disagreement with my opinion, but, why do people care so much about filesize these days? Internet is ultra fast, people have gigs of ram and HDD space. Can't "High Quality" images just be made in a large size like 256x256 then shrunk down so when the game requires zooming in or enlarging the sprite, it looks high quality?
Don't get me wrong, I love the look of SVG and I love the style that Flash animations show, even @Beany s' head in SVG looks really awesome, but I don't think it's essential in a game just for filesize or quality. I agree with @plauk in the sense that it would be useful for things that a raster image couldn't do as easy (even combined with WebGL effects, it still may not give the desired effect like vector graphics would), but that's about it regarding vectors in a game.
B
45
S
19
G
10
Posts: 562
Reputation: 9,543

Post » Wed Apr 17, 2013 4:08 pm

Zooming, you can use zoom with SVG and retain qaulity of image. Where as in raster to maintain quality requires different sized images.

While the internet is faster it can still take an unwanted amount of time to download a 200MB game to just try out.

Filesize is still important to web based distribution. Since graphics often take up the most file size. The change of graphics to SVG can move some games a minute to play to seconds.
B
87
S
18
G
9
Posts: 2,455
Reputation: 14,834

Post » Wed Apr 17, 2013 4:15 pm

realistic vectors can take a lot of CPU, otherwise use high resolution PNG fixes the problem

click anywhere zoom in and out


http://flamma-beta.com/HTML5/zoompng/

left blue is standard resolution
right blue is high resolution 8 bits
Pink one looks better, high resolution 16 bitsJoannesalfa2013-04-17 16:15:38
B
96
S
25
G
20
Posts: 3,055
Reputation: 22,644

Post » Thu Apr 18, 2013 2:21 am

Yes, SVG/vector support would be a great idea. I currently use Inkscape almost exclusively for my games. It would be nice not to export everything to PNG.
B
32
S
7
G
8
Posts: 312
Reputation: 8,467

Post » Sun Aug 04, 2013 9:37 pm

I've played Heroes vs Monsters on my 9 yr old's iPad, and it is a nice game. He bought it with his own money after seeing a friend playing it. It's a pretty nice little game with a lot of appeal.

https://itunes.apple.com/us/app/heroes-vs-monsters/id467274250?mt=8

It is obviously produced with a vector art program and appears to be 100% vector art, and if it were a Flash game, it would be obvious that it was all vector all the way through up to screen render at run-time. But since this is iOS, I know it isn't Flash.

The game works on iPod, up through iPhone 5 and full-size iPad. Obviously, it would be a great benefit if the underlying game engine accepts vector assets, and there is never any bit-map phase that you have to round-trip your graphics assets through, but I have no idea if there is such a framework for iOS. (The benefit being that scaling the GUI and mobs is pain-free, except where the developer might choose to actually provide more layout area on a bigger device.)

Performance wise, the individual elements of the mobs appear to be static, meaning the whole game simply treats the vector art pieces as if they are bitmap sprites. I need to play it again to see if there is animation of the elements that implies vector abilities, but the mobs are all basically a head, torso, hands, and feet. These 6 elements are merely translated and rotated for all the movement and fighting animation. Armor, helms, weapons, and such are mostly statically stuck onto the basic 6 elements (or replace them, as in 'plate-armor boots' replacing default shoes).

I did check out a YouTube of the game real quick and see that there is element squashing and scaling, such as when a bow is shot, or when smoke-cloud, flame, or dazzling-light effects are performed, but in the fight I watched, there was nothing I saw that can't be done in C2 with bitmaps.

I've certainly never seen any HTML5 system out there that rivals Flash for creating vector-based games. Adobe Edge is obviously meant to grow into that role, and there is a company called Sencha that produces something currently equivalent to Adobe Edge for use with their other framework(s) that could actually compete slightly with Construct 2 for making an HTML5 game, but it has nowhere near the ease of use and speed, or versatility of C2.

In my very modest opinion (meaning I wouldn't give my opinion a great deal of credence, but here it is anyway), given that it would be the first platform that would attract Flash game developers in droves, adding Flash-style vector creation and animation into C2 would be huge.

For me, that means the ability to create symbols that have their own behaviors, and, second, the ability to animate the vector art, but have it be interactive, not just static. As mentioned above, Anime Studio does vector animation very well, but making it interactive in a C2 game would be difficult, or more accurately, interactivity would effectively be limited to about the same kinds of things you could do with Spriter and C2, or actually not even that much, easily.

Flash can allow things like real-time game physics, i.e. gravity and collision, to affect the vector animation, since the underlying assets are vector right up until final rendering on a screen.

All this said, it would be nice, but I can definitely see this being too little gain for the amount of work involved. On the other hand, how formidable would the competition be from an Adobe Edge that was fully programmable and as capable as Flash is right now?
B
14
S
4
G
1
Posts: 26
Reputation: 1,747

PreviousNext

Return to Construct 2 General

Who is online

Users browsing this forum: randomly, Yahoo [Bot] and 11 guests