How do I make a floor with a fake 3D effect in a 2D platform game?

0 favourites
  • 8 posts
From the Asset Store
Template for a basketball game with a 3D aspect (illusion of 3D)
  • Hi guys!

    How do I make a floor in a 2D platform game have a depth and perspective effect similar to Street Fighter 2? The floor should only scroll as the player walks on the platform.

    Thank you for your usual collaboration!

  • You can use 3D objects in a 2D game. See the official Gravity Portal example.

  • You could also apply a sheer with mesh distort if you want to do it in the same way they did it in sf2. Basically make a 2x2 mesh and move the top two points left or right by the same amount.

  • You can use 3D objects in a 2D game. See the official Gravity Portal example.

    Thanks, man.

    I known it, but I'm using C2. :)

  • You could also apply a sheer with mesh distort if you want to do it in the same way they did it in sf2. Basically make a 2x2 mesh and move the top two points left or right by the same amount.

    Thanks, dude!

    Do you have an example of this?

    I ask because I'm a designer, not a programmer. ^^

  • Meshes are also unavailable in C2.

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • I don’t have an example. But since you only use C2 a non third party solution could be to load the image you want to sheer into the sprite’s animations as a sprite sheet. So say the image is 320x64 you’d import that image with spriteSheet import with 1,64. That would give you a bunch of 1 pixel tall strips of the image. Be sure to set the animation speed to 0. And probably set the origin to the top left.

    Next is to place it. It’s a pain to place 64 instances and set the frame of each one so you can do that with some events:

    Start of layout
    Repeat 64 times
    — create sprite at (0, 480-64+loopindex)
    — sprite: set animation frame to loopindex

    Then to sheer right you can do:

    Sprite: set x to self.x+lerp(10,100, self.iid/64)*dt

    Where 10 is the speed of the top row and 100 is the speed of the bottom. Tune the values to your liking. Moving left would just be subtracting.

    You can avoid the image slicing step by using a tiledbg. The con with that is there will be more overdraw and the sides of the sheer will look off

    Start of layout
    Repeat 64 times
    — create tiledbg at (0, 480-64)
    — tiledbg: set height to 64-loopindex

    And

    Tiledbg: set x to self.x+lerp(100,10, self.iid/64)*dt

    Notice the 10 and 100 are reversed.

    Beyond that you could use a third party plugin to do a sheer. Paster is one option with its draw textured quad action. You’d basically just select a sprite to get the texture, and set the four corner positions.

  • I don’t have an example. But since you only use C2 a non third party solution could be to load the image you want to sheer into the sprite’s animations as a sprite sheet. So say the image is 320x64 you’d import that image with spriteSheet import with 1,64. That would give you a bunch of 1 pixel tall strips of the image. Be sure to set the animation speed to 0. And probably set the origin to the top left.

    Next is to place it. It’s a pain to place 64 instances and set the frame of each one so you can do that with some events:

    Start of layout
    Repeat 64 times
    — create sprite at (0, 480-64+loopindex)
    — sprite: set animation frame to loopindex

    Then to sheer right you can do:

    Sprite: set x to self.x+lerp(10,100, self.iid/64)*dt

    Where 10 is the speed of the top row and 100 is the speed of the bottom. Tune the values to your liking. Moving left would just be subtracting.

    You can avoid the image slicing step by using a tiledbg. The con with that is there will be more overdraw and the sides of the sheer will look off

    Start of layout
    Repeat 64 times
    — create tiledbg at (0, 480-64)
    — tiledbg: set height to 64-loopindex

    And

    Tiledbg: set x to self.x+lerp(100,10, self.iid/64)*dt

    Notice the 10 and 100 are reversed.

    Beyond that you could use a third party plugin to do a sheer. Paster is one option with its draw textured quad action. You’d basically just select a sprite to get the texture, and set the four corner positions.

    Thanks a lot! You're the man! :D

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