Tuesday, 7 June 2016
Why i couldn't make a 2d cam
Although I had A 2d version of the map working in a test run, when implemented into the main file the 2D camera interfered with the existing script for an animated transition camera. Turns out I cant have the scene switch between two different types of cameras without the script attached becoming stuck on a certain line.
Sunday, 5 June 2016
Search bar Trials and errors
<meta name="robots" content="noindex">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
}
#tooltip {
display:none;
}
</style>
</head>
<body>
<div id="hover" onmouseover="mouseOver()" onmouseout="mouseOut()">HoverOnMe</div
<span id="tooltip">
<p>heya</p>
</span>
<script id="jsbin-javascript">
var tooltip = document.getElementById('tooltip');
window.onmousemove = function (e) {
var x = e.clientX,
y = e.clientY;
tooltip.style.top = (y + 20) + 'px';
tooltip.style.left = (x + 20) + 'px';
};
var hover = document.GetElementById("hover");
function mouseOver() {
document.getElementById("tooltip").style.display = "block";
}
function mouseOut() {
document.getElementById("tooltip").style.display = "none";
}
<meta name="robots" content="noindex">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
.tooltip span p {
text-align: centre;
}
.tooltip {
text-decoration:none;
position:relative;
}
.tooltip span {
text-align: centre;
width: 130px;
display:none;
background-color: tomato;
padding: 10px;
border-radius: 10px;
}
.tooltip:hover span {
display:block;
position:fixed;
overflow:hidden;
}
</style>
</head>
<body>
<br><br><br><br><br><br><br><br><br>
<div>Hover me</div>
<a class="tooltip">this is a thing
<span id="tooltip-span">
<p id="tooltipText">This is the tooltip</p>
</span>
</a>
<a class="tooltip">this is axzcng
<span id="tooltip-span">
<p id="tooltipText">This is the tooltip</p>
</span>
</a>
<script id="jsbin-javascript">
var tooltip = document.getElementById('tooltip');
window.onmousemove = function (e) {
var x = e.clientX,
y = e.clientY;
tooltip.style.top = (y + 20) + 'px';
tooltip.style.left = (x + 20) + 'px';
};
var hover = document.GetElementById("hover");
function mouseOver() {
document.getElementById("tooltip").style.display = "block";
}
function mouseOut() {
document.getElementById("tooltip").style.display = "none";
}
Tuesday, 24 May 2016
Making a Search bar
<!DOCTYPE html>
<html>
<body>
<p>Write something in the search field and press "ENTER".</p>
<input type="search" id="myInput" onsearch="myFunction()">
<p id="demo"></p>
</body>
</html>
function myFunction() {
var x = document.getElementById("myInput");
console.log(x.value)
}
Monday, 16 May 2016
Full width HTML
<style type="text/css">
/* Turn off pointer events for the parent and #myContainer */
.goo-entity {
pointer-events: none
}
/* Set default pointer events for everything inside myContainer */
#myContainer * {
pointer-events: auto
}
/* myContainer should cover the whole screen */
#myContainer {
width: 100vw;
height: 100vh;
}
Reworked animated Camera Move script
<button style="margin:10px" onclick="goo.SystemBus.emit('buttonClicked')">
Next camera
</button>
'use strict';
/* global goo */
var setup = function (args, ctx) {
ctx.positions = [];
var keys = Object.keys(args);
for(var i=0; i<keys.length; i++){
if(keys[i].match(/^position\d+$/) && args[keys[i]]){
ctx.positions.push(args[keys[i]]);
}
}
ctx.currentPosition = 0;
ctx.quatA = new goo.Quaternion();
ctx.quatB = new goo.Quaternion();
ctx.lerping = true;
ctx.gooListeners = {};
for(var i=0; i<ctx.positions.length; i++){
ctx.gooListeners[args.setPositionChannel + i] = (function(positionIndex){
return function(){
ctx.currentPosition = positionIndex;
ctx.lerping = true;
};
})(i);
}
for(var key in ctx.gooListeners){
goo.SystemBus.addListener(key, ctx.gooListeners[key]);
}
};
var update = function (args, ctx) {
if(!ctx.positions.length) return;
var factor = 1 - Math.pow(args.smoothing, ctx.world.tpf);
var pos = ctx.positions[ctx.currentPosition];
var distance = ctx.entity.transformComponent.transform.translation.distance(pos.transformComponent.transform.translation);
if(distance < args.minDistance){
ctx.lerping = false;
}
if(!ctx.lerping){
// Copy transform
ctx.entity.transformComponent.transform.copy(
pos.transformComponent.transform
);
} else {
// Lerp translation
ctx.entity.transformComponent.transform.translation.lerp(
pos.transformComponent.transform.translation,
factor
);
// Lerp rotation
ctx.quatA.fromRotationMatrix(ctx.entity.transformComponent.transform.rotation);
ctx.quatB.fromRotationMatrix(pos.transformComponent.transform.rotation);
ctx.quatA.slerp(
ctx.quatB,
factor
);
ctx.entity.transformComponent.transform.rotation.copyQuaternion(ctx.quatA);
}
ctx.entity.transformComponent.transform.update();
ctx.entity.transformComponent.setUpdated();
};
var cleanup = function(args, ctx){
for(var key in ctx.gooListeners){
goo.SystemBus.removeListener(key, ctx.gooListeners[key]);
}
};
var parameters = [{
key: 'smoothing',
type: 'float',
'default': 0.001,
step: 0.01,
min: 0,
max: 1
},{
key: 'minDistance',
type: 'float',
'default': 0.1,
min: 0
},{
key: 'setPositionChannel',
type: 'string',
'default': 'setCameraPosition'
}];
for(var i=0; i<5; i++){
parameters.push({
key: 'position' + i,
type: 'entity'
});
}
Tuesday, 10 May 2016
DOM emit message test
<button id="go" onclick="goo.SystemBus.emit('move')">MOVE</button>
<button id="stop" onclick="goo.SystemBus.emit('stop')">STOP</button>
Camera Control Exploration
<p onclick="window.setCameraPosition('Fixed Cam 1')" style="cursor: pointer; background: black; color: white; font-size: 18px; padding: 4px; margin: 10px;">
Camera 1
</p>
<p onclick="window.setCameraPosition('Fixed Cam 2')" style="cursor: pointer; background: black; color: white; font-size: 18px; padding: 4px; margin: 10px;">
Camera 2
</p>
<p onclick="window.setCameraPosition('Fixed Cam 3')" style="cursor: pointer; background: black; color: white; font-size: 18px; padding: 4px; margin: 10px;">
Camera 3
</p>
<script>
'use strict';
/* global goo */
var setup = function (args, ctx) {
window.setCameraPosition = function (name) {
var cam = ctx.world.by.name(name).first();
if (cam) {
var targetPos = args.targetLookat.getTranslation();
var dist = cam.getTranslation().sub(targetPos).length();
var angles = cam.getRotation();
var camCtx = args.targetCamera.scriptComponent.scripts[0].context;
camCtx.targetSpherical.setDirect(
dist,
goo.MathUtils.moduloPositive(-angles.y + Math.PI / 2, Math.PI * 2),
goo.MathUtils.moduloPositive(-angles.x, Math.PI * 2)
);
camCtx.goingToLookAt.set(targetPos);
camCtx.dirty = true;
}
};
};
var cleanup = function (args, ctx) {
};
var update = function (args, ctx) {
};
var parameters = [
{ key: 'targetCamera', type: 'entity' },
{ key: 'targetLookat', type: 'entity' }
];
</script>
Tuesday, 3 May 2016
Talking to the DOM Elements
var update = function(args, ctx){
// Get the span element from the HTML Entity
var selection = document.getElementById('selected');
// Create a click handler function
ctx.handleClick = function(event){
var x = event.offsetX;
var y = event.offsetY;
ctx.world.gooRunner.pick(x, y, function(index, depth){
if(index !== -1){
var entity = ctx.world.entityManager.getEntityByIndex(index);
selection.innerHTML = entity.name;
} else {
selection.innerHTML = 'Nothing';
}
});
};
// Attach the click handler
ctx.domElement.addEventListener('click', ctx.handleClick);
if (selection.innerHTML === "Nothing"){
console.log("Nothing Selected");
} else if (selection.innerHTML === "12A02") {
console.log("12A02 Selected");
} else if(selection.innerHTML === "12B13") {
console.log("12B13 Selected");
}
}
var cleanup = function(args, ctx){
// Remove the click handler
ctx.domElement.removeEventListener('click', ctx.handleClick);
}
<style>
#hud {
margin: 25px;
background-color: transparent;
font-weight: bold;
font-family: sans-serif;
font-size: 24px;
color: skyblue;
}
</style>
<p id="hud">
You have selected: <span id='selected'>Nothing</span>
</p>
Hitting the forums
I got a little stuck when trying to implement some native JavaScript. So i hit the forums looking an answer and someone replied with the code to make it happen.
Thursday, 28 April 2016
Subscribe to:
Comments (Atom)