I waited for the release of Construct 3 beta r235) before publishing this post. I needed the IWorldInstance.getMeshSize()
function to be able to randomly change the shape of objects in C3. Mesh Distorsion and JavaScript allow you to get nice effects with just a few lines of code:

To create this template I used only one module, mesh.js
, and a json object, MeshPremadeShapes
. The template’s core are these two functions:
setMeshPointAbsolute
drawShape
function setMeshPointAbsolute(instance,
{ col = 0, row = 0, x = 0.5, y = 0.5} = {})
{ instance.setMeshPoint(col, row, {mode: "absolute", x, y}); }
The first alter a point in a mesh. The coordinates x and y are determined in absolute mode, in normalized co-ordinates [0, 1] across the object size. The left up angle is the point (0;0), the right down is (1;1). The object’s center is the point (0.5;0.5).
Starting from this function I can write the drawShape
function
function drawShape(instance, shape) {
const points = shape.points;
points.forEach(point => setMeshPointAbsolute(instance, point));
}
This function moves each point of the mesh to the position indicated by the shape. The shape is defined in the MeshPremadeShapes
object
pentagon: {
meshSize: {
columns: 3,
rows: 2
},
points: [
{col: 0, row: 0, x: 0.00, y: 0.39},
{col: 1, row: 0, x: 0.50, y: 0.00},
{col: 2, row: 0, x: 1.00, y: 0.39},
{col: 0, row: 1, x: 0.20, y: 1.00},
{col: 1, row: 1, x: 0.50, y: 1.00},
{col: 2, row: 1, x: 0.80, y: 1.00},
]
}
It’s an object with only two properties: meshSize
and points
. The latter contains an array of points in the format {col, row, x, y}
. Starting from this array, drawShape
scrolls the various items and places them on the mesh.
Starting from the same object it is possible to use a setSizeShape
function to automatically generate a mesh in C3.
function setSizeShape(instance, shape){
const columns = shape.meshSize.columns;
const rows = shape.meshSize.rows;
createMesh(instance, { columns, rows });
}
How to create random shapes
To make the template more interesting, I created a function to create random shapes
function randomize(instance, { min = -0.5, max = 0.5 } = {}) {
const { rows } = getMeshSize(instance);
for (let row = 0; row < rows; row++){
randomizeRow(instance, {row, min, max});
}
}
getMeshSize
allows you to get the mesh size. randomizeRow
changes the position of individual points randomly
function randomizeRow(instance, {row = 0, min = -0.5, max = 0.5 } = {}) {
const { columns } = getMeshSize(instance);
for (let col = 0; col < columns; col++) {
const value = getRandomArbitraryXY(min, max);
setMeshPointRelative(instance, {col, row, ...value});
}
return instance;
}
I modify the points in relative mode: I think it allows to obtain a harmonic effect.
You can see interesting shapes even modifying only the margins
function randomizeMargins(instance, { min = -0.5, max = 0.5 } = {}){
const { lastRow, lastColumn } = getMeshSize(instance);
randomizeRow(instance, {row: 0, min, max});
randomizeRow(instance, {row: lastRow, min, max});
randomizeColumn(instance, {col: 0, min, max});
randomizeColumn(instance, {col: lastColumn, min, max});
}
randomizeMargins
keeps the center of the object fixed but changes its margins.
Finally, you can also use this module to modify the shape of other plugins, such as TiledBackground
and Text
.

That said, it’s time for links: