Mode 7 Plugin

Post your completed addons to share with the community

Post » Sat May 12, 2012 2:46 am

I would forget about Canvas, Div , CSS3 and stuff and try to handle it all with WebGL. It's funny since Wolfstein 3D, that uses the same concept of transforming sprites, was released for browsers recently and it's made entirelly with Divs and div transforms. Pure madness.
B
58
S
13
G
10
Posts: 632
Reputation: 12,580

Post » Sat May 12, 2012 10:46 am

@Kiyoshi : the problem with WebGL is that it's not supported on mobile platform, while CSS3 3D transform are.
B
33
S
9
G
6
Posts: 709
Reputation: 6,704

Post » Mon May 14, 2012 4:50 pm

Well that's the core of the problem then. Damn WebGL, or something like it must get full support asap for html5 mobile to win it's space among native solutions.
B
58
S
13
G
10
Posts: 632
Reputation: 12,580

Post » Sat Jun 09, 2012 10:03 am

where's the plugin?
B
14
S
4
G
4
Posts: 22
Reputation: 3,139

Post » Sat Jun 09, 2012 1:06 pm

Have you actually read this thread? ^
B
47
S
10
G
6
Posts: 455
Reputation: 8,326

Post » Thu Oct 25, 2012 10:20 pm

How is going with this development of mode 7?
B
105
S
29
G
28
Posts: 3,102
Reputation: 27,380

Post » Fri Oct 26, 2012 10:58 pm

I been waiting for this as well. 8| Perhaps Pode could take it up. ;D
B
50
S
11
G
7
Posts: 274
Reputation: 8,146

Post » Sat Oct 27, 2012 8:09 am

I would like to see mode7 on c2 in action. How's the devlopemnt?
B
18
S
3
G
3
Posts: 109
Reputation: 2,784

Post » Sat Oct 27, 2012 9:37 am

@all : there's a few way available to do a Mode7 plugin. However, I can see a few roadblocks.
The solutions and their problems :

- skewing the image via Javascript (a perspective transform) : I have some code doing that already. But it's slow, and even slower on mobile and low en desktop. Another point : Chrome isn't antialisaing the <canvas>, Firefox is doing it. That means that when I triangulate a quad to deform it, the seam between two triangle is perfect on Chrome, but leaks some black pixel on Firefox (because of the anti-aliasing).

- CSS transform : easy to do. The problem : you can't draw on a <canvas> (which is what C2 is using in the end) a DOM element while retaining the various CSS transforms and filters applied to it. If I keep it as a DOM, overlayed over the game (like the Button Object used in C2), I can't respect layers order, the Sprite is always going to float above everything else.

- WebGL transform : easy and fast. Works only on system with good WebGL support (no iOS and Android). However I pokked around C2's structure, and I have no way to grab the WebGL canvas as a texture. Perhaps @Ashley can provide me a hint here ?

- SVG transform : it's a perspective transform, and luckily it's available on desktop, and mobile (at least it works good on iOs, a little more slower on Android). The problem is the same as the one with my SVGCanvas plugin : I can decide to draw the SVG on the <canvas>. Firefox allows it without a problem. On Webkit, there's a browser-wide bug that says the <canvas> is "tainted" when drawing SVG on it, preventing the reuse of the canvas after that (to simplify).
If I don't draw the SVG inside the <canvas>, it works everywhere, but the SVG layer is going to float above everything else, like a CSS transform, and doesn't respect the layers' order.

If you don't want to use plugins (Unity, Flash, Java), there are no other way to do a Mode7, apart from pre-skewing your Sprite in your favorite image editor.
(You can always do it the old way, with hundred of canvases, each one a little smaller than the previous one, to have a skew effect, but it's not good performance-wise...)
B
33
S
9
G
6
Posts: 709
Reputation: 6,704

Post » Sun Oct 28, 2012 6:17 pm

Pode, I would gladly take the webgl version over the rest! It's far better than having nothing at all. Personally I use nothing but webgl fx in my game. No real interest of making it portable. That being said I'm sure most people would like to have it work on iOS and droid.

I'll take anything over nothing though!

Thanks for letting us know the ups and downs of bringing it in!
B
46
S
12
G
7
Posts: 340
Reputation: 7,926

PreviousNext

Return to Completed Addons

Who is online

Users browsing this forum: No registered users and 1 guest