Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Simple 3D Transforms
Started by Matthew Pringle Aug 08 2010 09:37 PM

21 replies to this topic
[TOPIC CONTROLS]
This topic has been archived. This means that you cannot reply to this topic.
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

Matthew Pringle

[GLOBAL: userInfoPane.html]
Matthew Pringle
  • Contributor

  • 660 posts
  • Corona SDK

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.
uid: 5354 topic_id: 1640 reply_id: 301640


[TOPIC: post.html]
#2

Matthew Pringle

[GLOBAL: userInfoPane.html]
Matthew Pringle
  • Contributor

  • 660 posts
  • Corona SDK

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!
uid: 5354 topic_id: 1640 reply_id: 4735


[TOPIC: post.html]
#3

carlos m. icaza

[GLOBAL: userInfoPane.html]
carlos m. icaza
  • Corona Geek

  • 2,992 posts
  • Alumni

Matthew

do you have some graphic plates we can play with?

Carlos
uid: 24 topic_id: 1640 reply_id: 4747


[TOPIC: post.html]
#4

Matthew Pringle

[GLOBAL: userInfoPane.html]
Matthew Pringle
  • Contributor

  • 660 posts
  • Corona SDK

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

uid: 5354 topic_id: 1640 reply_id: 4749


[TOPIC: post.html]
#5

Matthew Pringle

[GLOBAL: userInfoPane.html]
Matthew Pringle
  • Contributor

  • 660 posts
  • Corona SDK

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

uid: 5354 topic_id: 1640 reply_id: 4750


[TOPIC: post.html]
#6

Cromax

[GLOBAL: userInfoPane.html]
Cromax
  • Observer

  • 5 posts
  • Guests

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


[TOPIC: post.html]
#7

Matthew Pringle

[GLOBAL: userInfoPane.html]
Matthew Pringle
  • Contributor

  • 660 posts
  • Corona SDK

Heres the math behind it

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


[TOPIC: post.html]
#8

MarkHenryC

[GLOBAL: userInfoPane.html]
MarkHenryC
  • Contributor

  • 181 posts
  • Corona SDK

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


[TOPIC: post.html]
#9

Ziao

[GLOBAL: userInfoPane.html]
Ziao
  • Observer

  • 20 posts
  • Corona SDK

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


[TOPIC: post.html]
#10

infusedreams

[GLOBAL: userInfoPane.html]
infusedreams
  • Contributor

  • 281 posts
  • Corona SDK

I would love this to be implemented.
uid: 6981 topic_id: 1640 reply_id: 9605


[TOPIC: post.html]
#11

BarkBarkCo

[GLOBAL: userInfoPane.html]
BarkBarkCo
  • Enthusiast

  • 31 posts
  • Guests

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...
uid: 10248 topic_id: 1640 reply_id: 9610


[TOPIC: post.html]
#12

Matthew Pringle

[GLOBAL: userInfoPane.html]
Matthew Pringle
  • Contributor

  • 660 posts
  • Corona SDK

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
uid: 5354 topic_id: 1640 reply_id: 9612


[TOPIC: post.html]
#13

carlos m. icaza

[GLOBAL: userInfoPane.html]
carlos m. icaza
  • Corona Geek

  • 2,992 posts
  • Alumni

Matthew

want to help me implement it?

c
uid: 24 topic_id: 1640 reply_id: 9706


[TOPIC: post.html]
#14

infusedreams

[GLOBAL: userInfoPane.html]
infusedreams
  • Contributor

  • 281 posts
  • Corona SDK

That would be awesome Carlos !
uid: 6981 topic_id: 1640 reply_id: 9709


[TOPIC: post.html]
#15

jmp909

[GLOBAL: userInfoPane.html]
jmp909
  • Corona Geek

  • 1,328 posts
  • Corona SDK

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
uid: 6645 topic_id: 1640 reply_id: 9713


[TOPIC: post.html]
#16

Matthew Pringle

[GLOBAL: userInfoPane.html]
Matthew Pringle
  • Contributor

  • 660 posts
  • Corona SDK

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
uid: 5354 topic_id: 1640 reply_id: 9724


[TOPIC: post.html]
#17

infusedreams

[GLOBAL: userInfoPane.html]
infusedreams
  • Contributor

  • 281 posts
  • Corona SDK

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


[TOPIC: post.html]
#18

x-pressive.com

[GLOBAL: userInfoPane.html]
x-pressive.com
  • Contributor

  • 349 posts
  • Corona SDK

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


[TOPIC: post.html]
#19

Matthew Pringle

[GLOBAL: userInfoPane.html]
Matthew Pringle
  • Contributor

  • 660 posts
  • Corona SDK

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
uid: 5354 topic_id: 1640 reply_id: 9961


[TOPIC: post.html]
#20

Matthew Pringle

[GLOBAL: userInfoPane.html]
Matthew Pringle
  • Contributor

  • 660 posts
  • Corona SDK

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


[TOPIC: post.html]
#21

jmp909

[GLOBAL: userInfoPane.html]
jmp909
  • Corona Geek

  • 1,328 posts
  • Corona SDK

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;
		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========================================
uid: 6645 topic_id: 1640 reply_id: 9969


[TOPIC: post.html]
#22

jmp909

[GLOBAL: userInfoPane.html]
jmp909
  • Corona Geek

  • 1,328 posts
  • Corona SDK

we need openGL copyPixels ;)
uid: 6645 topic_id: 1640 reply_id: 9975



[topic_controls]
[/topic_controls]