Legacy GM Advice on fake 3D scaling

Psycho_666

Member
Hey.
I'm trying to make a tile based game setup. So I'm doing a small 10x10 tiles map.
What I am trying to do is using fake perspective, fake 3D and so on...
Basically the idea is, all tile stored objects arei stored in an array, then layed out on the screen.
15720417142747915979429808893450.jpg
Now I want to scale the upper row if tiles to be small and close together, the lower rows of tiles to be larger and further apart, so basically it looks like they are closer to the camera...
1572041902793206350248318118262.jpg
Basically non of the borders will be visible, so it will just looks like the upper ones are further away.

My brain just can't make this thing translate into code.
I have been banging my head against the wall this whole day and thinking about it at work and I tested a few different ways and my brain just refuses to solve the riddle.

I do not want 3D. I can see this being very nice simple straightforward formula especially keeping in mind it's all in an array and indexing and everything can be used. My brain just ... can't...

Please help...
 

Psycho_666

Member
After 2 days banging my head against the keyboard wondering why nothing is working I deleted everything and started from scratch. Took everything under consideration, tweaked and played with stuff and what do you know, turns out if you take your time and think long and hard enough, solutions aren't that difficult.
 

YellowAfterlife

ᴏɴʟɪɴᴇ ᴍᴜʟᴛɪᴘʟᴀʏᴇʀ
Forum Staff
Moderator
You want some sort of trapezoid,
Code:
var y1 = 40;
var y2 = 240;
var w1 = 260;
var w2 = 400;
for (var yf = 0; yf <= 1; yf += 1/8) {
    var yf_persp = power(yf, 1.2);
    var _y = lerp(y1, y2, yf_persp);
    var w = lerp(w1, w2, yf_persp);
    var x1 = (browser_width - w) / 2
    var x2 = x1 + w;
    for (var xf = 0; xf <= 1; xf += 1/16) {
        var _x = lerp(x1, x2, xf);
        draw_circle(_x, _y, 3, false);
    }
}
upload_2019-10-26_14-18-41.png
live demo
 
Top