Forums » Impact Engine » Webgl and Impactjs

Let me say that I am very fond of Impactjs engine. I've bought it, thinkered with it and everything was OK. However, I have to say that I feel a bit disapointed and kind of deceived:

The very first game that you can see on the Impactjs homepage is done with webgl. One can read nowhere on the homepage nor on the entire site that Impactjs does not implement webgl. Therefore, I happily thought that there is an easy out of box Impactjs support for webgl. Wrong, wrong, wrong. No such thing.

Anyone who knows anything about anything in the HTML5 game dev world knows that Webgl is an absolute must and that it is the corner stone of the future web game development. That said, it is very clear that the fate of the Impactjs is decided already in advance if it does not implement the easy out of box webgl support. Just like Phaser or Pixijs, for example. And Construct 2. And the list goes on...

I find that the Impactjs is still superior than the competition thanks to its excellent code organization and ease of use. However, I am afraid that this will not be enough to keep it alive in the years, or even months, that come...

Or maybe I am just super naive beleiving that the author of the library plans to keep it live... If that's the case, the least honest thing would be to say it out and loud...

P.S. I have personally renounced using Impactjs for my next project. I have almost finished my first bigger commercial project and I know the value and necessity of the Webgl...

First off, I totally respect your opinion. Here's a thread talking about something similar.

Here's the link to the 2.5 plugin that Dom wrote to enable Xibalba.

Here's WebGL-2d, a drop-in replacement for the Canvas API that should work with Impact.

Are you gonna end up on Phaser?

I always thought impactjs as a 2D game engine and never bothered to look for WebGL support. Why do you think that WebGL is an absolute must? Is it also that necessary also for 2D games? Why do you think so?

@drhayes Thank you! The problem with the Xibalba is that it is 3D. I want something 2D. On the other hand, WebGL-2d is 4 years old. I would not want to base my game development on something that is that old and does not get updated and will not get updated.

@dungeonmaster WebGL is doing the graphics processing directly on the graphics card. It's a hardware renderer. With a growth of entities it gets tens and tens times faster than the canvas, which is a software renderer. Please look at the Figure: Test result at this page: https://developer.tizen.org/dev-guide/2.2.1/org.tizen.web.appprogramming/html/guide/w3c_guide/graphics_guide/performance_comparison.htm for example.

Finally, with WebGL you can apply all those filters which will make your game look really professional and beautiful. I mean, imagine being able to apply in real time effects similar to those of photoshop, and to do it on the level of entity and on the level of layer and to change effects' parameters in real time....

canvas, which is a software renderer

Canvas has been hardware accelerated for some time. If you're running Chrome, you can type about:gpu in the address bar and hit enter to see if your computer is hardware accelerating the canvas.

@Joncom, thanks for the tip :) Here are the results:

Canvas: Software only, hardware acceleration unavailable
WebGL: Hardware accelerated

Is there a similar test for Firefox?

@Lunarovich: That's too bad. Mine looks like this:

Canvas: Hardware accelerated
WebGL: Hardware accelerated

You asked:

Is there a similar test for FIrefox?

Google says yes:

http://blog.mozilla.org/joe/2010/11/10/how-to-tell-if-youre-using-hardware-acceleration/

On the other hand, WebGL-2d is 4 years old. I would not want to base my game development on something that is that old and does not get updated and will not get updated.

This only becomes a problem if it's missing features you need or has bugs that are tripping you up. It being old, in and of itself, isn't a problem. And since it's open source, at least the fixes any of us make benefit the whole community, right?

On the subject of WebGL, anyone gone to shader school yet? I just found it, haven't had a chance to play around yet.

Thanks for the cool link!

If something is old that means that it has not been updated. Since it has not been updated, it is very probable that it has not implemented newer features and that it is not compatible with those that have changed. I don't want to risk the probable time loss. On the other hand, the gl programming is beyond my expertise.

Beside, the point of having a library is to have a ready made functionality. You don't want to go to low level when you're making a game. Because you'll spend your time writing the engine and not the game.

Anyway, the ideal would be to have a webgl support out of box together with cool filters/effects and different blend modes... I mean, I don't want to go to shader school. I want to use shaders :)

I'm writting all this because I think that Impactjs is very cool engine. However, the speed and the beauty of Webgl is a must for me...

True. If it makes you feel better, the WebGL-2d API implements what Impact uses, so the engine wouldn't be holding you back. But, to your point, it wouldn't help you either – no WebGL specific stuff in Impact.

It would probably be worth your time to dive into Phaser. It doesn't expose any higher-level WebGL stuff either (you'll still end up coding your own shaders, for example) but it does run "natively" in WebGL. Of the engines I've looked at, it made the most sense to me and didn't seem to have any limitations that I didn't bring to the table myself.

Please post back to the list if you find a JS 2d engine that meets your needs; I'd be very interested.

@drhayes, I was experimenting with the Phaser before I decided to buy Impactjs. Phaser's documentation is very messy and it does not have a decent editor. I cannot make a game without an editor.

The Weltmeister was the main reason why I bought Impact in the first place. I instantly fell in love with its elegance and simplicity. When I discovered the impact++, I was really happy. However, I cannot get over the lack of Webgl out of box...

When I bough Impactjs, I have already owned Construct 2, which is IMHO, a great tool for making 2D games. It gives you Webgl, composite blending and filters / effects out of box. Also, it is very well optimized. I guess that it'll soon become Unity of web game dev.

However, C2 has only visual scripting and I prefer textual scripting to visual. But if you are OK with visual scripting, I cannot but recommend C2.

Sorry I keep bumping this thread, but I just found PandaJS. The documentation isn't so great... but holy hell, check out the editor!

It kinda looks like an open source ImpactJS, but WebGL-ized. That does mean that pixel-level stuff would be harder without writing a shader... but that's another discussion, I guess.

Very cool! Looks like a viable alternative. If I got it right, this guy ekelokorpi already made an Impact-Pixi fusion. The plugin was available at github, but is removed.

Anyway, I started a project on my own: an engine assembled out of various free libraries, such as Pixijs for rendering, SATjs for collisions, Tweenjs etc. For now, I have a very nice Tiled integration, with tiled maps, objects and polygon collision masks which can rotate and scale (which you can draw directly in tiled :) ). Anyway, a very rewarding experience and not terribly difficult one...

Hello again! I've just tested my Impact game performance with the fork of the wegld-2d that can be found here: https://github.com/syntagmatic/webgl-2d

The performance boost is great!
- Before the webgl-2d the game was using around 10% of the GPU. WIth the webgl-2d, I get about 4% GPU usage.
- The tab were the game runs was consuming about 7% of the CPU without wegl-2d, and with it, the CPU is about 2%.

How to do it? Include the webgl-2d in your index.html, and than do the following in the impact/system.js

		this.clock = new ig.Timer();
		this.canvas = ig.$(canvasId);
                WebGL2D.enable(this.canvas);
		this.resize( width, height, scale );
//		this.context = this.canvas.getContext('2d');
		this.context = this.canvas.getContext('webgl-2d');

Too bad that no one seems to be maintaining this great lib... :(

Side note. I've just turned on accelerated canvas in chrome, and it performs better than this lib.