searching a program for creating multiframe-animations (timeline)

[cels]

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.

[Crow]

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)!

[surt]

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. 

[Helm]

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)

[Crow]

I totally forgot to clear the canvas before drawing, and a totally wrong setInterval delay, shows how much testing I did. 

Heh, I'm still not doing that, just when updating the settings/images. I should add it for completely transparent scrolling stuff, though, I guess.

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.

[32]

Brilliant solution Hell of a lot lighter than a .gif export, and easier to do (for us ).

[Crow]

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/

[surt]

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  ) and made it properly 2D so you can use it for horizontal and vertical scrolling: parallax2.html

Code: [Select]

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.

[surt]

Mostly refactoring: parallax3.html (source package)
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  ) so I approximated it by using a separate script for the scene description.

Code: [Select]

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.

[Crow]

Add an interface! I can't keep up