I have a question about Phaser 2.0. Since only Phaser 2.0 has the drawTriangle function. There is an assumption that drawTriangles on Phaser is similar to function on other engines. I managed to study drawTriangles in detail and make a similar function using the library sources. Here is an example:
var canvas, ctx, img;
var num = 2;
var vertices;
var indices;
var uvtData;
var width = 200;
var height = 150;
var xPos = 200;
var yPos = 150;
var dragok = false;// Add your code here
window.onload = function()
{
var i,j,obj;
canvas = document.getElementById("drawingCanvas");
ctx = canvas.getContext("2d");
var BB=canvas.getBoundingClientRect();
var offsetX=BB.left;
var offsetY=BB.top;
vertices = [196.38440032645163,-96.62102519267636,
103.37009957214813,-103.62387441434305,
-103.37009957214813,103.62387441434305,
96.38440032645163,96.62102519267636,
120,120,
120,240,
240,0,
240,120,
240,240];
indices = [0,1,3,
1,2,3,
1,4,2,
4,2,5,
3,6,4,
6,4,7,
4,7,5,
7,5,8];
uvtData = [0, 0, 0, 0.5, 0, 1, 0.5, 0, 0.5, 0.5, 0.5, 1, 1, 0, 1, 0.5, 1, 1];
var img = new Image();
img.src = "./assets/archer.jpg";
setTimeout(draw1,1000);
var c = ctx;
function draw1()
{
setInterval(() => {
(
function() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.translate(xPos, yPos);
drawTriangles(vertices, indices, uvtData);
ctx.restore();
}).call(this);
}, 33);
}
function drawTriangles(ve, ind, u, tn, lco)
{
var i, j, l = ind.length, c;
var v = ve, a, k, sw;
c = ctx;
for (i = 0, j = 0; i < l; i += 3) {
a = 0;
c.save();
c.beginPath();
c.moveTo(v[ind[i] * 2], v[ind[i] * 2 + 1]);
c.lineTo(v[ind[i + 1] * 2], v[ind[i + 1] * 2 + 1]);
c.lineTo(v[ind[i + 2] * 2], v[ind[i + 2] * 2 + 1]);
c.lineTo(v[ind[i] * 2], v[ind[i] * 2 + 1]);
c.closePath();
c.clip();
if (i % 6 == 0) {
sw = -1;
var w = (u[ind[i + 1 + j] * 2] - u[ind[i + j] * 2]) * img.width;
var h = (u[ind[i + 2] * 2 + 1] - u[ind[i] * 2 + 1]) * img.height;
if (j == 0 && w < 0) {
for (k = i + 9; k < l; k += 3) {
if (u[ind[i + 2] * 2 + 1] == u[ind[k + 2] * 2 + 1]) {
j = k - i;
break;
}
}
if (j == 0) {
j = l - i;
}
w = (u[ind[i + 1 + j] * 2] - u[ind[i + j] * 2]) * img.width;
}
if (i + j >= l) {
w = (u[ind[i + j - l] * 2] - u[ind[i + 1] * 2]) * img.width;
sw = u[ind[i] * 2] == 1 ? 0 : img.width * u[ind[i] * 2] + w;
if (sw > img.width) {
sw -= img.width;
}
} else {
sw = img.width * u[ind[i + j] * 2];
}
sh = img.height * u[ind[i] * 2 + 1];
if (h < 0) {
h = (u[ind[i + 2 - (i > 0 ? 6 : -6)] * 2 + 1] - u[ind[i - (i > 0 ? 6 : -6)] * 2 + 1]) * img.height;
sh = 0;
}
var t1 = (v[ind[i + 1] * 2] - v[ind[i] * 2]) / w;
var t2 = (v[ind[i + 1] * 2 + 1] - v[ind[i] * 2 + 1]) / w;
var t3 = (v[ind[i + 2] * 2] - v[ind[i] * 2]) / h;
var t4 = (v[ind[i + 2] * 2 + 1] - v[ind[i] * 2 + 1]) / h;
c.transform(t1, t2, t3, t4, v[ind[i] * 2], v[ind[i] * 2 + 1]);
c.drawImage(img,
img.x + sw,
img.y + sh,
w, h,
0, 0,
w, h);
}
else
{
var w = (u[ind[i + 2 + j] * 2] - u[ind[i + 1 + j] * 2]) * img.width;
var h = (u[ind[i + 2] * 2 + 1] - u[ind[i] * 2 + 1]) * img.height;
if (j == 0 && w < 0) {
for (k = i + 9; k < l; k += 3) {
if (u[ind[i + 2] * 2 + 1] == u[ind[k + 2] * 2 + 1]) {
j = k - i;
break;
}
}
if (j == 0) {
j = l - i;
}
w = (u[ind[i + 2 + j] * 2] - u[ind[i + 1 + j] * 2]) * img.width;
}
if (i + 1 + j >= l) {
w = (u[ind[i + 1 + j - l] * 2] - u[ind[i + 2] * 2]) * img.width;
sw = u[ind[i + 1] * 2] == 1 ? 0 : img.width * u[ind[i + 1] * 2] + w;
if (sw > img.width) {
sw -= img.width;
}
} else {
sw = img.width * u[ind[i + 1 + j] * 2];
}
sh = img.height * u[ind[i] * 2 + 1];
if (h < 0) {
h = (u[ind[i + 2 - (i > 0 ? 6 : -6)] * 2 + 1] - u[ind[i - (i > 0 ? 6 : -6)] * 2 + 1]) * img.height;
sh = 0;
}
var t1 = (v[ind[i + 2] * 2] - v[ind[i + 1] * 2]) / w;
var t2 = (v[ind[i + 2] * 2 + 1] - v[ind[i + 1] * 2 + 1]) / w;
var t3 = (v[ind[i + 2] * 2] - v[ind[i] * 2]) / h;
var t4 = (v[ind[i + 2] * 2 + 1] - v[ind[i] * 2 + 1]) / h;
c.transform(t1, t2, t3, t4, v[ind[i + 1] * 2], v[ind[i + 1] * 2 + 1]);
c.drawImage(img,
img.x + sw,
img.y + sh,
w, h,
0, -h,
w, h);
}
c.restore();
}
}
}
And the result:
Link to example: Plunker - Draw Triangle 2
drawTriangles has more capabilities than just drawing triangles. I’m wondering how to make an image distortion in Phaser, like in my example?
So far I’ve got this:
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, render: render });
function preload() {
// game.load.baseURL = 'https://i.imghippo.com/';
game.load.crossOrigin = 'anonymous';
game.load.image('archer', 'assets/archer.jpg');
}
var width1 = 350;
var height1 = 200;
function create() {
game.add.image(0, 0, 'archer');
const graphics = game.add.graphics(0, 0);
graphics.lineStyle(1, 0xffd900, 1);
graphics.beginFill(0xFF3300);
graphics.drawTriangles([196.38440032645163,-96.62102519267636,
103.37009957214813,-103.62387441434305,
-103.37009957214813,103.62387441434305,
96.38440032645163,96.62102519267636,
120,120,
120,240,
240,0,
240,120,
240,240],
[0,1,3,
1,2,3,
1,4,2,
4,2,5,
3,6,4,
6,4,7,
4,7,5,
7,5,8]);
graphics.endFill();
}
function render() {
}
Result:
Link to example: Plunker - Phaser 2 Image (plnkr.co)