{"id":21,"date":"2007-05-22T08:58:00","date_gmt":"2007-05-22T13:58:00","guid":{"rendered":"http:\/\/www.theoworlds.com\/blog\/2007\/05\/creating-avatar-chat-characters.html"},"modified":"2009-02-04T16:27:13","modified_gmt":"2009-02-04T21:27:13","slug":"creating-avatar-chat-characters","status":"publish","type":"post","link":"https:\/\/www.theoworlds.com\/blog\/2007\/05\/creating-avatar-chat-characters.html","title":{"rendered":"Creating avatar chat characters"},"content":{"rendered":"<p><a href=\"http:\/\/bp3.blogger.com\/_0W9lPURnTVs\/RmgOVbX0OKI\/AAAAAAAAAEY\/ho1PWYPEwF0\/s1600-h\/demo_dress.gif\"><img decoding=\"async\" id=\"BLOGGER_PHOTO_ID_5073320741520554146\" style=\"FLOAT: left; MARGIN: 0px 10px 10px 0px; CURSOR: hand\" alt=\"\" src=\"http:\/\/bp3.blogger.com\/_0W9lPURnTVs\/RmgOVbX0OKI\/AAAAAAAAAEY\/ho1PWYPEwF0\/s400\/demo_dress.gif\" border=\"0\" \/><\/a><\/p>\n<div><a onblur=\"try {parent.deselectBloggerImageGracefully();} catch(e) {}\" href=\"http:\/\/bp0.blogger.com\/_0W9lPURnTVs\/RlL-uu-mn6I\/AAAAAAAAAD0\/gUmnPsyiafU\/s1600-h\/demo_dress.gif\"><\/a>Our artists at TheoWorlds.com just finished creating a new set of characters for <a href=\"https:\/\/www.theoworlds.com\/avatar\/\">TheoAvatar chat<\/a> &#8211; they can walk, sit and even dance. Each character&#8217;s animation is made from 32 frames with multiple matching layers of clothes. It took about 400 images to assemble each character.<\/p>\n<p>In case you are planning to create your own <a href=\"https:\/\/www.theoworlds.com\/games\/os\/\">The Office Space game<\/a> or the next Habbo-like online community, here are some tips from our animators on drawing avatar characters in isometric view:<\/p>\n<ul><\/p>\n<li>If you are trying to draw realistic human avatars with high level of details, you&#8217;ll need to <span style=\"FONT-WEIGHT: bold\">use references<\/span>. There are two options here: 3D and photography. If you choose 3D, the easiest way is to use characters libraries from Poser. If you are more comfortable with photography, you can just capture your co-workers on the camera. Just make sure they know about it. We used the latest approach as it was more fun. Doing it in 3D would, probably, be faster.<br \/>After you resize down these reference pictures, you can draw on top of them, adjusting the details on the pixel level.<\/li>\n<p><\/p>\n<li><span style=\"FONT-WEIGHT: bold\">Use minimum number of frames<\/span> to represent each animation. Try to keep your total files size small and also reduce the amount of work. To keep it as smooth as possible, make the differences between frames smaller. For example, if you draw the walking animation &#8211; try smaller steps and less arm swing.<\/li>\n<p><\/p>\n<li><span style=\"FONT-WEIGHT: bold\">Animate the characters in Flash early<\/span>. Don&#8217;t rely on animated GIFs. Moving the characters around in Flash will help you test the animation early on. You can do corrections while it&#8217;s not too late. It also helps you find the optimal animation speed.<\/li>\n<p><\/p>\n<li><span style=\"FONT-WEIGHT: bold\">Draw symmetrical characters<\/span> so you can &#8220;mirror&#8221; their animations of opposite directions. For example, our characters are moving in 8 directions, 3 of them being just &#8220;mirrored&#8221;.<\/li>\n<p><\/p>\n<li><span style=\"FONT-WEIGHT: bold\">Less is more.<\/span> If you are using multiple layers of clothes (for customizing the look) you will have to animate each of them to match the character&#8217;s animation. So more character animations you have &#8211; more clothes animation to create. It grows almost exponentially, so stand the temptation of creating a lot of &#8220;cool moves&#8221;.<\/li>\n<\/ul>\n<p>For inspiration, check devianART gallery on pixel art isometric characters:<br \/><a href=\"http:\/\/browse.deviantart.com\/digitalart\/pixelart\/characters\/iso\/?order=9&#038;alltime=yes\">http:\/\/browse.deviantart.com\/digitalart\/pixelart\/characters\/iso\/?order=9&amp;alltime=yes<\/a><\/p>\n<div style=\"TEXT-ALIGN: center\"><a onblur=\"try {parent.deselectBloggerImageGracefully();} catch(e) {}\" href=\"http:\/\/bp2.blogger.com\/_0W9lPURnTVs\/RlMH4--mn9I\/AAAAAAAAAEM\/E6pxXX6nse4\/s1600-h\/girl_dressed.gif\"><br \/><\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Our artists at TheoWorlds.com just finished creating a new set of characters for TheoAvatar chat &#8211; they can walk, sit and even dance. Each character&#8217;s animation is made from 32 frames with multiple matching layers of clothes. It took about 400 images to assemble each character. In case you are planning to create your own [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[4,19,6,23,22],"tags":[82],"class_list":{"0":"post-21","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-3d-chats","7":"category-avatars","8":"category-flash","9":"category-flash-games","10":"category-isometric","11":"tag-theo-sdk-and-theoavatar-sdk"},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.theoworlds.com\/blog\/wp-json\/wp\/v2\/posts\/21","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.theoworlds.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.theoworlds.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.theoworlds.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.theoworlds.com\/blog\/wp-json\/wp\/v2\/comments?post=21"}],"version-history":[{"count":1,"href":"https:\/\/www.theoworlds.com\/blog\/wp-json\/wp\/v2\/posts\/21\/revisions"}],"predecessor-version":[{"id":115,"href":"https:\/\/www.theoworlds.com\/blog\/wp-json\/wp\/v2\/posts\/21\/revisions\/115"}],"wp:attachment":[{"href":"https:\/\/www.theoworlds.com\/blog\/wp-json\/wp\/v2\/media?parent=21"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.theoworlds.com\/blog\/wp-json\/wp\/v2\/categories?post=21"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.theoworlds.com\/blog\/wp-json\/wp\/v2\/tags?post=21"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}