Vector graphics support?

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.

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.

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 bits

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.

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.

itunes.apple.com/us/app/heroes-vs-monsters/id467274250

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?

It looks like Hero's vs Monsters uses sprites for the objects, and tweening engine to handle animations.

C2 has the third party program of Spriter(HERE) to do this.

The only game that I can think of that uses Vector in gameplay is Mark of the Ninja. But that's not on mobile. I suspect SVG would be fine for C2 as a Desktop environment only, but who knows. Maybe knowing the limitation and using tricks we could use SVG fine :)

jayderu: "It looks like Hero's vs Monsters uses sprites for the objects, and tweening engine to handle animations."

I don't doubt you, and believe this to be probably true myself before now, but do you have information on this? I was trying to find what tools they had used to create art and code it for the iPad is why I'm asking.

From my perspective, I'm not sure that I would ever use the SVG plug-in if bitmap resources would serve just as well.

The only reason to put native vector-art into C2 (essentially making it a full Adobe Flash HTML5-based competitor, which isn't a trivial point, given the market it opens up) would be to have art-asset and animation creation inside of C2 itself, AND to permit programmable interactivity of the animation aspects. The quickest and most cost-effective 2D animations seem to be with vector-animation systems like Synfig, Toon Boom, and Anime Studio, but these don't offer the ability, like Flash, to make an interactive game with vector art. And the level of interactivity I'm speaking of is down to the level of modifying positions of individual control-points (or a system of bones) based on real-time physics, or the actions of the mouse. (for example, rag-doll physics on a vector-art based character, not that something very similar and acceptable couldn't be accomplished by hand with bitmaps or more easily with Spriter, but it would be a composite-bitmap style animation, rather than a potentially more fluid-looking vector-based animation.) (Also, permitting control of colors of the vector art, so that things like character- or item-customization are easily permitted, but use of the SVG plug-in could cover this point.)

But this feature is only seen in a small subset of all Flash games. So I really, really don't expect Scirra to put this kind of stuff into C2 until maybe they are at the point of searching for new things to add. Maybe. And maybe not even then.

Hey Pode !

It would be great to preview SVG's in the viewport! :D

NECROKRIEG : it's not possible, the IDe isn't using any HTML rendering ability.

Pode Oh I see! Its not the end of the world! Its a great plugin :D

Hi

Just want to share that GameMaker just added support for vector graphics.

yoyogames.com/tech_blog/33

That's definitely an advantage for GameMaker.

I'm not sure it is for GameMaker.

In response to the iPad app, I do't belive iOS can handle vector graphics for games. The Universal apps can contain multiple images though and select the proper image for the right device. They can also scale. hence why the Universal apps are so large in size. The squashing from graphics would be because the iPad is a 4:3 ratio while the iPhone is 16:9 ratio (more or less). Chances are, the graphics are scaled higher for iPad resolution and shrunk by the OS to fit the smaller screen instead of using different images.

I think the biggest issue with vectors, and Ashley can correct me if I'm wrong since he designs C2, is that collision events would be a nightmare during run time. As is, collisions stay static to size of the image and location on the image. A lot of collisions already require some heavy processing, especially with a lot of them on the screen. Trying to measure all those collision events while transforming them (animations of vectors) would really suck for an HTML5 based game. As it's been said, the Flash VM was built from the ground up to handle this. Javascript and graphics rendering in browsers were not. A fair amount of processing would probably need to be used to handle them.

Then we get into the issues with mobile. Sure, Windows 8 might be okay, but iOS and Android would not. Playing games through portable browsers wouldn't work. Also, I'm sure it would wreck havoc on CacoonJS.

It, again, was said before, but with the current state of PCs, why care about size so much? I know it seems like a lazy thing to say, but broad band connections are much faster and hard drive sizes are much bigger. The game, if targeting node or HTML5 browser, can always be made in higher res (1080P) and downsized by the system. That would produce FAR less overhead then running SVG animations and transforming collisions on the fly, even for older systems. Also, speaking of older systems, they could handle downsizing rastor images much easier than SVG.

If the target platform is going to be mobile, the game dev will design with that in mind, or port accordingly. It's lazy not to and makes for a bad experience on the player's part. Also, mobile can't do SVG.

At the end of the day it's the right tool for the right job. In this case though, since C2 targets an HTML 5 environment and uses wrappers to port to other platforms, I can't see where a tool like SVG would be beneficial at all. I hate to say it, but if it comes to a point where SVG is a required tool for the job, maybe a different IDE or platform should be used (in this case Flash)?

I wanted to clarify my "I'm not sure it for GameMaker" response. I don;t know enough about GameMaker to know how they export. If they compile GML down to a machine language then it might handle Vector images better. I know they have modules that allow exporting out to nix and HTML 5 among other things. If that's what YoYo is doing though, they have a built in engine to handle SVG or they are converting the SVG graphics to something different at compile time. Nonetheless, using their HTML5 export module with vector graphics would impose the same exact restrictions that C2 would have with them. At that point, despite it being made in GameMaker, the game is still being processed by the native browser of the system with the same limitations.

mepis

From reading your post. You seemed to have have lumped vector and flash animation as the same thing. This however is not the case.

C2 would treat a vector.svg image as a single object in C2. C2 wouldn't be breaking the svg down into component bits and applying different a collison box to each.

Flash animation is usualy composed of either a group of images or svg images and are animated on time frames. Then during runtime the rendered also handles tweening. This is similar to 3D graphics.

Now if you saying that mobiles can't run tweening graphics then I have a large library of 3D games can say other wise.

But that still brings the matter to vector rendering which can be heavy. however with some trickery you can do vector graphics and run with fine runtime. Examining the situation. Vectors are best sizing and deformation. If this is the case. There is a unique 3D rendering technique I can't remember what's it called at the moment. But it's pretty nifty and offers massive performance benefits by reducing render overload.

The trick is to create a mini canvas equal to the size of the object. Render the SVG to the the canvas. use the canvas as the sprite. This way your not constantly rendering the SVG. Now when canvas image needs to change due to colour, deformation or resizing. Then it's just a matter of re-rendering the SVG to the canvas component again. Doing that means you get the benefit of SVG and the render time of sprites.

So it's very doable to do full flash animation on mobile devices. It's just a matter of being of being efficient with resources and working around the hurdles. often taking the simple straight forward method can be worked around :).