Jump to content

"3D" room using only 2D


Recommended Posts

I would like to create something what looks like a 3D room, but using 2D.

In the game there will be only a square room - I would like the user to be able to look around, so it looks like the player is standing in the middle of the room. Can I just make a 2D background from 4 walls of the room, and loop it in the background so that when the background image ends, it is started again from the beginning? Would approach like that make a fake 3d effect of a room? Or should I play also somehow with lights etc.? Do you remind of some simillar demo, so I can see how it actually works?

I wouldn't like to have world wrap like that - http://phaser.io/examples/v2/world/world-wrap - after the end of my background image, if I'm still moving I would like to load beginning pixels of my background

In short - I would like to have smooth loop of background when I'm moving my camera (horizontally only)

Link to comment
Share on other sites

I'm reminded of the game Myst.  The game was built with pre-rendered views.  To look around in a room, you would click a button to turn left, and the pre-rendered view of the wall to your left would be loaded onto the screen.  They are basically using the method you described.  Check it out here:


The turning animation can be seen at about 3:40 into the video.

To achieve this, I personally wouldn't try to move the camera, I would just move the background images past the camera to create the illusion of camera movement.  Just keep track of which wall you're looking at, and place the image of the next wall to the right side of the screen (if you were turning to the right), and tween it to the left along with your current wall.  Once the tween is done, you'll be looking at the new wall.

You can develop the idea further to be able to turn only partway between walls as well, being able to look in any direction, not just the cardinal directions.

That kind of effect can be seen here:


I would still program it in basically the same way as the first example, though.

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...