krumza February 6th, 2017 Hi all! I try to make a endless scroller game for my kid:)
There is a "train simulator" with 2 scenes - side view on a train and view from cockpit.
Let my ask about scroller/
In scene 1 (side view) i see this as:
- create a template of background
- clone and insert it,
- then on update i move it
- if this right border = screen right border, i clone background template and insert it and move too
- if right border of first clone= screen left border, i delete this
Its right?
Gio February 7th, 2017 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.
krumza February 7th, 2017 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
Gio February 8th, 2017 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.
krumza February 8th, 2017 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
Gio February 8th, 2017 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.
krumza February 8th, 2017 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
