Interactive graphic adventure with quizzes

I have just finished a course on new technologies in education and I had to create a game for educational gamification.

It was recommended to use certain web tools that work with templates, but the idea I had in mind was more complex than that.
So I started working with Hype. It has been an intense week of organizing the ideas, preparing the story and combining it with short comics that I made in 2016.
After working all night, I only got to the presentation of the project and a first page of the story.

I've made several silly mistakes that have slowed down the process. Some I have corrected but there are two that I have not been able to find the solution to.

  1. Centering the page in the browser. Is there a simple way to do this without writing code? I looked at how to do it with Html, Css and Js but I don't even know how to open the back door to work the code in Hype. :sweat:

  2. In the 3rd scene I had to make a macara with a PNG image. After doing it it was impeccable, but when I uploaded it I detected that the image jumped (the character Dan). I couldn't find the fault. :exploding_head:

Finally I have delivered the work with good repercussions among the teachers of the course. I was left with the desire to make better animations (or some simple animation) and prepare better quizzes, drag and drop, text completion and punctuation sample. I have the files located in the forum and I want to learn how to understand and program them.

Here is the link. If you think you can help me with those two bugs I can send the Hype zip file for private. :slightly_smiling_face:

https://artesaeta.com/gaming/Rescate_Dragonera.html

Thanks again to this huge community. :pray:

Looks great!

I think if you use these settings, always on a top-level group, you'll be able to fix both problems:

Screen Shot 2020-12-04 at 4.31.57 PM

I would have expected that turning off right/left pins would still shrink to fit in a centered method, but it is not doing that; I will need to dive into the code further to figure out if this was intended or a bug.

The jump at the end looks like it is a difference in the flexible layout of Dan vs. the positioning in the final static shot.

1 Like

Thank you very much, @jonathan it's all taken care of.
The centering of the page works by setting those three points. It's so simple! How could I not see it? :man_facepalming:
Dan's jump was happening because all the layers were simply not grouped together. After centering the scene both Pol and Dan were doing the jump, so I thought it was something in the overall construction of the scene. So I tried to group all the layers together (as in the other scenes) and it worked.

Now I can work on it with more time. :slightly_smiling_face:

1 Like

I'm glad you got it!

Turning off both pins does center though - so I think you had the right idea. It seems that the shrink-to-fit doesn't get centered in this configuration but does with left/right pins for some reason. So no facepalm necessary :smiley:.

1 Like

Dear @jonathan, I have seen that when I use an image as a button it is active for the entire timeline even though it is invisible. I would like the button to be accessible only from the moment it becomes visible. The same goes for normal buttons.

I have seen this new thread and I wonder if it is a solution I can apply to my project.

Thank you very much for the help :pray:

I'm not sure that really applies unless you are doing stuff with the Inner HTML of an element; that answer is more about using the API directly from some HTML.

Instead I'm guessing you are using Opacity to make it invisible; elements still respond to actions in this state. An easy route is to additionally animate the display property (below opacity) from visible to hidden. The Display hidden setting takes it out of being able to respond to mouse actions.

Example:

Display-hidden.hype.zip (17.2 KB)

1 Like

Thank you very much for taking the time to show me so clearly. It's just what I was looking for. I didn't know that the simple change of opacity didn't affect the actions of the button until a friend told me about it. I was looking for the solution when I saw the new thread and I really thought that was it.

(I'm going to read the whole Hype user manual again, so I don't "bother" with any more style questions. :wink: I really appreciate it deeply.)

1 Like