Skip to content

Commit

Permalink
Photoshop Map Export #61 WIP
Browse files Browse the repository at this point in the history
  • Loading branch information
robwalch committed Mar 5, 2013
1 parent 720bd79 commit b020a73
Show file tree
Hide file tree
Showing 22 changed files with 525 additions and 98 deletions.
1 change: 1 addition & 0 deletions app/data/testmap3S/data.js

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

Binary file added app/data/testmap3S/elements/big_box.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/data/testmap3S/elements/floating_box.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/data/testmap3S/elements/floor.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/data/testmap3S/elements/full_area.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/data/testmap3S/elements/little_box.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/data/testmap3S/elements/little_test.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/data/testmap3S/elements/mixed_box.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/data/testmap3S/elements/pillar.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/data/testmap3S/elements/wall.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions app/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,7 @@
<script src="data/courtyard/data.js"></script>
<script src="data/testmap/data.js"></script>
<script src="data/testmap2/data.js"></script>
<script src="data/testmap3S/data.js"></script>
<script src="data/scenes/enter_the_ninja.js"></script>

<!-- Google Analytics -->
Expand Down
15 changes: 9 additions & 6 deletions app/scripts/models/MapElement.js
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,14 @@
var proto = MapElement.prototype;

proto.init = function() {
// TODO: get rid of drawX,Y - should all work the same way
if (this.regX) {
if (this.mZ) {
this.z = this.mZ;
this.y = this.y + this.z;
}
if (this.mDepth) {
this.depth = this.mDepth;
}
if (this.regX || this.regY) {
this.drawX = this.x - this.regX;
this.drawY = this.y - this.regY;
} else {
Expand All @@ -49,10 +55,7 @@
this.regX = 0;
this.regY = 0;
}
// TODO: just use z and depth in MapComponent/editor
this.z = this.mZ || this.z;
this.y = this.y + this.z;
this.depth = this.mDepth || this.depth;
this.drawY -= this.z;

if (this.children) {
for (var i=this.children.length; i-- > 0;) {
Expand Down
36 changes: 23 additions & 13 deletions app/scripts/models/World.js
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
};

proto.term = function() {
// TODO: call remove on all entities > bodies > shapes
// TODO: -> call remove on all entities > bodies > shapes
this.entities.length = 0;
this.elements.length = 0;
var space = this.space;
Expand Down Expand Up @@ -70,37 +70,40 @@
// TODO: remember / remove walls - AKA ViewPort Bounds
this.addWalls(0, 0, data.width, data.height);

// add entities / mapElements
// add mapElements, extract entities
var entities = data.entities = data.entities || [];
var layers = data.layers;
for (var i=0; i<layers.length; i++) {
var i, j;
for (i=0; i<layers.length; i++) {
var layer = layers[i];
layer.layerNum = i;

var elements = layer.elements || [];
var entities = layer.entities = layer.entities || [];
var shapes = layer.shapes || [];

var j, mapElement;
for (j=elements.length; j-- > 0;) {
if (elements[j].mapType === 'entity') {
entities.push(elements.splice(j, 1)[0]);
} else {
mapElement = this.initMapElement(elements[j]);
var mapElement = this.initMapElement(elements[j]);
this.addMapElementBody(mapElement);
mapElement.layerNum = i;
mapElement.visible = !!mapElement.image || !!mapElement.children;
// ew!
elements[j] = mapElement;
}
}
for (j=entities.length; j-- > 0;) {
mapElement = this.add(this.initMapEntity(entities[j]));
mapElement.layerNum = i;
}
layer.elements = elements;
layer.shapes = shapes;
}

// add entities
var entity;
for (i=entities.length; j-- > 0;) {
entity = entities[j];
console.log('Map Entity', entity);
this.add(this.initMapEntity(entity));
entity.layerNum = 0;
}
this.map = data;
};

Expand Down Expand Up @@ -148,7 +151,8 @@
verts[i] = -verts[i];
}
try {
wall = this.addPolygons(v(x, y), verts, mapElement.body, v(shape.x-mapElement.regX, mapElement.regY-shape.y));
// WALL - SHAPE IS BOTTOM OF OBJECT (COLLISION BASE) - DEPTH IS HOW TALL THE WALL IS
wall = this.addConvexHull(v(x, y), verts, mapElement.body, v(shape.x-mapElement.regX, mapElement.regY-shape.y));
wall.depth = mapElement.depth;
wall.collision_type = ec.Collisions.MAP;
console.log('Wall Polygon verts "'+mapElement.name+'" ['+mapElement.x+','+mapElement.y+']['+mapElement.regY+','+mapElement.regY+'] ['+shape.x+','+shape.y+']'+ verts);
Expand Down Expand Up @@ -181,7 +185,8 @@
verts[i] = -verts[i];
}
try {
floorShape = this.addPolygons(v(x, y+mapElement.depth), verts, mapElement.body, v(shape.x-mapElement.regX, mapElement.regY-shape.y));
// FLOOR - SHAPE IS TOP OF OBJECT SO WE ADD DEPTH - DEPTH IS HOW THICK/DEEP THE FLOOR IS
floorShape = this.addConvexHull(v(x, y+mapElement.depth), verts, mapElement.body, v(shape.x-mapElement.regX, mapElement.regY-shape.y));
floorShape.depth = mapElement.depth;
floorShape.collision_type = ec.Collisions.MAP;
console.log('Floor Polygon verts "'+mapElement.name+'" ['+mapElement.x+','+mapElement.y+'] '+ verts);
Expand Down Expand Up @@ -247,6 +252,11 @@
return shape;
};

proto.addConvexHull = function(v1, verts, body, offset) {
cp.convexHull(verts, null, 2);
return this.addPolygons(v1, verts, body, offset);
};

proto.addLineSegment = function(v1, v2) {
var shape = this.space.addShape(new cp.SegmentShape(this.space.staticBody, v1, v2, 0));
shape.setElasticity(0);
Expand Down
2 changes: 1 addition & 1 deletion app/scripts/views/Canvas2dEntityView.js
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@
var fieldHeight = 48;
entity.label = entity.label || ec.Entity.getLabel(context, fieldHeight);
entity.label.setPos(x-16, y-((o&&o.regY+fieldHeight)||0));
var info = ''+ entity.layerNum +': '+ entity.layerName;
var info = ''+ entity.layerNum +': '+ entity.layerName +' z: '+ entity.z.toFixed(1);
if (entity.mapCollision.length) {
info += '\r' + ec.objectToProps(entity.mapCollision, 'name').join(',');
}
Expand Down
164 changes: 86 additions & 78 deletions app/scripts/views/Canvas2dWorldView.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,88 +26,96 @@
}
};

var proto = Canvas2dWorldView.prototype;

proto.loadMap = function() {
this.mapRenderer.loadLayers(this.world.map);
};

proto.updateViewport = function(camera) {
var viewport = this.viewport;
viewport.l = camera.x;
viewport.t = camera.y;
viewport.r = viewport.l + camera.width/camera.scaleX;
viewport.b = viewport.t + camera.height/camera.scaleY;
return viewport;
};

proto.draw = function(context, delta) {
//console.log('world 2d draw');
context.setTransform(1, 0, 0, 1, 0, 0);
context.fillStyle = '#888888';
context.globalAlpha = 1;
context.fillRect(0, 0, this.camera.width, this.camera.height);

context.save();

// translate by default to screen coordinates
//context.scale(this.camera.scaleX, this.camera.scaleY);
//context.translate(-this.camera.x, -this.camera.y);
context.setTransform(this.camera.scaleX, 0, 0, this.camera.scaleY, -this.camera.x*this.camera.scaleX, -this.camera.y*this.camera.scaleY);

// loop through layers and create a 2d array of entitiesInLayers
var entities = this.world.entities.slice();
var layers = this.mapRenderer.getLayers();
var i, j, len;
var entitiesInLayers = [];
// entities that do not have any map collisions
for (i=layers.length; i-- > 0;) {
var inLayer = this.mapRenderer.getItemsInLayer(layers[i], entities, entitiesInLayers[i]);
//sort Entities in each layer
inLayer.sort(sortEntities);
entitiesInLayers[i] = inLayer;
}
// test
if (entities.length) {
console.error(entities.length + ' elements did not get placed in a layer');
//entitiesInLayers[layers.length-1] = entitiesInLayers[layers.length-1].concat(entities);
}

var viewport = this.updateViewport(this.camera);
for (i = 0, len = layers.length; i < len; i++) {
this.mapRenderer.drawLayer(layers[i], context, viewport, delta);

var layerEntities = entitiesInLayers[i];
for (j=0; j<layerEntities.length; j++) {
this.entityRenderer.drawShadow(context, layerEntities[j], viewport, delta);
var errors = {};

Canvas2dWorldView.prototype = {
loadMap: function() {
this.mapRenderer.loadLayers(this.world.map);
},

updateViewport: function(camera) {
var viewport = this.viewport;
viewport.l = camera.x;
viewport.t = camera.y;
viewport.r = viewport.l + camera.width/camera.scaleX;
viewport.b = viewport.t + camera.height/camera.scaleY;
return viewport;
},

draw: function(context, delta) {
//console.log('world 2d draw');
context.setTransform(1, 0, 0, 1, 0, 0);
context.fillStyle = '#888888';
context.globalAlpha = 1;
context.fillRect(0, 0, this.camera.width, this.camera.height);

context.save();

// translate by default to screen coordinates
//context.scale(this.camera.scaleX, this.camera.scaleY);
//context.translate(-this.camera.x, -this.camera.y);
context.setTransform(this.camera.scaleX, 0, 0, this.camera.scaleY, -this.camera.x*this.camera.scaleX, -this.camera.y*this.camera.scaleY);

// loop through layers and create a 2d array of entitiesInLayers
var entities = this.world.entities.slice();
var layers = this.mapRenderer.getLayers();
var i, j, len;
var entitiesInLayers = [];
// entities that do not have any map collisions
for (i=layers.length; i-- > 0;) {
var inLayer = this.mapRenderer.getItemsInLayer(layers[i], entities, entitiesInLayers[i]);
//sort Entities in each layer
inLayer.sort(sortEntities);
entitiesInLayers[i] = inLayer;
}
for (j=0; j<layerEntities.length; j++) {
this.entityRenderer.drawEntity(context, layerEntities[j], viewport, delta);
// test
if (entities.length) {
var msg = entities.length + ' elements did not get placed in a layer';
if (!errors[msg]) {
console.error(msg);
errors[msg] = 1;
} else {
errors[msg]++;
}
//entitiesInLayers[layers.length-1] = entitiesInLayers[layers.length-1].concat(entities);
}
}

context.restore();
};

proto.lookAt = function(x, y) {
this.camera.lookAt(x, y);
};

proto.resize = function(width, height, ratio) {
this.camera.width = width * ratio;
this.camera.height = height * ratio;
this.camera.pixelRatio = ratio;
this.zoom(this.camera.zoom);
};
var viewport = this.updateViewport(this.camera);
for (i = 0, len = layers.length; i < len; i++) {
this.mapRenderer.drawLayer(layers[i], context, viewport, delta);

var layerEntities = entitiesInLayers[i];
for (j=0; j<layerEntities.length; j++) {
this.entityRenderer.drawShadow(context, layerEntities[j], viewport, delta);
}
for (j=0; j<layerEntities.length; j++) {
this.entityRenderer.drawEntity(context, layerEntities[j], viewport, delta);
}
}

proto.zoom = function(amount) {
// TODO: use device screen height for native pixel scale
var verticalPixels = (ec.height <= 640) ? 640 : 720;
this.camera.zoom = amount;
amount = amount * ec.height / verticalPixels;
this.camera.scaleX = this.camera.pixelRatio * amount;
this.camera.scaleY = this.camera.pixelRatio * amount;
console.log('zoom', this.camera.zoom, 'factor', amount, 'x,y:', this.camera.scaleX, this.camera.scaleY, 'w,h:', this.camera.width, this.camera.height, 'px:', this.camera.pixelRatio);
context.restore();
},

lookAt: function(x, y) {
this.camera.lookAt(x, y);
},

resize: function(width, height, ratio) {
this.camera.width = width * ratio;
this.camera.height = height * ratio;
this.camera.pixelRatio = ratio;
this.zoom(this.camera.zoom);
},

zoom: function(amount) {
// TODO: use device screen height for native pixel scale
var verticalPixels = (ec.height <= 640) ? 640 : 720;
this.camera.zoom = amount;
amount = amount * ec.height / verticalPixels;
this.camera.scaleX = this.camera.pixelRatio * amount;
this.camera.scaleY = this.camera.pixelRatio * amount;
console.log('zoom', this.camera.zoom, 'factor', amount, 'x,y:', this.camera.scaleX, this.camera.scaleY, 'w,h:', this.camera.width, this.camera.height, 'px:', this.camera.pixelRatio);
}
};

var sortEntities = function(a, b) {
Expand Down
Loading

0 comments on commit b020a73

Please sign in to comment.