Skip to content

Commit

Permalink
[#961][#648] rendering mask support, and Canvas & WebGL drawing API i…
Browse files Browse the repository at this point in the history 
…mprovements

@see CHANGELOG
  • Loading branch information
@obiot
obiot committed Dec 11, 2018
1 parent 89b666b commit 90d8510
Show file tree
Hide file tree
Showing 19 changed files with 1,345 additions and 273 deletions.
4 changes: 2 additions & 2 deletions .eslintrc.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,10 @@

// melonJS
"me" : false,
"__PRIMITIVE_VERTEX__" : false,
"__QUAD_VERTEX__" : false,
"__PRIMITIVE_FRAGMENT__": false,
"__QUAD_FRAGMENT__" : false,
"__LINE_VERTEX__" : false,
"__LINE_FRAGMENT__" : false,

// Howler
"AudioContext" : false,
Expand Down
4 changes: 4 additions & 0 deletions CHANGELOG
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
Version History
---------------
6.3.0
* Renderable : added support for rendering mask (in both Canvas and WebGL mode), allowing to use any polygon based Shape as a mask
* Renderer : `drawShape()` is deprecated and has been replaced by a `fill()` and `stroke() methods
* Renderer : cleaned and aligned drawing APIs between the Canvas and WebGL Renderer
* WebGLRenderer : added fill operations for polygon based shapes

6.2.0
* Audio : fixed a regression when passing an initial volume value to the play function (thanks @PLAYERKILLERS)
Expand Down
18 changes: 9 additions & 9 deletions Gruntfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@ module.exports = function (grunt) {
var sourceFiles = grunt.file.readJSON("sourceFiles.json");
var testSpecs = "tests/spec/**/*.js";

var quadFragment = "<%= grunt.file.read('build/glsl/quad-fragment.glsl') %>";
var quadVertex = "<%= grunt.file.read('build/glsl/quad-vertex.glsl') %>";
var lineFragment = "<%= grunt.file.read('build/glsl/line-fragment.glsl') %>";
var lineVertex = "<%= grunt.file.read('build/glsl/line-vertex.glsl') %>";
var quadFragment = "<%= grunt.file.read('build/glsl/quad-fragment.glsl') %>";
var primitiveFragment = "<%= grunt.file.read('build/glsl/primitive-fragment.glsl') %>";
var quadVertex = "<%= grunt.file.read('build/glsl/quad-vertex.glsl') %>";
var primitiveVertex = "<%= grunt.file.read('build/glsl/primitive-vertex.glsl') %>";

// Project configuration.
grunt.initConfig({
Expand All @@ -30,11 +30,11 @@ module.exports = function (grunt) {
dist : {
options : {
variables : {
"__VERSION__" : "<%= pkg.version %>",
"__QUAD_FRAGMENT__" : quadFragment,
"__QUAD_VERTEX__" : quadVertex,
"__LINE_FRAGMENT__" : lineFragment,
"__LINE_VERTEX__" : lineVertex
"__VERSION__" : "<%= pkg.version %>",
"__PRIMITIVE_FRAGMENT__" : primitiveFragment,
"__QUAD_FRAGMENT__" : quadFragment,
"__PRIMITIVE_VERTEX__" : primitiveVertex,
"__QUAD_VERTEX__" : quadVertex
},
usePrefix : false,
force : true,
Expand Down
29 changes: 24 additions & 5 deletions examples/alphablending/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>melonJS - WebGL Bug</title>
<title>melonJS - alpha blending</title>
<link rel="stylesheet" type="text/css" media="screen" href="index.css">
</head>
<body bgcolor="white">
Expand All @@ -15,7 +15,7 @@
<script type="text/javascript">
me.device.onReady(function onReady() {
// Initialize the video.
if (!me.video.init(320, 240, {wrapper : "screen", scale : "auto", blendMode: "normal"})) {
if (!me.video.init(320, 240, {wrapper : "screen", scale : "auto", renderer : me.video.CANVAS, blendMode: "normal"})) {
alert("Your browser does not support HTML5 canvas.");
return;
}
Expand All @@ -24,21 +24,40 @@
var g = new me.Color (0, 255, 0, 0.5);
var b = new me.Color (0, 0, 255, 0.5);

var mask = new me.Polygon(0, 0, [
// draw a star
{x: 0, y: 0},
{x: 14, y: 30},
{x: 47, y: 35},
{x: 23, y: 57},
{x: 44, y: 90},
{x: 0, y: 62},
{x: -44, y: 90},
{x: -23, y: 57},
{x: -47, y: 35},
{x: -14, y: 30}
])

me.video.renderer.clearColor("#FFFFFF80");

me.video.renderer.setColor(r);
mask.pos.set(60 + 50, 25);
me.video.renderer.fill(mask);
me.video.renderer.fillRect(60, 20, 100 ,100);
//me.video.renderer.setColor(r.darken(1.0));
me.video.renderer.strokeRect(65, 25, 90 , 90);

me.video.renderer.setColor(g);
mask.pos.set(110 + 50, 75);
me.video.renderer.setMask(mask);
me.video.renderer.stroke(mask);
me.video.renderer.fillRect(110, 70, 100 ,100);
//me.video.renderer.setColor(g.darken(1.0));
me.video.renderer.strokeRect(115, 75, 90 , 90);
me.video.renderer.clearMask();

me.video.renderer.setColor(b);
mask.pos.set(160 + 50, 125);
me.video.renderer.fill(mask);
me.video.renderer.fillRect(160, 120, 100 ,100);
//me.video.renderer.setColor(b.darken(1.0));
me.video.renderer.strokeRect(165, 125, 90 , 90);
});
</script>
Expand Down
2 changes: 1 addition & 1 deletion examples/isometric_rpg/js/screens/play.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ game.PlayScreen = me.Stage.extend({
// draw our diamond shape
renderer.save();
renderer.setColor("#FF0000");
renderer.drawShape(this.diamondShape);
renderer.stroke(this.diamondShape);

renderer.setColor("#FFFFFF");
// draw the tile col/row in the middle
Expand Down
2 changes: 1 addition & 1 deletion examples/lineofsight/js/screens/play.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ game.PlayScreen = me.Stage.extend({
},
draw: function(renderer) {
renderer.setColor("red");
renderer.drawShape(this.line);
renderer.stroke(this.line);
}
})), 10);
}
Expand Down
28 changes: 17 additions & 11 deletions plugins/debug/debugPanel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,7 @@
this.isKinematic = false;

// minimum melonJS version expected
this.version = "6.2.0";
this.version = "6.3.0";

// to hold the debug options
// clickable rect area
Expand Down Expand Up @@ -335,16 +335,22 @@
renderer.translate(ax, ay);

renderer.setColor("green");
renderer.drawShape(bounds);
renderer.stroke(bounds);

renderer.translate(-ax, -ay);

if (this.body) {
// the sprite mask if defined
if (typeof this.mask !== "undefined") {
renderer.setColor("orange");
renderer.stroke(this.mask);
}

if (typeof this.body !== "undefined") {
renderer.translate(this.pos.x, this.pos.y);
// draw all defined shapes
renderer.setColor("red");
for (var i = this.body.shapes.length, shape; i--, (shape = this.body.shapes[i]);) {
renderer.drawShape(shape);
renderer.stroke(shape);
_this.counters.inc("shapes");
}
}
Expand Down Expand Up @@ -372,7 +378,7 @@
}

renderer.setColor("orange");
renderer.drawShape(bounds);
renderer.stroke(bounds);
_this.counters.inc("bounds");

if (typeof this.ancestor === "undefined") {
Expand All @@ -392,7 +398,7 @@
renderer.save();
}
renderer.setColor("orange");
renderer.drawShape(this.getBounds());
renderer.stroke(this.getBounds());
_this.counters.inc("bounds");
if (typeof this.ancestor === "undefined") {
renderer.restore();
Expand All @@ -411,7 +417,7 @@
renderer.save();
}
renderer.setColor("orange");
renderer.drawShape(this.getBounds());
renderer.stroke(this.getBounds());
_this.counters.inc("bounds");
if (typeof this.ancestor === "undefined") {
renderer.restore();
Expand Down Expand Up @@ -444,7 +450,7 @@

// draw the bounding rect shape
renderer.setColor("orange");
renderer.drawShape(this.getBounds());
renderer.stroke(this.getBounds());

renderer.translate(
this.pos.x + this.ancestor._absPos.x,
Expand All @@ -454,7 +460,7 @@
// draw all defined shapes
renderer.setColor("red");
for (var i = this.body.shapes.length, shape; i--, (shape = this.body.shapes[i]);) {
renderer.drawShape(shape);
renderer.stroke(shape);
_this.counters.inc("shapes");
}
renderer.restore();
Expand Down Expand Up @@ -507,15 +513,15 @@
if (this.ancestor) {
bounds.pos.sub(this.ancestor._absPos);
}
renderer.drawShape(bounds);
renderer.stroke(bounds);

// draw the children bounding rect shape
renderer.setColor("purple");
bounds.copy(this.childBounds);
if (this.ancestor) {
bounds.pos.sub(this.ancestor._absPos);
}
renderer.drawShape(bounds);
renderer.stroke(bounds);

renderer.restore();
}
Expand Down
1 change: 1 addition & 0 deletions sourceFiles.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@
"src/vendors/tween.js",
"src/vendors/minpubsub.src.js",
"src/vendors/howler.core.js",
"src/vendors/earcut.js",
"src/plugin/plugin.js",
"src/entity/draggable.js",
"src/entity/droptarget.js",
Expand Down
9 changes: 9 additions & 0 deletions src/lang/deprecated.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ me.Font = me.Text.extend({
* @ignore
*/
me.BitmapFontData = me.BitmapTextData;

/**
* @ignore
*/
Expand All @@ -77,3 +78,11 @@ me.BitmapFont = me.BitmapText.extend({
console.log("me.BitmapFont is deprecated, please use me.BitmapText");
}
});

/**
* @ignore
*/
me.Renderer.prototype.drawShape = function () {
console.log("drawShape() is deprecated, please use the stroke() or fill() function");
me.Renderer.prototype.stroke.apply(this, arguments);
}
38 changes: 38 additions & 0 deletions src/renderable/renderable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -245,6 +245,32 @@
this._bounds = me.pool.pull("me.Rect", x, y, width, height);
}

/**
* A mask limits rendering elements to the shape and position of the given mask object.
* So, if the renderable is larger than the mask, only the intersecting part of the renderable will be visible.
* @public
* @type {me.Rect[]|me.Polygon[]|me.Ellipse[]}
* @name mask
* @default undefined
* @memberOf me.Renderable
* @example
* // apply a mask in the shape of a Star
* myNPCSprite.mask = new me.Polygon(myNPCSprite.width / 2, 0, [
* // draw a star
* {x: 0, y: 0},
* {x: 14, y: 30},
* {x: 47, y: 35},
* {x: 23, y: 57},
* {x: 44, y: 90},
* {x: 0, y: 62},
* {x: -44, y: 90},
* {x: -23, y: 57},
* {x: -47, y: 35},
* {x: -14, y: 30}
* ]);
*/
this.mask = undefined;

/**
* Absolute position in the game world
* @ignore
Expand Down Expand Up @@ -507,6 +533,10 @@
renderer.translate(-ax, -ay);
}

if (typeof this.mask !== "undefined") {
renderer.setMask(this.mask);
}

},

/**
Expand All @@ -532,6 +562,9 @@
* @param {me.CanvasRenderer|me.WebGLRenderer} renderer a renderer object
**/
postDraw : function (renderer) {
if (typeof this.mask !== "undefined") {
renderer.clearMask();
}
// restore the context
renderer.restore();
},
Expand Down Expand Up @@ -559,6 +592,11 @@

this.onVisibilityChange = undefined;

if (typeof this.mask !== "undefined") {
me.pool.push(this.mask);
this.mask = undefined;
}

// destroy the physic body if defined
if (typeof this.body !== "undefined") {
this.body.destroy.apply(this.body, arguments);
Expand Down
34 changes: 34 additions & 0 deletions src/shapes/poly.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,12 @@
*/
this.edges = [];

/**
* a list of indices for all vertices composing this polygon (@see earcut)
* @ignore
*/
this.indices = [];

/**
* The normals here are the direction of the normal for the `n`th edge of the polygon, relative
* to the position of the `n`th point. If you want to draw an edge normal, you must first
Expand Down Expand Up @@ -220,6 +226,7 @@
var i;
var edges = this.edges;
var normals = this.normals;
var indices = this.indices;

// Copy the original points array and apply the offset/angle
var points = this.points;
Expand All @@ -244,10 +251,37 @@
// trunc array
edges.length = len;
normals.length = len;
// do not do anything here, indices will be computed by
// toIndices if array is empty upon function call
indices.length = 0;

return this;
},

/**
* returns a list of indices for all triangles defined in this polygon
* @name toIndices
* @memberOf me.Polygon
* @function
* @param {Vector2d[]} a list of vector
* @return {me.Polygon} this Polygon
*/
getIndices : function (x, y) {
if (this.indices.length === 0) {
var points = this.points;
var data = [];

// flatten the points vector array
for (var i = 0; i < points.length; i++) {
// XXX Optimize me
data.push(points[i].x);
data.push(points[i].y);
}
this.indices = me.earcut(data);
}
return this.indices;
},

/**
* translate the Polygon by the specified offset
* @name translate
Expand Down
Loading

0 comments on commit 90d8510

Please sign in to comment.