Skip to content

Commit

Permalink
version 1.3.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@obiot
obiot committed Aug 28, 2023
1 parent a3a732a commit d2e0b5c
Show file tree
Hide file tree
Showing 24 changed files with 1,608 additions and 1,432 deletions.
6 changes: 6 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
# Changelog

## 1.3.0 - 2023-08-28å

- add support for Mesh Attachement
- added more examples under the test folder and separated them into individual files
- add a fullscreen option to examples (pressing the "F" key toggles fullscreen mode)

## 1.2.1 - 2023-08-23

- code refactoring and optimization to prepare for future feature additions
Expand Down
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ a [Spine](http://en.esotericsoftware.com/spine-in-depth) 4.1 plugin implementati
Installation
-------------------------------------------------------------------------------
this plugin is already bundled with the required Spine runtime, so there is no need to install it separately.
>Note: this plugin requires melonJS version 15.9 or higher.
>Note: this plugin requires melonJS version 15.9.2 or higher.
To install the plugin using npm :

Expand Down
4 changes: 3 additions & 1 deletion dist/@melonjs/spine-plugin.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4073,12 +4073,14 @@ declare class SkeletonRenderer {
skeletonRenderer: any;
runtime: any;
tintColor: Color$1;
vertexSize: number;
tempColor: Color$1;
debugRendering: boolean;
clipper: SkeletonClipping;
clippingVertices: any[];
clippingMask: Polygon;
draw(renderer: any, skeleton: any): void;
drawTriangle(renderer: any, img: any, x0: any, y0: any, u0: any, v0: any, x1: any, y1: any, u1: any, v1: any, x2: any, y2: any, u2: any, v2: any): void;
computeMeshVertices(slot: any, mesh: any, pma: boolean | undefined, vertexSize: any): void;
}
import { Vector2d } from 'melonjs';
/******************************************************************************
Expand Down
171 changes: 131 additions & 40 deletions dist/@melonjs/spine-plugin.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*!
* melonJS Spine plugin - v1.2.1
* melonJS Spine plugin - v1.3.0
* http://www.melonjs.org
* @melonjs/spine-plugin is licensed under the MIT License.
* http://www.opensource.org/licenses/mit-license
Expand Down Expand Up @@ -14929,17 +14929,19 @@ class AssetManager {
}
}

const worldVertices = new Float32Array(8);
const vertexSize = 2 + 2 + 4;
const blendModeLUT = ["normal", "additive", "multiply", "screen"];

const regionDebugColor = "green";
const meshDebugColor = "yellow";
const clipDebugColor = "blue";

let worldVertices = new Float32Array(vertexSize * 1024);

class SkeletonRenderer {
skeletonRenderer;
runtime;
tintColor = new Color$1();
vertexSize = 2 + 2 + 4;
tempColor = new Color$1();
debugRendering = false;
clipper = new SkeletonClipping();
clippingVertices = [];
Expand All @@ -14958,11 +14960,12 @@ class SkeletonRenderer {
let debugRendering = this.debugRendering;

for (var i = 0, n = drawOrder.length; i < n; i++) {
let clippedVertexSize = clipper.isClipping() ? 2 : this.vertexSize;
let clippedVertexSize = clipper.isClipping() ? 2 : vertexSize;
let slot = drawOrder[i];
let bone = slot.bone;
let image;
let region;
let triangles;

if (!bone.active) {
clipper.clipEndWithSlot(slot);
Expand All @@ -14977,14 +14980,10 @@ class SkeletonRenderer {
region = attachment.region;
image = region.texture.getImage();
} else if (attachment instanceof MeshAttachment) {
/*
// commenting for now as totally untested
let mesh = attachment;
mesh.computeWorldVertices(slot, 0, mesh.worldVerticesLength, worldVertices, 0, 2);
region = mesh.region;
image = mesh.region.texture.getImage();
*/
console.warn("spine-plugin: MeshAttachment is not supported yet");
this.computeMeshVertices(slot, attachment, false, clippedVertexSize);
triangles = attachment.triangles;
region = attachment.region;
image = region.texture.getImage();
} else if (attachment instanceof ClippingAttachment) {
let clip = attachment;
let vertices = this.clippingVertices;
Expand All @@ -15008,43 +15007,55 @@ class SkeletonRenderer {
let blendMode = slot.data.blendMode;
let color = this.tintColor;

renderer.save();

color.setFloat(skeletonColor.r * slotColor.r * regionColor.r,
skeletonColor.g * slotColor.g * regionColor.g,
skeletonColor.b * slotColor.b * regionColor.b,
skeletonColor.a * slotColor.a * regionColor.a);

renderer.save();
renderer.transform(bone.a, bone.c, bone.b, bone.d, bone.worldX, bone.worldY);
renderer.translate(attachment.offset[0], attachment.offset[1]);
renderer.rotate(Math$1.degToRad(attachment.rotation));

let atlasScale = attachment.width / region.originalWidth;
renderer.scale(atlasScale * attachment.scaleX, atlasScale * attachment.scaleY);

let w = region.width, h = region.height;
let hW = w / 2, hH = h / 2;
renderer.translate(hW, hH);
if (region.degrees === 90) {
let t = w;
w = h;
h = t;
renderer.rotate(-Math$1.ETA);
}
renderer.scale(1, -1);
renderer.translate(-hW, -hH);
renderer.setGlobalAlpha(color.a);
renderer.setTint(color);
renderer.setBlendMode(blendModeLUT[blendMode]);
renderer.setGlobalAlpha(color.a);

if (clipper.isClipping()) {
renderer.setMask(clippingMask);
}
if (typeof triangles !== "undefined") {
let vertices = worldVertices;
for (var j = 0; j < triangles.length; j += 3) {
let t1 = triangles[j] * 8, t2 = triangles[j + 1] * 8, t3 = triangles[j + 2] * 8;
let x0 = vertices[t1], y0 = vertices[t1 + 1], u0 = vertices[t1 + 6], v0 = vertices[t1 + 7];
let x1 = vertices[t2], y1 = vertices[t2 + 1], u1 = vertices[t2 + 6], v1 = vertices[t2 + 7];
let x2 = vertices[t3], y2 = vertices[t3 + 1], u2 = vertices[t3 + 6], v2 = vertices[t3 + 7];

renderer.drawImage(image, image.width * region.u, image.height * region.v, w, h, 0, 0, w, h);
this.drawTriangle(renderer, image, x0, y0, u0, v0, x1, y1, u1, v1, x2, y2, u2, v2);
}
} else {
let atlasScale = attachment.width / region.originalWidth;
let w = region.width, h = region.height;
let hW = w / 2, hH = h / 2;

if (debugRendering === true) {
renderer.setColor(regionDebugColor);
renderer.strokeRect(0, 0, w, h);
renderer.transform(bone.a, bone.c, bone.b, bone.d, bone.worldX, bone.worldY);
renderer.translate(attachment.offset[0], attachment.offset[1]);
renderer.rotate(Math$1.degToRad(attachment.rotation));
renderer.scale(atlasScale * attachment.scaleX, atlasScale * attachment.scaleY);
renderer.translate(hW, hH);
if (region.degrees === 90) {
let t = w;
w = h;
h = t;
renderer.rotate(-Math$1.ETA);
}
renderer.scale(1, -1);
renderer.translate(-hW, -hH);

if (clipper.isClipping()) {
renderer.setMask(clippingMask);
}
renderer.drawImage(image, image.width * region.u, image.height * region.v, w, h, 0, 0, w, h);

if (debugRendering === true) {
renderer.setColor(regionDebugColor);
renderer.strokeRect(0, 0, w, h);
}
}

renderer.restore();
Expand All @@ -15054,6 +15065,86 @@ class SkeletonRenderer {
}
clipper.clipEnd();
}

drawTriangle(renderer, img, x0, y0, u0, v0, x1, y1, u1, v1, x2, y2, u2, v2) {
u0 *= img.width;
v0 *= img.height;
u1 *= img.width;
v1 *= img.height;
u2 *= img.width;
v2 *= img.height;

renderer.save();
renderer.beginPath();
renderer.moveTo(x0, y0);
renderer.lineTo(x1, y1);
renderer.lineTo(x2, y2);
renderer.closePath();
renderer.setMask();

x1 -= x0;
y1 -= y0;
x2 -= x0;
y2 -= y0;

u1 -= u0;
v1 -= v0;
u2 -= u0;
v2 -= v0;

var det = 1 / (u1 * v2 - u2 * v1),

// linear transformation
a = (v2 * x1 - v1 * x2) * det,
b = (v2 * y1 - v1 * y2) * det,
c = (u1 * x2 - u2 * x1) * det,
d = (u1 * y2 - u2 * y1) * det,

// translation
e = x0 - a * u0 - c * v0,
f = y0 - b * u0 - d * v0;

renderer.transform(a, b, c, d, e, f);
renderer.drawImage(img, 0, 0);
renderer.clearMask();
renderer.restore();

if (this.debugRendering === true) {
renderer.setColor(meshDebugColor);
renderer.stroke();
}

}

computeMeshVertices(slot, mesh, pma = false, vertexSize) {
let skeletonColor = slot.bone.skeleton.color;
let slotColor = slot.color;
let regionColor = mesh.color;
let alpha = skeletonColor.a * slotColor.a * regionColor.a;
let multiplier = pma ? alpha : 1;

this.tempColor.setFloat(skeletonColor.r * slotColor.r * regionColor.r * multiplier,
skeletonColor.g * slotColor.g * regionColor.g * multiplier,
skeletonColor.b * slotColor.b * regionColor.b * multiplier,
alpha);

if (worldVertices.length < mesh.worldVerticesLength) worldVertices = new Float32Array(mesh.worldVerticesLength);
mesh.computeWorldVertices(slot, 0, mesh.worldVerticesLength, worldVertices, 0, vertexSize);

let uvs = mesh.uvs;
let color = this.tempColor.toArray();
let vertices = worldVertices;
let vertexCount = mesh.worldVerticesLength / 2;
for (let i = 0, u = 0, v = 2; i < vertexCount; i++) {
vertices[v++] = color[0];
vertices[v++] = color[1];
vertices[v++] = color[2];
vertices[v++] = color[3];
vertices[v++] = uvs[u++];
vertices[v++] = uvs[u++];
v += 2;
}
}
}

let assetManager = new AssetManager();
Expand Down
12 changes: 6 additions & 6 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@melonjs/spine-plugin",
"version": "1.2.1",
"version": "1.3.0",
"description": "melonJS Spine plugin",
"homepage": "https://github.com/melonjs/spine-plugin#readme",
"type": "module",
Expand Down Expand Up @@ -46,25 +46,25 @@
"CHANGELOG.md"
],
"peerDependencies": {
"melonjs": "^15.9.0"
"melonjs": "^15.9.2"
},
"dependencies": {
"@esotericsoftware/spine-canvas": "^4.2.18",
"@esotericsoftware/spine-core": "^4.2.18",
"@esotericsoftware/spine-webgl": "^4.2.18"
},
"devDependencies": {
"@babel/eslint-parser": "^7.22.0",
"@babel/eslint-parser": "^7.22.11",
"@babel/plugin-syntax-import-assertions": "^7.22.5",
"@rollup/plugin-commonjs": "^25.0.4",
"@rollup/plugin-node-resolve": "^15.2.1",
"@rollup/plugin-replace": "^5.0.2",
"del-cli": "^5.0.0",
"eslint": "^8.47.0",
"del-cli": "^5.0.1",
"eslint": "^8.48.0",
"eslint-plugin-jsdoc": "^46.5.0",
"rollup": "^3.28.1",
"rollup-plugin-bundle-size": "^1.0.3",
"typescript": "^5.1.6"
"typescript": "^5.2.2"
},
"scripts": {
"build": "npm run clean && npm run lint && rollup -c --silent && npm run types",
Expand Down
Loading

0 comments on commit d2e0b5c

Please sign in to comment.