The NEW Build Your Own Arcade Controls

Front End Support => MaLa Frontend => Topic started by: TheShaner on July 06, 2012, 12:18:10 pm

Title: Options for animated background?
Post by: TheShaner on July 06, 2012, 12:18:10 pm

I am trying to figure out how I am going to do an animated background for my Mala frontend.  Are there any other options/approaches that work other than doing an animated gif? 

Title: Re: Options for animated background?
Post by: BadMouth on July 06, 2012, 02:29:42 pm

I tinkered with this recently.  Here are my findings (as best I recall):

Animation in Mala is limited to repeatedly scrolling a picture up, down, left, or right.
The picture must be the same size as the layout.
You can have up to 4 images moving.
Speed is adjustable.

If you want an object moving accross the bottom, you'd make an image the size of the background with the object at the bottom and the rest transparent (or any color, as Mala will make anything that is the same color as the upper leftmost pixel transparent IIRC.)

For example, if you want a UFO flying accross the top, you'd make a picture the size of your background image with a UFO at the top and the rest blank.
Then, in Mala layout editor, you'd add the animation to the elements you're including and it will put a little box in the corner.
Double click on that and you will be able to choose the path to your picture, and the direction, speed, etc.


Mala can display one GIF per playout.
It must be displayed using the Video2 window.
Add the window to your layout, double click on it, and set the path to the GIF.
This window can be resized and positioned wherever you want.
Mala will adjust the size of the GIF accordingly.
THIS DOES NOT WORK IN WINDOWS 7, AS THE ABILITY TO ANIMATE GIFs IN WINDOWS PICTURE VIEWER WAS REMOVED.

Another option is to use the Video2 window to loop a video.  :P
This window can also be resized and repositiond and Mala will adjust the video accordingly.
You could have a video the entire size of the background looping.

EDIT: Not sure about the layering implications with a video running in the background.  
I know the gamelist will stay on top of it, but not sure about other elements.

Title: Re: Options for animated background?
Post by: tapule on July 08, 2012, 03:46:00 am

The Z-Order for videos doesn't  work, so videos are always on top of the rest of objects.
If you are interested, some time ago I made a tutorial on backgrounds animations in Mala (sorry only in spanish) here (http://arcadeforever.forumfree.it/?t=59874409). This is the layout that I did in the tutorial:

ArcadeClassics - Mala Layout (http://www.youtube.com/watch?v=8NfKnuhw-2U#)

Greetings.

Title: Re: Options for animated background?
Post by: BadMouth on July 08, 2012, 08:53:24 am

Tapule, thank you for making that tutorial and posting a link to it here!  :cheers:

The videos of the other animated layouts in that thread are also amazing.
We don't see animation used very often on here.

Title: Re: Options for animated background?
Post by: harveybirdman on July 18, 2012, 12:14:04 am

tapule can you help me understand how the foreground image over snap is achieved in the MaLa themes in Lord Hiryu's post from your link, like the Final Fight characters on top of the snap?

Every time I try to do something like that the transparent portion of the image I'm trying to overlay covers things up...

I tried Google translate on your post, but obviously I'm still missing something.

Title: Re: Options for animated background?
Post by: tapule on July 18, 2012, 04:00:46 am

Haverybirdman you have to play with the z-order of your items.

Basically you have a background image with a z-order:

(http://img96.imageshack.us/img96/9376/paso1ponerfondo.th.jpg) (http://img96.imageshack.us/i/paso1ponerfondo.jpg/)

On top of this background you have to put your elements, snaps, text, etc (remember that videos don't make use of z-order and always are drawn over all items).
Finally, you have to make a image with the areas you want to overlay the background and the items, and put in a "Custom" element with transparent and move it in the z-order over everything:

(http://img204.imageshack.us/img204/1062/paso3ajustarposicioncus.th.jpg) (http://img204.imageshack.us/i/paso3ajustarposicioncus.jpg/)

And this is all, you have your overlay

(http://img709.imageshack.us/img709/4346/paso4indicarqueseatrans.th.jpg) (http://"http://img709.imageshack.us/i/paso4indicarqueseatrans.jpg/)

Hope this help you.

Greetings
PS: This is from a explanation Lord Hiryu does here: http://arcadeforever.forumfree.it/?t=53545789#entry437951570 (http://arcadeforever.forumfree.it/?t=53545789#entry437951570)

Title: Re: Options for animated background?
Post by: harveybirdman on July 18, 2012, 06:52:17 pm

Very helpful, I get what I was doing wrong now.

This is slick stuff, can't wait to try it out...

Thanks tapule!

Title: Re: Options for animated background?
Post by: mike boss on July 20, 2012, 07:25:01 am

That Final Fight layout is awesome !
Great tips in this thread.
Anything I could contribute has been said.


If anyone is looking for something custom and has given up on doing his/her own layout lemme know.

Thanks

Title: Re: Options for animated background?
Post by: chestylarue on September 03, 2012, 07:06:35 pm

Ive been using the video2 method to try and use animated gifs to take up a majority of the screen, then use a plain background with a gameslist. This should work in theory without any z-order issues as both objects are not 'touching' ( video2 and gameslist). but when i use a gif it ends up flickering all kinds if ways and ruins it (although it is animating). any chance of using an animated gif as a 'background' successfully short of converting it to a real video and using tapules method?