I use a black background. The map grid labels are also in black though. So I tried changing their colors to white with these:
Garden.grid_label = {color:White:Garden}
Garden.grid_label = {=color:White:Garden}
Garden.grid_label = {evalcolor:White:Garden}
Garden.grid_label = {eval:color:White:Garden}
Get error messages. Any other ideas welcome.
Quest doesn't like my second line:
Error running script: Error compiling expression '=color:White:Garden': SyntaxError: Unexpected token "="; expected one of "NOT", "-", <INTEGER>, <REAL>, <STRING_LITERAL>, "True", "False", <HEX_LITERAL>, <CHAR_LITERAL>, "null", <DATETIME>, <TIMESPAN>, "(", <IDENTIFIER>, "if", or "cast"Line: 1, Column: 1
Well, mine was a good guess, but actually, I'm not sure what you are trying to do...
(I'm rather new with Quest)
Does your first line work?
The first line does nothing, doesn't even print out "Garden". No error message though.
I'm trying to change the color of the map grid labels (like "Garden") to another color like white because you can't see them against a black background.
I just changed the background color under the game object --> Display --> Background. The map color becomes the same as the background color. I'm not sure if that is what you're asking...
There is probably a HTML class that sets it. It migjt even be called grid_label. If it is you could set the colour like this:
JS.setCss(".grid_label", "color:yellow")
I cannot check but that might point you (or others) in the right direction.
I tried the Pixie's code with no success. It looks like there might be a typo "." in front of "grid_label". So I also tried:
JS.setCss("grid_label", "color:yellow")
JS.setCss("grid_label", "color=yellow")
JS.setCss("grid_label", "yellow")
No luck though. Thanks for trying Lizerd and Pix.
I just ended up doing a workaround by changing the map background color so that you can read the grid labels:
JS.eval ("$('#gridPanel').css('background-color', 'Gray')")
The dot is because i eas guessing it was a class rather than an id. However classes can ne tricky for things that have not be displayed yet. If you can wait s couple of weeks i will have a proper look.
I'm just guessing here (actually, I think I read this somewhere, but can't find it...), but doesn't the map have something to do with on-the-fly SVG rendering (or something like that)?
There's barely any code in the CSS...
Is this where the magic lies? (only a guess)
gridApi.drawLabel = function(x, y, z, text) {
activateLayer(z);
var pointText = new PointText(gridPoint(x, y));
pointText.justification = "center";
pointText.fillColor = "black";
pointText.content = text;
allPaths.push(pointText);
};
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="res://local/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="res://local/jquery-ui.min.js"></script>
<script type="text/javascript" src="res://local/jquery.multi-open-accordion-1.5.3.js"></script>
<script type="text/javascript" src="res://local/playercore.js"></script>
<script type="text/javascript" src="res://local/desktopplayer.js"></script>
<script type="text/javascript" src="res://local/paper.js"></script>
<script type="text/paperscript" canvas="gridCanvas">
var scale, gridX, gridY, player,
playerVector, playerDestination,
offsetVector, offsetDestination,
allPaths = [],
customLayerPaths = [],
customLayerObjects = {},
customLayerSvg = {},
customLayerImages = {},
layers = [],
maxLayer = 7,
currentLayer = 0,
offset = new Point(0, 0),
symbols = {},
newShapePoints = [];
for (var i = -maxLayer; i <= maxLayer; i++) {
var layer = new Layer();
layers.push(project.activeLayer);
}
var customLayer = new Layer(),
customLayerOffset = new Point(0, 0);
customLayer.visible = false;
function activateLayer(index) {
showCustomLayer(false);
layers[getLayerIndex(index)].activate();
layers[getLayerIndex(index)].opacity = 1;
if (currentLayer != index) {
layers[getLayerIndex(currentLayer)].opacity = 0.2;
currentLayer = index;
}
}
function getLayerIndex(index) {
if (index < -maxLayer || index > maxLayer) {
alert("Layer out of bounds. Current layer range: -" + maxLayer + " to " + maxLayer);
}
// layers array represents z-indexes from -maxLayer to maxLayer
return index + maxLayer;
}
activateLayer(currentLayer);
gridApi.setScale = function(newScale) {
scale = newScale;
gridX = new Point(scale, 0);
gridY = new Point(0, scale);
};
gridApi.setZoom = function(zoom) {
paper.view.zoom = zoom;
};
gridApi.zoomIn = function(amount) {
paper.view.zoom = paper.view.zoom * (Math.pow(1.1, amount));
};
function onMouseDrag(event) {
updateOffset(event.delta);
}
function onMouseUp(event) {
var x = getGridSquareX(event.point);
var y = getGridSquareY(event.point);
ASLEvent("JS_GridSquareClick", x + ";" + y);
}
function updateOffset(delta) {
setOffset(getOffset() + delta);
var paths;
if (project.activeLayer == customLayer) {
paths = customLayerPaths;
}
else {
paths = allPaths;
}
for (var i = 0; i < paths.length; i++) {
paths[i].position += delta;
}
if (playerDestination && project.activeLayer != customLayer) {
playerDestination += delta;
}
}
function getOffset() {
if (project.activeLayer == customLayer) {
return customLayerOffset;
}
return offset;
}
function setOffset(value) {
if (project.activeLayer == customLayer) {
customLayerOffset = value;
}
else {
offset = value;
}
}
function onFrame(event) {
if (playerVector) {
var distance = player.position - playerDestination;
if (distance.length > playerVector.length) {
player.position += playerVector;
}
else {
player.position = playerDestination;
playerVector = null;
playerDestination = null;
var playerPositionAbsolute = player.position - offset;
offsetDestination = paper.view.center - playerPositionAbsolute;
offsetVector = (offsetDestination-offset) / 10;
}
}
if (offsetVector) {
var distance = offset - offsetDestination;
if (distance.length > offsetVector.length) {
updateOffset(offsetVector);
}
else {
updateOffset(offsetDestination-offset);
offsetVector = null;
offsetDestination = null;
}
}
}
gridApi.drawGrid = function(minX, minY, maxX, maxY, border) {
function gridLine(start, end) {
var path = new Path();
path.strokeColor = border;
path.add(start, end);
addPathToCurrentLayerList(path);
}
// draw the vertical lines
for (var x = minX; x <= maxX; x++) {
var start = gridPoint(x, minY);
var end = gridPoint(x, maxY);
gridLine(start, end);
}
// draw the horizontal lines
for (var y = minY; y <= maxY; y++) {
var start = gridPoint(minX, y);
var end = gridPoint(maxX, y);
gridLine(start, end);
}
};
function gridPoint(x, y) {
return (gridX * x) + (gridY * y) + getOffset();
}
function getGridSquareX(point) {
return Math.floor(((point - getOffset()) / gridX).x);
}
function getGridSquareY(point) {
return Math.floor(((point - getOffset()) / gridY).y);
}
function gridPointNudge(x, y, nudgeX, nudgeY) {
var result = gridPoint(x, y);
result.x += nudgeX;
result.y += nudgeY;
return result;
}
var firstBox = true;
gridApi.drawBox = function(x, y, z, width, height, border, borderWidth, fill, sides) {
activateLayer(z);
// if this is the very first room, centre the canvas by updating the offset
if (firstBox) {
var centrePoint = gridPoint(x + width / 2, y + height / 2);
var offsetX = paper.view.center.x - centrePoint.x;
var offsetY = paper.view.center.y - centrePoint.y;
updateOffset(new Point(offsetX, offsetY));
firstBox = false;
}
var path = null;
var points = [gridPoint(x, y), gridPoint(x + width, y), gridPoint(x + width, y + height), gridPoint(x, y + height)];
// sides is encoded with bits to represent NESW
var draw = [sides & 8, sides & 4, sides & 2, sides & 1];
for (var i = 0; i < 4; i++) {
var next = (i + 1) % 4;
if (draw[i]) {
if (path == null) {
path = new Path();
allPaths.push(path);
if (borderWidth > 0) {
path.strokeColor = border;
path.strokeWidth = borderWidth;
}
path.add(points[i]);
}
path.add(points[next]);
} else {
path = null;
}
}
var fillPath;
if (sides == 15) {
fillPath = path;
} else {
fillPath = new Path();
fillPath.add(points[0], points[1], points[2], points[3]);
allPaths.push(fillPath);
}
fillPath.fillColor = fill;
fillPath.closed = true;
};
gridApi.drawLine = function(x1, y1, x2, y2, border, borderWidth) {
var path = new Path;
path.strokeColor = border;
path.strokeWidth = borderWidth;
path.add(gridPoint(x1, y1));
path.add(gridPoint(x2, y2));
addPathToCurrentLayerList(path);
};
gridApi.drawArrow = function (id, x1, y1, x2, y2, border, borderWidth) {
clearExistingObject(id);
var linePath = new Path;
var start = gridPoint(x1, y1);
var end = gridPoint(x2, y2);
linePath.strokeColor = border;
linePath.strokeWidth = borderWidth;
linePath.add(start);
linePath.add(end);
addPathToCurrentLayerList(linePath);
var vector = end - start;
var arrowVector = vector.normalize(10);
var arrowheadPath = new Path([
end + arrowVector.rotate(150),
end,
end + arrowVector.rotate(-150)
]);
arrowheadPath.strokeColor = border;
arrowheadPath.strokeWidth = borderWidth;
addPathToCurrentLayerList(arrowheadPath);
customLayerObjects[id] = [linePath, arrowheadPath];
};
function addPathToCurrentLayerList(path) {
if (project.activeLayer == customLayer) {
customLayerPaths.push(path);
}
else {
allPaths.push(path);
}
}
gridApi.drawPlayer = function(x, y, z, radius, border, borderWidth, fill) {
activateLayer(z);
if (!player) {
player = new Path.Circle(gridPoint(x, y), radius);
player.strokeColor = border;
player.strokeWidth = borderWidth;
player.fillColor = fill;
player.fillColor = fill;
allPaths.push(player);
var playerPositionAbsolute = player.position - offset;
var offsetDestinationX = paper.view.center.x - playerPositionAbsolute.x;
var offsetDestinationY = paper.view.center.y - playerPositionAbsolute.y;
offsetDestination = new Point(offsetDestinationX, offsetDestinationY);
offsetVector = (offsetDestination - offset);
} else {
playerDestination = gridPoint(x, y);
playerVector = (playerDestination - player.position) / 10;
// move player to the end of the activeLayer so it gets drawn on top
project.activeLayer.addChild(player);
}
};
gridApi.drawLabel = function(x, y, z, text) {
activateLayer(z);
var pointText = new PointText(gridPoint(x, y));
pointText.justification = "center";
pointText.fillColor = "black";
pointText.content = text;
allPaths.push(pointText);
};
function showCustomLayer(visible) {
if (visible != customLayer.visible) {
customLayer.visible = visible;
for (var idx = 0; idx < layers.length; idx++) {
layers[idx].visible = !visible;
}
if (visible) {
customLayer.activate();
}
else {
layers[getLayerIndex(currentLayer)].activate();
}
}
}
gridApi.showCustomLayer = function(visible) {
showCustomLayer(visible);
};
gridApi.clearCustomLayer = function() {
customLayer.removeChildren();
};
gridApi.clearAllLayers = function () {
player = null;
$.each(layers, function(idx, layer) {
layer.removeChildren();
});
};
gridApi.setCentre = function(x, y) {
var centrePoint = gridPoint(x, y);
var offsetX = paper.view.center.x - centrePoint.x;
var offsetY = paper.view.center.y - centrePoint.y;
var curOffset = getOffset();
updateOffset(new Point(offsetX, offsetY));
};
gridApi.drawCustomLayerSquare = function(id, x, y, width, height, text, fill) {
var points = [];
points.push(gridPointNudge(x, y, 1, 1));
points.push(gridPointNudge(x + width, y, -1, 1));
points.push(gridPointNudge(x + width, y + height, -1, -1));
points.push(gridPointNudge(x, y + height, 1, -1));
var textPoint = gridPoint(x + width / 2, y + height / 2);
gridApi.drawCustomLayerObject(id, points, text, textPoint, fill, fill);
};
function clearExistingObject(id) {
var existing = customLayerObjects[id];
if (existing) {
for (var idx in existing) {
var path = existing[idx];
// TO DO: Should remove path from layer and layerlist array
path.visible = false;
}
}
}
gridApi.drawCustomLayerObject = function (id, points, text, textPoint, border, fill, opacity) {
clearExistingObject(id);
var paths = new Array();
path = new Path();
path.strokeColor = border;
$.each(points, function(index, value) {
path.add(value);
});
path.fillColor = fill;
path.closed = true;
if (typeof opacity != "undefined") {
path.opacity = opacity;
}
addPathToCurrentLayerList(path);
paths.push(path);
if (text) {
var pointText = new PointText(textPoint);
pointText.justification = "center";
pointText.fillColor = "black";
pointText.content = text;
if (typeof opacity != "undefined") {
pointText.opacity = opacity;
}
addPathToCurrentLayerList(pointText);
paths.push(pointText);
}
customLayerObjects[id] = paths;
};
gridApi.loadSvg = function (data, id) {
var svg = paper.project.importSVG(data);
if (svg) {
symbols[id] = new Symbol(svg);
}
};
gridApi.drawCustomLayerSvg = function (id, symbolId, x, y, width, height) {
if (symbolId in symbols) {
var existing = customLayerSvg[id];
var placedSymbol = existing ? existing : symbols[symbolId].place();
placedSymbol.scale(gridX.x * width / placedSymbol.bounds.width, gridY.y * height / placedSymbol.bounds.height);
placedSymbol.position = gridPoint(x, y) + placedSymbol.bounds.size / 2;
if (!existing) addPathToCurrentLayerList(placedSymbol);
customLayerSvg[id] = placedSymbol;
} else {
console.log("No symbol loaded with id '" + symbolId + "'");
}
};
gridApi.drawCustomLayerImage = function(id, url, x, y, width, height) {
var existing = customLayerImages[id];
var raster = existing ? existing : new Raster(url);
var resizeRaster = function() {
raster.scale(gridX.x * width / raster.bounds.width, gridY.y * height / raster.bounds.height);
raster.position = gridPoint(x, y) + raster.bounds.size / 2;
};
if (existing) {
resizeRaster();
} else {
raster.onLoad = resizeRaster;
addPathToCurrentLayerList(raster);
customLayerImages[id] = raster;
}
}
gridApi.addNewShapePoint = function (x, y) {
newShapePoints.push([x, y]);
};
gridApi.drawShape = function (id, border, fill, opacity) {
var points = [];
for (var idx in newShapePoints) {
var xy = newShapePoints[idx];
points.push(gridPoint(xy[0], xy[1]));
}
gridApi.drawCustomLayerObject(id, points, null, null, border, fill, opacity);
newShapePoints = [];
};
gridApi.onLoad();
</script>
<link rel="Stylesheet" type="text/css" href="res://local/jquery-ui.min.css" />
<link rel="Stylesheet" type="text/css" href="res://local/playercore.css" />
<link rel="Stylesheet" type="text/css" href="res://local/desktopplayer.css" />
<title></title>
</head>
<body>
<div id="gameBorder">
<div id="status" class="ui-widget-header">
<div id="controlButtons">
<button type="button" id="cmdExitFullScreen" style="display: none">Exit Full Screen</button>
<button type="button" id="cmdSave" style="display: none">Save</button>
</div>
<div id="location">
</div>
</div>
<div id="gamePanes" style="background:transparent;">
<div id="gamePanesRunning">
<h3 id="inventoryLabel"><span class="accordion-header-text">Inventory</span></h3>
<div id="inventoryAccordion">
<div id="inventoryWrapper" class="elementListWrapper">
<ol id="lstInventory" class="elementList">
</ol>
</div>
<div class="verbButtons">
<button id="cmdInventory1" type="button" onclick="paneButtonClick('#lstInventory',$(this));" style="display:none"></button>
<button id="cmdInventory2" type="button" onclick="paneButtonClick('#lstInventory',$(this));" style="display:none"></button>
<button id="cmdInventory3" type="button" onclick="paneButtonClick('#lstInventory',$(this));" style="display:none"></button>
<button id="cmdInventory4" type="button" onclick="paneButtonClick('#lstInventory',$(this));" style="display:none"></button>
<button id="cmdInventory5" type="button" onclick="paneButtonClick('#lstInventory',$(this));" style="display:none"></button>
<button id="cmdInventory6" type="button" onclick="paneButtonClick('#lstInventory',$(this));" style="display:none"></button>
<button id="cmdInventory7" type="button" onclick="paneButtonClick('#lstInventory',$(this));" style="display:none"></button>
<button id="cmdInventory8" type="button" onclick="paneButtonClick('#lstInventory',$(this));" style="display:none"></button>
<button id="cmdInventory9" type="button" onclick="paneButtonClick('#lstInventory',$(this));" style="display:none"></button>
</div>
</div>
<h3 id="statusVarsLabel"><span class="accordion-header-text">Status</span></h3>
<div id="statusVarsAccordion">
<div id="statusVars">
</div>
</div>
<h3 id="placesObjectsLabel"><span class="accordion-header-text">Places and Objects</span></h3>
<div id="placesObjectsAccordion">
<div id="placesObjectsWrapper" class="elementListWrapper">
<ol id="lstPlacesObjects" class="elementList">
</ol>
</div>
<div id="placesObjectsButtons" class="verbButtons">
<button id="cmdPlacesObjects1" type="button" onclick="paneButtonClick('#lstPlacesObjects',$(this));" style="display:none"></button>
<button id="cmdPlacesObjects2" type="button" onclick="paneButtonClick('#lstPlacesObjects',$(this));" style="display:none"></button>
<button id="cmdPlacesObjects3" type="button" onclick="paneButtonClick('#lstPlacesObjects',$(this));" style="display:none"></button>
<button id="cmdPlacesObjects4" type="button" onclick="paneButtonClick('#lstPlacesObjects',$(this));" style="display:none"></button>
<button id="cmdPlacesObjects5" type="button" onclick="paneButtonClick('#lstPlacesObjects',$(this));" style="display:none"></button>
<button id="cmdPlacesObjects6" type="button" onclick="paneButtonClick('#lstPlacesObjects',$(this));" style="display:none"></button>
<button id="cmdPlacesObjects7" type="button" onclick="paneButtonClick('#lstPlacesObjects',$(this));" style="display:none"></button>
<button id="cmdPlacesObjects8" type="button" onclick="paneButtonClick('#lstPlacesObjects',$(this));" style="display:none"></button>
<button id="cmdPlacesObjects9" type="button" onclick="paneButtonClick('#lstPlacesObjects',$(this));" style="display:none"></button>
</div>
</div>
<div id="commandPane" class="ui-helper-reset ui-widget ui-state-active" style="border-radius: 5px;text-align:center;display:none;padding:2px;min-height: 25px;margin-top:10px; border-top:1px solid rgb(121, 183, 231)">
<h3 id="commandPaneHeading"><span class="accordion-header-text">Commands</span></h3>
</div>
<div id="customStatusPane" class="ui-helper-reset ui-widget ui-state-active" style="border-radius: 5px;text-align:center;display:none;padding:2px;min-height: 25px;margin-top:10px; border-top:1px solid rgb(121, 183, 231)">
<h3><span class="accordion-header-text">Status</span></h3>
</div>
<h3 id="compassLabel"><span class="accordion-header-text">Compass</span></h3>
<div id="compassAccordion">
<table id="compassTable">
<tr>
<td>
<table>
<tr>
<td>
<button id="cmdCompassNW" class="compassbutton" type="button" title="go northwest"
onclick="compassClick(_compassDirs[0]);"></button>
</td>
<td>
<button id="cmdCompassN" class="compassbutton" type="button" title="go north"
onclick="compassClick(_compassDirs[1]);"></button>
</td>
<td>
<button id="cmdCompassNE" class="compassbutton" type="button" title="go northeast"
onclick="compassClick(_compassDirs[2]);"></button>
</td>
</tr>
<tr>
<td>
<button id="cmdCompassW" class="compassbutton" type="button" title="go west"
onclick="compassClick(_compassDirs[3]);"></button>
</td>
<td>
</td>
<td>
<button id="cmdCompassE" class="compassbutton" type="button" title="go east"
onclick="compassClick(_compassDirs[4]);"></button>
</td>
</tr>
<tr>
<td>
<button id="cmdCompassSW" class="compassbutton" type="button" title="go southwest"
onclick="compassClick(_compassDirs[5]);"></button>
</td>
<td>
<button id="cmdCompassS" class="compassbutton" type="button" title="go south"
onclick="compassClick(_compassDirs[6]);"></button>
</td>
<td>
<button id="cmdCompassSE" class="compassbutton" type="button" title="go southeast"
onclick="compassClick(_compassDirs[7]);"></button>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
<button id="cmdCompassU" class="compassbutton" type="button" title="go up"
onclick="compassClick(_compassDirs[8]);"></button>
</td>
<td>
<button id="cmdCompassIn" class="compassbutton" type="button" title="go in"
onclick="compassClick(_compassDirs[10]);">in</button>
</td>
</tr>
<tr>
<td>
<button id="cmdCompassD" class="compassbutton" type="button" title="go down"
onclick="compassClick(_compassDirs[9]);"></button>
</td>
<td>
<button id="cmdCompassOut" class="compassbutton" type="button" title="go out"
onclick="compassClick(_compassDirs[11]);">out</button>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
<div id="gamePanesFinished">
<h2>Game Over</h2>
<p>This game has finished.</p>
</div>
</div>
<div id="gamePanel"></div>
<div id="gridPanel">
<canvas id="gridCanvas" width="700" height="300" keepalive="true">
<p><b>The graphical map cannot be displayed</b></p>
<p>Your web browser does not support the graphical map. To see the map, please upgrade to Chrome, Safari, Firefox or Internet Explorer 9.</p>
</canvas>
</div>
<div id="gameContent">
<div id="gamePanelSpacer"></div>
<div id="divOutput">
<div id="outputData" style="display: none" data-divcount="0"></div>
<h1 id="gameTitle">
Loading...</h1>
</div>
<div id="txtCommandSpacer"></div>
<div id="txtCommandDiv">
<span id="txtCommandPrompt"></span>
<input type="text" x-webkit-speech id="txtCommand" onkeydown="return commandKey(event);" placeholder="Type here..."
autofocus />
<a id="endWaitLink" onclick="endWait();" class="cmdlink" style="display: none">Continue...</a>
</div>
</div>
</div>
<div id="dialog" title="Menu">
<p id="dialogCaption">
</p>
<select id="dialogOptions" size="3">
</select>
</div>
<div id="msgbox" title="Question">
<p id="msgboxCaption">
</p>
</div>
</body>
</html>
C:\Program Files (x86)\Quest 5\grid.js
I made a back-up of the original file, then modified one line: pointText.fillColor = "green";
Begins at line 389:
gridApi.drawLabel = function(x, y, z, text) {
activateLayer(z);
var pointText = new PointText(gridPoint(x, y));
pointText.justification = "center";
pointText.fillColor = "green";
pointText.content = text;
allPaths.push(pointText);
};
NOTE: I don't know why I chose to use green rather than yellow in the example...
I was just about to ask you where you found the code while you were doing your second post!
Awesome KV! Great detective work! I'm experimenting with it now. You can't change it in-game, so trying to find a grid label color that is just right. Thanks!
grep -r "gridApi.drawLabel" *
I've got a BASH! shell. Bwahahaha!
But I found it in the HTML Tools before I knew what to search for:
The first two pictures (in the above post) were steps 1 & 2.
Then, I clicked 'sources' and found this:
From there, grep saved the day!
NOTE: I tried using JS.set with all sorts of different things before altering the file in the program's directory, but to no avail.
I'm learning a lot from you, KV, as well as Pix and everyone else. Thanks again!
No way!
It is I who is learning from you.
(Wait, is that 'whom'? Let's see... I think that would mean I'd have to say, 'it is me whom is...' ...nah... It is I who is learning from the Dcoder whom posed the inquiry. (Wait, is that 'who'? Let's see... yep. 'The Dcoder, from whom the inquiry originated'...))
It is I who is learning from you, the Dcoder from whom the inquiry originated!
There has to be another clue...
How is this checking to see if we have set up a custom border color?
Therein, I believe, lies the key to being able to set this within the game.
I do not think that will work, I am afraid. The grid.js file will not be included when you publish your game, so changes too it will not be present when others play it. It will need a change in Quest itself; it will be pretty trivial but not sure when the next update will be.
Follow us on Facebook
Follow @TextAdv on Twitter