Skip to content

Commit

Permalink
alter grid to better match mockup, fix some broken code
Browse files Browse the repository at this point in the history
  • Loading branch information
calebj0seph committed May 22, 2012
1 parent 05f664c commit 2a7c17a
Show file tree
Hide file tree
Showing 6 changed files with 184 additions and 185 deletions.
36 changes: 18 additions & 18 deletions combat/Arena.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,47 +15,47 @@ Arena.prototype.init = function() {
this.arenaRenderer = new CanvasRenderer($("#arena")[0], 17);
this.tilesRenderer.resizeToWindow();
this.arenaRenderer.resizeToWindow();
this.testCreature = new Creature(this.tileMap.getTileAtIndex(23), this.tilesRenderer);

this.testCreature = new Creature(this.tileMap.getTileAtIndex2D(new Vector2D(10, 2)), this.tilesRenderer);

// TODO use callback to do a loading screen
this.arenaRenderer.fetchTexture("../locations/forest/bg.jpg", function() {
_this.drawBackground();
_this.drawBackground();
});

// resize events
$(window).resize(function () {
clearTimeout(_this.windowResizeTimeout);
_this.windowResizeTimeout = setTimeout(function() {
_this.onResize();
}, 100);
});

// Mouse events
$(window).on("click", function(e) {
_this.mouse = new Vector2D(e.offsetX, e.offsetY);
_this.mouse = _this.mouse.toUnitSpace(_this.tilesRenderer);
console.log(_this.mouse);
if (_this.tileMap.activeTile != null) {
if (_this.selectedCreature == null) {
_this.selectedCreature = _this.tileMap.activeTile.creature;
} else {
_this.selectedCreature.setAtTile(_this.tileMap.activeTile);
}
if (_this.selectedCreature == null) {
_this.selectedCreature = _this.tileMap.activeTile.creature;
} else {
_this.selectedCreature.setAtTile(_this.tileMap.activeTile);
}
}
})

$(window).on("mousemove", function(e){
_this.mouse = new Vector2D(e.pageX - $(_this.tilesRenderer.canvas).offset().left,
e.pageY - $(_this.tilesRenderer.canvas).offset().top);
_this.mouse = new Vector2D(e.pageX - $(_this.tilesRenderer.canvas).offset().left,
e.pageY - $(_this.tilesRenderer.canvas).offset().top);
_this.mouse = _this.mouse.toUnitSpace(_this.tilesRenderer);
_this.tileMap.onMouseMove(_this.tilesRenderer, _this.mouse);
});

window.requestAnimFrame(function () {
_this.drawAll(_this.drawTiles, _this.tilesRenderer.canvas);
}, _this.tilesRenderer.canvas);

return true;
}

Expand All @@ -68,7 +68,7 @@ Arena.prototype.onResize = function() {

Arena.prototype.drawAll = function(f, element) {
var _this = this;

f.call(this);
window.requestAnimFrame(function () {
_this.drawAll(f);
Expand All @@ -89,5 +89,5 @@ Arena.prototype.drawTiles = function() {
}

Arena.prototype.draw = function() {

}
4 changes: 2 additions & 2 deletions combat/CanvasRenderer.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ CanvasRenderer.prototype.drawLine = function(vertices) {

var v = vertices[0].toScreenSpace(this);
this.context.moveTo(v.x, v.y);

for (var i = 1; i < vertices.length; i++) {
v = vertices[i].toScreenSpace(this);
this.context.lineTo(v.x, v.y);
Expand Down Expand Up @@ -80,7 +80,7 @@ CanvasRenderer.prototype.resizeCanvas = function(size, isWidth) {
}
this.unitsPerColumn = this.unitsPerRow / this.gameWidth * this.gameHeight;
this.pixelsPerUnit = this.gameWidth / this.unitsPerRow;

$(this.canvas).parent().css({
"width": (this.gameWidth + 64) + "px",
"height": (this.gameHeight + 64) + "px",
Expand Down
144 changes: 71 additions & 73 deletions combat/Creature.js
Original file line number Diff line number Diff line change
@@ -1,92 +1,90 @@
function Creature(centerTile, renderer) {
this.name = "Magma Spwan";
// collision map:
// 0 does not collide on this tile
// 1 collides on this tile
// 2 blocks tile for creatures, but does not collide with terrain (flying)
this.collisionMap = [
[1,1,1]
];

this.name = "Magma Spwan";
// collision map:
// 0 does not collide on this tile
// 1 collides on this tile
// 2 blocks tile for creatures, but does not collide with terrain (flying)
this.collisionMap = [
[0,1,1],
[1,1,1]
];

// TODO move into Sprite class
this.position = Vector2D(0,0);
this.size = new Vector2D(3,2.3); //TODO set size relative to tileSize
this.texturePosition = new Vector2D(0,0);
this.textureSize = new Vector2D(275, 211);
this.footOffset = new Vector2D(0.8, 0); //TODO set as pixel and convert
// this.footPosition.toUnitSpace(renderer);

this.image = "../bestiary/Magma Spawn/cardboard.png";
renderer.fetchTexture("../bestiary/Magma Spawn/cardboard.png", this.onReady);

this.setAtTile(centerTile); //TODO add a check if is free
// TODO move into Sprite class
this.position = Vector2D(0,0);
this.size = new Vector2D(3,2.3); //TODO set size relative to tileSize
this.texturePosition = new Vector2D(0,0);
this.textureSize = new Vector2D(275, 211);
this.footOffset = new Vector2D(1, 1.7); //TODO set as pixel and convert
// this.footPosition.toUnitSpace(renderer);

this.image = "../bestiary/Magma Spawn/cardboard.png";
renderer.fetchTexture("../bestiary/Magma Spawn/cardboard.png", this.onReady);

this.setAtTile(centerTile); //TODO add a check if is free
}
// TODO extend from sprite
Creature.prototype = new Drawable();

Creature.prototype.draw = function(renderer) {
renderer.bindTexture("../bestiary/Magma Spawn/cardboard.png");
renderer.drawImage(this.position, this.size, this.texturePosition, this.textureSize);
renderer.bindTexture("../bestiary/Magma Spawn/cardboard.png");
renderer.drawImage(this.position, this.size, this.texturePosition, this.textureSize);
}

// call when all textures are loaded and the Creature is ready to be displayed
Creature.prototype.onReady = function() {
if (this.onReadyCallback) {
this.onReadyCallback();
}
if (this.onReadyCallback) {
this.onReadyCallback();
}
}

//TODO shift offset rows
Creature.prototype.setAtTile = function(tile) {
var tileMap = tile.tileMap;
//TODO use a footPosition Vector2D
this.position = tileMap.getTilePosition(tile);
this.position = this.position.substract(this.footOffset);
// clear old surrounding collision tiles
if (this.centerTile) {
for (var y=0; y < this.collisionMap.length; ++y) {
for (var x=0; x < this.collisionMap[y].length; ++x) {
if (this.collisionMap[y][x] > 0) {
var t = tileMap.getTileRelativeTo(this.centerTile, Math.floor(-(this.collisionMap[y].length/2)+x+1),
Math.floor(-(this.collisionMap.length/2)+y+1));
t.creature = null;
t.filled = false;
}
}
}
}
// occupy surrounding collision tiles
for (var y=0; y < this.collisionMap.length; ++y) {
for (var x=0; x < this.collisionMap[y].length; ++x) {
if (this.collisionMap[y][x] > 0) {
var t = tileMap.getTileRelativeTo(tile, Math.floor(-(this.collisionMap[y].length/2)+x+1),
Math.floor(-(this.collisionMap.length/2)+y+1));
t.creature = this;
t.filled = true;
}
}
}
this.centerTile = tile;
var tileMap = tile.tileMap;
//TODO use a footPosition Vector2D
this.position = tileMap.getTilePosition(tile);
this.position = this.position.substract(this.footOffset);

// clear old surrounding collision tiles
if (this.centerTile) {
for (var y=0; y < this.collisionMap.length; ++y) {
for (var x=0; x < this.collisionMap[y].length; ++x) {
if (this.collisionMap[y][x] > 0) {
var t = tileMap.getTileRelativeTo(this.centerTile, Math.floor(-(this.collisionMap[y].length/2)+x+1),
Math.floor(-(this.collisionMap.length/2)+y+1));
t.creature = null;
t.filled = false;
}
}
}
}

// occupy surrounding collision tiles
for (var y=0; y < this.collisionMap.length; ++y) {
for (var x=0; x < this.collisionMap[y].length; ++x) {
if (this.collisionMap[y][x] > 0) {
var t = tileMap.getTileRelativeTo(tile, Math.floor(-(this.collisionMap[y].length/2)+x+1),
Math.floor(-(this.collisionMap.length/2)+y+1));
t.creature = this;
t.filled = true;
}
}
}
this.centerTile = tile;
}

Creature.prototype.setTileStyle = function(filled, fillColor, color) {
//TODO write foreachTile funciton to avoid the same for loop over and over again
var tileMap = this.centerTile.tileMap;
if (this.centerTile) {
for (var y=0; y < this.collisionMap.length; ++y) {
for (var x=0; x < this.collisionMap[y].length; ++x) {
if (this.collisionMap[y][x] > 0) {
var t = tileMap.getTileRelativeTo(this.centerTile, Math.floor(-(this.collisionMap[y].length/2)+x+1),
Math.floor(-(this.collisionMap.length/2)+y+1));
filled != null ? t.filled = filled : 0;
fillColor != null ? t.fillColor = fillColor : 0;
color != null ? t.color = color : 0;
}
}
}
}
//TODO write foreachTile funciton to avoid the same for loop over and over again
var tileMap = this.centerTile.tileMap;
if (this.centerTile) {
for (var y=0; y < this.collisionMap.length; ++y) {
for (var x=0; x < this.collisionMap[y].length; ++x) {
if (this.collisionMap[y][x] > 0) {
var t = tileMap.getTileRelativeTo(this.centerTile, Math.floor(-(this.collisionMap[y].length/2)+x+1),
Math.floor(-(this.collisionMap.length/2)+y+1));
filled != null ? t.filled = filled : 0;
fillColor != null ? t.fillColor = fillColor : 0;
color != null ? t.color = color : 0;
}
}
}
}
}
2 changes: 1 addition & 1 deletion combat/Renderer.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ function Renderer(unitsPerRow) {
this.gameWidth = 16;
this.gameHeight = 9;
this.unitsPerRow = unitsPerRow || 20;
this.unitsPerColumn = this.unitsPerRow / this.gameWidth * this.gameHeight;
this.unitsPerColumn = this.unitsPerRow / this.aspectRatio;
this.pixelsPerUnit = this.gameWidth / this.unitsPerRow;
}

Expand Down
32 changes: 16 additions & 16 deletions combat/Tile.js
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
function Tile(shape, color) {
this.shape = shape;
this.color = color || "#739141";
this.fillColor = "rgba(250, 145, 65, 0.2)";
this.shape = shape;
this.color = color || "#739141";
this.fillColor = "rgba(250, 145, 65, 0.2)";

this.creature = null;
this.trap = null;
this.terrain = 1; // TODO create Enum 0:default 1:walkable 2:blocked.
this.terrainType = 0; // Elemental type, water, lava, aso
this.lineWidth = 0.04;
this.creature = null;
this.trap = null;
this.terrain = 1; // TODO create Enum 0:default 1:walkable 2:blocked.
this.terrainType = 0; // Elemental type, water, lava, aso
this.lineWidth = 0.04;
}

Tile.prototype = new Drawable();

Tile.prototype.draw = function(renderer) {
if (this.filled) {
renderer.setColor(this.fillColor);
renderer.setLineWidth(this.lineWidth);
renderer.drawPolygon(this.shape);
}
renderer.setColor(this.color);
renderer.setLineWidth(this.lineWidth);
renderer.drawLine(this.shape);
if (this.filled) {
renderer.setColor(this.fillColor);
renderer.setLineWidth(this.lineWidth);
renderer.drawPolygon(this.shape);
}
renderer.setColor(this.color);
renderer.setLineWidth(this.lineWidth);
renderer.drawLine(this.shape);
}

// TODO apply effects like water, lava, traps to creature on tile
Expand Down

0 comments on commit 2a7c17a

Please sign in to comment.