Dealing with variable timelines

Hi all,

I’m no expert in code and I’m having a really hard time dealing with variables.

I have an animated pointer hand/image that points at an object the user must find (it is actually more like multiple pointers on different timelines for each object). Their purpose is to point at an object only one at a time until the user “finds” and clicks on the object (it’s a hidden object game, there are 4 objects in total). The pointer can point at any object that’s not found… it doesn’t matter which object, just not an object that’s already disappeared/clicked on by the user. I tried getting around code by manipulating the timeline (continue/pause/go to time in timeline, etc.) but in the end, I cannot get around these problems: having two pointers appear at the same time, a pointer pointing at an object that’s already disappeared, or no pointers showing up at all and one object is remaining.

I tried looking this up in the forum, and the coding for variables is way over my head. Is there a way to completely disable a timeline once you no longer need it? Or can I make the pointer I no longer want invisible even if its timeline is still running?

I tried using this on click/run javascript code to hide an unwanted pointer (I added the unique ID “pointer” to it):

"hypeDocument.getElementById('pointer').style.visibility = ‘hidden’

but after running this script, it disables all other clickable actions afterward. I even tried using a similar line of code but to change the opacity to 0. Same results…. everything is no longer clickable after running the code.

Right now, everything is just on one scene using and manipulating different timelines. Is my only choice to make lots and lots of scenes to control the variation of the pointer hand?

Hmm,
Changing the pointer is easy enough

https://www.w3schools.com/jsref/prop_style_cursor.asp

But I am having trouble visualising this and what you are using for a pointer?.

Can you post an example project.

Using the above link info an example would be…

It’s not a cursor. It’s a hint animation for a hidden object mobile game.

Here is an example of someone’s hidden object game… This is not an actual picture of my game (cannot post it due to confidentiality) but it’s the same concept… basically the yellow arrow will pop up to give hints to the user. However, the pointer should not appear if the object is already found.example

Also the arrow is animated… it’s moving back and forth to get the user’s attention. And it should appear for one object at a time (up to 4 objects). That’s why I put it on a different timeline.

Using ‘Visibility’ -> Hidden will hide that object. This can be animatable by recording and adjusting that setting:

Any object set to ‘Hidden’ will not respond to clicks – this is likely better than opacity for your case.

You could have a relative timeline that has either a ‘visible’ or ‘hidden’ state for your cursor – and you could toggle that property (without adjusting the cursor’s location) pretty easily by playing the timeline and jumping to a certain time in that timeline.

It’s not a cursor… it’s a hint animation. It looks like a big pointer hand. Sorry if I’m not describing it so well…

So, there are 4 timelines with these hint animations. The hint animations want to tell the user to tap on an object, but the hint animation should appear for only one object at a time. So let’s say I have object A, B, C, and D.

When the game starts… my hint animation (timeline #1) is running for object A. The user will decide if they want to tap object A or another object and ignore my hint animation. If the user taps on object A like I want them to, the next pointer (timeline #2) is triggered and is now pointing to object B or one of the other objects that are left (timeline #1 has also been triggered “go to time in timeline” where there is no animation happening, so it just disappears). However, if the user ignores my hint animation and taps on object D instead of object A, the hint animation should stay on object A or another hint animation timeline can be triggered for another unfound object. There are so many possibilities that I’m running into problems like two hint animations appearing at the same time or there is no hint animation at all for the last object. Because if hint animation #2 for object B was supposed to be fired off when object A was found, but it’s not there anymore, it should trigger another hint animation for a remaining object.

I have tried using this visibility feature already… it doesn’t always work because “continue timeline” or “go to time in timeline” can restart the animation and unhide it despite hiding it in another timeline.

This is probably easier by initiating an array at the first scene load

The array contains the id of each hidden element. The ids match the names of the timelines

You then can check , that to remove an element and time line

Hi Mark, how do I initiate an array? Do you have an example? Sorry, I don’t know so much about code :frowning:

Have a look at this.

Each timeline loops at the start to just flash it’s arrow. When a element is clicked a JS function is run to cross check if the element is in an array. If it is it will move the timeline to a point where the arrow hides and a box appears around the element.

It will then remove the elements/timeline name from the array, find the new value in the array that has now moved to position 0 ( array positions start at 0 not 1 ) and start its timeline loop for the arrow.

timelineGame.hype.zip (854.5 KB)

The clickable elements are :

1, Totem

2,cat

3, spider,

4, compass

The code

		/* init/define the array with the element's id /timeline name  ( only once )*/
		
	 if(typeof element_timelines == "undefined") { element_timelines = ['object1','object2','object3','object4'] }
	 
	
	/* get the clicked elemnt's id*/
	
	var thisEl = element.id
	
	
		/* Check if the array includes the  elemnt's id*/
	if (element_timelines.includes( thisEl)){
	 
	/* Go to the part of the timeline that hides the arrow and shows the box using the elemnt's id/timeline name*/
	 hypeDocument.goToTimeInTimelineNamed(2, thisEl)
	 /* continue the timeline from that point*/
	 hypeDocument.continueTimelineNamed(thisEl, hypeDocument.kDirectionForward, false)
	
	 /* get the index/position  number of the matching id/name in the array */
	var element_timelinesIndex = element_timelines.indexOf(thisEl);
	
	  /* remove that value using the index/position */
	element_timelines.splice(element_timelinesIndex, 1);
	
	
	/* get the new first value in the array */
	var nextEl = element_timelines[0]
 
	
	/* start it's arrow */
	hypeDocument.startTimelineNamed(nextEl , hypeDocument.kDirectionForward)
	
	}

In this way the Array does all the juggling for us. And keeps the correct order of animation when one element or more is clicked out of order.
When we remove a clicked item name the array acts like it has a spring on the right hand side pushing the remaining elements left one position so the next element that has now moved into position 0 ( first place ) will be the new element/arrow/timeline to start animating.

2 Likes

Thank you so much, Mark! Amazing!

1 Like