Permalink
Browse files

Changing the rules, again. Refactoring canvas operations.

 * Stick to a strict order of how we perform canvas operations.
 * Define a naming convention.
 * Separate `draw` and `paint` where I can.
 * Move screen translation outside of grid's `paint`.
  • Loading branch information...
1 parent f228622 commit 15e08c641c77df47fcd9ef211fd109c9cce4ded9 @stephank committed Jun 13, 2010
Showing with 69 additions and 39 deletions.
  1. +10 −1 HACKING.md
  2. +1 −2 src/enemies/plasma.js
  3. +9 −8 src/engine.js
  4. +4 −1 src/gamestates/game.js
  5. +26 −17 src/grid.js
  6. +13 −4 src/vakit/lightning.js
  7. +6 −6 src/vakit/logo.js
View
@@ -63,5 +63,14 @@ or perhaps simply to skip the intro and jump right into a specific level.
The HTML5 canvas has a fair amount of state variables. This is the place to document the
pecularities of how ArashiJS deals with these variables.
-* When using the drawing state stack, always `restore` **before** a `stroke` or `fill` operation.
+* All `draw*` methods only ever draw paths. Other methods (usually called `paint`) will do an
+actual `stroke` or `fill` operation.
+
* Always reset `globalAlpha` to 1.0 when you're done using it.
+
+* Always use stack methods (`save` and `restore`) and painting methods (`beginPath` and `stroke` or
+`fill`) in a block or hierarchy fashion. There should be no partial overlaps in their scope.
+
+* Indent the above like a block, too.
+
+* Set the stroke or fill parameters *before* starting a path.
View
@@ -18,12 +18,11 @@ Plasma.prototype.update = function() {
}
};
-Plasma.prototype.draw = function() {
+Plasma.prototype.paint = function() {
var angle = this.depth * 63,
i, dx, dy;
c.save();
- grid.screenTranslation();
grid.laneTranslation(this.lane, this.depth)
c.lineWidth = 0.02;
View
@@ -103,14 +103,15 @@ Engine.render = function() {
// Draw frame render time in ms
if (window.arashi_devmode) {
var d = new Date() - s;
- c.beginPath();
- c.save();
- c.translate(0.5, 0.5); // Pixel align
- c.scale(3,3); c.translate(1,1);
+ c.save();
+ c.translate(0.5, 0.5); // Pixel align
+ c.scale(3,3); c.translate(1,1);
+
+ c.lineWidth = 0.3;
+ c.strokeStyle = 'white';
+ c.beginPath();
Dig7Segment.drawNumber(d);
- c.restore();
- c.lineWidth = 1;
- c.strokeStyle = 'white';
- c.stroke();
+ c.stroke();
+ c.restore();
}
};
View
@@ -29,7 +29,10 @@ GameMachine = {
}
Starfield.ride();
- grid.draw();
+ c.save();
+ grid.screenTranslation();
+ grid.paint();
+ c.restore();
},
enter_main: function() {
View
@@ -144,15 +144,10 @@ Grid.prototype.setDistance = function(distance) {
}
};
-Grid.prototype.draw = function() {
- var style = 'rgb('+this.color[0]+','+this.color[1]+','+this.color[2]+')';
+// Draw a polygon around the solid area of the grid.
+Grid.prototype.drawArea = function() {
var i, corner;
- c.save();
- this.screenTranslation();
-
- // Fill the grid area
- c.beginPath();
c.moveTo(this.scoords[0].sx, this.scoords[0].sy);
for (i = 1; i < this.scoords.length; i++) {
corner = this.scoords[i];
@@ -163,38 +158,52 @@ Grid.prototype.draw = function() {
c.lineTo(corner.ex, corner.ey);
}
c.closePath();
+};
- c.globalAlpha = 0.03 * this.alphaFactor;
- c.fillStyle = style;
- c.fill();
+// Draw the lane borders.
+Grid.prototype.drawLanes = function() {
+ var i, corner;
- c.beginPath();
- // Draw lanes
+ // Draw the borders between lanes.
for (i = 0; i < this.scoords.length; i++) {
corner = this.scoords[i];
c.moveTo(corner.sx, corner.sy);
c.lineTo(corner.ex, corner.ey);
}
- // Draw front edge
+
+ // Draw front edge all around.
c.moveTo(this.scoords[0].sx, this.scoords[0].sy);
for (i = 1; i < this.scoords.length; i++) {
corner = this.scoords[i];
if (corner.close) { c.closePath(); break; }
c.lineTo(corner.sx, corner.sy);
}
- // Draw back edge
+
+ // Draw back edge.
c.moveTo(this.scoords[0].ex, this.scoords[0].ey);
for (i = 1; i < this.scoords.length; i++) {
corner = this.scoords[i];
if (corner.close) { c.closePath(); break; }
c.lineTo(corner.ex, corner.ey);
}
+};
+
+// Paint all of the grid.
+// The caller is responsible for applying the screen translation first.
+Grid.prototype.paint = function() {
+ var style = 'rgb('+this.color[0]+','+this.color[1]+','+this.color[2]+')';
+ c.fillStyle = style;
+ c.strokeStyle = style;
+ c.lineWidth = 0.01;
- c.restore();
+ c.globalAlpha = 0.03 * this.alphaFactor;
+ c.beginPath();
+ this.drawArea();
+ c.fill();
c.globalAlpha = this.alphaFactor;
- c.lineWidth = 1;
- c.strokeStyle = style;
+ c.beginPath();
+ this.drawLanes();
c.stroke();
c.globalAlpha = 1.0;
View
@@ -109,8 +109,9 @@ Lightning.draw = function(start, end) {
};
// Returns true when the animation is finished.
-Lightning.animate = function() {
+Lightning.update = function() {
if (this.flashIntensity <= 1 && this.drawStart >= frame.h) { return true; }
+ this.flashIntensity = Math.round(this.flashIntensity * 2 / 3);
if (!this.lightningHit) {
if (this.drawEnd < frame.h) {
@@ -125,17 +126,25 @@ Lightning.animate = function() {
this.drawStart += this.drawSpeed;
}
+ return false;
+};
+
+Lightning.paint = function() {
var full = this.flashIntensity,
half = Math.round(full / 2);
c.fillStyle = 'rgb(' + half + ',' + half + ',' + full + ')';
c.fillRect(0, 0, frame.w, frame.h);
- this.flashIntensity = Math.round(full * 2 / 3);
- c.beginPath();
- this.draw(this.drawStart, this.drawEnd);
c.lineWidth = 3;
c.strokeStyle = 'white';
+ c.beginPath();
+ this.draw(this.drawStart, this.drawEnd);
c.stroke();
+};
+// Convenience function, because we always pair #update + #paint any way.
+Lightning.animate = function() {
+ if (this.update()) { return true; }
+ this.paint();
return false;
};
View
@@ -44,19 +44,19 @@ VectorLogo.prototype.animate = function() {
break;
case true:
done = false;
- c.beginPath();
- SizzlingLine.draw(line[0], line[1], line[2], line[3],
- 1 + Math.pow(2, 8 - (line.timer / 2)), 3);
c.strokeStyle = 'blue';
+ c.beginPath();
+ SizzlingLine.draw(line[0], line[1], line[2], line[3],
+ 1 + Math.pow(2, 8 - (line.timer / 2)), 3);
c.stroke();
line.timer -= 1;
if (line.timer === 0) { line.state = undefined; }
break;
case undefined:
- c.beginPath();
- c.moveTo(line[0], line[1]);
- c.lineTo(line[2], line[3]);
c.strokeStyle = 'yellow';
+ c.beginPath();
+ c.moveTo(line[0], line[1]);
+ c.lineTo(line[2], line[3]);
c.stroke();
break;
}

0 comments on commit 15e08c6

Please sign in to comment.