Retaining symbol scale and accurate boundaries across scenes


(Steve) #1

I am trying to keep a symbol’s scale across scenes while retaining accurate boundaries (for physics collision) and found 2 options that partially work.

I am using the symbol as a variable for 3 differently colored and sized balls.
The user should select a ball and play with it during the subsequent scenes.

The attached document should illustrate the conundrum.
symbolScaleRetention.hype.zip (250.7 KB)

I’ve tried everything short of JS. For a second I thought @MaxZieb’s Global Extension might be the ticket but I got stuck.

Any help would be highly appreciated. Thank you!


(Loves Hype) #2

Hype GlobalBehavior has nothing todo with this apart of maybe communication across symbols but regular custom behavior is sufficient for that as Hype GlobalBehavior shines with multiple Hype Widgets across pages and iFrames. But your problem can probably be solved with just a persistent symbol

I would put your stage into a persistent symbol and trigger actions (from the buttons) using custom behavior as it’s the easiest ways to talk across symbols (the stage would listen to the custom behavior).


(Steve) #3

I am using a persistent symbol and successfully control it via custom behaviors (as you’ll see in the sample file I uploaded).

The main issue is the symbol’s boundary not appropriately resizing on non-symbol stages.
That’s not a problem until you add physics: As a result, “the balls” don’t bounce off the edges but rather have an invisible force field around them…


(Loves Hype) #4

Ah, sorry about that. Okay so probably @JimScott or @Photics is more of an expert with Physics (Hype uses matter.js). My second hunch would be to contain the whole physics system in a persistent symbol instead of the boundaries and the ball but then your probably trying todo levels with changing walls. Maybe you can enable disable walls in a different manner if that is your goal. Turning this over to experts on the matter (no pun intended). Regards


(Steve) #5

Thank you @MaxZieb. Maybe I’m just going about this the wrong way because I’m scared of scripting.

All I’m really trying to achieve is to let a user pick a ball (out of a choice of 3 sizes) and then stick with it across multiple scenes. Variables, really. There’s probably not even the need for a persistent symbol with a nifty piece of code…


(Jonathan Deutsch) #6

Taking a glance at your document, it appears you are doing your operations outside of the persistent symbol. Any information within a persistent symbol is retained, but if you apply it to the top-level symbol element (that is, you aren’t in the symbol) then it will be different from scene to scene.

When doing this, note that symbols are their own physics environment, so you’ll need to put the walls inside the symbol as well.

Also right now because you have physics set on the persistent symbol element and not the ball itself, the bounding box for the physics object is a rectangle. You’d probably want the ball to have physics. Since the goal is to have balls of different color/size, I’d probably use the same element (so you don’t need a group or to synchronize position) and instead change the background color and width/height.


(Steve) #7

Thanks everyone. Problem solved.
@Jonathan best described my puzzle:

I resolved my problem by recording top-level symbol element scale information to local storage and subsequently querying it on other scenes.

Thanks again, @MaxZieb and @Jonathan! And sorry, @JimScott and @Photics for having been tagged in, because physics were not the issue here.


(Loves Hype) #8

Great that you solved it. Little hint: you don’t even need to go through localstore to pass around information inside a Hype document. You can always just write stuff to the hypeDocument variable that is passed into every Hype function call. @jonathan introduced / suggests using hypeDocument.customData for that to avoid polluting the namespace and in Hype 4 it will be pre initialized as an Object. But it works in current Hype too, just assign data to that endpoint and it stays persistent for the session and local to the Hype instance.

hypeDocument.customData = {
   value : "your data",
   another : "hello world"
}

For the tagging I am to blame but don’t worry everybody can unfollow topics in their settings if they donˋt want to notified any longer.


(Steve) #9

Thank you, @MaxZieb for pointing me to the new customData.
In my case, however, I would like the user’s preferences (3) to be stored across sessions so localStorage is preferable. I still haven’t learned how to pile multiple values into localStorage (arrays explode my brain), so I’m winging it with one object and a convoluted timeline :wink:


#10

What?! There are plenty of things I get mad about. This is not one of those things. :smile:


(Loves Hype) #11

There are many tutorials and libraries that help also there is a Hype extension too (Hype StateKit). It basically boils down to proper serialization/deserialization of data.


(Steve) #12

Holy **ap! This thing is pure voodoo, @MaxZieb.
I wonder if I should move my question to the StateKit thread or ask it here:

I understand the sample file’s way of setting and getting text strings but I cannot translate this into setting and getting timeline-positions (both top-level and symbol-level). Any hints?


(Loves Hype) #13

Thx the basics are simple (said serialization) but the Hype StateKite adds some specifics that help with Hype’s scope and multiple Hypedocuments etc. it also offers states that are specific to a domain and states that are specific to a page. It’s fine here about questions. I am on the road but basically you get all the timelinedata (see Hype API Timeline actions) and write it to your object. Save immediately or when appropriate. Restore actually mostly only needs to be done on first load of the document. Taking the values and setting the timeline position is also done with the API.