Vector graphics support?

Discussion and feedback on Construct 2

Post » Sun Aug 04, 2013 11:33 pm

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 :)
B
87
S
18
G
9
Posts: 2,455
Reputation: 14,834

Post » Wed Aug 07, 2013 6:57 pm

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.
B
14
S
4
G
1
Posts: 26
Reputation: 1,747

Post » Thu Sep 12, 2013 12:32 am

Hey @Pode !

It would be great to preview SVG's in the viewport! :D
B
15
S
6
G
3
Posts: 87
Reputation: 4,304

Post » Thu Sep 12, 2013 9:34 am

@NECROKRIEG : it's not possible, the IDe isn't using any HTML rendering ability.
B
33
S
9
G
6
Posts: 709
Reputation: 6,704

Post » Thu Sep 12, 2013 8:47 pm

@Pode Oh I see! Its not the end of the world! Its a great plugin :D
B
15
S
6
G
3
Posts: 87
Reputation: 4,304

Post » Sat Nov 30, 2013 11:59 am

Hi

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

http://www.yoyogames.com/tech_blog/33
B
51
S
18
G
13
Posts: 385
Reputation: 10,918

Post » Sun Dec 01, 2013 7:42 pm

That's definitely an advantage for GameMaker.
B
14
S
3
G
1
Posts: 87
Reputation: 1,103

Post » Sun Dec 01, 2013 9:21 pm

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)?
Kurieus
Come visit and play Blast Box!
B
15
S
3
Posts: 205
Reputation: 1,349

Post » Sun Dec 01, 2013 9:25 pm

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.
Kurieus
Come visit and play Blast Box!
B
15
S
3
Posts: 205
Reputation: 1,349

Post » Mon Dec 02, 2013 4:19 am

@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 :).
B
87
S
18
G
9
Posts: 2,455
Reputation: 14,834

PreviousNext

Return to Construct 2 General

Who is online

Users browsing this forum: henryScirra, shinichild and 11 guests