Skip to content

Commit

Permalink
New UI system
Browse files Browse the repository at this point in the history
  • Loading branch information
@prevostc
prevostc committed Jan 14, 2015
1 parent 048e229 commit 24afcd6
Show file tree
Hide file tree
Showing 4 changed files with 72 additions and 213 deletions.
24 changes: 12 additions & 12 deletions www/img/spritesheet.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,16 @@

"desert.png":
{
"frame": {"x":670,"y":670,"w":380,"h":331},
"rotated": true,
"frame": {"x":2,"y":2,"w":380,"h":331},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":590,"y":178,"w":380,"h":331},
"sourceSize": {"w":1000,"h":1000},
"pivot": {"x":0.5,"y":0.5}
},
"field.png":
{
"frame": {"x":2,"y":337,"w":381,"h":331},
"frame": {"x":384,"y":2,"w":381,"h":331},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":306,"y":15,"w":381,"h":331},
Expand All @@ -20,16 +20,16 @@
},
"forest.png":
{
"frame": {"x":2,"y":670,"w":381,"h":332},
"rotated": true,
"frame": {"x":2,"y":335,"w":381,"h":332},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":24,"y":505,"w":381,"h":332},
"sourceSize": {"w":1000,"h":1000},
"pivot": {"x":0.5,"y":0.5}
},
"hills.png":
{
"frame": {"x":386,"y":2,"w":382,"h":332},
"frame": {"x":385,"y":335,"w":382,"h":332},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":306,"y":668,"w":382,"h":332},
Expand All @@ -38,16 +38,16 @@
},
"mountain.png":
{
"frame": {"x":336,"y":670,"w":381,"h":332},
"rotated": true,
"frame": {"x":2,"y":669,"w":381,"h":332},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":24,"y":179,"w":381,"h":332},
"sourceSize": {"w":1000,"h":1000},
"pivot": {"x":0.5,"y":0.5}
},
"ocean.png":
{
"frame": {"x":2,"y":2,"w":382,"h":333},
"frame": {"x":385,"y":669,"w":382,"h":333},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":307,"y":341,"w":382,"h":333},
Expand All @@ -56,7 +56,7 @@
},
"pasture.png":
{
"frame": {"x":386,"y":336,"w":382,"h":332},
"frame": {"x":2,"y":1004,"w":382,"h":332},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":588,"y":504,"w":382,"h":332},
Expand All @@ -68,8 +68,8 @@
"version": "1.0",
"image": "spritesheet.png",
"format": "RGBA8888",
"size": {"w":1003,"h":1053},
"size": {"w":769,"h":1338},
"scale": "1",
"smartupdate": "$TexturePacker:SmartUpdate:b14b7e7dd417e8b7ee9f590f109873d9:27942f005438134559a60909ecb37b7c:729adc6043343cfda41c447ce8f464d6$"
"smartupdate": "$TexturePacker:SmartUpdate:07b966131cad23501c7c840f5e961c29:27942f005438134559a60909ecb37b7c:729adc6043343cfda41c447ce8f464d6$"
}
}
Binary file modified www/img/spritesheet.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 2 additions & 3 deletions www/js/catan/js/map.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
//noinspection JSHint
(function(Catan){
"use strict";

Expand Down Expand Up @@ -37,7 +36,7 @@
var hexagon, land = Catan.T.Empty, position = new Catan.Position(i, j);
if (this.isCoastPosition(i, j)) {
hexagon = new Catan.Hexagon.Coast(position, land);
} else {
} else {
hexagon = new Catan.Hexagon.Land(position, land);
}
this.board[i][j] = hexagon;
Expand Down Expand Up @@ -149,7 +148,7 @@
this.eachNeighbour(i, j, function (x, y) {
// remove neighbours lands from allowed lands
allowedLands = allowedLands.filter(function (element, index, array) {
return (map.get(x, y).land !== element);
return (map.get(x, y).land != element);
});
});
return allowedLands;
Expand Down
256 changes: 58 additions & 198 deletions www/js/catan/js/ui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,161 +7,6 @@
debug: false
};

Catan.UI.drawMapBasic = function (map, canvas) {
var ctx = canvas.getContext('2d');

// align numbers
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
var screenW = canvas.width;
var size = {
width: screenW / 9,
height: screenW / 9 + screenW / 90,
canvasWidth: canvas.width,
canvasHeight: canvas.height
};
var dist = 2;

// reset canvas
//noinspection SillyAssignmentJS
canvas.width = canvas.width;
ctx.clearRect(0, 0, canvas.width, canvas.height);

for (var i = 0; i < map.board.length; i++) {
for (var j = 0; j < map.board[i].length; j++) {
Catan.UI.drawHexagon(map.get(i, j), ctx, size, dist);
}
}
};

Catan.UI.drawHexagonBasic = function (hexagon, ctx, size, dist) {

var getColorFromLand = function (land) {
var color;
switch (land) {
case Catan.T.Hills:
color = "rgb(224, 129, 27)";
break;
case Catan.T.Pasture:
color = "rgb(43, 224, 27)";
break;
case Catan.T.Mountains:
color = "rgb(145, 145, 145)";
break;
case Catan.T.Fields:
color = "rgb(229, 255, 0)";
break;
case Catan.T.Forest:
color = "rgb(8, 150, 34)";
break;
case Catan.T.Desert:
color = "rgb(255, 255, 117)";
break;
case Catan.T.Empty:
color = "rgb(255, 255, 255)";
break;
default:
throw "Can't find color for non-coast with this land type: '" + land + "'";
}
return color;
};
var getColorFromCoast = function (land) {
var color;
switch (land) {
case Catan.T.Hills:
color = "rgb(224, 129, 27)";
break;
case Catan.T.Pasture:
color = "rgb(43, 224, 27)";
break;
case Catan.T.Mountains:
color = "rgb(145, 145, 145)";
break;
case Catan.T.Fields:
color = "rgb(229, 255, 0)";
break;
case Catan.T.Forest:
color = "rgb(8, 150, 34)";
break;
case Catan.T.Empty:
color = "rgb(255, 255, 255)";
break;
default:
throw "Can't find color for coast with this land type: '" + land + "'";
}
return color;
};

var width = size.width,
height = size.height,
mapWidth = width * 7,
mapHeight = height * 7 - (1 / 4 * height * 6),
cx = hexagon.position.column * (width + dist) - ((hexagon.position.line + 1) % 2) * (width + dist) / 2 + width / 2 + size.canvasWidth / 2 - mapWidth / 2,
cy = hexagon.position.line * (3 / 4 * height + dist) + height / 2 + size.canvasHeight / 2 - mapHeight / 2;

ctx.fillStyle = hexagon.isCoast() ? "rgb(69, 91, 217)" : getColorFromLand(hexagon.land);
ctx.beginPath();
ctx.moveTo(cx, cy - height / 2);
ctx.lineTo(cx + width / 2, cy - height / 4);
ctx.lineTo(cx + width / 2, cy + height / 4);
ctx.lineTo(cx, cy + height / 2);
ctx.lineTo(cx - width / 2, cy + height / 4);
ctx.lineTo(cx - width / 2, cy - height / 4);
ctx.lineTo(cx, cy - height / 2);
ctx.fill();

var fillCircle = function (cx, cy, r, c) {
ctx.lineWidth = 2;
ctx.fillStyle = c;
ctx.beginPath();
ctx.arc(cx, cy, r, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
};

if (hexagon.isHarbor()) {
fillCircle(cx, cy, 11, getColorFromCoast(hexagon.land));
ctx.stroke();
}

if (Catan.UI.debug) {
// draw coordinates
ctx.fillStyle = "rgb(0, 0, 0)";
ctx.font = "8pt Arial";
ctx.fillText("[" + hexagon.position.column + "," + hexagon.position.line + "]", cx - width / 4 + 1, cy - 5);
if (hexagon.number !== undefined) {
ctx.font = "12pt Arial";
ctx.fillText(hexagon.number + "|" + Catan.Tools.tdsc(hexagon.number), cx - width / 4, cy + 10);
}
} else {
// draw coordinates
if (hexagon.number !== undefined) {
//draw a circle
fillCircle(cx, cy, Math.min(width, height) / 3, "rgb(255, 255, 255)");

// write number
var deltaY = 0;
if (Catan.Tools.tdsc(hexagon.number) < 3) {
ctx.fillStyle = "rgb(0, 0, 0)";
ctx.font = "8pt Arial";
deltaY = 5;
} else if (Catan.Tools.tdsc(hexagon.number) < 5) {
ctx.fillStyle = "rgb(0, 0, 0)";
ctx.font = "12pt Arial";
deltaY = 6;
} else {
ctx.fillStyle = "rgb(245, 24, 24)";
ctx.font = "bold 12pt Arial";
deltaY = 6;
}
var txtMetrics = ctx.measureText(hexagon.number);
var txtWidth = txtMetrics.width;
ctx.fillText(hexagon.number, cx - txtWidth / 2, cy + deltaY);
ctx.stroke();
}
}
};

Catan.UI.init = function(canvasContainerSelector, width, height) {
var canvasContainer = document.querySelector(canvasContainerSelector);

Expand All @@ -182,8 +27,7 @@
};

Catan.UI.draw = function (renderer, map, width, height) {
renderer.view.width = width;
renderer.view.height = height;
renderer.resize(width, height);

var stage = new PIXI.Stage(0xFFFFFF);

Expand All @@ -193,57 +37,73 @@

var count = 0;

var tileWidth = 50,
tileHeight = 50;

// create an empty container
var alienContainer = new PIXI.DisplayObjectContainer();
alienContainer.position.x = width/2;
alienContainer.position.y = height/2;

stage.addChild(alienContainer);
onAssetsLoaded();

function onAssetsLoaded()
{

// create a texture from an image path
// add a bunch of aliens
for (var i = 0; i < 20; i++)
{
// create an alien using the frame name..
var alien = PIXI.Sprite.fromFrame(alienFrames[i % 4]);

alien.position.x = Math.random() * 800 - 400;
alien.position.y = Math.random() * 600 - 300;
alien.anchor.x = 0.5;
alien.anchor.y = 0.5;
aliens.push(alien);
alienContainer.addChild(alien);
var tileContainer = new PIXI.DisplayObjectContainer();
tileContainer.position.x = (width / 2) - ((7 * tileWidth) / 2);
tileContainer.position.y = (height / 2) - ((7 * tileHeight) / 2);
tileContainer.scale.x = 1;
tileContainer.scale.y = 1;
var tiles = [];

stage.addChild(tileContainer);

var getSpriteNameLand = function (land) {
var spriteName;
var items = ["ocean.png", "mountain.png"];
return items[Math.floor(Math.random()*items.length)];
switch (land) {
case Catan.T.Fields: spriteName = "field.png";break;
case Catan.T.Desert: spriteName = "desert.png";break;
case Catan.T.Forest: spriteName = "forest.png";break;
case Catan.T.Pasture: spriteName = "pasture.png";break;
case Catan.T.Hills: spriteName = "hills.png";break;
case Catan.T.Mountains: spriteName = "mountain.png";break;
case Catan.T.Ocean: spriteName = "ocean.png";break;
case Catan.T.Empty: spriteName = "ocean.png";break;
default:
throw "Can't find color for non-coast with this land type: '" + land + "'";
}
return spriteName;
};

// start animating
window.requestAnimFrame( animate );

var drawHexagonCallback = function(i, j){
var hexagon = map.get(i, j);
var tile = PIXI.Sprite.fromFrame(getSpriteNameLand(hexagon.land));

}
var cx = hexagon.position.column * tileWidth - ((hexagon.position.line + 1) % 2) * tileWidth / 2 + tileWidth / 2,
cy = hexagon.position.line * (3 / 4 * tileHeight) + tileHeight / 2;// + canvasHeight / 2 - mapHeight / 2

function animate() {

window.requestAnimFrame( animate );
tile.position.x = cx;
tile.position.y = cy;
tile.anchor.x = 0.5;
tile.anchor.y = 0.5;
tile.scale.x = 0.15;
tile.scale.y = 0.15;
tile.rotation = Math.PI/2;
tiles.push(tile);
tileContainer.addChild(tile);

// just for fun, lets rotate mr rabbit a little
for (var i = 0; i < 20; i++)
{
var alien = aliens[i];
alien.rotation += 0.1;
}
var text = new PIXI.Text("[" + cx + ';' + cy + ']', {font:"11px Arial", fill:"red"});
text.position.x = cx;
text.position.y = cy;
text.anchor.x = 0.5;
text.anchor.y = 0.5;
tileContainer.addChild(text);

count += 0.01;
alienContainer.scale.x = Math.sin(count);
alienContainer.scale.y = Math.sin(count);

alienContainer.rotation += 0.01
// render the stage
renderer.render(stage);
}
};

map.each(drawHexagonCallback);
map.eachCoast(drawHexagonCallback);

renderer.render(stage);
};



})(Catan, PIXI);

0 comments on commit 24afcd6

Please sign in to comment.