Simple 3D Transforms

Matthew

do you have some graphic plates we can play with?

Carlos
[import]uid: 24 topic_id: 1640 reply_id: 4747[/import]

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

[import]uid: 5354 topic_id: 1640 reply_id: 4749[/import]

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

[import]uid: 5354 topic_id: 1640 reply_id: 4750[/import]

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. [import]uid: 7645 topic_id: 1640 reply_id: 4926[/import]

Heres the math behind it

http://www.coranac.com/tonc/text/mode7.htm [import]uid: 5354 topic_id: 1640 reply_id: 5141[/import]

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. [import]uid: 3953 topic_id: 1640 reply_id: 5266[/import]

absolutely, amazing things could be done with this simple functionality [import]uid: 7980 topic_id: 1640 reply_id: 5970[/import]

I would love this to be implemented. [import]uid: 6981 topic_id: 1640 reply_id: 9605[/import]

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… [import]uid: 10248 topic_id: 1640 reply_id: 9610[/import]

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 [import]uid: 5354 topic_id: 1640 reply_id: 9612[/import]

Matthew

want to help me implement it?

c [import]uid: 24 topic_id: 1640 reply_id: 9706[/import]

That would be awesome Carlos ! [import]uid: 6981 topic_id: 1640 reply_id: 9709[/import]

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 [import]uid: 6645 topic_id: 1640 reply_id: 9713[/import]

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 [import]uid: 5354 topic_id: 1640 reply_id: 9724[/import]

This should be high on priority list imo. Just imagine the games we could create using mode 7 :slight_smile: [import]uid: 6981 topic_id: 1640 reply_id: 9879[/import]

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. [import]uid: 10504 topic_id: 1640 reply_id: 9957[/import]

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 [import]uid: 5354 topic_id: 1640 reply_id: 9961[/import]

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. [import]uid: 5354 topic_id: 1640 reply_id: 9970[/import]

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)

//======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;<br> grosorFloor = Math.floor(grosor);<br> //<br> if (grosorFloor&lt;2) {<br> strip = _root.attachMovie("picPeke", "pic"+a, depth);<br> } else {<br> strip = _root.attachMovie("pic", "pic"+a, depth);<br> }<br> strip.pic._xscale = 100;<br> strip.pic._yscale = 100;<br> //posiciona<br> strip._x = 200;<br> //200<br> strip._y = 400;<br> //350<br> //the ground is scaled only once, when created. not on every frame<br> strip._xscale = a*grosor*factorScala;<br> strip._yscale = a*grosor*factorScala;<br> //end function<br> mask = _root.attachMovie("mask", "mask"+a, (depth+1));<br> mask._height = grosorFloor;<br> mask._y = alturaStrip;<br> strip.setMask(mask);<br> //<br> strip.onEnterFrame = function() {<br> //the pic is rotated, but the 'move' symbol inside the pic is what is moved.<br> this.pic._rotation = -_root.rotation;<br> this.pic.move._x += -_root.sinness;<br> this.pic.move._y += _root.cosness;<br> };<br> //<br> alturaStrip = alturaStrip+grosorFloor;<br> depth = depth+2;<br> a++;<br> }<br> //end while<br>}<br>//======END-createStrips========================================<br> [import]uid: 6645 topic_id: 1640 reply_id: 9969[/import]

we need openGL copyPixels :wink: [import]uid: 6645 topic_id: 1640 reply_id: 9975[/import]