2014/10/2 今日學習

讀了幾篇好文章

• 從設計師到創業家：一個設計師自學 Coding 的創業路 | TechOrange
• 葉丙成：台灣教育正把孩子訓練成搜尋引擎 | 天下雜誌部落格
• MIT告訴我的事：學習，要沒有目的 | 天下雜誌部落格

令人振奮的新聞

• 全球最強黑客組織Anonymous挺佔中 承諾攻陷港府網站

走路前進與走路的動作

• 發現threex.minecraft裡的player.html，這個範例其實是用鍵盤上面的"W", "S", "A" ,"D", "Q", "E"來操作的，這個範例可以教我如何按鍵盤上的鍵來操作動作

修正學習計畫

• 原本預計學完control.html後來學player.html與threex.minecraftplayer.js，現在修正為先學習animation.html。(player要看的東西太多了 QQ)
• '../threex.animation.js'
• '../threex.animations.js'
• '../threex.minecraftcharheadanim.js'
• '../threex.minecraftcharbodyanim.js'
• 學習"腳"如何擺動，就可以打造出前空翻與後空翻的動作
• 要構思如何做到，人物被功擊後身體震動的畫面
• 學習完player與animation後，下周開始coding，打造出各種戰鬥動作

構思連續技

• 頭右擺→伸左傾+出右拳
• ex:

估狗血條製作相關的資訊

• 生命值 - 維基百科，自由的百科全書
• 英文：Hit Point或Health Point (所以簡稱HP)
• 用上述英文下關鍵字拜估狗大神，找不太到什麼資料，不過改用progress bar找就有一些東西可以參考了
• 估狗大神：javascript bar
• Progressbar.js (Javascript Progress Bar)

程式碼解析

學習'../threex.minecraftcontrols.js'關於操控角色的code (pt.2)

Three.js

• object3d
• Matrix4
• Vector3( x, y, z )

this.update = function(delta, now){...}

• JavaScript Functions
• Function parameters are the names listed in the function definition.
• Function arguments are the real values received by the function when it is invoked.
• Inside the function, the arguments are used as local variables.

理解delta是如何使用

• Time-based Animation with HTML 5 Canvas and JavaScript  (這篇不錯!!!)
• When animating objects with JS, it is important that objects animate at the same speed, without being affected by varying frame rates. 
• Animate objects relative to time instead of frame-based increments.
• 為了要避免不同processer環境下造成object在anitamate時有不同的速度，希望將他的速度固定，於是有了delta的概念
• var distance = speed * delta;
• distance: The number of pixels to move this frame.
• speed: The speed in pixels per second.
• delta: The number of seconds passed since last frame.

學習animation.html

<strong> </strong>

• HTML strong tag
• The <strong> tag is a phrase tag. It defines important text.
• 產生粗體字的效果

看code時常看到animations.add()或是scene.add()，查了一下才知那是javascript的syntax

• HTML DOM Select add() Method
• selectObject.add(option,index)
• option：Required. Specifies the option to add. Must be an option or optgroup element
• index：Optional. An integer that specifies the index position for where the new option element should be inserted. Index starts at 0. If no index is specified, the new option will be inserted at the end of the list.
• 上面說的optgroup：HTML optgroup tag
• add這個method的概念是，把一個東西，加入一串list裡面
• ThreeX裡面的add並非上述的寫法，詳情請見2014/10/3 今日學習

又看到了javascript段落節數沒有分號(;)的寫法，分號的英文為semicolon，改了關鍵字發現不少資料

• 估狗大神：javascript 沒有 分號
• 找到一個我覺得是答案的文章：为什么 Bootstrap 的 js 源码不写分号？ - SegmentFault
• js語法本身是需要使用分號來結束語句的。但js解釋器具備分號自動插入（Automatic Semicolon Insertion）的能力。這大概是JavaScript裡最受爭議的特性之一吧。
• 簡單的就其一般形式而言，語句結束後換行，或者直接閉合代碼塊（比如函數代碼體的結束}符號），就能激活分號自動插入特性。
• 在實際應用中，加不加分號以個人愛好而定。

查看threex.animation.js時常看到THREEx.Animation.prototype

• JavaScript Prototypes
• Every JavaScript object has a prototype. The prototype is also an object.
• All JavaScript objects inherit their properties and methods from their prototype.
• Objects created using an object literal, or with new Object(), inherit from a prototype called Object.prototype.
• Objects created with new Date() inherit the Date.prototype.
• The Object.prototype is on the top of the prototype chain.

在threex.minecraftcharheadanim.js中看到一個寫法讓我卡了很久

THREEx.MinecraftCharHeadAnimations = function(character){

   var animations = this;

   ...

   ...

}

程式碼中的為何this要用如此寫法，後來看到下面這文章中的（2）避免數組處理方法中的this

• 面向對象編程概述-- JavaScript 標準參考教程（alpha）

再回頭想，我們的animation是透過寫一個array來跑一連串的frames來產生動態畫面，稍微有點接近答案的感覺，不過還是沒有完全理解

在threex.minecraftcharheadanim.js裡看到一個奇怪的寫法

• THREEx.createAnimation().pushKeyframe

估狗一下發現最早在ThreeX的作者發佈的tQuery出現(在此頁面搜尋pushKeyframe)

後來去找原本tQuery的API

• tQuery.Animation | tQuery library

在此頁面搜尋pushKeyframe，就可以找到

• pushKeyframe(duration, position)
• duration：the duration of this keyframe validity in seconds
• position：list of properties involved in the animations