Permalink
Browse files

All images drawing based on x,y being center-point

  • Loading branch information...
1 parent 01d884c commit 24df41e8ab360b57c4482592c87aeed1af89ac96 @dethe committed Jul 12, 2012
Showing with 40 additions and 25 deletions.
  1. +27 −16 public/js/game.js
  2. +13 −9 public/js/world.js
View
@@ -471,16 +471,16 @@ Monster.prototype.move = function(dx, dy){
}
};
Monster.prototype.faceEast = function(){
- this.direction = 3;
+ this.direction = EAST;
};
Monster.prototype.faceWest = function(){
- this.direction = 1;
+ this.direction = WEST;
};
Monster.prototype.faceNorth = function(){
- this.direction = 0;
+ this.direction = NORTH;
};
Monster.prototype.faceSouth = function(){
- this.direction = 2;
+ this.direction = SOUTH;
};
Monster.prototype.walk = function(){
var dx, dy;
@@ -523,14 +523,18 @@ Monster.prototype.useAI = function(){
Monster.prototype.draw = function(ctx){
// drawImage(image, sourceX, sourceY, sourceW, sourceH, destX, destY, destW, destH);
- ctx.drawImage(this.sprite, this.animate_idx * this.w, this.direction * this.h, this.w, this.h, this.x, this.y, this.w, this.h);
+ var x = this.x - this.w/2,
+ y = this.y - this.h/2,
+ w = this.w,
+ h = this.h,
+ sx = this.animate_idx * this.w,
+ sy = this.direction * this.h;
+ ctx.drawImage(this.sprite, sx, sy, w, h, x, y, w, h);
if (DEBUG){
var radius = 24;
- var mc = this.centre();
- var cc = {x: 0, y: 0};
ctx.beginPath();
ctx.strokeStyle = 'green';
- ctx.arc(this.x + this.w / 2, this.y + this.h / 2, radius, 0, Math.PI*2,true)
+ ctx.arc(this.x, this.y, radius, 0, Math.PI*2,true)
ctx.stroke();
}
};
@@ -568,10 +572,12 @@ var monsters = [
function NPC(name, x, y, direction, speed, path, clothing, talk, talkObj){
this.animation = 'walk';
- this.position = {x: x, y: y};
- this.size = {w: 64, h: 64};
+ this.x = x;
+ this.y = y;
+ this.w = 64;
+ this.h = 64;
this.spriteOffset = {x: 0, y: 128};
- this.direction = direction; // 0 = up, 1 = left, 2 = down, 3 = right
+ this.direction = direction;
this.name = name;
this.path = path;
this.path_progress = 0;
@@ -588,15 +594,20 @@ function NPC(name, x, y, direction, speed, path, clothing, talk, talkObj){
NPC.prototype.loadClothes = loadClothes;
NPC.prototype.draw = function(ctx){
- //console.log(this.walk_character)
- ctx.drawImage(this[this.animation + '_' + 'character'], this.spriteOffset.x, this.spriteOffset.y, this.w, this.h, this.x, this.y, this.w, this.h);
+ var sx = this.spriteOffset.x,
+ sy = this.spriteOffset.y,
+ x = this.x - this.w/2,
+ y = this.y - this.h/2,
+ w = this.w,
+ h = this.h;
+ ctx.drawImage(this[this.animation + '_' + 'character'], sx, sy, w, h, x, y, w, h);
for(i=0; i < this.clothes.length; i++){
- ctx.drawImage(this[this.animation + '_' + this.clothes[i]], this.spriteOffset.x, this.spriteOffset.y, this.w, this.h, this.x, this.y, this.w, this.h);
+ ctx.drawImage(this[this.animation + '_' + this.clothes[i]], sx, sy, w, h, x, y, w, h);
}
ctx.fillStyle = '#000';
ctx.font = '6pt "press start 2p"';
ctx.textAlign = 'center'
- ctx.fillText(this.name, this.x + 32, this.y + 10);
+ ctx.fillText(this.name, x + 32, y + 10);
};
NPC.prototype.faceEast = function(){
@@ -904,7 +915,7 @@ function drawGame(){
character.draw(ctx);
world.drawtop(ctx);
ctx.restore();
- drawUI(ctx);
+ //drawUI(ctx);
gameLoop = requestAnimationFrame(drawGame);
}
View
@@ -1,9 +1,13 @@
+var CHUNK_SIZE = 640; // 32 * 20
+
function World(){
function WorldChunk(name, x, y){
this.name = name;
this.x = x;
this.y = y;
+ this.w = CHUNK_SIZE;
+ this.h = CHUNK_SIZE;
this.init();
}
@@ -29,10 +33,10 @@ function World(){
var top = [];
- var NORTH = 0,
- WEST = 1,
- SOUTH = 2,
- EAST = 3;
+ var NORTH = 0,
+ WEST = 1,
+ SOUTH = 2,
+ EAST = 3;
var offsets = {
AA: { x: 0, y: 0 },
@@ -508,19 +512,19 @@ function World(){
this.sy = offset.y;
this.w = 32;
this.h = 32;
- this.x = (tx - chunk.x) * 32;
- this.y = (ty - chunk.y) * 32;
+ this.x = tx * this.w - chunk.x;
+ this.y = ty * this.h - chunk.y;
}
Tile.prototype.draw = function(ctx){
- ctx.drawImage(this.g, this.sx, this.sy, this.w, this.h, this.x, this.y, this.w, this.h);
+ ctx.drawImage(this.g, this.sx, this.sy, this.w, this.h, this.x-this.w/2, this.y-this.h/2, this.w, this.h);
};
Tile.prototype.debug = function(){
if (DEBUG){
ctx.strokeStyle = 'red';
- ctx.strokeRect(this.x, this.y, this.w, this.h);
+ ctx.strokeRect(this.x-this.w/2, this.y-this.h/2, this.w, this.h);
}
};
@@ -543,7 +547,7 @@ function World(){
function drawworldtop(ctx){
for(var z = 0; z < top.length; z++){
var tile = world[top[z][0]][top[z][1]][top[z][2]];
- ctx.drawImage(tile.g, tile.sx, tile.sy, tile.w, tile.h, tile.x, tile.y, 32, 32);
+ ctx.drawImage(tile.g, tile.sx, tile.sy, tile.w, tile.h, tile.x-tile.w/2, tile.y-tile.h/2, tile.w, tile.h);
}
}
return {

0 comments on commit 24df41e

Please sign in to comment.