Saving Maggie; An interActive Graphic Novel

Hi there fellow Hypers! :slight_smile:

Always been fascinated by MUSIC & COMICS! …so why not combine them?
And while we’re at it, maybe add a little interActivity too? :slight_smile:

That’s where Hype came into play!

I started this comic in January this year and while it’s still an ongoing project… it’s about time to share it with the world. So i guess this forum was one of the places to start! A story about Maggie and her dad, a trucker who is doing his best to raise his little girl on 18 wheels of steel… Have a look!

I’m a Dutch illustrator and my first interactive story was; Even bij Eefje Also made with Hype. I don’t really have much knowledge of HTML, JAVA scripting or something like that, but Hype AND especially this forum made a lot possible. Especially for episode to come! So, thanks to all who posted here.

I can’t really share the project here into files, because that would be a lot of diverse files. But if you have any questions, i would be happy to answer them. And if you have any suggestions for improvement, i would be glad to hear them off course.

Enjoy: www.savingmaggie.com

MIK

8 Likes

Interface: I bassicly divided the pages in two. a click on the right side of the screen is continue, left side of the page is previous. Maybe i should add a little tutorial in de future? :slight_smile:

Hi Maikel,

The loop I assume is supposed to be background noise of the truck. It doesn’t loop seamlessly unfortunately so has a little spike in between loops. This could be fixed by using the WebAudio API. I have a document somewhere that shows how this is done. I’ll try and dig it up!

Other than that it’s a great piece of work! some English small mistakes :slight_smile: understandable as you’re Dutch :slight_smile: but that’s just a little thing.

If you need help you know where we are :wink:

Hi DBear, thanks! Yup! it’s supposed to loop. I tried to test it, but i couldn’t figure out why or when it would or would not work. If you could find that solution, that would be great. Also for future loop-di-loops :slight_smile: Haha yeah those languages. Always eager to learn, gonna have a look at that. Thanks! :slight_smile:

Really fantastic! If I had one suggestion, it would be to use the Scale behavior setting in the flexible layout to preserve the aspect ratio on your artwork. It is so great and deserves to not be distorted by the browser size!

@StudioMIK
Below are two links that might be of value re: seamless looping. The "Building a Simple App that Syncs Audio Files" has looping related info. I believe Firefox (50.0.2) is still a dog in this regard - it still would not play seamless while Safari & Chrome do.

@DBear
Several examples & references of yours in the following threads - may be You won't have to dig so much. ;->

Thanks Jonathan!

One of the things i really, really really wanted to achieve was a fullscreen experience… At first that didn’t seem to be much of a challenge. But when i wanted to use drag functions, textfields, things went bump. In the end i choose to go for as much fullscreen i could get. :slight_smile: My idea was that hopefully people won’t really change their browser size that often and accept the image they see first… But i agree, it’s not ideal.

Had to re-make it really quickly but here’s an example: http://studiomik.nl/hype/study/code/code.html
Entering the code to open the door is no problem at normal screensize. Going fullscreen seems to be troublesome since you cant type anything anymore… If you have any advice i would gladly have another look in this fullscreen challenge :slight_smile:

Here’s a link to the HYPE file

Gonna have a look this weekend! Thanks for helping out! :slight_smile:

Awesome comic, well done! I was really hooked by the story - such a pity the episode ended :slight_smile:
I had a few glitches both on chrome and safari: Namely, sometimes clicking would loop between the current and the previous scene…?

Thanks F_Kal!

I’m more of an illustrator so i’m glad you liked the story so far. There is more in the future. You could Follow the Facebook.com/savingmaggie page for any future updates.

For now i guess i’m gonna add a little tutorial page before we dive into the story. I basically divided the screen into a left and right button. Like a book. Clicking right gets you to the next page, click left the previous. Thanks for your feedback! :slight_smile:

1 Like

ah, could it be that I was clicking on the wrong side of the screen then?
hmm, might be, but probably not; I’d have to be swapping side again and again for me to get stuck, but I don’t recall doing that: I was clicking on the same spot but it would cycle back and forth!
I’ll have a look again later~

Keep up the good work!

1 Like

I was able to type while in fullscreen mode on Safari and Chrome; are there specific steps you have to reproduce this? Perhaps it is dependent on screen size also? A screen capture using QuickTime Player's 'File > New Screen Recording' might be useful

Hey Jonathan, thanks for your reply. Apreciate you taking the time. After testing some more, it seemed to work in firefox and chrome. But Safari keeps being strange… typing in fullscreen only shows up when pressing ,…/// and “”" === . Have a look at the Quicktime Screen Recording. Returning to the normal screensize brings back normal type… Would that be a bug? or something fixable? Thanks!

Very odd! I would try adding this to a plain .html file and see if you can reproduce it outside of the Hype environment?

The only other guesses based on differences in our configuration would be:

  • see what happens if you disable all safari extensions
  • see what happens if you run Safari in English (though keyboard differences may also come into play)
1 Like

I like the style, the execution for the most part, the ambient audio.

I would suggest some kind of improved navigation - the jump from the end of the accident scene to the credits was unexpected, and I wanted to go back to see if I’d inadvertently clicked on that ghostly round credits button b mistake. Perhaps an invisible “where you are” timeline at the top of the screen that appears when you move the mouse over it?

And the loading is a bit much (I went away to other tabs to continue surfing, coming back when I thought it might be ready). Have you adjusted the pre-loading of assets in your Hype master file to speed up page loads?

Now to go back and see if that Chapter 1 tab has finished loading yet… :wink:

Good job - keep at it. Cheers!

Mark
Retina MacBook Pro 13"; macOS Sierra 10.12.4; Safari 10.1

1 Like

Thanks for the elaborat feedback Mark! There’s plenty of room for improvement, i agree :slight_smile: That timeline sound like a good idea. Also the part before the credits was tricky. Have to take another look at that. I agree it’s a bit unexpected and could end a bit more subtle. All the pre-loads are on, but perhaps the sound files could shrink a little without losing to much quality. Gonna have a look at that. Thanks again, appreciate you took the time!

Hmmm… guess Safari does not support typing fullscreen according to this page:

Stumbled upon this same typeproblem with a different website. Chrome and Firefox worked, Safari didn’t.
Also still having other troubles with the drag functions in all browsers so i’m gonna skip that fullscreen dream…for now. :slight_smile:

Thanks for thinking along!

Interesting - it does appear that documentation states Safari doesn’t allow it. I have seen some code that the proper way to request access would be:

docElm.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);

Forum posts indicate this doesn’t work in Safari, but they are all old (referencing Safari 5.x). Might be worth a try? (I’d do it myself but it works for me just fine)

1 Like

@StudioMIK, @jonathan

I am a little confused. Using a forming the scene and the below code on a button JS action

var theEl = document.querySelector('.HYPE_scene')
	
    	if (theEl.requestFullscreen) {
      theEl.requestFullscreen();
    } else if (theEl.msRequestFullscreen) {
      theEl.msRequestFullscreen();
    } else if (theEl.mozRequestFullScreen) {
      theEl.mozRequestFullScreen();
    } else if (theEl.webkitRequestFullscreen) {
      theEl.webkitRequestFullscreen();
    }

I have not had a problem in the past with Safari. And just testing again now it works as expected .

I cannot see the password interaction on the site and assume it has been removed for now but have I got the wrong end of the stick ?

You could have picked anywhere in the world. Why Pittsburg? :smile:

I'm thinking something should be done about the "loading" part. Perhaps a custom loading scene is a good idea. In general, this seems like a place for Tumult to improve Hype, making it easier to include a custom loading scene.

Also, optimizing your images might help. Here's an example...

With lossless compression, which means no loss in quality, the image dropped from 778,935 to 594,961. That's a 23.6% savings. That should significantly cut down loading times and require less storage space for your project. You could get even more savings if you use "Lossy" compression, but I suspect you don't want to degrade the quality of your artwork. (Although, ImageOptim usually does a good job of maintaining visual quality – even with Lossy compression.)

As for the sound issues, sometimes less is more. That first repeating sound was too scratchy to me. Perhaps the background sounds should be softer. It's like makeup, it looks better on a woman when you don't notice it's there. Although, you seem to be going for LOUD. So, it is also a matter of personal preference.

Also... https://howlerjs.com ...that might help with working with audio. I had a similar problem with looping audio in Annoyed Tomatoes. After adding howler.js to the project, I wondered why this isn't a standard feature of Hype. Hi @jonathan :smirk:

The best tutorial is the one you don't need. There isn't a visual cue to show that these are pages. It made me wonder why it wasn't just a video. You're battling with an issue that I've been struggling with – skeudomorphism.

For the most part, I was just clicking the right side of the screen. This takes away from enjoying the story. It wasn't until the radio was there something to do. So, you're left with a choice... make the project more like a traditional comic book... or make it even more interactive. (You could also add an "Autoplay" feature, so people don't have to click.)

I wrote "Revisions" as an Interactive ebook. People seemed to have a lot of fun with the challenges, but adding that interactivity can take away from the story. It was suggested that if I did a sequel, I should just write it as a regular book. If I did that, it might not be as fun... but then I could focus more on the story and less on making it a game. Also common feedback, people read all of the choices, even after they picked the one they wanted. That's probably why TV and Movies are so popular. You don't have to think, you just watch.

What you're doing is basically two projects in one, as it's part game and part book.

The main guy reminded me of Samurai Jack. I liked that art style. I also like the art style here, which is different but also good.

Heh, you're creating a lot of work for Tumult. This is another area where Hype can improve. Adding a full-screen button could be a built-in function for Hype. There's not much I miss about Flash, but that's one of the things. It was so easy to create vector artwork and then have it automatically stretch to fill the full screen. Ah, things seemed so much simpler back then. Even with Hype, it's hard making a project work across multiple web browsers and operating systems.

I didn't see a password. Today is the first I saw this project though.

If a keyboard is a problem, just building your own is a solution... like the password system in Mega Man 2 or Metroid. Some on-screen system could be added.

Password protecting this is going to be tough though, unless there's something server-side that does the authentication. If the password is stored in plain text in the JavaScript, it's just a matter of viewing the source to get the secret codes.

2 Likes