Thursday, March 24, 2011

Can you do that with HTML5?

I have already been babbling about what Construct 2 is capable of doing in its current state. Now in the light of the previous post, where I demonstrated a way to create a sun effect, I was wondering... could this be done already in C2?

Let's have a look at a list of features/objects I have been using for that sun in Construct 1:
- sprite object
- gradient object
- additive effect
- color filter
- distort map
- hash table object
- delta time 
- while loop
- rotation behavior
- global variables

Green color means it is already available in C2, red colored features are only available in C1. That doesn't look too promising to be honest. But let's give it a quick shot anyway!

Since there are no distort maps so far in C2, I just changed the graphic of the beam sprite to have a triangular shape from the getgo instead of using a simple line and displacing it. Same story for the missing color filter: simply preapplied a color to the graphic.

Also of course the non-existing gradient object doesn't give you much trouble, since you can simply import a premade graphic here as well.

The lack of global variables isn't worrying either, since one can just use an object's instance variable for the same purpose. And the rotation behavior isn't really needed either, you can change the angle with events easily.

What's really troubling though is the lack of the While loop. I took a few minutes to think about it, but couldn't really come up with any practical way to overcome this issue. I don't see the absolute necessity of the hash table here, but without a While loop I felt basically lost at this point.

So I decided to go for a controlled distribution of the light rays, in order to avoid any gaps appearing. Which means I simply go through the angles from 0,45,90,135...270 and spawn the new beam with that orientation.
This means the sun effect doesn't look as organic as its C1 counterpart.

Also interesting in this context is that the lack of an internal image editor means you cannot place the hotspot of sprites, it will always be centered. For this reason I included transparent space in the beam graphic to the left, so that the centered hotspot would actually be at the position needed.

Click here for the Construct 2 version of the sun effect

What's the final verdict? Let's take a look at a comparison of both versions:
Not quite as striking as the original version one has to admit, although I think I could have done much better with the option of a while loop. That's a feature I'm definitely looking forward to! Also one has to notice that the additive effect does seem to work differently in HTML5, it doesn't make for an effect as striking as it did in C1 with DirectX.

If you opened the HTML5 link above in Firefox, you probably didn't have much fun with it. The performance can only be described as horrible, which may be nothing new, but damn Mozilla - get this working properly! Chrome seems to be the best choice. With this example it gives me an average of 42 frames per second. Which I think isn't all that bad, but it's still far from being impressive.

This tryout leaves me only half-pleased. I think with the features C2 currently has available, I didn't do too bad. But also I'm pretty concerned with the performance, which isn't yet anywhere near where I want it. What do you think? Could you have done it better in Construct 2?

Download the capx source file

No comments:

Post a Comment