Hi

That's a good way of doing it, but I personally prefer a slightly different way. Instead of having an onUpdate function where you update the position and move the object, I think it's easier to call obj.moveTo(x, y, speed); and then have an onMoveComplete function where you delete the object and create the new one (or even better, don't create a new one - just reposition the same object and call moveTo again).

I think we are doing something similar in our flappy bird tutorial, although with obstancles and not the background.

Thank Gio, i try do this on moveComplete

But  hard question - how create scene 2  - view from cockpit? (without CSS transforms of layer:)))

As result i want to see full perspective view from the "horizont line".

But as i understand WADE use matrix 2d transform - and for perspective view need a 3d matrix. 

I read some docs and i see that 3d transforms not realesed in PIXI (->phaser too), create.js - only in 3d renderer as Three.js (or Phoria.js)

May be you say how create a full 3-d transform in wade, may be with webgl transforms

To clarify, WADE, Phaser, Create.js etc are all 2D engines. If you want to make a 3D game, you need a 3D engine. It is a whole different level of complexity. You need 3D models (not 2D sprites), you need vertex shaders and a different rendering pipeline in general.

Saying that, there are tricks to make things appear 3D even when they are not - see for example my blog posts on fake spheres or fake reflective water.

For fake 3D, there are a number of techniques. You could do what the old-school games such as Doom used to do back in the day, i.e. simply scale an object dividing its size by its z coordinate, to make objects that are farther away appear smaller. Unless you are after that old-school look though, this isn't going to look great.

How about this library? http://evanw.github.io/glfx.js/demo/#perspective

It uses 2d canvas, but create pseudo 3d context

it would be very good If this thing be in WADE 

You can do that already (though it still isn't 3D).

When using Sprite.drawToImage() you can pass a custom transform to it, as explained in the documentation.

The "transform" parameter is an object with 6 parameters: 'horizontalScale', 'horizontalSkew', 'verticalSkew', 'verticalScale', 'horizontalTranslate', 'verticalTranslate'. You would use these to achieve something like the thing you linked to.

You can also not draw to an image, but just use a custom draw function for your sprites, and set that transform manually (although I wouldn't recommend this, because it would not work in webgl mode).

More details about those transform parameters can be found here on MDN.

whether possible create a perspective trapezoid with only parameters: 'horizontalScale', 'horizontalSkew', 'verticalSkew', 'verticalScale', 'horizontalTranslate', 'verticalTranslate'?

i mean that is transforms is for parallel lines, not crossed in perspective