Annoyed Tomatoes

1

OK, OK… I know I didn’t finish B.R.O.O.M. yet, but I started work on converting “Annoyed Tomatoes” to Hype. First I created it on GameSalad, then I ported it to Stencyl. Can Hype be useful for game development?

Unlike B.R.O.O.M., I’ve already built Annoyed Tomatoes twice. The third time should be easy, right? Well… no… not really. I’ve run into some issues. That’s the point of this thread, to list the problems I’ve found and how those problems are getting solved.

  • Audio – Hype doesn’t really have features sufficient for game development. Adding howler.js (https://howlerjs.com) to the project solves that problem. It probably should be part of Hype.

  • Video – I’m trying to make this game playable on the iPhone. That’s a problem because it doesn’t automatically play the video in place. Instead, I created an image sprite and the single image is moved every 1/10 of a second. You can see the “Mission Brief” to see how this worked out. Even though the “video” is larger this way, it doesn’t blur the scene when zoomed. (Video was causing the other elements to render at lower res.)

tank.jpg18688×128 493 KB

I saw this thread… Change mouse cursor to image …and realized that using a custom mouse cursor in a zoomed state is tricky. The cursor is still screwy, so I’m still working on that.

Here’s the link to the game page…

4 Likes
2

Here's the error with the cursor...

TypeError: undefined is not an object (evaluating 'ga[3].replace')

Here's the code...

 ga = group.style.transform.split(" "); //Group Transform Vaule Array
 gsx = ga[2].replace(/[^0-9.]/g, ""); // Group Scale X
 gsy = ga[3].replace(/[^0-9.]/g, ""); // Group Scale Y

"ga" stands for Group Array. The "transform" values – without frames – look like this...

transform: translateX(259.5px) translateY(129.5px) scaleX(1.7203125) scaleY(1.7194444444444446);

The "transform" values – with an iframe – look like this...

transform: translateX(-0.5px) translateY(0px) scaleX(0.9984375);

For some reason, the "scaleY" is dropping out. :thinking:

So, I just commented out the "gsy" attribute. Instead, I just used "gsx" for both the X & Y scale multiplier. This works because the game doesn't stretch. The X & Y scaling should be equal. You can see from the example that it's not exactly the same, but a difference of a hundredth of a point doesn't hinder gameplay.

The plan for iOS is to hide the crosshair, as it's not necessary for touch games.

3

At least one thing converted smoothly. The tomatoes can be animated gifs.

1 Like
4

Here’s some feedback for Tumult. @jonathan – this information might help make Hype more of a game development platform. These are issues I noticed while porting Annoyed Tomatoes…

m4a Media Type

I use “m4a” for audio, as I only need the one file, but Hype doesn’t recognize it as a media type.

I think it’s… audio/x-m4a …for the media type.

Particles

The game calls for particles. There are stars in the background that twinkle. The tomatoes splatter bits when shot and there’s a warp field when the game is over. I’m not sure of an easy way to do this in Hype.

I’m considering the use of particles.js to add these effects. It’s MIT license, so it might be a good addition to Hype. There’s a Demo / Generator that shows what the software can do. A modified version of the NASA example is an easy way to add twinkling stars.

I try to avoid JavaScript libraries, but howler.js and particle.js are powerful. One is great for audio effects while the other is great for visual effects. It can makes a Hype project more game-like.

@nick – You’re into game development, so this combo is probably interesting to you too.

Add / Remove Elements

I’ve probably mentioned this before in the Physics API thread, but the Matter.js API has critical game development features. Not being able to dynamically add or remove elements in Hype is a real challenge to the completion of this project.

A look at the Matter.js demo has the “addBody” button

Wow, that Concave Terrain looks really cool. Anyway, by pressing the button, a new physics element can pop into the world. That’s important for things like shooting bullets, removing enemies, power ups… you know, typical game stuff.

I think if you’re wondering where to focus your efforts in unlocking physics settings, it’s basically these three things…

  1. Adding / Removing Elements
  2. Moving Elements with physics (velocity / rotation)
  3. Collision Detection

Create offline application cache

This setting seems to get confused when tomatoes.html is renamed to index.html. I think Hype should default to index.html instead of the project name. The advanced export has the option for exporting with an “index.html” file, but it creates two directories

tomatoes > tomatoes > index.html

This slows down testing, as it’s a bit of a speed bump in uploading new files to the server. By default, Hype doesn’t include my audio files. It thinks they’re not being used, even though they’re being called by custom JavaScript.

Anyway, it’s getting closer. At least the doors open now and the gun is shooting…

Update 1/24/2017 – Unfortunately, I had to drop particle.js. It was able to create the effect I was looking for, but it seems it was too processor intensive. When I loaded it on my iPad Air 2, the game crashed hard! I dropped particle.js from the project and created my own particle system. I also load my particle system at a different moment to keep the animation running smoothly.

2 Likes
5

Very cool! Thanks for all the feedback, some specific responses below:

iOS 10 allows for this option in videos, and a certain beta of a product exposes it :slight_smile:.

Can you elaborate on not recognizing it? It does look like Hype correctly identified it as Audio. We don't provide a default slot for m4a, but should understand it is audio.

(As for not providing a slot - this is something I go back and forth on. It is in no way required for standard web audio and mp3 is generally more widely supported, but some usages do need it...)

:thumbsup:

I'm curious for your reason for using Advanced Export for this game?

One of Advanced Export's primary use cases is in support ads, so the default behavior we decided was to not include any resources that are unused by the document. You can check these to export in the slice though, and then they should be exported.

6

This is something I'm still considering. It depends where I'm going to distribute this game. I'm already thinking about forcing iOS 10 so I don't have to worry about the iPhone 4S screen ratio. The ~76% adoption rate of iOS 10 does make things easier... but that's still 24% of people left out... plus Android. (I'm not sure how video works on that mobile platform.)

The "Sprite" method has better compatibility. Also, I already wrote the code to have it fade in and restart.

It would be nice to just use MP3. That has great browser support...

...but then I see this page...

So, I chose to go with m4a, as it's a single file that has great compatibility. And according to the Wikipedia page, it has other advantages...

The site says it's the successor to mp3 and it has better sound quality. As a developer / publisher, I like using m4a files because there are no licensing issues for distribution.

...but it might be an issue for Tumult / Hype if you decide to do encoding / decoding. Apparently, such software needs a license. The m4a files in my project are large, so compression is an issue. I think this is something that could be a nice feature for Hype, but I don't know the legality of it. Does Hype need a license to use AAC audio if it's just compressing audio files? Can Hype legally leverage macOS to accomplish this?

I don't know. :thinking:

But basically, not having an audio slot there is annoying. I don't need all the other slots, especially when m4a seems like the better audio format – and I only need the one file.

I'm using Advanced Export because there seems to have been a bug with regular exporting – which doesn't default to index.html.

Another idea for distribution is straight from my website. People could just turn Annoyed Tomatoes into a home screen app. I turned on "Create offline application cache" and I was getting an error as a result. Apparently, renaming tomatoes.html to index.html was not sufficient. I had to export the project specifically with an index.html file. This doesn't make sense, but that's what happened.

The point is, I think it should default to index.html on a regular export – or be a preference setting. So instead of directory/tomatoes.html, I can just use directory as the URL to the Hype project. Sure, some servers don't support index.html and could just show a directory listing instead, but that's rare. It's more common to use index.html as the default... or one of the defaults.

But right now, I've been grabbing the enclosed tomatoes directory. Heh, it screws things up because sometimes I grab the wrong directory. I upload it with FileZilla, having it not replace existing files unless they are newer or a different size. This way, I don't have to keep uploading the same resources all the time.

I looked at phaser.io. It looks like it has the gaming features that are missing from Hype, such as creating and removing elements. (I think it has collision detection too.) So, it's a tough decision. Do I port this game a fourth time, or do I figure out a way to add/remove enemies?

I haven't decided the answer to that question yet. I'm still thinking about it. :thinking:

For now, I think I'll go check on my real tomatoes. They're turning red. :smile:

7

Along these lines, I've been wanting to save the export name separately from the document name; in this case you could simply export as "index"

If you change the html filename you would also need to change the entry in the cache.manifest file to reflect this. Offline caching as I'm sure you've found out is extremely picky and fragile.

8

Heh, that sounds like the entire state of Web Development. :smile:

Being able to set the default html file name seems like it would solve problem. It's annoying problem, but it's not a showstopper.

What is a problem is what happens next with Annoyed Tomatoes.

I got preliminary work out of the way. The game starts almost exactly as it should. It's in excellent shape for an HTML5 port. Any remaining cross browser issues are minor. I really enjoy the way the gun works. I added keyboard controls so people don't get carpel tunnel. Holding the spacebar is auto fire. Right-click also shoots too. Reloading is accomplished by pressing the "Reload" button or pressing the "r" key.

What's a problem is shooting the tomatoes.

The way the game is designed is that the bullets can shoot through the tomatoes. So, if there are two tomatoes in a row, that's two hits with one shot. That's tricky to do with HTML. Previously, I used collision detection to detect the location of the bullet. The problem is that Hype doesn't have collision detection or a way to create/remove elements dynamically.

So, here's the question...

Is Hype going to add significant improvements to the Physics options anytime soon, such as adding the ability to create/remove elements dynamically or detecting overlaps with elements?

If yes, then I probably could work on something else while waiting. If not, then I probably could make my own system, but that's going to be a lot of work. I think I'd rather work on a game development engine, so I only have to code this kind of stuff once.

I'm also considering a Hype / Phaser.io hybrid approach.

Meanwhile, you can see the gun changes here...

9

It is a goal to improve this, but as you know my standing line is that we don't make promises about upcoming/unreleased features. So it is always my recommendation to use the right tool for the job today (even if that isn't Hype), and evaluate again tomorrow :slight_smile:.

10

Well, there was that one time...

:smirk:

Annoyed Tomatoes development has stalled. I've looked at other software. Nothing matches what I'm looking for. I have thought about building my own game development software, but that would make me a competitor of Tumult. I don't like that idea.

So, I've stopped working on Annoyed Tomatoes. Maybe I'll go back to it when physics in Hype is more usable. I suppose the trouble does go back to that video. I saw the physics options and I was really excited. The potential of this feature hasn't been unlocked yet,

I did like the video overall though. When it first launched was an exciting time in the history of Hype.

1 Like