[x3d-public] PlaneSensor, Mavo, JS and x3dom

[Andreas Plesch]

https://glitch.com/~dragthebox2

is an improved dragging game example.

Game improvements include working timer and best time, smoother
dragging including a bit of momentum after stopping, title
disappearing and get ready countdown.

On the x3d, x3dom side the main change was switching from ROUTE to
direct output from the PlaneSensor to the box trafo, to allow
continued moving by moment after dragging stops which turned easier
than expected.

This involved using a 'tick' hook, called enterFrame in x3dom. In x3d
scripting such a hook may not be required since scripts take part in
the event cascade.

There is also a related x3d event to mavo/dom bridging change since
mavo can only deal with one mutated attribute per dom element. Now
both the isActive and translation_changed fields were needed on the
mavo side and required converting the fields to meta child elements of
the PlaneSensor, each with a single field attribute. Not sure if this
observation has implications for x3d HTML integration, eg. if moving
fields from attributes into child elements <field>, for all x3d nodes,
would make sense.

On the mavo side the main issue was figuring out the logic for the
timer which in the end looks simpler than it was. It was easy and
comfortable to add the other small changes. Still missing is a
recorded list of times.

On the js side there is now more code mostly due to the smooth
dragging. I had tried a mavo only approach for that but it was too
slow and not very elegant. I think an x3d only approach would also be
possible but would involve a similar script than used now in js, with
direct output.
The bridging involves updating attributes with x3d out field values
and is generally only one or two lines.



On Fri, Apr 12, 2019 at 10:05 AM Andreas Plesch <andreasplesch at gmail.com> wrote:
>
> Initially, I just wanted to develop a better example use-case of a screen-aligned PlaneSensor as the central part of a small game. But then I also wanted to give Mavo.io another try, and explore mobile usability. So I ended up with a mesh-up of all these technologies and something of a slightly more in-depth X3D-DOM-HTML integration example here:
>
> https://dragtheboxmavo.glitch.me/
> https://glitch.com/~dragtheboxmavo
>
> Far from finished and with some not so pretty corners, it was an interesting exercise since I came across integration challenges in x3dom, Mavo and the difficulties in making a mobile friendly, interactive page. I tried to use as little javascript as possible, relying a lot on Mavo for logic, and HTML/CSS for presentation.
>
> I still could not get the timer quite right, and ended up having a imperative looking code section.
>
> Some lessons learned are that it is fun to use styled HTML for HUD and buttons, easy to get HTML content into X3D with Mavo expressions, easy to use Mavo for X3D animations, that x3dom needs some work on responsiveness (aspect-ratio, pixel density on mobile), that scripting can be largely avoided but not completely, and PlaneSensor works better on touch than with the mouse.
>
> Mavo would be great to keep a persistent highscore and settings, perhaps have a on screen game options editor.
>
> I also have somewhat in mind to port to x-ite with xite-dom to see how that would work, and to learn more about HTML integration requirements.
>
> Any feedback welcome, forks and 'remixes', or any reuse very much so as well,
>
> Cheers,
>
> -Andreas
>
>
> --
> Andreas Plesch
> Waltham, MA 02453



-- 
Andreas Plesch
Waltham, MA 02453