How to achieve 'forward' movement (into the screen) using Cocos2D?

Question

I'm interested in creating a 2.5D first-person shooter (like Doom) and I currently don't understand how to implement the player moving forward. The player will also be able to browse around the world (left, right, up, down) via gyroscope control. I plan to only use 2D sprites and no 3D models.

My first attempt was to increase the scale of layers to make it appear as if the player was moving toward the objects but I'm not sure how to make it seem as if the player is passing around the objects (instead of running into them).

If there are extensions that I should take a look at (like Cocos3D), please let me know. Thanks for the help!

Answer 1

Your solution, thus-far, implies you are already calculating depth to determine the scale factor needed to simulate perspective. To make objects move "behind" the camera, test that same depth when you draw them and do not draw objects whose depth indicates they should be behind the camera.

 if (object.sceneDepth >= 0) object.Draw();

Re:

(like Doom)

I recommend going 3D, although I can't recommend any specific extensions. I would not avoid using 3D because of a perceived learning curve.

Doom and many other games use animated "billboards" to quickly approximate 3D. A billboard is simply a textured quad that always faces the camera. As the billboard rotates, the texture displayed on it can be animated to reflect the camera's new location and perspective. This allows you to render in "3D" while only actually rendering 4 vertices.

So, to answer your question, while you are able to render 2D sprites at different depths into the screen, it would be complicated, at best, to splice that together into something "like Doom".

If you look at the textures for Doom, you will find that every pose, for every creature was pre-rendered. When you move "behind a monster", the billboard is turned to face you, and the front-view monster texture is replaced with the rear-view monster texture. They were all 2D textures, drawn on 2D squares, oriented in 3D space.

Grass and trees are sometimes rendered with only one texture, but it is obvious because the trees can be easily noticed turning to face you. Their use is also evident in games where the grass becomes visible and appears to "stand up" when the camera gets close.

Answer 2

I know this is kind of a cop-out, but I bet you can get a lot out of the Doom source code on github: https://github.com/id-Software/DOOM

It has spurred more than a couple Doom-likes and at the very least is maintained well enough that you could emulate a lot of the implementation there and still be very original. Even if you don't have linux to compile it on, it's a great starting point for this kind of project.

Answer 3

If you're really reluctant to go into full-on 3D programming, I would suggest looking into raycasting. A very good explanation of this technique (coded in Javascript) can be found on this webpage.

Raycasting is pretty simple, mathematically. A raycaster's in-game camera will send out abstract "rays" that are meant to collide with solid objects in the environment. Upon collision, the engine receives the distance from the camera to the collision point, then renders a vertical subslice of the target texture, scaled down in proportion to how far away it was.

Due to the nature of a raycasting renderer, the camera / player itself can have full 360-degree motion and floating-point positional coordinates, even if your environment is defined as a discrete 2D array. This can help you with your need for the player to feel like he/she is moving around objects, rather than into them.

Answer 4

I experimented with a simple raycaster for Cocos2d-x. Check out the write-up with links to video and source here:

http://discuss.cocos2d-x.org/t/making-a-first-person-game-using-cocos2d-x/