General => General Discussion => Topic started by: Cyangmou on January 15, 2014, 10:09:56 pm
Title: searching a program for creating multiframe-animations (timeline)
Post by: Cyangmou on January 15, 2014, 10:09:56 pm
I am searching a program which is capable of composing/animating various different static frames of pixel art and save them together as a flatted gif. I mean basically a program in which you can load all your single frames and build them together and move them around without being restricted by layers.
besically this program should be capable of: -animating parallax background animations consisting out of several layers - that you have a preview for the speed and don't have to place every single frame by hand and that ity's possible to create a gif which would have about 600 frames if done by hand quite fast and automatical
-animating complex mockup scenes consisting out of various animated elements which have different appearing & disappering times and also can move independendly from each other. Means that you have a timeline overview for sprites and can manipulate them quite easily.
Does anyone know of a program capable of this? The program must be compatible for pixel art (means pixel-exact placement, png, gif, bmp support) and a plus would be if it's quite intuitive to learn.
Title: Re: searching a program for creating multiframe-animations (timeline)
Post by: Helm on January 15, 2014, 11:10:19 pm
I'd be interested as well, but sadly I think what you're looking for is Flash, in the bare level. Or game maker with some basic coding.
Title: Re: searching a program for creating multiframe-animations (timeline)
Post by: ptoing on January 15, 2014, 11:49:51 pm
You can partly kinda do this in PS as well I think, not sure tho.
Title: Re: searching a program for creating multiframe-animations (timeline)
Post by: Ai on January 16, 2014, 12:28:56 am
As far as I know, GIMP-GAP does all of that, except for having a visible timeline. Here's a little test anim I put together in 5min to confirm this:
(http://i.imgur.com/rF4rIQo.gif)
(NPA bg, FWIW; just indexized to 6colors so you can see it's moving at pixel increments rather than subpixel.)
Both of the movements here (the 'test' and the BG) were done using 'move path' GIMP-GAP command.
You can use an animation as source for the move-path, but I haven't bothered to demo that here.
Synfig with AA turned off may also work for this (and it has a keyframe/timeline display). But I haven't tested it.
Title: Re: searching a program for creating multiframe-animations (timeline)
Post by: PixelPiledriver on January 16, 2014, 01:16:28 am
Flash and After Effects are both object based and have really good timelines. Flash being bit simpler to learn than AE I'd say. You can fill objects with frames of animation and then let them loop independently from their internal timeline or choose the frame you want to show. I used to get paid to make Flash animations for Facebook games and other stuff. But haven't used it in years. And I've never tried it with pixel art.
Title: Re: searching a program for creating multiframe-animations (timeline)
Post by: Mr. Fahrenheit on January 16, 2014, 01:59:45 am
Yeah I was going to ask if it worked with pixel art, I've never seen it used that way, but I have no knowledge of flash. That would be cool though.
Title: Re: searching a program for creating multiframe-animations (timeline)
Post by: PixelPiledriver on January 16, 2014, 02:06:49 am
I'm running some tests on it now. Seems to work fine so far, but not done yet. Here's a stupid example. Pixels and colors are intact. 300 frames, 1 layer, 2 animation objects, shared tweened position animation. (http://4.bp.blogspot.com/-qbo_GCrUSuU/UtdI85YTTMI/AAAAAAAAI18/D5dvoNzHwE8/s1600/DudesAndPorcupines.gif)
Flash uses a nesting structure. Putting this together went something like this. (http://3.bp.blogspot.com/-E8UeQdbF_zo/UtdbQfk3UQI/AAAAAAAAI2I/tlo1e-Xb0cU/s1600/FlashPixelAnimationFlowChart.png)
This was actually pretty easy to put together. Took me some time to remember the interface. Flash is pretty terrible without proper hotkeys for manipulating the timeline, the default keys are not very friendly. Once you get those setup it is pretty smooth. Swapping objects and frames is useful.
The only thing that really bothered me is the the position tween measured out the spacing with 3 frames forward and 1 frame stopped to meet the destination at the correct time. But that is to be expected with a timeline and 1 pixel bumps. You can always break down tweens into frames and then adjust them by hand if it really matters.
Here's another with the Scene object layered over itself at different times. (http://4.bp.blogspot.com/-ZkTMOBvJ2Ow/UtdpIMrPXXI/AAAAAAAAI2w/ajKo4G8sMhM/s1600/DudesAndPorcupines2.gif)
Was fun and seems to work fine. I might try to put together something more complex. Also I could put together a guide at some point if you guys are interested but will take some time.
Quote
and move them around without being restricted by layers.
What exactly do you mean by this?
Title: Re: searching a program for creating multiframe-animations (timeline)
Post by: yrizoud on January 16, 2014, 09:38:59 am
Pixeditor may evolve to do this. At the moment you need to manually shift frames one by one, I hope z-uo will implement a menu where you can select "Move by x+120/y+0 over 30 frames" and it performs the change. https://github.com/z-uo/pixeditor (https://github.com/z-uo/pixeditor)
Title: Re: searching a program for creating multiframe-animations (timeline)
Post by: Mathias on January 17, 2014, 03:44:40 pm
I'd definitely go with Flash. It's more than capable for the task. And you'd only be using its most basic functions. Flash has had the functionality you need well before Adobe even bought it.
Title: Re: searching a program for creating multiframe-animations (timeline)
Post by: Cyangmou on January 17, 2014, 04:06:03 pm
Hmm Yeah, seems like I have to give Flash a go.
Title: Re: searching a program for creating multiframe-animations (timeline)
Post by: Probo on January 17, 2014, 07:28:47 pm
as Helm mentioned, Game maker could be used. ive used it for scrolling mockups like this one a while back - http://www.youtube.com/watch?v=wcVg32DGM_E
the scrolling couldnt be easier, you set backgrounds, their relative depth and what speed they go at, in the GUI. no coding. although you can code for more control ( i coded stop/start times for the scrolling and also if memory serves me right you can make them move at strange speeds in code). you can also set them to horizontally and/or vertically tile in the GUI, so they wrap around seamlessly and repeat themselves. There is a limit (5? i think) on how many backgrounds you can have in the free version. you could get around that by coding sprites to move and act as backgrounds though.
timing-wise making stuff disappear and reappear at certain times etc, is all easily done with alarms, which counts progress in frames. and a lot of the programming could be done using the drag and drop interface instead, which is easy to use. easy to code too though when you get a hang of it, and you get lots more control.
Title: Re: searching a program for creating multiframe-animations (timeline)
Post by: tim on January 17, 2014, 09:50:12 pm
As a VFX / motion designer guy, I would say the best solution is After Effects obviously. It's by far the most powerful tool for any video maker, it's the photoshop of video basically, and the interface is extremely easy to understand once you get the basic (importing & rendering). I might do a video tutorial just for you guys if you're really asking for it, because right now I'm making the trailer of my game, Behind Nowhere, in After Effects to simulate the final result (the engine is not ready yet).
Title: Re: searching a program for creating multiframe-animations (timeline)
Post by: Helm on January 18, 2014, 11:03:15 am
tim, if you can whip up a tutorial for making endless scrolling showcases of stuff, I'd be really interested, yes.
Title: Re: searching a program for creating multiframe-animations (timeline)
Post by: Cyangmou on January 18, 2014, 11:27:35 am
As a VFX / motion designer guy, I would say the best solution is After Effects obviously. It's by far the most powerful tool for any video maker, it's the photoshop of video basically, and the interface is extremely easy to understand once you get the basic (importing & rendering). I might do a video tutorial just for you guys if you're really asking for it, because right now I'm making the trailer of my game, Behind Nowhere, in After Effects to simulate the final result (the engine is not ready yet).
Oh wow, that would be f****** great :crazy:
Title: Re: searching a program for creating multiframe-animations (timeline)
Post by: 32 on January 18, 2014, 11:55:51 am
I've been looking into doing something like this lately. Definitely recommend After Effects, considerably less frustrating than Flash once you've got the basics down. Looping and switching out animations is a bit trickier but everything else makes up for it.
If Tim doesn't get around to doing a tutorial I could probably put something together, I'm pretty much winging it though so I'd wait up for his :blind:. It's all pretty straight forward though, I wouldn't hesitate to do some basic googling and dive into it. Only slightly tricky thing was getting the pixels to line up with the grid properly, which just requires you to split up the position values and add a rounding expression ( Math.round(Value) ) to each.
Title: Re: searching a program for creating multiframe-animations (timeline)
Post by: tim on January 18, 2014, 05:11:57 pm
Ok I'll buy a micro Monday & record something. Looping animations & scrolling are a bit tricky but with a tutorial you'll be setup in no time.
Helm, why do you mean by "endless scrolling showcases of stuff" ? Endless scrolling is fairly easy to achieve, but I don't understand the "showcases of stuff" part ?
Title: Re: searching a program for creating multiframe-animations (timeline)
Post by: Helm on January 18, 2014, 07:53:58 pm
I just like making parallax backgrounds and would like to show them to people in a video, that's all it is.
Title: Re: searching a program for creating multiframe-animations (timeline)
Post by: tim on January 18, 2014, 08:19:41 pm
Oh yeah =) There are so many options to do it (just like Photoshop), I'll have to think about the easiest way to show you instead of the best for now (which may require some 3D knowledge + plugins).
Title: Re: searching a program for creating multiframe-animations (timeline)
Post by: surt on January 19, 2014, 02:41:18 am
I just like making parallax backgrounds and would like to show them to people in a video, that's all it is.
This kind of thing can be done quite easily on a HTML5 canvas (take a simple multi-layer tilemap from user editable JSON file, plus tiles in a image or few) and quite shareable as you can just chuck it in a webpage. Just need to find someone not so motivationally challenged as myself :'( (I've been meaning to do this forever).
Title: Re: searching a program for creating multiframe-animations (timeline)
Post by: PixelPiledriver on January 19, 2014, 04:05:45 am
Alright I took an image I did a few weeks ago and made a little animation of it.
Flash CS3 399 frames 5 delays Tiles are 1 color + Black and do not touch edges of each tile All character animations are nested into the town. Backdrop scrolls and carries all of them. This is cool because you can work each characters animation and see all of them animate together when you go up a timeline. The loop is created by having another instance of the town to the right of the main town, that way it replaces the orginal position at the end. 1 frame is dropped so that the first and last frame are not the same, thus its a 400 frame animation -1 = 399. Main dude doesn't actually move, except up and down, he just runs and place as the nested object scrolls behind him. Measured out all the tweens so that there is no jittering. Used 8x8 grid for almost all movements except some of the y-axis stuff and birds. Didnt do parallaxing but gonna add that in. I think that flash works well for this sort of thing. Looping and choosing animations is easy, nesting is usually straight forward to implement and navigate. All in all went fairly smooth and was fun to make. I'm gonna try to do some more of these with different ideas.
Apparently my basic math skills are terrible. :blind: There was in jitter in the scrolling as he walks down the first hill just before the lamp post. I fixed it by setting the town to finish scrolling at frame 401 and the main timeline at 400. Then checked each frame in graphics gale to make sure each frame scrolls 2 pixels. Here's the fixed version. (http://1.bp.blogspot.com/-6SfxnxrV8EE/UtxgWWAmWOI/AAAAAAAAI7E/5Y7b_H6ehWk/s1600/DudeGoesforaWalk_2.gif)
Title: Re: searching a program for creating multiframe-animations (timeline)
Post by: 32 on January 25, 2014, 04:49:47 pm
Okay so I got around to putting this together. It's far from comprehensive and definitely NOT the best way to do it. But it is probably the simplest start to finish without having to learn too much new stuff. The way I'm going to do this is to just introduce the interface and explain some basics and then I'll run through a few tutorials.
(http://i157.photobucket.com/albums/t42/The_32nd_day/PanTut1_zps12881b37.png) This is the main Workspace in After Effects. Like all Adobe products it is completely customisable so yours probably won't look exactly like this when you start it up. The main things you'll want to be aware of for this are the project window (1) the new composition button (2) and the timeline (3).
The project window is where you'll want to drag (or right click > import) all of the resources you're using.
The new composition button is used to create compositions which are kind of like groups in Photoshop.
(http://i157.photobucket.com/albums/t42/The_32nd_day/PanTut3_zpscd29eaae.png) This is the composition settings window which you'll get when you create a new composition or right click and existing composition and go to composition settings. All of the settings should be pretty straight forward, you'll want resolution set to full unlike mine. If you're unfamiliar with timecodes it's simply H:MM:SS:FF where FF is frames in a second and dependant on the frame rate.
(http://i157.photobucket.com/albums/t42/The_32nd_day/PanTut5_zpsf0742183.png) The timeline works pretty much like a layers menu. When you expand a layer you'll see its transformation properties which allow you to manipulate the layer and animate them if keyframing is enabled (click the stopwatch)
Labelled 1 is the new keyframe button, when you click this you'll add a new keyframe to the timeline wherever the current time indicator (red line) is. Labelled 2 and 3 are keyframes. Make sure whenever you're editing that you are aware of which is selected, if you select multiple at once you will edit the values for all of them.
1. Go into your preferred image editor and get all your background layers and multiply them horizontally, the faster you want it to move the more times you need to do this. So in mine the back layer is duplicated twice and the front layer is duplicated four times. Once again not the best way to do this, could easily be done in After Effects with a little more work.
2. Import all of your images into the project window and then create a new composition with the properties for the final animation.
3. Inside the new composition drop in all of the layers that will be in use.
4. Each layer individually; Expand them and find 'position' in the transformation properties. Right click on 'position' and click 'Separate Dimensions.' Now alt+left click on the stopwatch beside each value. This should add an expression to the property (you may need to expand the property to see it.) Add the expression “Math.round(value)” (without quotes and case sensitive) to both the x and y values. This will ensure that the layers can only move in one pixel increments and keep everything crisp.
5. Each moving layer; go to the first frame in the time line and add a keyframe to the x dimension, drag the image completely to the left (assuming we are moving right.) Now create another keyframe at the end of the timeline and drag the image completely to the right. It should now loop (there will be a jitter when it loops which can be taken care of simply by deleting the last frame after export).
This method of scrolling will take a little more advantage of the expressions in After Effects and not require any key framing.
1. Follow steps 1-3 in the Scrolling tutorial above.
2. Separate the position values on your moving layers and add an expression to the dimension which it will be scrolling.
3. Add the expression a/2-b*(time*c)
The idea here is that a is the width of your image(this will position it initially at the edge of the frame) b will determine how many pixels it scrolls each frame and c is the framerate of your composition (time is read out in seconds). You will have to manually replace the variables (though I imagine there is a way to have After Effects grab them which I will look in to)
If you want this to loop endlessly you will have to set your composition duration to last for the exactly correct number of frames, so if your image is 320 pixels wide, the image moves at 1 pixel per frame and the frame rate is 24 fps then you will want the duration to be 13 seconds and 8 frames (320/24)
(http://i157.photobucket.com/albums/t42/The_32nd_day/PanTut4_zpsfd4a776f.png) If your image isn't maintaining its transparency for whatever reason consider using the built in keying features. Colour key is probably the most straight forward for pixel art. To access this select the layer you want to add transparency to and add an effect either from the effect menu or by right clicking in the effect window.
(http://i157.photobucket.com/albums/t42/The_32nd_day/PanTut2_zps16a886e5.png) If you have an animation loop you want to play you'll need to create a pre-compostion by dragging the animation .gif onto the new composition button. Make this as long as your main composition for simplicity. Make sure to pay attention to the frame rate.
It is then simply a matter of duplicating the animation in the time line (ctrl+D) and making each line up with the previous as you see in my example.
To export simply go to file > export > add to render queue while in your main composition. This will bring up a new tab in the timeline window where you can specify your export settings. Once you have them correct just hit render.
To avoid a jutter in an infinitely scrolling animation export as a PNG sequence and delete the last frame and then import the sequence back into the editor of your choice. If you do this consider that looping animations will also have a frame cut off, if anyone needs help solving that particular conundrum just let me know.
Well hopefully that helps someone out. If anyone needs some help with something I didn't cover or clarification with it don't hesitate to ask. Like I said, not the most elegant solution but it definitely works. Here's (https://dl.dropboxusercontent.com/u/104524033/TutorialExample.gif) what the export looked like if anyone is interested, not exactly usable as is but the general idea is sound.
Title: Help with scrolling animation (GIMP or other freeware)
Post by: cels on January 26, 2014, 06:47:01 pm
Hey guys, I have a rather unusual piece of pixelart I've been working on. It's 1400 x 140 pixels. And I want to turn it into an looping animation, 224 x 140 pixels, by basically panning / scrolling sideways. Previously, I've done stuff like this manually by chopping up each frame in MS Paint, converting it to a .gif and feeding it to Microsoft Gif animator. But when it's 1400 pixels wide, and I don't want to make it too choppy... well, that's a lot of frames. That's a lot of back of forth between MS Paint, GIMP and Microsoft GIF animator.
Does anyone have a good tutorial to recommend, or perhaps an explanation of how to proceed?
Help me Obi Wan Pixelfans. You're my only hopes.
Title: Re: searching a program for creating multiframe-animations (timeline)
Post by: 32 on January 27, 2014, 03:21:16 am
What software do you have access to? If you can use After effects then my Tutorial just above would be perfect. I believe you can use photoshop to do something similar (look up keyframe animation in photoshop.) Or obviously Flash as PPD has demonstrated. If Adobe is out the window there are a plenty of programs out there with the functionality.
Title: Re: searching a program for creating multiframe-animations (timeline)
Post by: cels on January 27, 2014, 07:24:47 am
Oh, someone merged the threads. Well, I've already figured out how to use GIMP GAP to do the job. Something like 2-3 hours of googling, watching YouTube videos, reading on forums, blogs and websites... to do a job that ultimately took me 5 minutes to carry out.
But it's nice to have the knowledge, I suppose.
Thanks for responding though. I wanted to try out GIMP first since I already had the software installed, but otherwise I would have looked at your tutorial for sure.
Title: Re: searching a program for creating multiframe-animations (timeline)
Post by: 32 on January 28, 2014, 02:48:35 am
Oh I see :crazy:. Glad it worked out for you. Maybe you could link to anything you found particularly useful for others in this thread?
I've thought of another way of doing scrolling entirely with expressions in After Effects which might be easier for some people if they're more mathematically inclined. It should also lead to more "perfect" scrolling. I'll update my previous post with a tutorial shortly.
Title: Re: searching a program for creating multiframe-animations (timeline)
Post by: Ai on January 28, 2014, 10:03:55 am
cels' earlier PM inspired me to make a full tutorial for scrolling a simple background using GIMP-GAP.
Simple Scrolling Background with GIMP-GAP (http://finticemo.tumblr.com/post/74820118718/simple-scrolling-background-with-gimp-gap-this)
Minor variations can be applied to create parallax, looping scrolling, pauses in scrolling, etc. Less minor modifications can be applied to put something like a moving character in (I'll probably do a tutorial on that too, if only for self-education purposes)
Result image is in the linked post (not posted directly here because it's a large scrolling image, even after heavy color reduction it is 1.5mb.)
Title: Re: searching a program for creating multiframe-animations (timeline)
Post by: surt on January 29, 2014, 11:01:53 am
I got a little unlazy and hacked together a minimal HTML canvas parallax example (with epic arts): parallax.html (http://img.uninhabitant.com/parallax/parallax.html) To use just download the HTML file and edit the following:
var layers = [ {file:'back.png', step:0}, {file:'far.png', step:-1/8}, {file:'mid.png', step:-1/2}, {file:'near.png', step:-2}, ];Put your layers here, as many as you need. file is obviously path to the image file. step is the number of pixels the layer gets shifted each frame.
I'll do more work on it if there's interest. Looks like it might be possible to save out a PNG sequence.
Title: Re: searching a program for creating multiframe-animations (timeline)
Post by: RAV on January 29, 2014, 12:06:12 pm
Surt, never came around telling you, but I like your wits and competence. You are doing good work. I like your random sprite generator for pixelart. (it adds to pixelart inspirationally, alongside the fantastic wealth of custom content there already is anyway)
When I look around here, there are good tutorials for semi-serious use, but I think there is still need for a quicker and simpler case of proto-use; web-based, platform agnostic, open standard. For this reason you should try and summon the motivation elaborating this tool some more towards this end, decidedly not trying to "replace" AfterEffects in the high end.
-----------
PixelPileDriver, I already noticed you are unusually thorough and qualified in your helpfulness. That animation you made looks very fun, and is a good example for the potential of even simple elements when set in scene with artistic intent.
-----------
AI, you are also very reliable in a variety of technical advice and support.
Title: Re: searching a program for creating multiframe-animations (timeline)
Post by: Crow on January 29, 2014, 04:33:40 pm
I got a little unlazy and hacked together a minimal HTML canvas parallax example (with epic arts): parallax.html (http://img.uninhabitant.com/parallax/parallax.html)
This is cool. I hope you don't mind me hijacking it and improving upon: http://erdbeermil.ch/parallax/ Test away! Can't modify the settings without adding your own images, however.
Edit: Just noticed that it doesn't exactly work (well) without Opera (12.16) :huh: I'll fix that.. Edit²: Should work.
Title: Re: searching a program for creating multiframe-animations (timeline)
Post by: Cyangmou on January 29, 2014, 05:33:31 pm
that parallax thingy is cool, how to exactly upload files? Do they need a special name or something?
Title: Re: searching a program for creating multiframe-animations (timeline)
Post by: cels on January 29, 2014, 05:38:26 pm
I was actually going to do a quick GIMP GAP tutorial since 32 suggested it, but I'm glad you did one instead, Ai, as yours was much better than mine would have been.
Title: Re: searching a program for creating multiframe-animations (timeline)
Post by: Crow on January 29, 2014, 05:53:35 pm
that parallax thingy is cool, how to exactly upload files? Do they need a special name or something?
Just select a file, add more if necessary, and hit "Apply". The files won't be uploaded anywhere. Also, don't forget to fill in the step (pixels per frame)!
Title: Re: searching a program for creating multiframe-animations (timeline)
Post by: surt on January 29, 2014, 07:16:44 pm
This is cool. I hope you don't mind me hijacking it and improving upon: http://erdbeermil.ch/parallax/
Not at all, that's what WTFPL is for. A user interface is always handy. I totally forgot to clear the canvas before drawing, and a totally wrong setInterval delay, shows how much testing I did. :P
Title: Re: searching a program for creating multiframe-animations (timeline)
Post by: Helm on January 29, 2014, 08:46:48 pm
That's awesome! Can I also ask for support for animated .gif files instead of just pngs? So you can have something scroll *while* it's also animating (or for top layer that might be stationary and animation, whatever)
Title: Re: searching a program for creating multiframe-animations (timeline)
Post by: Crow on January 29, 2014, 09:39:06 pm
That's awesome! Can I also ask for support for animated .gif files instead of just pngs? So you can have something scroll *while* it's also animating (or for top layer that might be stationary and animation, whatever)
Animated GIFs on a canvas are tricky. I'll give it a try, but I can't promise anything.
Title: Re: searching a program for creating multiframe-animations (timeline)
Post by: 32 on January 30, 2014, 12:20:36 am
Brilliant solution :y: Hell of a lot lighter than a .gif export, and easier to do (for us :crazy:).
Title: Re: searching a program for creating multiframe-animations (timeline)
Post by: Crow on January 30, 2014, 12:10:16 pm
Okay, clearing the canvas on every step now, so you can also create stuff with transparent background without it looking weird. No GIF support yet, but you can now generate an animated GIF from the canvas. Wohoo \o/ Careful though, this is painfully slow, since it's all done via JavaScript. Images with a "large" (bigger than 320x240 pixels) size and/or many layers take ages, since it will try to create a seamless animation. The demo animation alone would require 2560 frames or something like that. Don't even try generating a GIF from that. Once it's done, it'll create a link to the GIF (data URI); I suggest right-clicking it and saving it from there. Also, use Chrome/a Webkit based browser or Firefox when doing this. Opera (<= 12.16) is slow, IE doesn't get it at all. Enjoy~
http://erdbeermil.ch/parallax/
Title: Re: searching a program for creating multiframe-animations (timeline)
Post by: surt on January 30, 2014, 07:35:13 pm
Adding an animating GIF to a canvas is hard, but adding basic animation from a spritesheet is easy.
Just added very simple frame based animation to mine (with hideously naive sequence search :crazy:) and made it properly 2D so you can use it for horizontal and vertical scrolling: parallax2.html (http://img.uninhabitant.com/parallax/parallax2.html)
var layers = [ {file:'back.png', step:[0, 0]}, {file:'far.png', step:[-1/8, 0], wrap:[true, false]}, {file:'mid.png', step:[-1/2, 0], wrap:[true, false]}, {file:'near.png', step:[-1, 0], wrap:[true, false]}, {file:'char.png', step:[0, 0], position:[140, 160], frames:3, sequence:[[0, 5], [1, 5], [2, 5], [1, 5]]}, {file:'snow.png', step:[-1, 1], wrap:[true, true]}, ]; step is now a 2d vector (x, y) wrap specifies layer wrapping along each axis (x, y) (defaults to [false, false] if omitted) position specifies the placement of the top-left corner of the layer (defaults to [0, 0] if omitted) frames is the number of frames in the spritesheet sequence is an array of frame number, duration (in ticks) pairs.
ATM the sprite sheet should be laid out horizontally with each frame equally sized and no padding. Each frame is the height of the full image and the width of the image divided by number of frames.
Title: Re: searching a program for creating multiframe-animations (timeline)
Post by: surt on February 02, 2014, 08:29:02 am
Mostly refactoring: parallax3.html (http://img.uninhabitant.com/parallax/parallax3.html) (source package (http://img.uninhabitant.com/parallax/parallax.tar.gz)) Properishly objectified it so now you can (probably) have multiple views on a page and changed to a separate internal scene representation so you can (probably) have multiple views using the same scene description. Doesn't look possible to load a JSON without a webserver (stupid security bollocks :yell:) so I approximated it by using a separate script for the scene description.
var scene = { framerate:30, viewport: { width:320, height:240, zoom:2, }, images: [ {id:'Back', image:'back.png'}, {id:'Snow', image:'snow.png'}, {id:'Char', image:'char.png'}, ], tilesets: [ {id:'Char', image:2, size:{width:3, height:1}, tilesize:{width:64, height:64}, tileorigin:{x:32, y:64}}, ], layers: [ {type:'image', image:0, step:{x:0, y:0}, position:{x:160, y:240}, origin:{x:160, y:240}}, {type:'image', image:'far.png', step:{x:-1/8, y:0}, wrap:{horizontal:true, vertical:false}}, {type:'image', id:'Mid', image:'mid.png', step:{x:-1/2, y:0}, wrap:{horizontal:true, vertical:false}}, {type:'image', image:'near.png', step:{x:-1, y:0}, wrap:{horizontal:true, vertical:false}}, {type:'tile', tileset:'Char', step:{x:0, y:0}, position:{x:140, y:160}, sequence:[[0, 10], [1, 5], [2, 5], [1, 5], [0, 10], [null, 20]]}, {type:'image', image:'Snow', step:{x:-1, y:1}, wrap:{horizontal:true, vertical:true}}, ], };You can now predefine images/tilesets in an list with an id which you can use to reference it in another object. Or you can reference it by the index in the list. Sequences can have empty frames with index as null.
Title: Re: searching a program for creating multiframe-animations (timeline)
Post by: Crow on February 02, 2014, 10:31:52 am
Add an interface! I can't keep up :P
Title: Re: searching a program for creating multiframe-animations (timeline)
Post by: surt on February 05, 2014, 09:46:58 am
More refactoring and basic tilemaps: parallax3.html (http://img.uninhabitant.com/parallax/parallax3.html) (source package (http://img.uninhabitant.com/parallax/parallax.tar.gz))
Title: Re: searching a program for creating multiframe-animations (timeline)
Post by: Crow on February 05, 2014, 09:52:27 am
Create a project for this on GitHub or elsewhere and I'll join your efforts occasionally. That should be more productive.
Title: Re: searching a program for creating multiframe-animations (timeline)
Post by: surt on February 05, 2014, 10:22:00 am
Eh... Here it is (https://github.com/not-surt/parallax). I'll probably be too lazy to update it very often unless I start using an IDE with better git integration than geany.
Title: Re: searching a program for creating multiframe-animations (timeline)
Post by: tim on February 05, 2014, 01:02:20 pm
Hey guys, would you need the advanced After Effects tutorial really soon for your projects ?
Because with some time and the trailer coming soon for Behind Nowhere, the best thing I can do is some kind of "making of" of the trailer and show how to animate complex scenes, animate on paths, loop sprites and sequence them, etc… in After Effects. It would be much more interesting than a boring "import that, move the layer to right, render" like I proposed at the beginning.
Title: Re: searching a program for creating multiframe-animations (timeline)
Post by: Crow on February 05, 2014, 01:07:11 pm
Eh... Here it is (https://github.com/not-surt/parallax). I'll probably be too lazy to update it very often unless I start using an IDE with better git integration than geany.
Screw the Git integration in the IDE of your choice, then, and use SourceTree (http://www.sourcetreeapp.com/) (if you're on Windows or Mac; not sure about good Linux options; I personally just use the command line on Linux).
Title: Re: searching a program for creating multiframe-animations (timeline)
Post by: Ai on February 05, 2014, 02:17:20 pm
^ git-cola's pretty good, and AFAIK yes, surt does mainly/only run Linux. I really don't use it much anymore though, it's good for complex stuff occasionally,but like you Crow, I just use the CLI.