Just putting this here if anyone wants to figure out how to add it to a Quest game.
I've tried for the last couple of weeks but am to ignorant.
It is a compass with a working arrow. Preferably in the left panes
Here's the Compass Link .
Okay.
(The needle just spins and spins. Is that what you want? That's what the original script has going on (I think).)
compass.js
/*
* Modified version of https://github.com/rheh/HTML5-canvas-projects/tree/master/compass
*/
var img = null,
needle = null,
ctx = null,
degrees = 0;
function clearCompassCanvas() {
// clear canvas
ctx.clearRect(0, 0, 200, 200);
}
function drawCompass() {
clearCompassCanvas();
ctx.drawImage(img, 0, 0);
ctx.save();
ctx.translate(100, 100);
ctx.rotate(degrees * (Math.PI / 180));
ctx.drawImage(needle, -100, -100);
ctx.restore();
degrees += 5;
}
function imgLoaded() {
setInterval(drawCompass, 100);
}
function initCompass() {
var canvas = document.getElementById('compass');
if (canvas.getContext('2d')) {
ctx = canvas.getContext('2d');
needle = new Image();
needle.src = 'https://raw.githubusercontent.com/rheh/HTML5-canvas-projects/master/compass/needle.png';
img = new Image();
img.src = 'https://raw.githubusercontent.com/rheh/HTML5-canvas-projects/master/compass/compass.png';
img.onload = imgLoaded;
} else {
alert('Canvas not supported!');
}
}
<!--Saved by Quest 5.7.6606.27193-->
<asl version="550">
<include ref="English.aslx" />
<include ref="Core.aslx" />
<game name="Compass Image with Needle">
<gameid>98aa909f-76b9-4b1d-8b66-df7604f75715</gameid>
<version>1.0</version>
<firstpublished>2018</firstpublished>
<description><![CDATA[Compass and images from:<br/>https://github.com/rheh/HTML5-canvas-projects/tree/master/compass]]></description>
<start type="script">
</start>
</game>
<object name="room">
<inherit name="editor_room" />
<description type="script"><![CDATA[
JS.eval ("$('#compass').remove();")
msg ("<canvas id='compass' width='200' height='200'></canvas>")
JS.eval ("initCompass();")
]]></description>
<enter type="script">
JS.eval ("initCompass();")
</enter>
<object name="player">
<inherit name="editor_object" />
<inherit name="editor_player" />
</object>
</object>
<javascript src="compass.js" />
</asl>
Nay. I'd have to get the needle to follow the script. Maybe just wiggle a little in a certain direction. Looking to make an instrument on a pirate ship.
Need to get the compass into an Additional Pane.
I could put direction into the status pane and quit trying to get so fancy, after all it is a Text adventure.
The non-spinning (unless you tell it to) edition (rough draft):
compass.js
/*
* Modified version of https://github.com/rheh/HTML5-canvas-projects/tree/master/compass
*/
// Global variable
var img = null,
needle = null,
ctx = null,
degrees = 360;
function clearCompassCanvas() {
// clear canvas
ctx.clearRect(0, 0, 200, 200);
}
function drawCompass() {
clearCompassCanvas();
// Draw the compass onto the canvas
ctx.drawImage(img, 0, 0);
// Save the current drawing state
ctx.save();
// Now move across and down half the
ctx.translate(100, 100);
// Rotate around this point
ctx.rotate(degrees * (Math.PI / 180));
// Draw the image back and up
ctx.drawImage(needle, -100, -100);
// Restore the previous drawing state
ctx.restore();
}
function drawSpinningCompass() {
clearCompassCanvas();
ctx.drawImage(img, 0, 0);
ctx.save();
ctx.translate(100, 100);
ctx.rotate(degrees * (Math.PI / 180));
ctx.drawImage(needle, -100, -100);
ctx.restore();
degrees += 5;
}
function initCompassSpin() {
spinInt = setInterval(drawSpinningCompass, 100);
}
function stopCompassSpin(){
clearInterval(spinInt);
}
var dirObj = {
'n':360,
'ne':45,
'e':90,
'se':135,
's':180,
'sw':225,
'w':270,
'nw':315
}
function setCompass(direction){
//Default is north
for(var dir in dirObj){
if(dir === direction){
degrees = dirObj[direction];
alert(dirObj[direction]);
}
}
}
function setCompassAndDraw(direction){
setCompass(direction);
drawCompass();
}
function initCompass() {
var canvas = document.getElementById('compass');
if (canvas.getContext('2d')) {
ctx = canvas.getContext('2d');
needle = new Image();
needle.src = 'https://raw.githubusercontent.com/rheh/HTML5-canvas-projects/master/compass/needle.png';
img = new Image();
img.src = 'https://raw.githubusercontent.com/rheh/HTML5-canvas-projects/master/compass/compass.png';
//img.onload = imgLoaded;
drawCompass();
} else {
alert('Canvas not supported!');
}
}
<!--Saved by Quest 5.7.6606.27193-->
<asl version="550">
<include ref="English.aslx" />
<include ref="Core.aslx" />
<game name="Compass Image with Needle">
<gameid>98aa909f-76b9-4b1d-8b66-df7604f75715</gameid>
<version>1.0</version>
<firstpublished>2018</firstpublished>
<description><![CDATA[Compass and images from:<br/>https://github.com/rheh/HTML5-canvas-projects/tree/master/compass]]></description>
<start type="script">
</start>
</game>
<object name="room">
<inherit name="editor_room" />
<description type="script"><![CDATA[
JS.eval ("$('#compass').remove();")
msg ("<canvas id='compass' width='200' height='200'></canvas>")
JS.eval ("initCompass();")
]]></description>
<object name="player">
<inherit name="editor_object" />
<inherit name="editor_player" />
</object>
</object>
<javascript src="compass.js" />
</asl>
As soon as I eat, I'll revise it so the image loads in the background when the game starts.
(Sometimes it doesn't load in the initial room description.)
...and I didn't see your post.
An additional pane?
A little wiggle?
Inconceivable!
(Actually, it sounds pretty easy to pull off. (Sorry. I just got done watching The Princess Bride.))
Okay, check this out.
compass.js
/*
* Modified version of https://github.com/rheh/HTML5-canvas-projects/tree/master/compass
* Version 1.4
*/
var img = null,
needle = null,
ctx = null,
degrees = 360;
function clearCompassCanvas() {
if(typeof(ctx) !== "null"){
ctx.clearRect(0, 0, 200, 200);
}else{
initCompass();
}
}
function drawCompass() {
if(typeof(ctx) !== "null"){
clearCompassCanvas();
ctx.drawImage(img, 0, 0);
ctx.save();
ctx.translate(100, 100);
ctx.rotate(degrees * (Math.PI / 180));
ctx.drawImage(needle, -100, -100);
ctx.restore();
}else{
initCompass();
}
}
function drawSpinningCompass() {
clearCompassCanvas();
ctx.drawImage(img, 0, 0);
ctx.save();
ctx.translate(100, 100);
ctx.rotate(degrees * (Math.PI / 180));
ctx.drawImage(needle, -100, -100);
ctx.restore();
degrees += 5;
}
function initCompassSpin() {
spinInt = setInterval(drawSpinningCompass, 100);
}
function stopCompassSpin(){
clearInterval(spinInt);
}
var dirObj = {
'n':360,
'ne':45,
'e':90,
'se':135,
's':180,
'sw':225,
'w':270,
'nw':315
}
function setCompass(direction){
for(var dir in dirObj){
if(dir === direction){
degrees = dirObj[direction];
}
}
}
function setCompassByDegrees(deg){
degrees = deg;
}
function setCompassAndDraw(direction){
setCompass(direction);
drawCompass();
}
function setCompassByDegreesAndDraw(deg){
setCompassByDegrees(deg);
drawCompass();
}
function initCompass() {
var canvas = document.getElementById('compass');
if (canvas.getContext('2d')) {
ctx = canvas.getContext('2d');
$("#needle-img").remove();
needle = new Image();
needle.src = 'https://raw.githubusercontent.com/rheh/HTML5-canvas-projects/master/compass/needle.png';
$("#comp-img").remove();
img = new Image();
img.src = 'https://raw.githubusercontent.com/rheh/HTML5-canvas-projects/master/compass/compass.png';
//img.onload = function(){alert('loaded compass');};
img.onerror = function(){console.log('reloading compass');initCompass();};
drawCompass();
} else {
alert('Canvas not supported!');
}
}
<!--Saved by Quest 5.7.6404.15496-->
<asl version="550">
<include ref="English.aslx" />
<include ref="Core.aslx" />
<game name="Compass Image with Needle">
<gameid>98aa909f-76b9-4b1d-8b66-df7604f75715</gameid>
<version>1.3</version>
<firstpublished>2018</firstpublished>
<description><![CDATA[Compass and images from:<br/>https://github.com/rheh/HTML5-canvas-projects/tree/master/compass]]></description>
<feature_advancedscripts />
<start type="script">
</start>
<inituserinterface type="script"><![CDATA[
msg ("<div style='display:none'><img id='needle-img' src = 'https://raw.githubusercontent.com/rheh/HTML5-canvas-projects/master/compass/needle.png'/><br/><img id='comp-img' src='https://raw.githubusercontent.com/rheh/HTML5-canvas-projects/master/compass/compass.png'/></div>")
msg ("<div id=\"compassImagePane\" style=\"display:none\" ><canvas id=\"compass\" class=\" ui-accordion-content ui-widget-content ui-corner-bottom ui-corner-top\" width=\"200\" height=\"200\"></canvas></div>")
JS.eval ("$('#compassImagePane').insertAfter($('#compassAccordion')).show();setTimeout(function(){initCompass();drawCompass();},100);")
]]></inituserinterface>
</game>
<object name="room">
<inherit name="editor_room" />
<description type="script">
</description>
<beforeenter type="script">
</beforeenter>
<enter type="script">
JS.setCompassAndDraw ("s")
</enter>
<object name="player">
<inherit name="editor_object" />
<inherit name="editor_player" />
</object>
<exit alias="south" to="second room">
<inherit name="southdirection" />
</exit>
</object>
<object name="second room">
<inherit name="editor_room" />
<beforeenter type="script">
JS.setCompassAndDraw ("n")
</beforeenter>
<exit alias="north" to="room">
<inherit name="northdirection" />
</exit>
</object>
<javascript src="compass.js" />
</asl>
To hide the image pane:
JS.uiHide("#compassImagePane")
To show it:
JS.uiShow("#compassImagePane")
To point the needle to a certain degree:
JS.setCompassByDegreesAndShow(degree)
(This can be 1-360, 360 being North.)
To point the needle to a certain direction:
JS.setCompassAndShow(direction)
Use abbreviations: "n","ne","e","se","s","sw","w","nw"
I don't think that word means what you think it means....
Now I just need an altimeter and I can make the Spirit of St. Louis fly again!
No. Wait I was building a Pirate ship...
I was ready to call it quits after trying to do this. Searching and searching for the right code. I was close several times but as it has been said so many times before here, not having some quotes or a semi colon screws the pooch.
Nice KV, Thanks