20141014 今日學習

讀了一篇好文章

• [分享] 研究所與研究生的意義 - 看板 graduate - 批踢踢實業坊

回到家看到台大電機週做的東西，好強喔!!!點進去後發現可以用臉書帳號，這讓我想到下學期為訊號課製作的遊戲可以加入臉書帳號的功能

• EE Week 2014

閱讀昨晚找到的資料，學習了一些新東西，紀錄在昨天的筆記裡：20141013 今日學習

看了一下日誌，晚上要撥空了解一下JavaScript裡forEach()與bind()的用法

該準備來player.html裡，加入控制鍵'U'，啟動'right punch'

開始撰寫，不過無法仿造如下的coding方式

var input = player.controls.input
if( event.keyCode === 'W'.charCodeAt(0) ) input.up = true

因為我所需要的並不是一個按鈕一個動作的，我需要的是一個按鈕一連串動作，所以該參考animation.html裡的，在browser頁面上顯示一個按鈕，按下按鈕後啟動動作，他是如何觸發的，然後改寫成按按鈕與頁面的按鈕。

觀察一下他的寫法都是在<div></div>裡面寫入下面這行的寫法

• <button onclick='switchBodyValue(this.innerText);'>stand</button>

OK，那麼switchBodyValue()這是什麼???

透過WebStorm的查詢，switchBodyValue()定義在下面的load Character裡面，稍微研讀一下後覺得，直接寫一個按鈕在player.html裡會比用鍵盤觸發事件好寫多了

在animation.html裡，寫了兩個function：switchHeadValue()與switchBodyValue()，code如下

var bodyAnims = new THREEx.MinecraftCharBodyAnimations(character);
updateFcts.push(function(delta, now){
  bodyAnims.update(delta, now) 
 })
var switchBodyValue = function(value){
  bodyAnims.start(value)
 }

在animation.html上面的<div></div>裡已經定義了如下的button，下面的stand就是上面的bodyAnims.start(value)，所傳入的value，裡面的value，決定你要做什麼動作，像是: walk、jump...etc

• <button onclick='switchBodyValue(this.innerText);'>stand</button>

在threex.minecraftcharbodyanim.js裡，我已經定義了'right punch'的動作，現在可以一樣畫狐狸，在player.html裡做一個button來run我的'right punch'

剛剛在寫code時，發現threex.minecraftcharbodyanim.js最下面也有定義個'rightPunch'，恩.....很好，不能用這名字了，於是我估狗一下金臂勾的英文：clothesline，就改用它吧!!!


另外備份一下各種摔角招式的英文名字

• [摔角字典]摔角招式的中英文 @ 聯合翻譯有限公司/聯合翻譯社 :: 痞客邦 PIXNET 

參考animation.html改寫player.html時，又發現個小趣聞，回頭看上面的code

• bodyAnims.start(value)

這裡的start()，這function是定義在threex.animations.js裡面，剛剛看了一下player.html，也有引用threex.animations.js，所以就放心用吧 ^_^

測試過在player.character.loadWellKnownSkin('3djesus')之後加入player.start('yes');

• 失敗

尚未查明原因，改用animation.html測試clothesline，也失敗，開始參考threex.minecraftcharbodyanim.js裡面定義的'rightPunch'

另外去查了一下在Sublime Text 2裡，註解的快捷鍵

• Sublime Text 基礎熱鍵表 | Camdemy

按住 Ctrl 再按 / ，要消除註解也是同樣的按法

在threex.minecraftcharbodyanim.js裡面測試後發現

• armRRotationY : +Math.PI/10,  

這一行沒有發生作用，fail，看了一下animation.html裡的動作，決定先來研究一下'wave'與'hiwave'的cdoe

剛剛測試時發現一個有趣的東西，如果我的code打如下兩種寫法

第一種：  (失敗)

var angleRange = Math.PI/2-Math.PI/10;
animations.add('clothEsline', THREEx.createAnimation().pushKeyframe(0.5, {

  armLRotationZ : 0,
  armRRotationZ : Math.PI+2*Math.PI/5,

}).pushKeyframe(0.3, {

  armLRotationZ : 0,
  //armRRotationZ : Math.PI+Math.PI/10,   (這行用註解，不會run)

}).propertyTweens(propTweens).onCapture(onCapture).onUpdate(onUpdate));

第二種：(成功)

var angleRange = Math.PI/2-Math.PI/10;
animations.add('clothEsline', THREEx.createAnimation().pushKeyframe(0.5, { 
 armLRotationZ : 0,
 armRRotationZ : Math.PI+2*Math.PI/5,

}).pushKeyframe(0.3, {

  armLRotationZ : 0,
  armRRotationZ : Math.PI+Math.PI/10,   //(這行未用註解，程式終於可以run)  

}).propertyTweens(propTweens).onCapture(onCapture).onUpdate(onUpdate));

經過這樣的概念，去修改code，成功做到手臂Y軸旋轉，雖然效果不是我想要的 XD

var angleRange = Math.PI/2-Math.PI/10;
animations.add('clothEsline', THREEx.createAnimation().pushKeyframe(0.5, {  armRRotationY : Math.PI+2*Math.PI/5  
}).pushKeyframe(0.3, {
  armRRotationY : Math.PI+Math.PI/5  
}).propertyTweens(propTweens).onCapture(onCapture).onUpdate(onUpdate));

不過已經有進展了，明天再繼續構思手臂的動作 ^_^

明日開始

研究怎麼讓blogger裡面code的排版變好看，實在醜到我快受不了了