Specifying Room dimensions in networked-a-frame - aframe

I am new to a-frame and have followed the examples of haydenjameslee networked-aframe. I was wondering if there is a way to specify the room size when defining the a-scene in it's tag
<a-scene networked-scene="app: myApp; room: room1;">

I have a workaround, for I don't fully understand how the component works.
I found there is a player list under the reference NAF.entities.entities
I made a component attached to the scene:
AFRAME.registerComponent('foo',{
init:function(){
setTimeout(function(){
console.log(Object.keys(NAF.entities.entities));
console.log(Object.keys(NAF.entities.entities)[0]);
console.log(Object.keys(NAF.entities.entities).length);
},5000);
}
});
The first log gives me an array of the players id's.
The second one gives the id of the first element.
The last gives me the number of the players.
You can check for the number of players on load, and if the number is exceeded, just deny access, change the room, or href to a 'lobby' website.
Working glitch here: glitch.com/edit/#!/sudden-antler
Of course instead of waiting 5 seconds i should be listening to a loaded event, I'll look into it once im not so busy.

As far as I know this is not possible in A-Frame.
What do you need it for?

An NPM Package aframe-room-component is available that easily lets you create rooms and connects them. Serves my need.
https://www.npmjs.com/package/aframe-room-component
It can be used as follows
<rw-room position="-3 0 -5" material="color:#787">
<rw-floor material="color:red"></rw-floor>
<rw-ceiling material="color:blue"></rw-ceiling>
<rw-wall position="6 0 0" material="color:yellow"></rw-wall>
<rw-wall position="6 0 6" material="color:green"></rw-wall>
<rw-wall position="0 0 6" material="color:brown"></rw-wall>
<rw-wall position="0 0 0" material="color:pink"></rw-wall>
</rw-room>

Related

In Aframe, the target is not working for Light Spot

I want to point a spot light towards a specific object. According to documentation (https://aframe.io/docs/1.3.0/components/light.html)
there is an property target that takes the id of the object to point to. However target does not seem to react to any value.
<a-light position="10 10 10" rotation="0 0 0" scale="1 1 1" light="type:spot;color:#ff0000;intensity:100;distance:1000;decay:0.1;angle:3;penumbra:0; target:myplane"></a-light>
Here is my codepen example:
https://codepen.io/jimver04/pen/JjZRJLz
A-Frame Version: 1.3.0
Platform / Device: Windows 10, Firefox 106, Desktop 3080 RTX GPU
Reproducible Code Snippet or URL: https://codepen.io/jimver04/pen/JjZRJLz
I found it, it just needs a # before the plane id
<a-light position="10 10 10" rotation="0 0 0" scale="1 1 1" light="type:spot;color:#ff0000;intensity:100;distance:1000;decay:0.1;angle:3;penumbra:0;target:#myplane"></a-light>

Phaser3, trying to use svg emoji as cursor

given the docs, the following should work but doesn't give me any inclination as to why it's not.
this.input.setDefaultCursor(`url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='58' viewport='0 0 100 100' style='fill:black;font-size:29px;'><text y='50%'>⬇</text></svg>") 16 0,auto`)
the emoji cursor was generated here: https://www.emojicursor.app/
Nevermind. After a closer look, i was actually also setting the cursor elsewhere as something else that was overwriting this. Either way, I will leave the question open in case someone wants to know how to use emoji as cursors in phaser3

Why does Qt renderer rebuild all batches every frame

I have about 20 batches in my app and most of them are rendered using my shaders via ShaderEffect QML node. I want to optimize my app to run smoothly on i.MX6 Solo, so I profiled it with QSG_RENDERER_DEBUG=render. And I saw a couple of strange things in the output:
Renderer::render() QSGAbstractRenderer(0x2500db17e30) "rebuild: full"
Rendering:
-> Opaque: 52 nodes in 9 batches...
-> Alpha: 26 nodes in 11 batches...
- 0x25012c17e70 [ upload] [noclip] [opaque] [ merged] Nodes: 13 Vertices: 52 Indices: 104 root: 0x0
...
- 0x25012bbecc0 [ upload] [noclip] [ alpha] [ merged] Nodes: 1 Vertices: 56 Indices: 84 root: 0x0 opacity: 1
-> times: build: 0, prepare(opaque/alpha): 0/0, sorting: 0, upload(opaque/alpha): 0/0, render: 3
Every single frame all batches are rebuilt, even though most of them never change. I found that there is one text item that triggers this full rebuild. When I disable it, stop updating it or use clip: true on it, it no longer triggers a full rebuild. This text item has a unique size, so it lives in a separate batch and should not interfere with any other batches. I don't understand such behavior. Is it a Qt renderer bug?
The second weird thing is that I have a ShaderEffect with a GridMesh resolution 1x40. I never move it. I just change a couple of its uniforms and draw something with a different shader above it. However, this mesh uploads every frame.
Why does Qt scene graph upload meshes when it could easily reuse them? How to force it not to do so? I tried clip: true but it doesn't help with the second issue. I think that defining geometry in C++ can help. I haven't written any Qt render code in C++ so far, so I'm looking for ways to do it entirely in QML.

Tile map isn’t loaded with some images

I made a tilemap. and used it on cocos2d-js.
Just added
this._map = new cc.TMXTiledMap(res.tilemap);
this.addChild(this._map, 0, 1);
in Layer.
But When I use this image,
http://i.imgur.com/f5VG0Nr.png,
http://i.imgur.com/Ugg9GNq.png
this error occured.
[.WebGLRenderingContext]RENDER WARNING: texture bound to texture
unit 0 is not renderable. It maybe non-power-of-2 and have incompatible
texture filtering or is not 'texture complete'
But When I used other image, it works.
like
http://i.imgur.com/Grv0srJ.png,
http://i.imgur.com/v1eWdkE.png,
http://i.imgur.com/BXKRbVx.png
I changed tilemap many times with that images, but same result.
I don't know what is diffrent that images.
Please help me.
Have you tried I believe I encountered this error once:
Have you tried adding all the image files in your resources.js file?

Multiple script/paperscripts in the same paperscope

I'm starting with paper.js. I like the fact that it introduces the possibility to have a script with a text/paperscript mime type, which runs in its on scope. However, scripts can become large pretty soon, so I want to be able to divide it in multiple scripts for readability. I thought I could just add more than one script tag and have them all run in the same scope, but apparently this isn't the case.
Both scripts are loaded and do run, but the second script doesn't seem to be in the paper scope.
I've set up an example here: http://barbata.nl/SO/Maps/ This example has some code, but I'll point out the important bits.
It contains two paperscripts:
Maps.js is the main script, which rasterizes the image and allows moving it around. You can ignore the code in this script, for it works fine so far.
Zoom.js is the script in which I wanted to isolate zooming functionality. It uses jq.mobi to capture the scroll wheel of the mouse, since Paper.js doesn't seem to have that event. It then translates that to a call to onMouseScroll, in a similar way Paper does it.
So far so good. The actual problem arises with the zoomIn and zoomOut functions in zoom.js.
It works if I explicity use the paper object to reference the view I want to zoom:
function zoomIn()
{
if (paper.view.zoom < 2)
{
paper.view.zoom = paper.view.zoom * 2;
}
}
But it fails when I remove paper and just reference the view:
function zoomIn()
{
if (view.zoom < 2)
{
view.zoom = view.zoom * 2;
}
}
This surprises me, as I expected the script to be a Paperscript, running in the Paperscope. It works fine if I put this code in Maps.js, so it seems that although zoom.js is loaded by Paper.js (the developer tools in the browser confirm this), it isn't run in the Paperscope.
My question is: are my findings correct? Am I doing something wrong? What is the right way to divide a Paper.js application into multiple units for readability?
Of course I can get it running, but I want to make sure I do it right.
This is indeed how it works. I've opened an issue on GitHub
I found that the "cleanest" way is to do it with this.install(window). It also makes error finding with Chrome developer tools easier since it is more adapted to reporting on the line errors in java-script than "paperscript".
in index.html (for example):
<script type="text/javascript" src='js/other_lib.js'></script>
<script type="text/paperscript" canvas="canvas">
this.install(window);
/*no code 'required' here */
</script>
<body>
<canvas id="canvas" width="1500" height="500"></canvas>
</body>
Then in the js/other_lib.js i just add code as normal:
var r = new Path.Rectangle([100,100],[200,200]);
r.fillColor = 'black';
/*more code here*/
This should generate a rectangle.
What DOES'T NOT WORK for me (as of Paper.js v0.10.2 Release Date: 9. July 2016) is the object operators. Such as adding vecrots pointc = pointa + pointb; for me this is giving a lot of NaN values.
I have had to edit a few libs to get this working, but the change is simple:
var pointc = new Point(pointa.x+pointb.x,pointa.y + pointb.y);

Resources