Newbie question: Where to put all the JavaScript scripts?

Using JavaScript with Hype
1

Hello everyone,
I'm trying to integrate my first JavaScript scripts into my Hype project.

Specifically, in a hidden objects game, when you click on one of the objects in the scene, it looks to see if that object or its name is in an array that I have declared before.

If I assign the call of a JS function to one of the objects (images) in the scene, an editor always opens in which exactly this one function can be seen.

But it would be much more comfortable for my work if I could see all JS functions and all variable declarations at the same time in one editor.

How can I make it so that all my JS scripts can be seen together in the editor?

I hope I could explain what I mean. My English is unfortunately only so mediocre, because I mostly speak and write in German.

Thanks in advance for your help

2

Hype might be somehow special when it comes to organizing scripts.
i'd really advise to read the documentation -> Tumult Hype Documentation

If you want just one script for your project, you may place it in a hypedocumentload-environment or may be create a Hypefunction that simply does all in one ...

vars that should be within the scope of any Hypefunction have to be declared in Hypes recommed general-Object -> hypeDocument.customData

2 Likes
3

If you're working with Hype, there are a few ways to add JavaScript.

  1. Scene-level: You can add JavaScript that will run when a scene loads or unloads. Go to the 'Scene Inspector' and you'll find options under 'Actions' for scene load and unload where you can run JavaScript.

  2. Element-level: You can attach JavaScript functions to specific elements. Simply select the element, go to the 'Actions' tab, and assign a JavaScript function to the events you want (like On Mouse Click).

  3. Head HTML: For more global code, like declaring arrays you'll use throughout the project, you can add it to the "Head HTML" found under 'Document > Edit Head HTML'.

  4. External JS Files: Hype allows linking external JavaScript files. You add these in the resources panel.

Remember to keep your code organized for maintainability. Element-specific code should be attached to the elements themselves, while more general code can be added at the scene level or in the Head HTML.

Hope that helps! Welcome to the forums…

4 Likes
4

Using customData in Hype's JavaScript Functions:

Function signature in Hype:

function myFunction(hypeDocument, element, event)

Storing Data: Save local scope data directly into hypeDocument.customData.

hypeDocument.customData.myArray = ['item1', 'item2'];  // Example array

Retrieving Data: In any Hype function, access this stored data through hypeDocument.

function handleClick(hypeDocument, element, event) {
   var myArray = hypeDocument.customData.myArray;
   // do something
}

State Management: Use customData for state or data management across different scenes or functions.

Since customData is prepared by the runtime, you can start using it right away without any need for initialization, making it a convenient way to manage state across your Hype project.

2 Likes