Free Hype Templates 🏗

[Photics]

Flash is dying!

It’s been a long and slow death. Even this video is almost 5 years old…

And yet, what’s been done about it?
For many old Flash games, like “Population Tire”, pretty much nothing.

• http://homestarrunner.com/pop_tire.html

…but if only people knew… if only they knew how to make games with Hype… perhaps fun would return to the Internet. This week’s free Hype Template shows the possibilities…

https://photics.com/free-template-tuesday-25-tumult-hype-bounce/

Making games with Hype is to be a big part of A Book About Hype. The “Bounce” template doesn’t even use the new Physics API. I’m really looking forward to releasing the book, but there’s still much more work to do.

Meanwhile, what’s your high score?

[Photics]

The lightbox template is now online…

Free Template Tuesday #27 – Tumult Hype "Lightbox"

[Photics]

The slide puzzle is now online…

Free Template Tuesday #28 – Tumult Hype "Sliding"

[Photics]

The “Timing” template is now online…

Free Template Tuesday #30 – Tumult Hype "Timing"

[Photics]

The “Navigating” template is now online…

Free Template Tuesday #31 – Tumult Hype "Navigating"

[Photics]

The clock is back, now in dark mode…

Free Template Tuesday #32 – Tumult Hype "Dark Mode"

[Photics]

This week’s a big one. It’s the Jigsaw template…

Free Template Tuesday #33 – Tumult Hype "Jigsaw"

Wow… 📘 A Book About Hype (2020 Print Edition) [UNDER CONSTRUCTION] …one month ago seems so far away.

[MarkHunte]

Just kept on looking at the repeat lines… and just could not help myself… [it’s lock down after all]
And I know foreach recursive madness.

//-- elements X  COORDS object
var setXObjects =   {
 
 "a":["-50","-128","-192"],
 "b":["-50","-128","-178"],
 "c":["-64","-114","-192"],
 "d":["-64","-114","-178"]
 }
 
   //-- elements Y  COORDS object
 var setYObjects =   {
 
 "b":["-64","-50","-64","-50"],
 "c":["-128","-128","-114","-114"],
 "d":["-174","-178","-192","-192"]
 }

  //--  coord array  to loop through
var XYObjects = [setXObjects,setYObjects]

 var counter = 2 // start number for id name of element.
 var coord = "x" // coord we are going to set
 
 //-- loop over each item in XYObjects
 XYObjects.forEach(function(ob) {
 
 //-- loop over this item in XYObjects
Object.keys(ob).forEach(function(key) {

//-- loop over this objects value  in this XYObjects item 
ob[key].forEach(function(val,index) {

//-- use the key name with object index  number + counter to get the Element by ID. Set the coord to the value
  hypeDocument.getElementById(key + ( index + counter) +"_hype_pat").childNodes[0].setAttribute(coord, val );
    
});
  
});
//-- change the coord and the start number
 counter--
 coord ="y"
 });

[Photics]

@MarkHunte

just could not help myself

Ha ha… nice.

I considered automating that part, but I didn’t see the timesaving… https://xkcd.com/1205/

…but I’m only working with 16 pieces. If someone made a much larger puzzle, then that’s pretty neat.

[h_classen (Hans-Gerd Claßen)]

Drawing those puzzle-pieces with hypes svg-shapes you’ve earned this weeks diligence-award

[Photics]

If you missed it, the "Jump" template is online...

Free Template Tuesday #34 – Tumult Hype “Jump”

There’s a nice discussion about this template here…

Adding sounds to colliding objects

Hello, I have this simple pool-like game with 3 pockets. http://alphapodapp.com/games/ This will be an iPad app, so users will need to use their finger (in this case the cursor) to throw the big red ball around to get the little balls inside the 3 pockets, similar to a game of pool but without the stick. It works pretty well, but I need the following: Add sound FX every time the balls collide or bounce Add a sound effect every time user interacts and drags the big ball Add a different sound…

...and there's a related post here...

Physics Mini Templates for Tumult Hype 4

Yeah, the “Jump” template has to go in the book now. It’s got wall jumping. [wall-jump] I think it’s pretty clear now. You can make games with Hype. That was the mission I set out to achieve with the book. This clinches it. UPDATE: Firefox support was terrible. The template was updated to better support that browser. ANOTHER UPDATE: Wow, if I would have made simplistic controls like this — ten years ago — I’d probably be rich by now. The template now has touch controls. Swipe left / right t…

[Photics]

The webpage template is online…

Free Template Tuesday #35 – Tumult Hype “Webpage”

…it has cool features, such as a responsive menu, viewport based animation, and vector drawing.

---

UPDATE — Fixed an issue where the menu wouldn’t update when changing layouts.

Also, this template is based on the “Hype Book” landing page… http://photics.com/hype-book/ …and related chapter / section in the book.

[Photics]

Recently, I received a message asking if it was OK to use the templates. This was somewhat surprising to me. They're free templates. Go and have fun! HA HA. But yeah, if you're working on a commercial project, you might be looking for something more official.

So, here it is... the Photics Public License (PPL)

• https://photics.com/books/a-book-about-hype/template-license-ppl/

I thought about using the MIT license, but I don't want the templates distributed on a stand-alone basis. The PPL was created to emphasize that distinction. If people are looking for unaltered templates, then they should get them from Photics.com. I don't mind if people pass around the templates privately to their friends and co-workers. But if shared publicly, it should be done via a link to the Photics.com template page.

If you've already been using the templates in your projects, that's great! This is change is not about harassing you. If you notice, I put "Attribution Recommendation" — not "Attribution Requirement" — because I want to be friendly to people that previously used the templates.

This change is more in response to this... https://choosealicense.com

An open source license protects contributors and users. Businesses and savvy developers won’t touch a project without this protection.

In other news...

A new template is scheduled for Tuesday. It's a response to this thread...

Detecting mobile device screen orientation when Responsive Layouts won't work

I have a Hype project that involves creating a stand alone html5 file that must be no larger than 5meg. There are several encoded base64 images and the file will be displayed on mobile devices (iOS, Android). I need a simple javascript that can detect the screen orientation of the mobile device and then advance the main timeline (in Hype) accordingly. Something like "if device is in landscape mode goto frame1, if portrait goto frame 2"... or something like that I assume I would put this s…

[Photics]

The "Orientation" webpage is online...

Free Template Tuesday #36 – Tumult Hype “Orientation”

...by comparing the width and height of a webpage, it can be quickly determined if the orientation is landscape or portrait. This technique can be applied as an alternative — or complement — to responsive elements and breakpoints.

---

UPDATE 7/28/2020 (Afternoon) — A new version of template was uploaded.

[Photics]

The "Spotlight" template is online...

Free Template Tuesday #37 – Tumult Hype "Spotlight"

It's in response to this thread...

Custom Mouse which hides Background

Hello, HideFirstBackground.zip (12.8 KB) I want a rectangle to replace my mouse when I move my mouse over the black background. The gray background should then appear in the rectangle. So the mouse rectangle is supposed to hide the black background. But only in the field of the mouse rectangle. I hope you understand what I mean, does anyone have an idea how I can do that? [Bildschirmfoto 2021-01-24 um 16.43.39]

What I find interesting is how there are so many solutions to this problem. Here's one from @gasspence A Flashlight (mouse follower) — back in May of 2015. It's one of the oldest templates in the "Template Gallery" category. After posting the "Spotlight" template, I looked at the forum list. I was surprised to see that one second to last. Did I waste my time? Nope, it's different, but it's another coding solution.

...and that's where the "Spotlight" template gets tricky. It uses two "On Drag" actions, so the image can be moved left/right or up/down.

It's not pixel perfect. The "Control Element Position" action is pixel perfect. But if you move the image too far, this can happen...

That's why the "Spotlight" template uses "On Drag". While the speed is set to be a bit fast, this method has some advantages. It works well when using a trackpad or touch device. Your finger doesn't have to move so far to control the spotlight. Plus, if the spotlight exactly matched the touch location, your finger could cover the animation.

[Photics]

The "Timely" template is online...

Free Template Tuesday #38 – Tumult Hype “Timely”

It's in response to this thread...

Topics on time triggers

I’m looking for an example that would best describe a schedule based on system time. Like say I have 5 events happening throughout the day I want to control the timeline via continue timeline or scenes?

Basically, the template shows how to add real-world time-based animation. Based on the time of the day, you can load a specific scene. That same idea could be used to load a timeline, or go to a specific point in a timeline. In this example, it's a city scene that changes color... Morning, Afternoon, Evening, and Nite. There's also a corresponding greeting.

Recently, macOS added a lot of timely features... Dark Mode, Night Shift, and Dynamic Desktop. Tumult is even expanding that with their "Nightly" app...

Tumult Nightly Beta now available!

Hey folks! I found that I wasn't liking the the macOS automatic Dark Mode and that scheduled Do Not Disturb didn't have a better indicator when it turned on at night (I wound up missing messages even though I was awake and expecting them!). So I had the idea to make a little utility app "Nightly" to tie them together. Demo video: [Nightly Beta Demo] A beta is available to anyone who would like to try it out. You can sign up for the beta program here: You'll get a complimentar…

...with a few conditionals and a timer, your Hype project can also react to the time of the day.

These related templates may also be useful...

• https://forums.tumult.com/t/free-hype-templates/5325/69
• https://forums.tumult.com/t/free-hype-templates/5325/71

[Photics]

The "Controlling" template is online...

Free Template Tuesday #39 – Tumult Hype "Controlling"

It is in response to this thread...

"Year of Fun"

The List of Games You could be here! The Poll Vote for your favorite Hype game on October 21, 2021 to November 20, 2021 .

Instead of a game competition, something more casual was planned. That means no prizes. Instead, there's a gift for everyone that wants to make games with Hype. It's called the Photics-Physics-Bridge. By adding this JavaScript library to your project, the gap between Matter.js and Hype's Physics API is bridged. In other words, it becomes easier to make games with Hype.

That's what this week's template is all about. It shows how to make a four-way controller with Hype, by using the PPB.

If you do make a good game with Hype, starting from April 20, 2021 until October 20, 2021, can show it off in the Year of Fun

[Photics]

Just a heads up, while working on the App version of A Book About Hype, I updated the "Origin" template...

Free Template Tuesday #16 – Tumult Hype "Origin"

I realized that the previous method that I was using to animate the crosshair was excessive. I switched it to use SVG animation — much easier.

[Photics]

The “Looking” template was updated. It's much cleaner and more modern now. Also, the YouTube video is online.

[Hype #2] The “Looking” Template (When Is It Necessary To Write Your Own Code?)