2015年5月16日 星期六

The making of Tabatha Veazie - Animated 2D portrait - part 5 _ Tabatha Veazie幕後製作 - 動態2D肖像 - part 5


資料來源:

The making of Tabatha Veazie - Animated 2D portrait  Blog

Herald FB

Herald Game

Herald - An Interactive Period Drama 募資頁面


The last two days have been spent doing the mouth, setting the Y motion for the head and finally polishing everything.

過去2天花時間去做嘴巴,為頭部設定Y位移並且最後把每件物件裝上去。


Tabatha is pretty much completed! Aside from a few extra features like different hair and her hat that I will be adding later.

Tabatha是相當複雜的,除了一些的特徵,像是不一樣的頭髮,和我等下要加她的帽子。

Here is how the teeth look underneath the mouth! Thank god people have lips.

這裡是牙齒在嘴巴下方的樣子,感謝上蒼人們有嘴唇!

image

You can really see how all the work pays off now. With the various motions you set up you can create pretty much any expression you want!

你真的可以看到所有的辛苦現在得到回報。因為你設定的各種動態,你可以創造出相當多你想要的表情。

image


These are some expressions to test the various extremes she can emote in. Some may be a bit out of character, but it’s so fun to see the various facial expressions you can make her do that it’s sometimes hard to stop!

這其中的一些表情,去測試她所表現情緒中的各種極限。有些就超出這個角色,但看到這麼多你讓她做的臉部表情,這很有趣,真的有時候很難停下來!~~XD



image

You can test your model with mouse tracking in Live2D’s model viewer. 

你可以用滑鼠追蹤,在live 2D測試你的模型。

I’m quite pleased with how she came out! 

我很高興她就這樣完成了!

Thanks again for all the interest and I hope you will look forward to seeing Tabatha in action in our future trailers and finally the game! We’ll be posting more blogs like these in the future, the next ones will be about the background and the story of Herald. Look out for these in the coming weeks!

再次謝謝所有人和我希望你將期待看到Tabatha在我們未來的預告表演,最後在遊戲裡面。我們將在未來公布更多像這類的文章。下一次將是有關背景和Herald的故事,密切這些在下個禮拜見!


2015年5月15日 星期五

The making of Tabatha Veazie - Animated 2D portrait - part 4 _Tabatha Veazie幕後製作 - 動態2D肖像 - part 4

資料來源:

The making of Tabatha Veazie - Animated 2D portrait  Blog

Herald FB

Herald Game

Herald - An Interactive Period Drama 募資頁面

Yesterday I finished working on the eyebrows and eyebrow shadow. Today I am working on the eyes!

昨天,我完成眉毛與眉毛陰影,我今天要來用眼睛。

The eyebrows gave me a bit of a headache at the start because I had to find the right hierarchy to put them in. I ended up with 14 deformers divided over 4 texture parts. The blue parts are the actual texture image.

再ㄧ開始眉毛讓我有點頭疼,因為我需要找出正確的層級,將它們放進去。我使用了14個變形器去區分4個零件,藍色部分是實際貼圖零件。


image
Welcome to deformer hell. This wiggly brow is what all that work boils down to!

歡迎來到變形地獄,這個抖動的眉毛就是這所有工作的徵結!





image
You know that thing you do when you draw an expression and your face automatically mimics it without you realizing it? Working on this makes me do the same thing. Needless to say, my eyebrows hurt now. I might still add a bit of shadow parts to emphasize the frown later on.
Not only the eyebrows but also the eyes are very important when conveying emotion. The eyes are often underestimated. Simply raising the lower eyelids works wonders for showing giddiness or anxiousness.

你知道的,當你畫了一個表情並且你的臉自動模仿他,而你沒有意識到?做這件工作,也讓我同樣幹了這事。不用說,我的眉毛現在受傷了,我也許還要增加一些陰影來強調皺眉。不只眉毛,眼睛在表現情緒也是很重要。眼睛通常被低估,只要升起下眼瞼就會有輕率或焦慮的神奇效果。






image
Blinking is next! This is a bit tricky to get right. As you may have seen in the texture sheet, I drew closed eyelids to move on top of the open eye. I also added an eyeline that is an exact match with the upper eyelid line. This is done to smooth out the blending between the open upper lid and the closed upper lid. It’s very hard to keep the dark eyeline from jagging up when deforming the lid for animation, so the single eyeline lies on top to make sure it looks correct.

下一步眨眼,這會有點繁瑣才能夠完成。你可能已經看到貼圖框,我畫的閉眼眼皮移動到張眼的上方,我還增加一條眼線,完全對齊下眼瞼,這是為了順利混合張眼上眼瞼和閉眼上眼瞼,當變形眼瞼做動畫,很難保持眼線不抖動,所以單一上眼線要確定它是正確的。

image
image

Making characters blink is always one of my favorite parts in the animation process. Something so little can already add so much life.

讓角色眨眼是我在做動畫過程中,最喜歡的一部分。有些東西很細微就可以增加更多生命力。

Next up, the mouth and finishing up the head movement!


下一步,嘴巴和把整個頭部運動完成!












2015年5月13日 星期三

The making of Tabatha Veazie - Animated 2D portrait - part 3 _Tabatha Veazie幕後製作 - 動態2D肖像 - part 3

資料來源:

The making of Tabatha Veazie - Animated 2D portrait  Blog

Herald FB

Herald Game

Herald - An Interactive Period Drama 募資頁面

After all the preparation work I did the last two days, it’s now time for the fun part. Did I say fun? I meant the hardest and most tedious part, but also the most rewarding in the end!

結束我過去兩天的準備工作之後,現在是最有趣的部分了,我是說有趣嗎? 我覺得最困難和最無聊的部分,但也是最後能得到回報。

Yesterday I set up all the texture parts with their deformers, making sure they are in the right hierarchy and also in the right draw order [like stacked objects in Illustrator]. If you did not properly name your drawing layers before, using this program will force you to become very organized, otherwise it’s simply impossible to keep track of what and where everything is. You’re going to have to switch between all the different layers, a lot.

昨天我把所有的貼圖都用變形器設置完成,確定他們都在對的階層和對的順序(像是在以拉裡面物件前後的順序)。如果你之前沒有取名字,這套軟體會迫使你變得有條理,否則,這真的不可能持續追蹤每件事的一切。你將會需要在所有不一樣的層級轉換。

With everything set up, I can start working on the movements I want Tabatha to be able to make. With live2D you have many possibilities, but I chose to limit the movements of Herald’s portraits somewhat because of the detailed painting style my portraits are in. I did this mainly to reduce the uncanny valley feeling these kind of animations can sometimes give you if they move too much.

每個物件設定後,我可以開始致力我想Tabatha做的動作,使用live2d你會有許多可能性,但我還是限制herald肖像的動態,有些是因為我肖像的繪畫風格。我主要要減少恐怖谷理論的感覺,這種動作有時候會在他們動太多時出現。

By far, setting up the head movement takes the longest and is the hardest to get right, so naturally I chose to start with that. Things are going to look very weird and well…deformed for a while.

目前為止,設定頭部運動最花時間,也是最難使它正確。所以很自然地我選擇從頭開始作,事情將會從看起來很怪 ~~恩.......再變形一下好了。







image

Starting with the head turn on the X axis, I set up how many keyframes I want, and then on each keyframe placing, deforming and tweaking every facial feature until it looks right. It’s at this phase that I learned that being a meticulous perfectionist can actually be a good thing. Also, lots of patience! It really comes down to tiny details, if only a small thing is off your animation will look weird. So you have to be hyper aware of every detail and how it’s moving and deforming along the grid.

首先將頭的X軸開啟,我設定相當多我要的關鍵格,然後在每個關件格的位置,變型和微調每個特殊表情,直到表情看起來是對的。在這階段,我學到成為一個細心的完美主義者會是件好事。而且,更多耐心,這真的取決許多微小細節,如果只有一個小零件位移動畫將會看起來詭異。所以你必須高度小心每片零件並且如何讓它們沿著格線移動和變型。






image

After the X axis head turn started to look somewhat decent, I quickly did the eye rotation, which is easy to do in comparison. I start with the X axis again, then after that is set up, adding the keyframes to the Y axis and linking it to the X. Thus you get this fun 9 point keyframe square.

頭的X軸開始逐漸看向某處之後,我快速的做眼睛旋轉,這相較下容易做到。我又開始X軸,然後設定,增加Y軸關鍵格,連線給X軸。因此,你會得到有趣的9個關鍵點區域。






image

It’s alive!
它是有生命的!





image

This phase takes the longest time, so there will be no update tomorrow. I will return coming Friday with some more fun and freaky looking gifs, as I continue to add movement to her!

這階段會畫很長的時間,所以明天將沒有更新,我將會在禮拜五再次帶來一些有趣和怪誕的GIFT檔,當我繼續增加動態給她。



2015年5月9日 星期六

The making of Tabatha Veazie - Animated 2D portrait - part 2_Tabatha Veazie幕後製作 - 動態2D肖像 - part 2

資料來源:

The making of Tabatha Veazie - Animated 2D portrait  Blog

Herald FB

Herald Game

Herald - An Interactive Period Drama 募資頁面


First of all, thanks for all the positive reactions so far! I hope you enjoy the rest of the series. I must warn you though, things are going to get a bit weird.

首先,感謝目前所有的熱情回應! 我希望你們可以更熱衷在這系列,我必須警告你一下,事情將會有點詭異。


Today I prepared Tabatha’s texture map, which looks like an assembly box for a freaky paper doll of some kind, which is pretty much exactly what it is!


今天我準備了 Tabatha 的貼圖,它看起來類似那種奇異紙娃娃的零件箱,但它的確是這樣沒錯!








image

With the previous portrait I did, I was able to copy a large amount of animations I had already created, so I tried to do that again this time, unfortunately that didn’t really turn out as planned.

因為我之前有做的肖像,我可以複製大量我已經做好的動畫,所以我這次試著再做一次,但不幸的,它不如預期。
image

Just take my word for it, it was the stuff of nightmares, especially with all the animations of the previous portrait still intact.

就如我說言,它真的是一場惡夢,尤其是所有的之前的肖像動畫依舊紋風不動。

It would take more time to fix this up then to just start from scratch, so I started with a clean slate!

單單從頭開始比花時間去修理還要耗時,所以我開始清理零件。

image

After loading the texture in Live2D, the next step is to draw these elaborate webs over every single piece of your image. The way the web is placed is very important as it determines how well you will be able to manipulate the pieces later on. The more elaborate the web, the more control you have over it.

將貼圖匯入Live 2D後,下一 步畫出這些精細的網格覆蓋在你的每一塊圖片,網格放置的方式很重要,因為它將決定你等下能如何操作這些圖片,越精細的網格,你將透過它得到越多控制。

image

After that is all done, it’s time to put Tabatha back together. Using a guide image as reference, I again placed every part of the portrait back on the canvas, basically re-creating what I had in my original painting program.

做完網格之後,是時候把Tabatha組合在一起,使用指示圖(可能就是未拆解的原圖)當參考資料,我再次把每片肖像放置在畫板上,重製我之前所畫的肖像。

image

Almost to the fun stuff, but not quite there yet. In order to manipulate the webs I drew over the parts in more detail, you add deformers to the mix. These are grids that work much like the Transform > Distort function in Photoshop. Again, going over every part you want to animate, adding deformers, linking the texture parts to them and placing them in the right hierarchy.

有趣的事情快發生了,為了更精細操作我所繪製佈滿的網格,你增加一個變形器(deformer)去混合使用。這些格線的作用很像Photoshop裡面的變形->歪曲功能。再一次,為你要做動作的每一個零件,增加變形器(deformer),連接零件的每個部分,並且整理在層級欄( hierarchy)裡。

image
Just pull at a point in the deformer and.. tadaa! Angry Tabatha! Sort of. Now, after all this preparation, the real fun can finally start! 

只要拉變形器的點並且....完成!(效果音)! 憤怒的Tabatha! 現在,在這些準備之後,真正有趣的部分終於要開始了!!

Stay tuned for more!

敬請期待下次!


2015年5月8日 星期五

The making of Tabatha Veazie - Animated 2D portrait - part 1 _ Tabatha Veazie幕後製作 - 動態2D肖像 - part 1


資料來源:

The making of Tabatha Veazie - Animated 2D portrait  Blog

Herald FB

Herald Game

Herald - An Interactive Period Drama 募資頁面


Hello, I am Aïda, the 2D artist and art director of Herald! This week I’ll be blogging about the making of an animated portrait in our game.

哈囉,我是Aïda,一位2D藝術家和Herald的藝術指導!這禮拜我將在部落格編寫有關在我們遊戲裡,製作一個動態肖

像。




image
At the inception of Herald, we already knew that we wanted to use 2D portraits in the style of visual novels popularized in Japan. Our first method was to just have hand-drawn static expressions and switch between them, like most VN’s do. It gets the emotion of the character across and it’s not as much work.

在啟動製作Herald時,我們已經知道我們想使用圖像化小說的2D肖像,在日本很受歡迎。我們第一個方法只有手繪

靜態表現並且交替他們,就像許多圖像化小說所作的。這讓角色情感交錯並且不花費太多工!





image
During the dialogue sequences the 2D art is the biggest focus, and in a narrative based game that’s pretty much the entire experience! Considering that the art would be of so much importance I wanted to do something more with the portraits.
Luckily I discovered the amazing software package Live2D which had recently been translated from Japanese to English. It allows you to import any kind of drawing and model it for animation. I was very excited, but a bit hesitant at first, considering all the examples of work done with the software were in a fairly simple anime style. The process of modelling a character that has a lot more detailed painting in the face is significantly more difficult and labor intensive.

在對白順序中,2D美術是最大的焦點,並且在敘述為主的遊戲裡,這是占相當大的全部體驗。思考一下,美術在這

之中相當重要,而我想為肖像做更多的功夫。


幸運的,我發現一套驚奇的軟體 Live 2D,最近已經從日文被翻成英文了。它允許你匯入各種圖像並且建立圖像模

型,使它能夠做動畫。起先我非常興奮,但後來有點猶豫,深思了所有用這套軟體所作的範例,是一種相當簡單的

動畫。製作角色模型的過程,有許多細節繪製在臉上,這顯著更困難和勞力密集。





image
image
However, the end result is fantastic and got a lot of positive feedback from people that play tested the game so far! So I’ll be showing the process this week for those interested.
Today I finished rendering the portrait of Tabatha I still had from the previous static tests and prepared it for use as a texture in the animation software. In order for it to be usable I had to cut it up in separate parts today so you get a fun monstrosity such as this;

然而,最後結果是夢幻的並且得到很多目前測試過遊戲的人的正面回應,所以我這禮拜將演示這些有趣的過程。今

天我結束了 Tabatha肖像的算圖,我有之前的靜態測試並且準備要拿來作動畫的貼圖,為了讓它可以使用,我今天

必須要分割它,所以你會得到一個像這樣的怪物





image

More tomorrow as I start preparing it for animation!

更多內容明天從我開始為動畫作準備