0 Favourites

Can we stretch a layer? Isometric 3D engine

  • So I had an epiphany yesterday. This sums it up:

    My idea caught fire on twitter and already there's an engine for Game Maker. Have a look:

    https://twitter.com/FireCamp_games/status/594500636927983616

    An isometric 3D engine out of an (easy to code) planometric grid is easy, if we can stretch a layer's height.

    I gave it a try with R0J0hound 's Canvas plugin. I used 2 canvases. I don't know if it's overkill, and I'm doing something wrong anyway, because there's a lot of cropping going on.

    However I'm going from this ortho view:

    To this: (what the engine looks like after the canvas transformation)

    with no strange isometric calculations. Collisions and Z-order should also be super-easy, as I'm basically working on an orthographic 2D image.

    Here's the CAPX

    The downside of course is this doesn't work for pixelart. But I think you clever people might find it useful

  • Well that's nifty

  • Neat CAPX!

    Best game ever BTW... well, besides Ultima6 that is

  • Well there's an offset for x, and y for isometric movements so its not really isometric.

    If you could scale the layout height , or layer's height, then it might give a true representation.

    There are a few other issues with a single image as well, z order, blocking, etc.

    Edit also keep in mind all your images would have to be rotated, and scaled before import.

  • Construct 3

    Buy Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Buy Now Construct 3 users don't see these ads
  • newt So it's a crap idea? What do you suggest?

    Edit: I was thinking we could keep track of the purple square sprite's *actual* screen coordinates and angle, and slap a proper isometric sprite on top, above the canvas transformations

  • Its a feature request at best.

    As in Ashley can I have layers with separate width and height scale?

    Scale is somewhat complicated already changing just the height makes it harder.

    10x10 /2 = 5x5,10x5 /2 = 5x2.5

    Then apply that to a matrix....

    Edit:

    Also you would want it as just for layers, as you would want regular layers for gui, etc.

    But that makes it even more complicated, as you would have to keep track of the layout to layer xy's for each layer.

    Sorry but the strange isometric calculations are the best way.

    This is one of the better explanations:

    http://clintbellanger.net/articles/isometric_math/

  • newt I get it. I don't really need layers with separate width and height scale. The canvas trick seems to work ok. So why is it a bad idea? Look at what it inspired someone to make: https://twitter.com/FireCamp_games/status/594500636927983616

    Thanks for the cool iso article

  • Well as I said in my first post the iso movement is different from regular movement. Up or down has to be half of what it is for right or left.

    Then a single image just isn't a good option. It wastes memory for another thing.

    Plus you still have to solve z order the same old way.

  • newt what are you talking about?

    Ok maybe I need to explain it better.

    You make an orthographic game that looks like Ultima above (or chess) on one layer. Not one image, that's just my test. You make a proper tileset. Floor tiles, walls, characters, everything.

    Movement and Z order are easy, since it's orthographic. The higher the Y and X, the higher the Z order. It's solved, the same way Ultima solves it. You don't have to do anything else.

    Then you draw everything on two canvases, one rotates what you see by 45 degrees, the other squashes the rotated version to 50% height. The end result is isometric.

    Yes, you will need to make all your vertical sprites (walls, characters) vertically stretched by 200%, so they survive the squash. And you have to know where they're facing so you can choose the appropriate animation.

    But other than that, you get basically free 3D. No?

  • Nope.

    Those objects will still have to be placed to isometric offsets.

  • They will not. I'm feeling stupider by the minute now, but imagine you're taking this game

    Subscribe to Construct videos now

    just as it is, no changes in code or graphics,

    and display it rotated 45 degrees and then squashed 50%.

    It becomes isometric. The sprites will look weird, but the positions will be perfectly fine. And you could adjust the sprites and have UI on a separate layer.

    Am I wrong?

    ETA: if you needed to draw something to screen coordinates, yes, you would have to convert positions. But you could just draw something on the plain orthographic map instead. Like, a powerup to the right of the player on the game layer (before the transformations). It would appear to the top and right of the player after the transformation, at proper iso coordinates compared to the player.

  • Ok try it.

  • Just tried it. When you press space, a coin appears to the exact right of pacman in the ortho view. I pre-stretched and rotated the pacman sprite so it appears correct. Nothing hard. There may be ways to streamline that.

    Here's the ortho view:

    And here's what the engine looks like after the canvas transformation. Everything is 100% exact.

    What do you think?

    CAPX here

  • Whaaat! OK not only am I right, but they informed me on twitter that Nintendo used the same effect for A Link Between worlds! They distorted link in order to make him look good from top-down.

  • Seriously?

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)