Skip to content
Permalink
Browse files
Reduce object allocation / garbage creation
  • Loading branch information
walsh9 committed Oct 7, 2016
1 parent e10f7d7 commit 19cdc6562f6feb9f8b4e338995dbace3a0203a51
Show file tree
Hide file tree
Showing 6 changed files with 109 additions and 91 deletions.

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Large diffs are not rendered by default.

@@ -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';
@@ -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.

Copy link
@walsh9

walsh9 Oct 17, 2016

Author 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.

Copy link
@walsh9

walsh9 Oct 17, 2016

Author 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;
@@ -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.

Copy link
@walsh9

walsh9 Oct 17, 2016

Author 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.

Copy link
@walsh9

walsh9 Oct 17, 2016

Author 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.

Copy link
@walsh9

walsh9 Oct 17, 2016

Author 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;
}
});
@@ -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.

Copy link
@walsh9

walsh9 Oct 17, 2016

Author 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.