Background Mesh Mask

We've done a Tiled Background mesh deformation as a scrolling perspective effect already, but this time we we will use it more like a mask... without the mask. Basically we can do the scrolling and make the mesh into a transformable polygon.

For the texture you will want the contents to be inside the box, and not overlapping the boundaries as you want it to still be tile-able.

You should also try to make sure its bigger than the poly you want to make.

While the mesh shouldn't be too complex you should try to add a few subdivisions to make it less boxy looking.

This is a really simple deform as you're just moving the corners down to the middle to make a point.

Remember you can do fine tuning over in the object preferences.

Do the opposite for the tail, and bring the center points over to the left.

You might have noticed the object does an angle change. Yeah you can do a mesh transformation with a loop, but that's not an easy task for a beginner.

You might also have noticed that the bird sprite is orbiting the Tiled bg.

Set the target in events.

The events:

+ System: On start of layout

-> Sprite2: Set Orbit target to (TiledBackground.X, TiledBackground.Y)

-> Audio: Play music_fx_sad_moody_traditional_roy_orbison_music_gui.webm looping at volume 0 dB (stereo pan 0, tag "")

-> Text: Tween "zin" property Z Elevation to 0 in 0.25 seconds (Out Exponential, destroy: No, loop: No, ping pong: No, repeat count: 1)

-> System: Wait 0.10 seconds

-> Text: Tween "ain" property Angle to -16 in 0.35 seconds (Out Sinusoidal, destroy: No, loop: No, ping pong: Yes, repeat count: 1)

Make sure the Tiled background has its image point set to the center.

+ System: Every tick

-> TiledBackground: Set image X offset to TiledBackground.ImageOffsetX-(32×dt)%256

-> TiledBackground: Set image Y offset to TiledBackground.ImageOffsetY+(15×dt)%256

We're setting both the x and y image offset. Slightly different to simulate clouds.

+ Text: On Tween "ain" finished

-> Text2: Tween "" property Y to 422 in 2 seconds (Out Elastic, destroy: No, loop: No, ping pong: No, repeat count: 1)

-> System: Wait 2 seconds

-> TiledBackground: Tween "" property Angle to 16 in 1 seconds (Out Bounce, destroy: No, loop: No, ping pong: No, repeat count: 1)

Chain the tween to make the Tiled bg change its angle.
I keep hoping they will add some real matrix transforms. Angle, shear, 3d all would be welcome.

Find the source here