Permalink
Browse files

Reduce object allocation / garbage creation

  • Loading branch information...
walsh9 committed Oct 7, 2016
1 parent e10f7d7 commit 19cdc6562f6feb9f8b4e338995dbace3a0203a51
Showing with 109 additions and 91 deletions.
  1. +60 −49 dist/bundle.js
  2. +1 −1 dist/bundle.js.map
  3. +1 −1 src/character.js
  4. +9 −8 src/graphics.js
  5. +29 −25 src/map.js
  6. +9 −7 src/timer.js
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View

Large diffs are not rendered by default.

Oops, something went wrong.
View
@@ -18,7 +18,7 @@ export default class Character {
update(time) {
let footPos = this.state === 'running' ? 11 : 18;
let floorHeight = 117 - this.map.whatsHere(this.pos.x + footPos).height;
let floorHeight = 117 - this.map.heightHere(this.pos.x + footPos);
if (!near(this.pos.y, floorHeight, 0.1) || this.velocity.y < 0 ) {
if (this.velocity.y <= 0) {
this.state = 'jumping';
View
@@ -39,18 +39,19 @@ Graphics.drawTile = function(tileSet, tileX, tileY, x, y, ctx) {
x, y, tileSet.tileWidth, tileSet.tileHeight);
};
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 .!?,\'":;_-+=/\\[]()#@%{}<>^*&~|→←↑↓○●$€¥'.split('');
Graphics.drawText = function(tileSet, text, x, y, ctx) {
var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 .!?,\'":;_-+=/\\[]()#@%{}<>^*&~|→←↑↓○●$€¥'.split('');

This comment has been minimized.

Show comment
Hide comment
@walsh9

walsh9 Oct 17, 2016

Owner

Don't create this list every time we call the function.

@walsh9

walsh9 Oct 17, 2016

Owner

Don't create this list every time we call the function.

var self = this;
if (x === 'center') {
x = Math.floor((ctx.canvas.width - text.length * (tileSet.tileWidth + 1)) / 2);
}
text.split('').forEach(function(char, i) {
let charIndex = chars.indexOf(char);
let charX = x + i * (tileSet.tileWidth + 1);
let charY = ['g', 'j', 'p', 'q', 'y'].indexOf(char) > -1 ? y + 2 : y;

This comment has been minimized.

Show comment
Hide comment
@walsh9

walsh9 Oct 17, 2016

Owner

Move these variables outside of the loop

@walsh9

walsh9 Oct 17, 2016

Owner

Move these variables outside of the loop

self.drawTile(tileSet, charIndex, 0, charX, charY, ctx);
});
let char, charIndex, charX, charY;
for(let i = 0; i < text.length; i++) {
char = text.charAt(i);
charIndex = chars.indexOf(char);
charX = x + i * (tileSet.tileWidth + 1);
charY = ['g', 'j', 'p', 'q', 'y'].indexOf(char) > -1 ? y + 2 : y;
this.drawTile(tileSet, charIndex, 0, charX, charY, ctx);
};
};
export default Graphics;
View
@@ -1,4 +1,13 @@
import { randomBetween } from './utils';
const Y_FROM_FLOOR = [128, 112, 96, 80, 68];
const GROUND = 0;
const COLUMN_ROOT = 1;
const COLUMN_MID = 2;
const COLUMN_TOP = 3;
const CLOUD_RIGHT = 8;
const CLOUD_LEFT = 7;
const PLATFORM = 9;
const HEIGHTS = [-100, 13, 29, 45, 61];
export default class Map {
constructor(tiles, mapstring) {
@@ -13,41 +22,36 @@ export default class Map {
_randomCloud() {
return {x: randomBetween(-6, 160), y: randomBetween(0, 120), speed: randomBetween(0.05, 0.2)};
}
update(time) {
_updateCloud(cloud, time) {
if (cloud.x > -40) {
cloud.x -= time.delta * cloud.speed;
} else {
cloud.x = 160;
cloud.y = randomBetween(0, 120);
cloud.speed = randomBetween(0.05, 0.2);
}
}
update(time, delta, ticks) {
this.x -= time.delta * 0.1;
this.clouds.forEach((cloud) => {
if (cloud.x > -40) {
cloud.x -= time.delta * cloud.speed;
} else {
cloud.x = 160;
cloud.y = this._randomCloud().y;
cloud.speed = this._randomCloud().speed;

This comment has been minimized.

Show comment
Hide comment
@walsh9

walsh9 Oct 17, 2016

Owner

Don't create new random clouds just to pull values off of them.

@walsh9

walsh9 Oct 17, 2016

Owner

Don't create new random clouds just to pull values off of them.

}
});
for(let i = 0; i < this.clouds.length; i++) {
this._updateCloud(this.clouds[i], time);
}
}
whatsHere(offset) {
let heights = [-100, 13, 29, 45, 61];
heightHere(offset) {
let index = Math.floor((-this.x + offset) / this.tiles.mapTiles.tileWidth);
let tile = this.stage[index];
return {height: heights[tile]};

This comment has been minimized.

Show comment
Hide comment
@walsh9

walsh9 Oct 17, 2016

Owner

Don't need an object here. Can just return a simple int.

@walsh9

walsh9 Oct 17, 2016

Owner

Don't need an object here. Can just return a simple int.

return HEIGHTS[tile];
}
render(graphics, ctx) {
const y = [128, 112, 96, 80, 68];
const GROUND = 0;
const COLUMN_ROOT = 1;
const COLUMN_MID = 2;
const COLUMN_TOP = 3;
const PLATFORM = 9;
const CLOUD_LEFT = 7;
const CLOUD_RIGHT = 8;

This comment has been minimized.

Show comment
Hide comment
@walsh9

walsh9 Oct 17, 2016

Owner

Don't declare all these consts on every render step.

@walsh9

walsh9 Oct 17, 2016

Owner

Don't declare all these consts on every render step.

let leftmostTile = Math.floor((-this.x) / this.tiles.mapTiles.tileWidth);
let rightmostTile = leftmostTile + 10;
this.clouds.forEach((cloud) => {
let cloud;
for(let i = 0; i < this.clouds.length; i++) {
cloud = this.clouds[i];
graphics.drawTile(this.tiles.mapTiles, CLOUD_LEFT, 0, cloud.x, cloud.y, ctx);
graphics.drawTile(this.tiles.mapTiles, CLOUD_RIGHT, 0, cloud.x + 16, cloud.y, ctx);
});
};
this.stage.forEach((t, index) => {
if (index < leftmostTile || index > rightmostTile) {
@@ -61,7 +65,7 @@ export default class Map {
case '2':
case '3':
case '4':
graphics.drawTile(this.tiles.mapTiles, PLATFORM, 0, x, y[t - 1], ctx);
graphics.drawTile(this.tiles.mapTiles, PLATFORM, 0, x, Y_FROM_FLOOR[t - 1], ctx);
break;
}
});
View
@@ -1,7 +1,9 @@
export default class Timer {
constructor(game, timeStep) {
this.runTime = 0;
this.ticks = 0;
this.time = {};
this.time.runTime = 0;
this.time.ticks = 0;
this.time.delta = 0;
this.started = false;
this.timeStep = timeStep;
this.game = game;
@@ -18,12 +20,12 @@ export default class Timer {
let frameTime = newTime - this.currentTime;

This comment has been minimized.

Show comment
Hide comment
@walsh9

walsh9 Oct 17, 2016

Owner

Try not to declare anything new on every animation step. Move those into the constructor.

@walsh9

walsh9 Oct 17, 2016

Owner

Try not to declare anything new on every animation step. Move those into the constructor.

this.currentTime = newTime;
while (frameTime > 0) {
var delta = Math.min(frameTime, this.timeStep);
frameTime -= delta;
this.runTime += delta;
this.game.update({delta, ticks: this.ticks, runTime: this.runTime});
this.time.delta = Math.min(frameTime, this.timeStep);
frameTime -= this.time.delta;
this.time.runTime += this.time.delta;
this.game.update(this.time);
}
this.ticks++;
this.time.ticks++;
this.game.render();
}
}

0 comments on commit 19cdc65

Please sign in to comment.