【３Ｄ製作日記】Pivot以及鏡射

製作左右對稱物件時，同時編輯兩端的點很辛苦
直覺性的作法是先作完一半的物件之後，再複製一份左右相反的物件
但是在許多情況下無法確認複製後的結果是否自然
變成需要三不五時複製一下觀察，每有小更動就要整個重新複製的情況
好在MAYA有一個非常方便的鏡射功能
可以把指定的物件復至一份，且及時地顯示原物件的相對編輯內容
而提到鏡射功能，不得不說的就是Pivot的觀念了

Pivot
基本上指的就是物件的中心點
Pivot包含了該物件的軸向資訊，同時也代表匯出之後的參考基準點
鏡射時，物件出現的位置也是以Pivot的位置做參考
因此在許多意義上非常重要

MAYA中的Object Pivot分兩類
Rotate Pivot以及Scale Pivot
換句話說就是SRT矩陣中的S跟R（T被合併到R上了）
用中文來說就是『旋轉參考點』與『縮放參考點』
圖中三個箭頭的交叉點就是Pivot了

比較陽春的編輯方法是在物件模式下按下Insert
會看到Pivot的樣子變了，這時可直接以拖曳的方式改變Pivot的位置
而且是Rotate Pivot跟Scale Pivot一起移動
移動到想要的位置之後再按一下Insert就可以確定Pivot的位置了
但是這種編輯方式很難對齊（這種情況下更是）
所以就改用直接輸入數值的方式準確地編輯Pivot

點選物件後按Ctrl+A開啟屬性便可以看到有關物件的資訊
選擇左上角的標籤，點開Pivots的Local Space（區域空間）
在這裡先決定Pivot的位置，想要移動到左邊的面中間

因為知道一個預設方塊的邊長是1，而Pivot的位置在正中間
所以在R跟S的第一格（X座標）輸入-0.5，其他則不更變
這樣一來Pivot就會貼到左邊的面中間了

鏡射
鏡射的功能其實很單純
請先打開Edit中Duplicate（複製）的選項

這裡要看的只有Scale跟Geometry Type
Scale代表的是複製之後相對的縮放程度
因為這裡希望他對著X軸向（紅色軸）的反方向複製
所以將代表X軸向的第一格改為-1
另外，Geometry Type指的是複製的形式
Copy為一般的複製，Instance則是鏡射模式
設定好之後就按下Apply，便可以產生鏡射好的物件
要注意的是這裡的X軸是物件本身的軸向而不是世界軸向
若是物件已經有被轉動過的話，鏡射的方向就不一定是X了

鏡射好的物件只要移動一邊的點就可以看到兩邊同時動唷
感覺就像是打電話給別人然後問說

希：『噯噯噯，你那邊是星期幾啊？』
澪：『星期日啊…怎麼了嗎。』
希：『好厲害喔！我這邊也是星期日耶！！！』

這樣的感覺（被敲頭的音效）

製作好之後，依序按下Combine與Merge Vertice的按鈕
就可以完成一個左右對稱的模型囉
附帶一題，最右邊的是Smooth按鈕
這三個常常會連在一起用，排在一起就很豪邁哩ＸＤ（？）

另外是有關子物件模式下的Pivot
像是圖中剛擠出的面，用Insert稍微改一下Pivot…

就可以做出這樣比較緩和的旋轉
另外在對齊上也有很好的幫助呢
只是要注意的是這種Pivot是暫時性的
使用完之後不會被記錄起來喔

最後，有時作模型做得太HIGH會讓物件的Pivot跑很遠
甚至不知道飛哪去的情況
傳說中只要利用Modify中的Center Pivot
就可以把失去的Pivot重新找回來（疑？）
放在該物件的幾何中心位置唷～

Read More...

Summary only...

【３Ｄ製作日記】參考圖貼上

製作比較精細的模型時，需要用到至少一個的形狀參考底圖
雖然說有能耐的話是可以憑空做出正確的形狀
有參考圖的話還是能增加不少製作的速度

首先當然要取得適當的參考圖
自己畫的或者是拍照得到的都可以
只要自己能到抓到正確比例就好
比較需要注意的是要標示頭殼以及衣服下的身體部位
除非是要做遊戲用低模，不製作看不到的地方
為求製作方便，將參考圖拆成長寬一樣的兩張圖
（因為和上一張差不多就不附圖了）
但是以後要貼圖的時候，用越少張圖片可以算得越快
所以幾乎是一個模型一到兩張貼圖的程度最好
接著是MAYA的部份

因為是建模的範疇，別忘了先將模式切換到Modeling喔

首先在場景中建立一個內建的平面Plane
點選Create->Polygon Primitives->Plane右邊的方塊

更改圖中的Along Width和Height為1
按下Apply，便會於場景中間出現一個1*1的平面模型
其他的Polygon也可以用這樣的方式創建
要注意的是所創造出的模型一定會放置在原點的位置
所以可能會被其他模型擋住

關掉剛剛的視窗，點一下物件
將右邊的屬性頻道裡RotateZ的值改成90（旋轉角度）
會看到剛剛的平面站起來了(驚)
如果屬性頻道沒有打開的話，點一下做右上角的圖示就好了

順便也將Scale（縮放）調整成跟圖片一樣的比例
因為旋轉過後的軸向比較不一樣，要稍微嘗試一下

按下Ctrl+C複製，Ctrl+V貼上
然後再更改一下旋轉的角度
這樣一來，正面跟側面的版子就設好了

打開材質頻道選擇無反光材質Lambert
這是最常被用來測試的材質，算圖也比較快
然後在出現的圖形Lambert2上用滑鼠中鍵拖曳到物件上
這樣便可以套用此種材質到物件上
另外一個平面也用同樣的步驟給予另一個Lambert材質

接著雙擊Lambert2的圖片，在右邊會開啟設定頻道
現在只要看Color的選項就好（汗）
若是直接點擊Color旁邊的灰色方塊可以直接給定顏色
但是要貼圖的話就要點旁邊的花格子了

跳出來的視窗點選2D Textures中的File（2D檔案）

點選File Attributes中Image Name右邊的資料夾圖示
選擇要使用的參考圖
這樣就可以把圖片放到版子了！！

或許有人會產生類似的疑惑…
圖片的方向是不是錯了啊！！（翻桌）
其實這是貼圖座標（UV）沒有設定好的緣故
在物件上按著滑鼠右鍵不放會出現奇怪的選單
拖曳到右邊的UV放開，會看到物件旁邊有紫色的點
這就是UV檢視模式
（因為滑鼠拖曳不能截圖所以不附圖了Orz）

把板子上的四個UV點都選起來
然後開啟Window->UV Texture Editor...（UV貼圖編輯器）

使用旋轉工具轉動四個UV點，就可以轉到正確的角度囉
兩個板子都完成之後，放到正確的位置上就可以用囉

不用５分鐘就做完的事為什麼可以這麼複雜...Orz

Read More...

Summary only...

【製作】BLOGGER中的『隱藏全文』

機乎所有的BLOG服務都有自動附上隱藏全文的功能
按下『繼續閱讀』之類的連結之後才可以看到完整的文章
這種做法很有效率，也很合乎邏輯
大部分人在閱讀BLOG時，除非是認識的好友的BLOG
否則不會每篇都閱讀內文，大多是先看看標題是否吸引注意
因此，若不是標題吸引到讀者的文章，也沒有必要全部顯示
換言之，讀者不會去按自己不感興趣的文章
這樣一來，隱藏全文功能把大部分無趣的內文蓋住了
節省很多讀取頁面的時間，也可以讓版面看來清潔
用了沒有這種功能的BLOGGER才知道它的好處ＸＤ…

其實也不是完全沒有辦法的
BLOGGER的優點之一就是沒有的功能幾乎都可以自己做
那麼，要怎麼實現這種功能呢？

首先，定義隱藏文章的標籤以及方法
（沒信心的人先儲存範本唷）
在<head>與</head>中間加入以下的語法
<script type="text/javascript">
function toggleIt(id) {
post = document.getElementById(id);
if (post.style.display != 'none') {
post.style.display = 'none';
} else {
post.style.display = '';
}
}

function showFullPost(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost")
spans[i].style.display = 'inline';
if (spans[i].id == "readmore")
spans[i].style.display = 'none';
}
}

var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}

function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}

function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") && (found == 0))
spans[i].style.display = 'none';
}
}
</script>
接著，要改變原來文章的顯示方式
找到以下這兩行程式碼
<div class='post-header-line-1'/>
.
.
.
.
<div style='clear: both;'/> </div>
用以下的程式碼完全取代
<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'
href='javascript:void(0);'>繼續閱讀</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'
href='javascript:void(0);'>顯示摘要</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>
<div style='clear: both;'/> </div>
當然，『繼續閱讀』與『顯示摘要』的文字可以自己更改
這樣一來就完成了所有的設定部份

使用的方法就是將想要隱藏的部分以<span>包夾
如以下程式碼
<span id="fullpost">隱藏的部份</span>

Read More...

Summary only...