logic of endless scroller
krumza

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?

All 6 Comments
Gio

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

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

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

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

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

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

Post a reply
Add Attachment
Submit Reply
Login to Reply