[Flash 8]Perspective skew

[lesli_felix]

Uses the same technique as percypeas mariokart engine, only with the bitmap data object:

http://www.brokenbutton.com/perspective.html


http://www.brokenbutton.com/perspective.fla

[UnknownGuy]

Lets just say I tried to do that and it didn't work .

Nicely done.

[tonypa]

I tried to make it too, but no success. Great stuff

[tonypa]

Here I have modified the fla to work with keys:
http://img336.imageshack.us/my.php?i...pective4as.swf
Arrow keys to move, shift and control to rotate.

It also loads bitmap from the library so there is no need to mc outside the stage.
I still havent figured out how to rotate around the viewer and not around center of bitmap.

[lesli_felix]

you need one extra level of nesting for the movement over the rotation.

mc.mc._rotation

mc.mc.mc._x
mc.mc.mc._y

This keeps the centre of rotation in the same place when you change x and y

[Incrue]

Already tried mario kart with cacheasbitmap?

[tonypa]

you need one extra level of nesting for the movement over the rotation.

mc.mc._rotation

mc.mc.mc._x
mc.mc.mc._y

This keeps the centre of rotation in the same place when you change x and y

Thank you, but I still dont understand. I dont even have any movie clips. There is only 1 mc and bitmap is attahed into it. Mc never moves. COuld you change the code perhaps to make it rotate around the viewer?

import flash.display.BitmapData;
import flash.geom.Matrix;
import flash.geom.Rectangle;
import flash.geom.Point;
import flash.geom.ColorTransform;
var stageW:Number = 550;
var stageH:Number = 300;
var myCT:ColorTransform = new ColorTransform ();
var fillColor:Number = 0xFF000000;
var my_mc:MovieClip = this.createEmptyMovieClip ("mc", this.getNextHighestDepth ());
var bm1:BitmapData = new BitmapData (stageW, stageH, false, fillColor);
my_mc.attachBitmap (bm1, 0, "auto", true);
var bm2:BitmapData = BitmapData.loadBitmap ("bricks");
var degrees:Number = 0;
var my_z:Number = 400;
var my_x:Number = 0;
var my_y:Number = -my_z / 2;
var speed:Number = -5;
mydraw ();
onEnterFrame = main;
function main () {
	if (Key.isDown (Key.LEFT)) {
		my_x += speed;
		mydraw ();
	} else if (Key.isDown (Key.RIGHT)) {
		my_x -= speed;
		mydraw ();
	} else if (Key.isDown (Key.UP)) {
		my_y += speed;
		mydraw ();
	} else if (Key.isDown (Key.DOWN)) {
		my_y -= speed;
		mydraw ();
	} else if (Key.isDown (Key.SHIFT)) {
		degrees += speed;
		mydraw ();
	} else if (Key.isDown (Key.CONTROL)) {
		degrees -= speed;
		mydraw ();
	}
}
function mydraw () {
	var radians:Number = (degrees / 180) * Math.PI;
	bm1.fillRect (new Rectangle (0, 0, bm1.width, bm1.height), fillColor);
	for (i = 1; i < stageH; i = i + 1 + (i / 100)) {
		var xscale = stageW / 2 - i;
		var eMatrix:Matrix = new Matrix ();
		eMatrix.translate (-bm2.width/2, -bm2.height/2);
		eMatrix.rotate (radians);
		eMatrix.translate (-my_x, -my_y);
		eMatrix.scale (i / 100, i / 100);
		eMatrix.translate (stageW / 2, my_z - (2 * i));
		var myRectangle:Rectangle = new Rectangle (0, i, stageW, 2 + (i / 100));
		var smooth:Boolean = true;
		bm1.draw (bm2, eMatrix, myCT, "normal", myRectangle, true);
	}
}

You need image in the library with linkage name "bricks".

[lesli_felix]

errrr, it's possible, but needs a lot of trigonometry. I've had this problem in the past. What you;ve done is very cool because it's totally dynamic, but using nested movieclips and taking the bitmap data from that is far easier, as you just need basic rotation and translation. I'll have a go at it later when I get a chance.

[tonypa]

Heyheyhey, I figured it out

http://img53.imageshack.us/my.php?im...pective4we.swf
(125kB, no preloader) Click to get focus. Arrow keys to move. Because its scaled, download it to your ocmputer to see real speed (quite fast).

Not much different from last one, just changed some lines in the draw function.

[lesli_felix]

That's really good!

I'm going to have to have a go at optimising this sometime to see if it's worth getting a game out of it.

[lesli_felix]

Ok, I had a proper look at the code and i see how you did it, it's all to do with the order of the matrix translations. The matrix class seems to take care of a lot of calculations.

[tonypa]

Yes, matrix good

Can I ask why you change the height of stripes?
var myRectangle:Rectangle = new Rectangle (0, i, stageW, 2 + (i / 100));
Taking same height stripes looks same way:
var myRectangle:Rectangle = new Rectangle (0, i, stageW, 2);

[lesli_felix]

To compensate for this line:

for (i = 1; i < stageH; i = i + 1 + (i / 100)) {

I was trying to speed things up by having thinner lines at the back and thicker lines at the top. It should look different if you take that out. gives you gaps between the lines.

[mr_malee]

i suppose all that's next is a getPixel function, if the pixel is black you've got collision baby.

[tonypa]

To compensate for this line:

for (i = 1; i < stageH; i = i + 1 + (i / 100)) {

I was trying to speed things up by having thinner lines at the back and thicker lines at the top. It should look different if you take that out. gives you gaps between the lines.

Ah, I see.
What if you use
for (i = 1; i < stageH; i ++) {
with same height lines?

[lesli_felix]

much slower, and much smoother looking. You're writing to the screen one pixel-line at a time.

[tonypa]

I wonder if that 1/100 pixels make any difference. As I understand it, the bitmapdata only deals with full pixels anyway, you cant take half pixels and copy it.

[lesli_felix]

You're right, it went from one pixel, to two, and then to three. There's no point rounding if it does it automatically.

The code was written in a hurry, so it's not the best way of doing it. It needs some playing around with.

[ihoss.com]

wow, that was a slow engien. What is the frame rate?

[lesli_felix]

The most I can get out of it, when everything is moving, is about 20 fps. I really don't know if it can go faster.