Simple 3D Transforms

21 replies [Last post]
Matthew Pringle
User offline. Last seen 3 weeks 2 days ago. Offline
Joined: 23 Feb 2010

It would be great if I could rotate / move a 2d plane into the 3rd dimension, with correct perspective.

On the old Super Nintendo, there was a chip / api called Mode 7. Its what enabled games like FZero and the original Mario Cart to be made possible.

http://en.wikipedia.org/wiki/F-Zero

I believe the effect is achieved by mapping the full track on a 2D plane and rotating it to form the ground.

Do you guys think this would be possible? I dont expect a full 3D engine but if you could give us what the SNES could do I believe it will push the game edition in new directions.

Replies

Matthew Pringle
User offline. Last seen 3 weeks 2 days ago. Offline
Joined: 23 Feb 2010

Heres the mode 7 writeup http://en.wikipedia.org/wiki/Mode_7

Also when I said "simple" I obviously meant that for me, I realise that it wont be that simple for you guys!

carlos m. icaza's picture
carlos m. icaza
User offline. Last seen 8 hours 12 min ago. Offline
Ansca Staff
Joined: 22 Jun 2009

Matthew

do you have some graphic plates we can play with?

Carlos

Matthew Pringle
User offline. Last seen 3 weeks 2 days ago. Offline
Joined: 23 Feb 2010

Hi Carlos

Not to hand, I would suppose they would need to be constructed to fit the engine.

From looking at some online examples you would either use 1 large texture with the whole track mapped on it or stitch a series of track elements together to form a longer, more curved track.

I have found an online example of the effect in flash and browser playable.

http://www.fastfroots.de/

This also discussed the effect in flash using actionscript

http://www.protopop.com/lab/actionscript/mode7/

This is the best track example I could find. Part of the effect is that the texture is not smoothed I believe and they run a different filter on it.

The resulting effect would look like this

Matthew Pringle
User offline. Last seen 3 weeks 2 days ago. Offline
Joined: 23 Feb 2010

Ive mocked up the provided track graphic in opengl (no smoothing) to demonstrate how the image when warped becomes the track

Cromax
User offline. Last seen 32 weeks 1 day ago. Offline
Joined: 17 Jul 2010

It could be useful if there is any kind of image transformation. Not just scaling and fading. With full image transformation i could write some demos to simulate some 3d stuff.

Matthew Pringle
User offline. Last seen 3 weeks 2 days ago. Offline
Joined: 23 Feb 2010
MarkHenryC
User offline. Last seen 5 weeks 3 hours ago. Offline
Joined: 11 Nov 2009

If I may second this suggestion:

Arbitrary setting of the 4 xy points of a quad (rect or image) would give enormous flexibility in processing images, backdrops, tiles etc.

Ziao
User offline. Last seen 3 days 12 hours ago. Offline
Joined: 2 Aug 2010

absolutely, amazing things could be done with this simple functionality

infuseddreams's picture
infuseddreams
User offline. Last seen 1 week 4 days ago. Offline
Joined: 8 Jun 2010

I would love this to be implemented.

BarkBarkCo
User offline. Last seen 13 weeks 6 days ago. Offline
Joined: 19 Oct 2010

Not sure if this would work, but could use a webOverlay with CSS 3D transforms to display your background?

Check out this series covering CSS 3D-transformations:

http://www.eleqtriq.com/2010/05/understanding-css-3d-transforms/ Part 1

http://www.eleqtriq.com/2010/05/css-3d-matrix-transformations/ Part 2

Disclaimer: I have no idea how to implement this. I'm just throwing ideas out there...

Matthew Pringle
User offline. Last seen 3 weeks 2 days ago. Offline
Joined: 23 Feb 2010

Its possible if Ansca build in a distinct api like Nintendo did.

Complicated yes, but I think having that effect built in would provide a similar boost to Corona as did the original mode 7 for Nintendo. If you were around at the time you should recall the excitement about how a 2D system could simulate a 3D environment.

This is exactly what Corona needs, the competitive advantage.

There is a reason why you remember some of the most popular games on the SNES.

Pilot Wings
Axelay
Super Mario Cart
F Zero
The Star Wars games

They all used Mode 7

carlos m. icaza's picture
carlos m. icaza
User offline. Last seen 8 hours 12 min ago. Offline
Ansca Staff
Joined: 22 Jun 2009

Matthew

want to help me implement it?

c

infuseddreams's picture
infuseddreams
User offline. Last seen 1 week 4 days ago. Offline
Joined: 8 Jun 2010

That would be awesome Carlos !

jmp909
User offline. Last seen 7 weeks 2 days ago. Offline
Joined: 14 May 2010

in Flash 7 they did it with scaled rectangles & masks (which Corona doesn't have), before there were any bitmap manipulation functions

some example sources here
http://www.gotoandplay.it/_articles/2006/09/mode7racing.php
http://www.gotoandplay.it/_articles/2004/11/mode7proto.php

j

Matthew Pringle
User offline. Last seen 3 weeks 2 days ago. Offline
Joined: 23 Feb 2010

Carlos, sure thing!

I will email you shortly with an idea or two ive been playing with.

If you dont get it let me know on here.

Matt

infuseddreams's picture
infuseddreams
User offline. Last seen 1 week 4 days ago. Offline
Joined: 8 Jun 2010

This should be high on priority list imo. Just imagine the games we could create using mode 7 :)

x-pressive.com's picture
x-pressive.com
User offline. Last seen 11 hours 29 min ago. Offline
Joined: 23 Oct 2010

I think what you are talking about is not the raster technique used in the early racing games, it's more like the "shape transform" tool in Flash where you can freely move an images corners to "deform" it, isn't it?

If you could freely move the four corners of an image (and the image's content will always align to these four corners), all you need to do is to use some 3D rotation formula on those corners (from within LUA) to fake any 3D rotation on that object.

Matthew Pringle
User offline. Last seen 3 weeks 2 days ago. Offline
Joined: 23 Feb 2010

Carlos is looking into integrating some transformation functions at the moment, but no eta

I would say that yes, being able to deform a shape or rotate and move it in the z axis would allow the above game / style to easily be replicated

jmp909
User offline. Last seen 7 weeks 2 days ago. Offline
Joined: 14 May 2010

those flash versions just use lines of increasing height. plus a mask.

this code is from http://www.gotoandplay.it/_articles/2004/11/mode7proto.php

"pic" and "picPeke" are just top down versions of the track. ("picPeke" appears to be a blurred version presumably for distance)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
//======INI-createStrips========================================
//controla la creacion de los strips
function creaStrips() {
        var a = 1;
        var depth = 5;
        var grosor = 1;
        var multiply = 1.02;
        var factorScala = 5;
        var alturaStrip = 240/2;
        var acumula = grosor;
        //
        for (grosor=1; grosor<grosorFinal; grosor=grosor*multiply) {
                grosor = grosor*multiply;
                grosorFloor = Math.floor(grosor);
                //
                if (grosorFloor<2) {
                        strip = _root.attachMovie("picPeke", "pic"+a, depth);
                } else {
                        strip = _root.attachMovie("pic", "pic"+a, depth);
                }
                strip.pic._xscale = 100;
                strip.pic._yscale = 100;
                //posiciona
                strip._x = 200;
                //200
                strip._y = 400;
                //350
                //the ground is scaled only once, when created. not on every frame
                strip._xscale = a*grosor*factorScala;
                strip._yscale = a*grosor*factorScala;
                //end function
                mask = _root.attachMovie("mask", "mask"+a, (depth+1));
                mask._height = grosorFloor;
                mask._y = alturaStrip;
                strip.setMask(mask);
                //
                strip.onEnterFrame = function() {
                        //the pic is rotated, but the 'move' symbol inside the pic is what is moved.
                        this.pic._rotation = -_root.rotation;
                        this.pic.move._x += -_root.sinness;
                        this.pic.move._y += _root.cosness;
                };
                //
                alturaStrip = alturaStrip+grosorFloor;
                depth = depth+2;
                a++;
        }
        //end while
}
//======END-createStrips========================================

Matthew Pringle
User offline. Last seen 3 weeks 2 days ago. Offline
Joined: 23 Feb 2010

I did an experiment a while ago using lines of increasing height to get a background.

http://developer.anscamobile.com/forum/2010/08/22/simple-3d-texture-background

Its not great but proved something like that is possible.

I would have thought though that if its done in opengl by transforming a plane it would be a lot simpler to implement, 100% hardware accelerated and with a lot less overhead.

The real mode 7 used something similar with interrupts and the flash version relies on the computing power of a desktop.

jmp909
User offline. Last seen 7 weeks 2 days ago. Offline
Joined: 14 May 2010

we need openGL copyPixels ;)

Viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.