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!

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



2015年4月20日 星期一

SWD6A Opening music 軒轅劍6外傳 OP


Hello, today i want to launch our game opening music video. I responsible for pre-production and

post-production . Thanks for DOMO team , they do their best on this project !

























2015年3月21日 星期六

2015年2月1日 星期日

AE_Create depth of view in AE__在AE中製作景深

Wow, It's long time not to share some CG notes. Today, i'll show you how to create depth of view in

AE. Just simple three "camera options" to be used.

哇,好久沒有分享CG筆記了,今天我將告訴你如何在AE製作景深,只要使用三個攝影機選項

就行!

__1.Turn on Depth of Filed  打開景深

1. Focus distance (焦距)

2. Aperture (光圈)

3. Blur  Level (模糊程度)

You could see the camera Focus distance at left side and right side is active view port .

你們可以看見攝影機焦距在左邊,和右邊的實際畫面



__2.Modify FD (Focus distance) and Aperture .Look left and right .

調整焦距和光圈,觀察左右邊


__3.Hold on Aperture and Modify FD to low distance.   Look left and right .

固定光圈和調整焦距到低的距離,觀察左右邊


__4.Hold on Aperture and Keep more Low distance . Look left and right .

固定光圈和繼續更低的距離,觀察左右邊


__5. We could know FD affects Blur Front view and Background.

我們可以知道焦距可以影響前景和背景!

It's pretty easy !