Implementing animated characters

Questions, skill improvement, and respectful critique involving art assets.
Post Reply
Message
Author
User avatar
fundogmo
Newbie
Posts: 18
Joined: Thu Feb 19, 2015 12:24 am
Projects: Wingin' In: Love Can Be Such a Dragon
Tumblr: boxofsquids
Location: NYC
Contact:

Implementing animated characters

#1 Post by fundogmo »

Hello!

I'm part of a small team of artists currently beginning to build assets for a project we're really excited about, and we were wondering if it was "easy" to make animated characters, using the ATL code.

We were hoping for something along the lines of this
Image
(I apologize for this being giant)

...somewhere ideally, within the 12-24 frame range for a loop, at 12fps. Add in multiple characters, and I can only imagine there might be some memory issues?

I haven't delved too deeply into tutorials and documentation into the code, but I was wondering if anyone here had any experience, or at least knew of a ren'py game that made use of animated characters.

I didn't know if it was better to ask that question here on the general questions board, but I figured someone here might be more likely to have hands on experience with it, or can say why it wasn't worth pursuing for them.

Additionally as a really quick question, I've seen people suggest that 800x600 is 'good enough' for a first time game, and even mighty Katawa Shoujo defaults to that resolution, but is there an obvious reason it's not recommended to bump that up just a little bit?

Thanks a lot! I hope to post about the game in the WIP section soon!

SundownKid
Lemma-Class Veteran
Posts: 2299
Joined: Mon Feb 06, 2012 9:50 pm
Completed: Icebound, Selenon Rising Ep. 1-2
Projects: Selenon Rising Ep. 3-4
Organization: Fastermind Games
Deviantart: sundownkid
Location: NYC
Contact:

Re: Implementing animated characters

#2 Post by SundownKid »

You should be able to increase the resolution (to say 720p, or 768p, or 1080p) with no problems. There is even a way to make the resolution selectable so you can have several windowed resolutions.

Making an animation is pretty simple with ATL. However, it is probably best if you did something like this to make it sync up to text: http://www.renpy.org/wiki/renpy/doc/coo ... d_Lip_Flap

User avatar
fundogmo
Newbie
Posts: 18
Joined: Thu Feb 19, 2015 12:24 am
Projects: Wingin' In: Love Can Be Such a Dragon
Tumblr: boxofsquids
Location: NYC
Contact:

Re: Implementing animated characters

#3 Post by fundogmo »

That's excellent news!

Just to double check - other than blink/talk cycles, using ATL it should also be pretty simple to do something similar to Phoenix Wright/999 and have a character animate into a pose they end up holding?

Easy to makesomething like this, with the last frame going into a blink/talk cycle?
Image

User avatar
MetaFrosty
Newbie
Posts: 14
Joined: Sun Sep 22, 2013 11:00 am
Contact:

Re: Implementing animated characters

#4 Post by MetaFrosty »

Yes, with ATL you're essentially defining the animation once and then you can call it up at any time. This includes within other ATL animations, which is what you're looking for.
First you want to define your lip sync animation, so for example;

Code: Select all

image character lip sync:
    "mouth open.png"
    pause 0.3
    "mouth closed.png" 
    pause 0.2
    repeat
Next you'll define your actual animation, but the useful thing is that you can use "character lip sync" within it. So it'll look something like this;

Code: Select all

image character angry:
    "frame 1.png"
    pause 0.1
    "frame 2.png"
    pause 0.1
    "frame 3.png"
    pause 0.1
    "character lip sync"
By not putting a repeat at the end, the sprite will remain on the lip sync without replaying the rest of the animation. Obviously, increase the complexity of the animation as much as you need to for blinks or whatever.

By the way, using a full image for each frame of an animation will drastically increase your filesize. It's not so much a problem for a small project but I'd like to show you an alternate method that takes this concept and runs with it; live composites. Even if you don't need it, I figure it might help out someone who stumbles across this thread looking for a solution.
With a livecomposite you can build a sprite from individual pieces and only change what you need to.
Here's one of mine, for example.

Code: Select all

image mizue happy oo 1 = LiveComposite((492, 720), (0, 0), "mizue rarm3", (0, 0), "mizue base", (0, 0), "mizue larm3", (0, 0), "mizue happy eo", (0, 0), WhileSpeaking("Mi", "mizue happy mf", "mizue happy mo"), (0, 0), "mizue hair",)
Mizue's sprite has three different arm poses and a number of different expressions, each with a variant for an open mouth. To easily switch between these without having to type out the whole thing, I'm using a system of "Name-expression-eyes and mouth-arms", so if I want to change to different expression, but keep the arms and the status of her eyes and mouth the same, all I need to do is type "Mizue sad". However, the downside to this is that I need a line of code for every possible state, so the more variables you add (if you wanted to have interchangeable outfits, for example), the more lines of code you need. It's not difficult to copy paste and change what needs changing so long as you keep it organized, it's just a lot of busywork.
For the livecomposite itself, first is the size of the overall sprite. You'll want to save all the different layers with the same dimensions, even it's just transparent space. Each layer should have the co-ordinates (0, 0) unless you didn't save them in the same dimensions as the base.
For each expression I defined it like this beforehand.

Code: Select all

image mizue happy eo:                                                   #Open happy eyes
    "character/mizue/mizue happy eyes open.png"  
    pause 5.0     
    "character/mizue/mizue happy eyes closed.png" 
    pause 0.1
    repeat
image mizue happy ec = "character/mizue/mizue happy eyes closed.png"    #Closed happy eyes
image mizue happy mo = "character/mizue/mizue happy mouth open.png"     #Open mouth
image mizue happy mc = "character/mizue/mizue happy mouth closed.png"   #Closed mouth
image mizue happy mf:
    "character/mizue/mizue happy mouth open.png"
    pause 0.3
    "character/mizue/mizue happy mouth closed.png" 
    pause 0.2
    repeat
Then they can simply be plugged into the livecomposite with no hassle. The WhileSpeaking part is a little more complicated (you'll want to see the link that SundownKid posted) but essentially while "Mi" is speaking, it shows the mouthflap variant. If "Mi" isn't speaking then it shows the static mouth.

For more complicated animations like the one above, I don't imagine this would be too useful (you can plug a livecomposite back into another animation though), but for a simpler one like in your original post you could cut down on the filesize with this method.
This is just how I do it though and I'm not that experienced with coding so if anyone wants to point out something I'm doing wrong then please do.
Hope this helps anyway!

User avatar
fundogmo
Newbie
Posts: 18
Joined: Thu Feb 19, 2015 12:24 am
Projects: Wingin' In: Love Can Be Such a Dragon
Tumblr: boxofsquids
Location: NYC
Contact:

Re: Implementing animated characters

#5 Post by fundogmo »

I am phenomenally grateful for such a comprehensive answer. That first batch of code is absolutely the implementation is hoping for with the second gif, and very encouraging with what I hope to do.

The live composite method seems like it would be a godsend if I have three characters on screen, all overacting their hearts out at a high resolution, and it slows the engine to a crawl and throws off the timing on lower end computers. I wonder if in the case of the second gif, if I could define a relatively larger "box" that encompasses both the face and the hand, and if limiting the unique frames to that smaller area instead of the whole sprite will make a significant difference to performance.

I feel like I can use this code almost verbatim, with the help of sundowns link, and it should cover 90% of my demands.

Thank you very much. I truly hope someone else stumbles on this thread if they're trying to implent the same ambition.

User avatar
Arowana
Miko-Class Veteran
Posts: 531
Joined: Thu May 31, 2012 11:17 pm
Completed: a2 ~a due~
Projects: AXIOM.01, The Pirate Mermaid
Organization: Variable X, Navigame
Tumblr: navigame-media
itch: navigame
Contact:

Re: Implementing animated characters

#6 Post by Arowana »

You might also want to check out the Portrait System that Tayruu posted in the Cookbook. It seems really close to what you're looking for, and they've even provided a sample project and code.

(that character is adorable, btw :D)
Complete: a2 ~a due~ (music, language, love)
In progress: The Pirate Mermaid (fairytale otome)
On hold: AXIOM.01 (girl detective game)

Image

Post Reply

Who is online

Users browsing this forum: No registered users