Be a Supporter!

AS2. 2.5D scaling!

  • 470 Views
  • 7 Replies
New Topic Respond to this Topic
neonpaint
neonpaint
  • Member since: Oct. 5, 2012
  • Offline.
Forum Stats
Member
Level 02
Game Developer
AS2. 2.5D scaling! Dec. 18th, 2012 @ 08:13 AM Reply

Trying to get the scaling to work in a game I'm working on. The movement for it is here, and it'd be awesome if somebody could teach me how do it. What I'm looking for is described below; when you move to the bottom the sprite becomes larger and smaller as it moves upwards. Thanks in advance!

AS2. 2.5D scaling!

Sam
Sam
  • Member since: Oct. 1, 2005
  • Offline.
Forum Stats
Moderator
Level 19
Programmer
Response to AS2. 2.5D scaling! Dec. 18th, 2012 @ 08:33 AM Reply

At 12/18/12 08:13 AM, neonpaint wrote: Trying to get the scaling to work in a game I'm working on. The movement for it is here, and it'd be awesome if somebody could teach me how do it. What I'm looking for is described below; when you move to the bottom the sprite becomes larger and smaller as it moves upwards. Thanks in advance!

Relate its y position to its _xscale and _yscale properties. To help you even more, remember that the y scale in Flash starts from 0 at the top and gets larger the more you go down.

egg82
egg82
  • Member since: Jun. 24, 2006
  • Offline.
Forum Stats
Member
Level 05
Game Developer
Response to AS2. 2.5D scaling! Dec. 18th, 2012 @ 09:23 AM Reply

Adding this to Sam's reply:
Learn AS3.


Programming stuffs (tutorials and extras)
PM me (instead of MintPaw) if you're confuzzled.
thank Skaren for the sig :P

BBS Signature
ScrumTurd
ScrumTurd
  • Member since: Sep. 10, 2012
  • Offline.
Forum Stats
Member
Level 01
Blank Slate
Response to AS2. 2.5D scaling! Dec. 18th, 2012 @ 10:21 AM Reply

At 12/18/12 08:13 AM, neonpaint wrote: Trying to get the scaling to work in a game I'm working on. The movement for it is here, and it'd be awesome if somebody could teach me how do it. What I'm looking for is described below; when you move to the bottom the sprite becomes larger and smaller as it moves upwards. Thanks in advance!

emoGhost.scaleX = emoGhost.scaleY = emoGhost.y / Stage.stageHeight;

Spysociety
Spysociety
  • Member since: Dec. 30, 2009
  • Offline.
Forum Stats
Member
Level 21
Blank Slate
Response to AS2. 2.5D scaling! Dec. 18th, 2012 @ 10:46 AM Reply

What you are looking for is getting camera perspective right? Well you can just use the scaleX and scaleY properties as Sam suggested but if you really want to create a true perspective view, would be better write down some maths.

For this trick you will have to use a classic theorem in mathematics called Thales's Theorem, have you ever heard of it? Well it is very simple, and useful for this case. To represent the triangle, you can check the following diagram I made.

First let's indtroduce what the variables are:
* Focal length: the respective relative distance between the camera screen to the human eye.
* Z position: the distance which the figure (sprite) is far from the screen camera.
* H and h: sprite and screen height respectively.

Let fl be the focal length, z be the z position, H and h the heights we have:

H / h = (fl + z) / fl

Since we are trying to discover the scale, h / H is our scale ratio, so basically we can define the scale variable as:

s = fl / (fl + z)

Now we can define these variables in our code. Since z is the respective distance between the camera screen to the sprite we have, 0 would be the minimum value, this means that our object would be exactly in front of the camera and for example 1000 would be a very long distance between the camera and the object.

I would recommend 300 - 500 of focal length to get a nice perspective. Having z as a value 0 <= z <= 1000 for example, the focal length would be terrible if less than 50 because 40 / (40 + 1000) results in a ratio of aproximately 0.038 and as the sprite approaches the camera, having a z position of 500 would result in 0.088 which still very low.

Writing down everything we defined:

function scaleObject(obj:MovieClip, z:Number, focalLength:Number):Void
{
             var scale:Number = focalLength / (focalLength + z);
             obj._xscale = obj._yscale = scale;
             // note: Long time I don't work with AS2 so depending of the scale you get
             // you can multiply it by 100.
}

If you would like to movement your object, just define a speed variable, for example zspeed = 10 and to approach the sprite to the camera subtract z from zspeed or if you want to zoom out, just sum z to zspeed.

Example usage:

var z:Number = 500;
var focalLength:Number = 400;
var zspeed:Number = 10;

function onEnterFrame():Void
{
            scaleObject(sprite_mc, z, focalLength);
            z -= zspeed;
}

Hope that helps.

kcnh
kcnh
  • Member since: Mar. 27, 2009
  • Offline.
Forum Stats
Member
Level 29
Blank Slate
Response to AS2. 2.5D scaling! Dec. 18th, 2012 @ 11:34 AM Reply

You can find a lot of information and pseudocode on this website:
Lou's Pseudo 3d Page

It has a lot of examples and explanations about depth in a 2D/3D space.

neonpaint
neonpaint
  • Member since: Oct. 5, 2012
  • Offline.
Forum Stats
Member
Level 02
Game Developer
Response to AS2. 2.5D scaling! Dec. 19th, 2012 @ 05:21 AM Reply

At 12/18/12 10:46 AM, Spysociety wrote: What you are looking for is getting camera perspective right? Well you can just use the scaleX and scaleY properties as Sam suggested but if you really want to create a true perspective view, would be better write down some maths.

Hope that helps.

Although this is kinda hard to grasp, I can always use it for learning. Thanks!

Rational-Delirium
Rational-Delirium
  • Member since: Mar. 21, 2007
  • Offline.
Forum Stats
Supporter
Level 15
Melancholy
Response to AS2. 2.5D scaling! Dec. 19th, 2012 @ 02:35 PM Reply

There's a book called 'Foundation ActionScript Animation Making Things Move' that has a whole two chapters devoted to 3D, and it's very easy to read.


You can't know what you don't know if you can only use yourself as a reference point.