Merge pull request #1321 from melonjs/feature/tiled-blend-modes

Support Tiled 1.12+ layer and object group blend modes

Author: obiot

packages/melonjs/src/level/tiled/TMXTileMap.js

@@ -596,6 +596,14 @@ export default class TMXTileMap {
 						// propagate group blend mode to children (if not default)
 						if (group.blendMode !== "normal" && obj.blendMode === "normal") {
 							obj.blendMode = group.blendMode;
+							// also propagate to child renderables (e.g. Entity wrappers)
+							if (
+								typeof obj.renderable !== "undefined" &&
+								obj.renderable.isRenderable === true &&
+								obj.renderable.blendMode === "normal"
+							) {
+								obj.renderable.blendMode = group.blendMode;
+							}
 						}
 						obj.setOpacity(obj.getOpacity() * group.opacity);
 						// and to child renderables if any
@@ -611,6 +619,22 @@ export default class TMXTileMap {
 					// directly add the obj into the objects array
 					objects.push(obj);
 				} /* false*/ else {
+					// propagate group blend mode to children in non-flattened mode,
+					// since container blendMode is overridden by each child's preDraw()
+					if (
+						group.blendMode !== "normal" &&
+						obj.isRenderable === true &&
+						obj.blendMode === "normal"
+					) {
+						obj.blendMode = group.blendMode;
+						if (
+							typeof obj.renderable !== "undefined" &&
+							obj.renderable.isRenderable === true &&
+							obj.renderable.blendMode === "normal"
+						) {
+							obj.renderable.blendMode = group.blendMode;
+						}
+					}
 					// add it to the new container
 					targetContainer.addChild(obj);
 				}

packages/melonjs/tests/tmxtilemap.spec.js

@@ -129,5 +129,23 @@ describe("TMXTileMap", () => {
 			});
 			expect(container.getOpacity()).toBeCloseTo(0.8);
 		});
+
+		it("should propagate blend mode to children in non-flattened mode", () => {
+			const map = new TMXTileMap("test", minimalMap);
+			const objects = map.getObjects(false);
+
+			const container = objects.find((obj) => {
+				return obj.name === "TestGroup";
+			});
+			expect(container).toBeDefined();
+			expect(container.children.length).toBeGreaterThan(0);
+
+			// children should inherit the group blend mode
+			for (const child of container.children) {
+				if (child.isRenderable === true) {
+					expect(child.blendMode).toEqual("multiply");
+				}
+			}
+		});
 	});
 });