scratchfoundation/scratch-render
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-render.git synced 2025-08-28 22:30:04 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Support setting the stage background color

Browse source
This commit is contained in:
Christopher Willis-Ford 2016-05-19 12:00:19 -07:00
parent 7f020787fd
commit d9a89fdd06
3 changed files with 29 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

2
build/demo.html
View file

@ -5,7 +5,7 @@
<title>Scratch WebGL rendering demo</title>
</head>
<body>
<canvas id="scratch-stage" width="10" height="10"></canvas>
<canvas id="scratch-stage" width="10" height="10" style="border:1px dashed black;"></canvas>
</body>
<script src="render-webgl.js"></script>
<script>

14
src/Drawable.js
View file

@ -77,6 +77,10 @@ Drawable._effectCoverter = {
}
};
/**
* The name of each supported effect.
* @type {Array}
*/
Drawable.EFFECTS = Object.keys(Drawable._effectCoverter);
/**
@ -183,6 +187,11 @@ Drawable.prototype.setSkin = function (skin_md5ext) {
}
};
/**
* Fetch the shader for this Drawable's set of active effects.
* Build the shader if necessary.
* @returns {module:twgl.ProgramInfo?} The shader's program info.
*/
Drawable.prototype.getShader = function () {
var shader = Drawable._shaderCache[this._shaderIndex];
if (!shader) {
@ -192,6 +201,11 @@ Drawable.prototype.getShader = function () {
return shader;
};
/**
* Build the shader for this Drawable's set of active effects.
* @returns {module:twgl.ProgramInfo?} The new shader's program info.
* @private
*/
Drawable.prototype._buildShader = function () {
var defines = [];
var numEffects = Drawable.EFFECTS.length;

15
src/index.js
View file

@ -35,6 +35,7 @@ function RenderWebGL(
this._createGeometry();
this.setBackgroundColor(1, 1, 1, 1);
this.setStageSize(
xLeft || -240, xRight || 240, yBottom || -180, yTop || 180);
this.resize(
@ -53,6 +54,18 @@ util.inherits(RenderWebGL, EventEmitter);
module.exports = RenderWebGL;
if (typeof window !== 'undefined') window.RenderWebGL = module.exports;
/**
* Set the background color for the stage. The stage will be cleared with this
* color each frame.
* @param {number} red The red component for the background.
* @param {number} green The green component for the background.
* @param {number} blue The blue component for the background.
* @param {number} alpha The alpha (transparency) component for the background.
*/
RenderWebGL.prototype.setBackgroundColor = function(red, green, blue, alpha) {
this._backgroundColor = [red, green, blue, alpha];
};
/**
* Set logical size of the stage in Scratch units.
* @param {number} xLeft The left edge's x-coordinate. Scratch 2 uses -240.
@ -88,7 +101,7 @@ RenderWebGL.prototype.draw = function () {
var gl = this._gl;
gl.viewport(0, 0, gl.canvas.clientWidth, gl.canvas.clientHeight);
gl.clearColor(1, 0, 1, 1);
gl.clearColor.apply(gl, this._backgroundColor);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.enable(gl.BLEND);