Animated images for actors, backgrounds

[GoogleCodeExporter]

I'm using your engine for a visual novel project and am really liking it so 
far, thank you so much for making it!

This isn't a 'problem' exactly, but one thing that I really wish the engine 
would let me do: 

Is there a way to use animated images for actors, backgrounds, etc? Perhaps by 
inputting the frames separately as with the "picture" form element, or allowing 
someone to put a video file or animated gif as the source picture?

Such a thing would allow actors to have a "talking" sprite where their mouth 
moves, for instance, or perhaps just animated idle poses. Having backgrounds 
with animated elements would be really cool too.

Is there already a way to do this with the current engine? If not, what are the 
chances that it could be implemented? ;)

Original issue reported on code.google.com by mew...@gmail.com on 3 Feb 2013 at 1:16

[GoogleCodeExporter]

Hi mewzii,

Thanks for trying out the engine, glad you're liking it.

Currently, there's no support for animated actors or backgrounds. But I agree, 
that would be cool! My only worry would be if there are too many big image 
frames (esp for backgrounds), the animation might look choppy. 

Tell you what, I'll keep this on my todo list. I'm a bit tied up for the next 
couple of weeks or maybe even months. Maybe you (or anybody out there) know of 
an elegant way to implement this, I appreciate all the help.  

Original comment by oclabbao on 6 Feb 2013 at 6:39

[GoogleCodeExporter]

Hi oclabbao, thanks for getting back to me!

I'm aiming to finish my project in about two months, so if anything like this 
is implemented before then, I'll see what I can do to make use of it! If I have 
some spare time I might even try implementing it myself, though my experience 
with javascript and HTML5 is limited. If I do, I'll definitely let you know if 
I accomplish anything!

For backgrounds, if the frame rate for large image animations is an issue, 
maybe there could just be a few smaller animated components positioned over top 
of the static background image (like a light flickering, or clouds floating by 
in the sky). Similar to the overlay element, but it would have to be layered 
behind the actors. Just an idea. :)

Original comment by mew...@gmail.com on 6 Feb 2013 at 7:25

[GoogleCodeExporter]

Was a bit curious how to implement this, so I went in and did a quick one. :) 
Backgounds now support animated objects!

How to use:
This is the current "scene" syntax with background objects:
scene, {src:"bg.jpg", objects:["obj1.png", x1, y1, "obj2.png", x2, y2, ...]};

By adding frames and fps to the objects, we get animated objects:
scene, {src:"bg.jpg", objects:["obj1.png", x1, y1, frames1, fps1, "obj2.png", 
x2, y2, frames2, fps2, ...]};

-  object images must be a horizontal filmstrip of sprites
-  frames is # of frames in the filmstrip. for example, if image is 256Wx16H, 
and frames=8, each sprite image is 32Wx16H
-  fps is well, frames per second.
-  old syntax without frames and fps is still supported. it just defaults to 
frames=1 and fps=0 or no animation
-  can have mix of animated and static objects in one "scene" call
-  limitations:
   - all sprites must be same size
   - constant frame rate only
   - not yet fully tested, so bug reports are welcome

To get code (vncanvas-0.4.js):
-  not yet available on download package, so please get from SVN

Next step (when I find the time):
-  animated actors 
-  maybe even animated avatars

Original comment by oclabbao on 7 Feb 2013 at 5:56

[GoogleCodeExporter]

Awesome!! I'll be testing this out soon, and will consider this functionality 
when designing my backgrounds. Thanks so much! :)

Original comment by mew...@gmail.com on 7 Feb 2013 at 7:35

[GoogleCodeExporter]

Got it working with a simple test, thanks again!

Original comment by mew...@gmail.com on 11 Feb 2013 at 5:17

[GoogleCodeExporter]

Haven't released it formally yet, but you can get these features at r38:

Animated actor sprites
Animated actor avatar

How to use:
Similar to animated background objects. Use a horizontal filmstrip of images.

actor, {id:"actorid",
        sprite:["tag", "sprite_strip", frames, fps, repetitions],
        avatar:["tag", "avatar_strip", frames, fps, repetitions],
        say:"Now I can move!"};

frames, fps, repetitions are all optional.
frames and fps are same as that of scene objects.
repetitions is the number of times the animation will loop. Say if you have a 
"speaking" animation that should stop after some repetitions. Default is -1 or 
infinite loop. 

Will release a demo of this soon with the 0.4.1 release.

Original comment by oclabbao on 20 Feb 2013 at 9:32

[GoogleCodeExporter]

Yay! Can't wait to try this one out. The repetitions thing is a smart addition. 
:)

Original comment by mew...@gmail.com on 20 Feb 2013 at 7:03

[GoogleCodeExporter]

Original comment by oclabbao on 22 May 2013 at 3:28

• Changed state: Accepted