ClickForwarder (with Science Fair Atomic Model Projector)

This package allows players to interact with a world widget and configure a lua event, which is called with information about the html element that was interacted with.

To achieve this, the world coordinates of the click are translated to widget screen coordinates. In order to do this, the size of the widget as configured in the widget properties is needed. The current version of Crayta does not expose this size configuration, so it needs to be configured manually.

In a typical setup, a mesh, e.g. a whiteboard or signboard, has a locator child that is rotated by 90 degrees and carries the world widget.

To make it work:

  1. Add the clickForwarderScript to the mesh and the clickForwarderActionScript to the locator.

Configure the clickForwarderScript as follows:

  • Select or drag the locator to the locator property
  • Enter the same size as defined in the widget properties to the size property
  • If you are using the propmpt package, enter a prompt message for interact help
  1. Add the clickForwarderActionScript to the locator (the one that also has the widget) and configure as follows:
  • Add an event handler for interacting with the widget
  • Add an event handler for clicking in the widget. Notice: click events are only supported for mouse users!
    If you want to process the event on the current user’s client only, check the Client Action property. That is useful, if the action has effect only for the user, e.g. playing a sound or effect. In case the event
    should be called on the server, do not check this property.
  1. If you want to process the event server side, so that it has impact on the world and for all players
    you need to also add the UserEventForwarder to the user.

  2. Add the following code to the javascript segment of the widget’s html:

     document.body.onclick = function (e) {
     	Crayta.callLua("WidgetClick", e.target.textContent, e.target.className);
     }
    
     engine.on("Interacted", function (x,y) {
     	x = x * window.innerWidth;
     	y = y * window.innerHeight;
     	var elem = document.elementFromPoint(x,y);
     	Crayta.callLua("WidgetInteract", elem.textContent, elem.className);
     });
    

The package comes with a sample setup for the science fair build jam, a UI widget with the periodic table
of elements and an atom model projector that shows the atomic model for the interacted element. Add the AtomicModelProjector template to your game world to see the scripts of the package in action.

For any questions or support, please contact Daystiny in the Crayta Discord, https://twitter.com/DaystinyGames or stadiadaystiny@gmail.com

3 Likes