The Botbusters - Animation for a game intro

Share your Work
1

I share with you the last work done with Hype, also for video output.

Hype is not the best tool when you do animation for video mainly because of the lack of onion paper and the masks issue. I know that Hype is not made for that purpose, its focus is the web, still you can make wonderful animations, like the works of many of you. I am still learning.

This time I had a lot of problems using ClipPath. I don't know why, it didn't work, so I made the animation of the spray painting by grouping the png image and hiding the external part (I had to make the animation, find the sound effects and edit the final video from one day to another, that's why I couldn't do more research). As it is a diagonal movement it was quite laborious but I managed to do it.

By the way, I used the dCam (camera) to make the whole sequence shot.

5 Likes
2

That's fantastic! Are you able/willing to share the .hype document? I'm sure folks (myself included) would love to see your construction if possible. (If not, that's understandable!)

1 Like
3

@jonathan It is a good idea but I cannot share this document because it is part of a project in which I am just another collaborator. But I am committed to do something similar with other characters and scenery to contribute to the community. Besides I have already found the bug with the clipPath, so I could present it with all the "extras" (I'm looking to include also the sound to make a web version).

That yes, it will have to be from October, because now I don't have time but I'll be happy to do it.

2 Likes
4

No worries, and you are definitely contributing plenty simply by showing your work like this! I'm looking forward to seeing your next piece :slight_smile:.

2 Likes
5

@jonathan as promised, here is the ZIP file with the animation.
Intro_BotBuster.hype.zip (2,8 MB)

I wanted to have it uploaded before the end of the year 2021, but since October I have been having problems with my right arm and some other health problems.
Now I'm almost fully recovered and I've been able to make the black and white version of the animation. This is for copy issues, and to make the file lighter.

I don't know if the work is well structured, surely it can be done better, but here I show you how I made the complete animation with the camera movement (dCam) and the Grouping mask.

Keep in mind that I had to make the animation in 4K format because it was for video output, so the dimensions are large.

I hope everything is well understood.

I take this opportunity to wish you a 2022 full of creativity and nice and well paid projects. :champagne: :clinking_glasses:

Here is the final version

1 Like
6

Thanks for sharing. Love the dCam* use. It makes the scene so much more dynamic. Also, having good sound design brings it really to live! Happy new year to you too!

*There is a new version called Hype Dynamic Camera, you probably saw. It allows using multiple dynamic cameras if needed.

2 Likes
7

I love it too. As you say, it provides a wonderful dynamism.
Thanks for the new version @MaxZieb. I saw it in the last post on the 31st and am now going to look for it. :wink:

Sounds very good about multiple dynamic cameras. :smiling_face_with_three_hearts:

2 Likes
8

Awesome, thank you so much for sharing that work, quite superb! :100:

I'm curious how you did the explosion frames and if you wound up using SVG effects for stuff like the :x: or if those were done in a bitmap editor and just imported directly as images?

(Also I'm sorry to hear about your health issues but glad you're mostly mended!)

1 Like
9

Thank you very much for your words @jonathan

The truth is that I'm more used to work in bitmap than in vector and as the final presentation was in video, I made all the drawings in PNG and imported them to animate them in Hype. Also the :x:. Keep in mind that I come from traditional animation, so my quickest way out (for the moment) is to draw everything. :sweat_smile:

If I were to do it again, I think I would do it all in vector SVG, including the characters and the :x:. I would also take it out for the web instead of video to make it more immersive. For example, the explosion could be done directly in Hype creating a smoother animation. Here it would be important to have the onion paper to make the animation easier.

Since I've been working with Hype, I've learned more about the SVG format and the possibilities it offers beyond scaling without loss of quality. But I have a lot of doubts with this format, because sometimes the same file is much heavier as SVG than as PNG with transparent background. When working for video there is no problem, but it is an important aspect on the web. That puzzles me a bit and keeps me away from using complex SVGs. :roll_eyes:

I found the biggest difficulty with the animation of the :x: and the text because I had to correct, with trial/error, the position of the PNG within the group to make the animation work from right to left. It would have been much better to make the :x: with SVG directly in Hype with the line animation and apply a blur to it. I didn't think about it at the time.

The text is also in PNG. In this case the PNG weighed less than the SVG. This animation is in four languages: English, French, Spanish and Romanian. The solution I have found to make it fit without changing the animation of the laser, is:

  1. Make the texts occupy the same space.
  2. Name the PNG file the same in all languages so that Hype automatically replaces it. I save each PNG in a folder with its language ID and replace the original with the new file. I do this after exporting each video, of course.

I imagine that with JS I could make a call to each text file according to the language of the browser, but that is beyond my technical knowledge. The video solution saves me this step. :sweat_smile:

I hope to have clarified the doubts. It has been a good work to experiment with Hype and learn better solutions for new projects. :+1:

(Sorry for the long answer)

1 Like
10

Thanks for the notes on your process - very interesting!

Also I don't mean to suggest using SVG filters is necessarily the way to go, it just would not have surprised me if you had used something like that. There can be significant performance tradeoffs using SVGs in browsers, so I'd still generally recommend PNGs a lot of the time. While some SVGs are inherently more complex, sometimes editing software that isn't based around SVG's capabilities will wind up having to embed non-optimized PNG data within an SVG anyhow to achieve certain effects, and then you're not really using and SVG advantages. If your end goal is a fixed size video probably using bitmap-based software is going to be a better workflow most of the time.

The localization workflow is pretty clever. This is definitely something we'd like to make easier in the Hype app!

Thank you!

1 Like
11

Thank you very much for the recommendations.

I really think I could have made better use of the Hype tools, such as line animation, in the moments when mask animation became really difficult. Although you can also use Clip Path for that.

Another thing that is clear to me is that you have to learn how to optimize PNG files. I've already started using ImageAlpha and ImageOptim :wink:

1 Like