The problem with transparency and 3d camera

Post reply
0 favourites
From the Asset Store
3D game "Collect candy"
$1 USD
60% off
A game with 3D terrain, realistic water and various 3D objects.
spokoinbli's avatar
spokoinbli

  • Hi

    I want to create a game with a 3d camera, like Don't Starve. The camera is directed at an angle to the layout, and the sprites themselves are at an angle perpendicular to the camera. This way sprites will not be distorted unlike the background. And that's what I did. But there will be a problem of displaying a coin, which, in theory, should pop up at the top of the sprite and, accordingly, it has a large Z height and when there is a very large sprite on the stage that can be in front of this coin. transparency from a large sprite obscures the coin. This is shown in the C3 file. I have tried many options and I tried to use rendering by distance to the camera, but it has a different problem - transparency is superimposed on translucent textures such as shadows or glow. Is there a correct way to display a coin in this style, or is it a issue with C3?

    Key 1 brings the camera closer, key 2 moves the camera away. By holding the spacebar, you can see what is happening from the side. Sprites can be dragged. And you can scroll the scene.

    drive.google.com/file/d/1FzvShspaLqKUcbg0VBHOF9vtE8MOeHVD/view

  • See the section on transparency in the tutorial Using 3D in Construct.

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads

  • Ashley I have read this manual several times. Can you use my example to show what my mistake is?

  • And what about the problems with transparency and glow/shadows when using a distance render?

  • Like the guide says, the key is to make sure all transparent content renders from back to front, relative to the camera. The glitches happen when something transparent renders before something that appears behind it, since the transparent parts still fill in the depth buffer, and prevent anything behind it from rendering.

    The solution is to use either Z elevation or Z order, or the 'Camera distance' draw order, to ensure the render order is back to front. It looks like you're using meshes and some fairly complicated logic in this example, which makes it harder to figure out. I'd advise to start simple, get it working with that, and then build up from there.

  • I don't need an example of this game. I need to figure out how to solve the problem with a coin that is covered by a large sprite

    The coin is located above a small sprite. All sprites are displayed perpendicular to the camera. But the coin is covered by the transparency of the large sprite in front of it

  • Having had a look at your project, I'd say with this method you're pretty much out of luck. May I ask if your assets are completely composed of sprites and you only use the engine's 3d features for perspective?

    If so, there may be an alternative.

  • Looking at that last picture, I think the problem is that to get correct rendering the sprites must be rendered in back-to-front order along a diagonal axis towards the camera. Currently this is difficult in Construct with the tools provided: Z elevation only works on an axis pointing directly up; Z order only applies for instances with the same Z elevation; and "camera distance" sort order might be able to work, but depends on where the origin points are, so probably doesn't work right when instances are close.

    Probably the easiest thing to do would be to either have everything lie flat and move the camera instead (so Z elevation sorting works right), or use 3D boxes like the FPS example (so camera distance sorting works right), or just ditch 3D entirely and do it in 2D and fake the depth elements (so Z order works right). Using mesh distortion to fake angling objects makes it complicated to get the right draw order. Which is one reason there's not built-in support for rotating sprites in 3D!

  • Colonel Justice Yes. But it seems to me that the effect of distorting the background and maintaining the correct proportions of sprites will not be achieved in other ways. Or am I wrong? At least to make it look like a working option, not just a possibility.

    Ashley But the effect I'm trying to achieve will disappear with other options. After all, creating a regular game in isometry is not the goal I'm aiming for. Imagine such a game City Builder with such an effect. It looks awesome

  • You can use a 2D layer on top of the 3D layer, then translate the 3D coordinates to screen coordinates, then use a 3d distance calculation to store the distance from each sprite to camera, then sort the 2d sprite by that value. Additionally, you can use that distance value to scale the sprite according to distance.

    To retrieve the plane coordinates, e.g. screen X coordinate, do something like

    3DCamera.CanvasToLayerX("Viewport", 3DCamera.LayerToCanvasX("Floor", PosX, PosY, PosZ), 3DCamera.LayerToCanvasY("Floor", PosX, PosY, PosZ), 0)

    where "Floor" is the 3D layer, "Viewport" the 2D layer, and the variables PosX, PosY, PosZ is the sprite's x,y and z elevation.

    To get the distance of sprite to camera, use the Pythagorean principle in 3dimensional space, which is distance = square root of (x² +y² +z²), while

    x = abs(sprite.x - camera.x)

    y = abs(sprite.y - camera.y)

    z = abs(sprite.z - camera.z)

  • Thanks! It will be interesting to try. But it seems that this will require a lot of calculations for the CPU. I will conduct some tests and I think I will write in this topic about the result

  • Colonel Justice I managed to use coordinates for sprites on the 2d layer. But I do not understand how to achieve the correct size of sprites. This method can be used for a coin in my case. Since the question arises how to move sprites if we constantly set their position.

    drive.google.com/file/d/1Z36JfxluwTB0vrWVDJi97Ko6H5HAkvq3/view

    But even a coin I would like to animate (smooth movement up and down). Therefore, the ideal option would be for a coin or a flying ship that comes from the sky or whatever to be displayed correctly in 3d mode. And here is an example of a game in which i want to do this:

  • Colonel Justice I managed to use coordinates for sprites on the 2d layer. But I do not understand how to achieve the correct size of sprites. This method can be used for a coin in my case. Since the question arises how to move sprites if we constantly set their position.

    https://drive.google.com/file/d/1Z36JfxluwTB0vrWVDJi97Ko6H5HAkvq3/view?usp=sharing

    But even a coin I would like to animate (smooth movement up and down). Therefore, the ideal option would be for a coin or a flying ship that comes from the sky or whatever to be displayed correctly in 3d mode. And here is an example of a game in which i want to do this:

    The sprite scaling seems fine to me, maybe needs a little tweaking.

    To properly scale, you need to take into account the viewport height of your project and relatively scale in function of the aspect ratio. http://graphicdna.blogspot.com/2009/09/properly-scaling-point-sprites-in.html

    You can use controller sprites that are joined via containers with the display sprites, position the controller sprites in the 3d space and then translate their x,y,z coordinates to properly position the viewport sprites. Collisions, behaviors etc. are solely done via controller sprites (which are set to invisible).

  • Note: The GIF shows standard mechanics with a 3d camera and the tilt of sprites. A variant with a 2d layer and sprites is in the source and there, when the camera approaches, the problem with changing the size of sprites is shown.

    Thanks, I'll try to study this question better) I'll try to fix the problem with the size of sprites and use controllers for movement

Post reply
Return to board index
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)