Building educational, light-weight HTML5 games

Hi all into light-weight web game development!
Many of visual graphic designers here on this forum are looking / hoping for a visual toolset for building educational, accessible HTML5 games.
Here's one example I liked:
https://springroll-tc.pbskids.org/7a962dd0-83e6-11e9-ac05-df84cc6b2920/c6f8b1e5a1aa0adc2b56b988b0ce4483e8c51681/release/index.html
The game features a pretty amazing level of interaction (extensive sprite-animation with voice overs etc FX), is loading quickly and working on all basic mobile devices.
Looks like a springroll-named toolset (unknown for me) springroll-io is being used for building it.
The main drawback for me is the lack of visual UI of that springroll-ecosysytem (GitHub - SpringRoll/SpringRoll: Ecosystem for building educational, accessible HTML5 games).
I wonder if it possible to build a game like that one with Hype, since it has the visual UI with symbols and spread-sheets etc visual game building tools?

2 Likes

It would be feasible to implement something like this, but dealing with HTML and the bloat of the composition layer being fully based on markup presents challenges. Many pixel effects and tasks can be efficiently handled in a canvas object, which is not nativly supported in Hype. Upon reviewing the GitHub page, I appreciate the concept and its compatibility with various game engines such as Create.js and Pixi.js. etc. However, the project appears to have slowed down in terms of updates, similar to Tumult Hype. For us, I hope this situation changes, avoiding the same fate of becoming obsolete like that project. I am curious about the advantages of using Spring Roll over directly coding in a game engine like Pixi.

1 Like

Thank you @MaxZieb for your valuable insight from the viewpoint of a software engineer. For educators and designers with no coding skills the first important thing is not how often is an authoring tool being updated but mostly which tasks it can solve with a visual toolset, and which require raw coding solutions. I know Hype can do many things, there are things it can't do (canvas etc), and some tasks require additional tools (like extensions you're developing) or programmer's skills to accomplish.

1 Like

Totally agree, a visual GUI is what made me use Director and Flash, back in the day… and then transition to Hype some time later. Strongly agree on that front. There are some tools with a GUI that do canvas animations and multimedia, one that comes to mind is (there are more):

PS: They just hired a new developer… the project seems pretty active and alive.

2 Likes

I really like the SpringRoll example. It looks just like the stuff I used to do with Macromedia/Adobe Director. (And even earlier with Asymetrix Toolbook).

In the meantime I have done similar things with GameMaker. Although it always seems to me like shooting sparrows with a cannon, as they say here in Germany. Or cracking a nut with a sledgehammer, which means the same thing - my American friends told me :slight_smile:

I think that for educational purposes, you would basically only need a set of perhaps 20 or 30 recurring functions that can be adapted using parameters.

So basically, what the “Behaviours” did in Director.

If a complete set of these functions were added to Hype, teachers and anyone who wants to create something without programming knowledge would be easily satisfied.

And there are a lot of people looking for exactly that. Unfortunately, most tools today are either too simple or too complex.

1 Like

Heh, that sounds like the appropriate use of that saying.

I sorta did that… Photics-Physics-Bridge (ppb.js) – Photics.com …but no one seemed to care. :smile:

Perhaps I should get motivated. The next big project I've been considering is “A Book About Making Video Games”. One of the problems is not knowing the state of Hype. When's the next major update and will that reinvigorate the community? So, I haven't decided if the book is to be purely focused on Web games, include how to use Hype to make games, or try to include coverage of some game development software too.

At the very least, I probably should create the video for Hype #12. I stopped making videos for Hype partially because I've been stuck at that one. But again, it's also about popularity. I thought Hype #11 would have gotten way more views.


Exactly, @Alexandro that is what I'm talking about: a collection of hype-specific js-functions and snippets (maybe some selected 3rd party frameworks and @MaxZieb's brilliant extensions) as building blocks for game logic. Custom Behaviors, Additional HTML Attributes, Spritesheet animations and lightweight Lottie animations are doing their magic in Hype. What I am still missing on the OS level though, is support for lightweight VP9/webm -videoclips with alfa (transparent background) in Safari browsers, especially on iOS devices. Apple's HEVC format with alpha is heavy and cumbersome to my mind.

That's interesting

I don't use WebM, so I didn't know about the transparency issue. Why would you need that with video games though? That doesn't seem like a lightweight technique.

Just to add 15 seconds of a teeny tiny video took up a lot of space. And looking back… wow …it's a pretty convoluted setup. I used a jpeg image that was 18688 pixels wide and moved it like it was a film strip. The audio was separate file too. This was before Sprite Sheets were added to Hype and the browsers have gotten a lot better at playing videos. :smile:

The point is that there were massive limitations with the Atari 2600 and Nintendo Entertainment System, but lots of great games were created. A lot of the NES games still hold up today, as Nintendo launched (just this month) the Nintendo World Championships: NES Edition.

I think the problem is that it's not a simple feature, like clicking an “Action”. Most of the JavaScript for making games is already there… even easier with the bridge. The problem is that people tend to use Hype because they don't know how (or don't want to) write JavaScript code. So, it's really up to Tumult. Are they going to add more game development features? :thinking:

1 Like