2014/10/1 今日學習

遊戲構想

雖然是從葉丙成老師的機率遊戲PaGamO作發想，但是考量到台大的學生與中原的學生在能力上的不同。台大的學生資質都不差，擅長競爭才能上台大，無論是PaGamO的增加領土，還是BJOnline的搶先到達終點，在設計上都強調競爭。

我重新反思中原的學生，要競爭你必須要有成品、能力要夠強，才有辦法跟人競爭，但是中原的學生適合嗎??? 教改把他們的能力弄得亂七八糟的，我覺得我要走出不同的觀點與思考方式，來協助他們學習，所以我決定把重心放在思考的邏輯步驟

血條設計，強化邏輯思考與分析問題的能力

這是電動遊戲裡常看到的血條

以前讀書時我發現，要看懂數學式的邏輯，必須把解答從下面往上面看，為了要得到結果，你必須要先算一個東西A，為了要得到東西A，你必須先算出東西B，所以看解答真正的思考順序，應該是從下往上讀才對，當有辦法做到這一步時，才算真正在訓練邏輯思考。

透過這樣的概念，把血條設計成這樣

• 遊戲開始時，滿血狀態，你必須要打倒對方

• 開始戰鬥後，血條扣血與它的邏輯思維如下圖

你可以看到一個有趣的事情，必須先消滅邏輯思考這條血條，才能消除數字答案這條血條

• 出題者與解題者，所戰鬥的就是自己選擇的角色，與出題者當初發佈這道題目時，所選擇的角色
• 兩人有著相同的血條，如果解題者輸入錯誤答案，則出題者的角色就會攻擊解題者，如果解題者的血條歸零，則挑戰失敗

這樣的方式，可以讓出題者在設計題目時，認真構思具有內涵的題目，並加深出題者自己的邏輯思考

3D model格式轉換測試

載了一個model

• Minion - 3d model - .obj, .mb, .fbx
• Wooooooooooo  這隻黃色小兵連skin都幫我貼好了，不用自己弄好感動喔 QAQ
• 棍!!!   發現一件事，export to three.js的plugin不知為何無法run
• 不過奇怪的是我昨天用Diamond Sword可以export to three.js (不過沒上skin)
• 今天重試了一次Diamond Sword，發現也無法export to three.js，所以應該是Blender的three.js plugin有問題
• 查了一下blogger的紀錄，那時還沒設定three.js plugin時還沒有寫blogger，所以晚點再來查吧，印象當初是看mrdoob在GitHub上面的教學設定的

下了一道關鍵字

• Blender export to theejs with texture 

發現一段教學影片，先備份一下

• From Blender to Three.js

程式碼學習 (threex.minecraft)

現在開始學習'../threex.minecraftcontrols.js'關於操控角色的code

在functon裡看到this.update

JavaScript Function Invocation

• The keyword this ,the code in a function is not executed when the function is defined. It is executed when the function is invoked.
• The value of this, when used in a function, is the object that "owns" the function.
• 請查看Invoking a Function with a Function Constructor的內容
• If a function invocation is preceded with the new keyword, it is a constructor invocation.
• It looks like you create a new function, but since JavaScript functions are objects you actually create a new object

在'../threex.minecraftcontrols.js'裡你看不到上述所說的new keyword，但是當你回去看controls.html裡面的內容(如下)

var controls = new THREEx.MinecraftControls(character.root)

updateFcts.push(function(delta, now){

controls.update(delta, now)

})

所以這就是我們所要的

2014/9/30 今日學習

遊戲名字就取名為

• 「電子二甲大亂鬥 」與 「電子二丙大亂鬥」
• 突然想到一件事，每解五題可以獲得一個新的人物或武器，這樣應該能大大地促進學習動機

發現一個免費model的好地方

• Characters 3D Models - Free 3D Characters download

稍微看一下後，這網站裡面裡面的3D model格式大多是obj，估狗發現可以用blender轉乘three.js的格式

• three.js - How to convert obj to json file for three js model loader - Stack Overflow
• 載了兩個model做測試：Altair 、Diamond Sword
• 透過Blender就可以把.obj轉換成.js (已測試可以export出.js檔)
• 查看原本載下來的檔案，對於皮膚大都使用texture這詞，還不知要如何做到整合到一張圖片的skin
• 不過我還是不知要如何轉換skin

回去看了一下mrdoob的webgl_animation_skinning_blending，稍微看了一下code後去看他的skin出處(mrdoob-three.js-d3cb4e7\examples\models\skinned\marine)，發現也是所有元素集合在一張圖裡面，跟我先前載下來的model不同。

但還是有一點很奇怪，看webgl_animation_skinning_blending的code時發現，沒有讀取skin (MarineCv2_color.jpg)的code，於是回頭看看threex-master\src\threex.romemodels\examples裡的select.html的code與model檔案的出處(threex-master\src\threex.romemodels\models)，發現沒有任何skin的.jpg檔

• 結論：model可以跟skin合在一起然後export成.js檔 (HOW???)

估狗大神：import obj to blender with texture

• Importing OBJs and Modifying UVs in Blender
• 今晚測試，轉換到texture時一直blocked，換了一個檔案測試發現，只有Diamond Sword有這個問題

搜尋資料

今天早上無聊看了一下ThreeX裡頭有什麼範例碼可以給我使用，結果發現不少好東西

• 各種動物的動作效果與現成的model
• src\threex.romemodels\examples\select.html   
• 可以做出很亮的效果光
• src\threex.godrays
• 超炫的效果製作：flamethrower、rain、snow、blacksmoke、smokepuff、sphericalblast與trailblueparticle(光影的效果)、trailwhitesmoke(跑步時地面揚起灰塵的效果)
• src\threex.particles\examples
• 如何做出選單
• src\threex.tvset\examples

研究程式碼

似乎javascript的 array裡有default method，push()

• JavaScript Array Methods
• The push() method adds a new element to an array (at the end)
• The push() method returns the new array length.

The length property provides an easy way to append a new element to an array

• var fruits = ["Banana", "Orange", "Apple", "Mango"];  fruits[fruits.length] = "Kiwi";          
• // Appends "Kiwi" to fruit

array的length屬性，返回array的成員數量。

• [ 'a' ,  'b' ,  'c' ]. length    // 3
• 數組-- JavaScript 標準參考教程（alpha）

Math.floor

• JavaScript Math Object
• Math.floor() rounds a number down to the nearest integer
• Math.floor(4.7);            // returns 4

Math.random()

• JavaScript Math Object
• Math.random() returns a random number between 0 and 1  // 回傳小數點
• Math.random();

Math.floor() and Math.random() can be used together to return a random number between 0 and 10

• Math.floor(Math.random() * 11);   // returns a random number between 0 and 10

遇到一個奇怪的寫法

setInterval(函數, 參數);   而裡面的那個函數，函數的內容物有許多行卻未使用";"程式可run，測試過為他們加上分號，程式依舊可以run

搜尋資料

剛剛疲勞時去看一下THREEx - Game Extensions for Three.js，看了第一排右手邊的threex.md2character，這真的太正了，有各種動作與武器變換，於是我就去了他的GitHub上面載下來

• 研究看看他的CODE，預計可以從這段CODE理學到如何幫我的人物model裝備武器

今天看了一個有趣的東西，下次來慫恿我的理髮師陪我發神經好了 XD

2014/9/29 今日學習

今天主力在閱讀

• Minecraft Character in WebGL - Learning Three.js，
• 已閱讀Boilerplate Builder for Three.js - Learning Three.js

從GitHub下載這作者的tQuery與Boilerplate，動手coding後發現lose不少教學文章提到的東西，後來看了Minecraft Character這篇下面的留言討論串發現，作者把Minecraft Character的相關資源全都移到他整合的ThreeX (GitHub)去了(threex / src / threex.minecraft /)，以前用tQuery包好的寫法也改成用threeX包起來，不過依舊可以看到原始Code

計畫修正

• 最初想從零開始寫，開始在網路上蒐尋各種相關資料，現在決定先用threeX包好的plugin，先做出個雛形，然後在去寫後台的node.js與socket.i.o

另外在附上作者每天發的threeX經驗文的目錄

• Category: Threexaday

剛剛找到一個練JavaScript基本功，充滿教學影片的網站

• JS Inside | Professionnal high-quality training 100% Javascript with short, efficient videos 

看到一篇談如何透過Chrome來debugging

• Debugging With Chrome's Canvas Inspection - Learning Three.js

終於開始看程式碼了，看到一個寫法

var THREEx = THREEx || {};   

• 這裡的 ||  是指"或"嗎???  → YES

{} 是指???

• jquery - What do curly braces in JavaScript mean? - Stack Overflow
• myObj={}  // a blank object

看到一段code

var deltaMsec = Math.min(200, nowMsec - lastTimeMsec)

• JavaScript Math Object

今晚阿堂給我聽了一首歌

• 歌詞：Vinnie Paz – You Can't Be Neutral On a Moving Train Lyrics | Genius

2014/9/27 今日學習

當初找到透過tQuery快速建立3D model的文章居然沒備份，重新備份一次

簡略風格3D model的建立

• Minecraft Character in WebGL - Learning Three.js
• 再度重讀這篇，對於3D model的建立，決定捨棄mrddob的教學直接從這篇與tQuery和jQuery著手
• Boilerplate for Three.js - Learning Three.js
• 這篇是較舊的文章，但是裡面那個20多分鐘左右的影片還是可以看一看，簡單來說Boilerplate就是把你寫WebGL的環境給包好，讓你可以快速開始，省去寫一堆初始化環境的code
• Boilerplate Builder for Three.js - Learning Three.js

Dash 

Project 2.2

• Every time you move your mouse, click something, mouse over something, press a key or scroll, your browser fires off an event

下面這寫法是jQuery的寫法

$("button").on("click", function(){

    alert("clicked!")

    });

• 在這例子中"button"就是我們所需要的 CSS element，而$("button")即是說選擇所有的button，這個$就是指選擇所有，同理也可用於$("h1")或$("p")
• on()設置了一個event listener，on( , )第一個argument是type of event to listen to，即你要呼叫的事件類型，第二個argument是你要對應的處理方式

W3School

HTML DOM

解釋HTML真的靠這張圖片就對了!!!

HTML DOM Methods

• HTML DOM methods are actions you can perform (on HTML Elements)
• HTML DOM properties are values (of HTML Elements) that you can set or change
• In the DOM, all HTML elements are defined as objects.

HTML DOM Elements  (未讀)

2014/9/26 今日學習

W3School

Arrays 

• The easiest way to add a new element to an array is to use the length property:

example
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon";     // adds a new element (Lemon) to fruits

• 發現一件有趣的，可以在<script>的變數裡設定<ul>
• 滿有趣的範例code，可以了解如何用array寫一個list

When to Use Arrays? When to use Objects?

• JavaScript does not support associative arrays
• You should use objects when you want the element names to be strings.
• You should use arrays when you want the element names to be sequential numbers.

Avoid new Array(). Use [] instead.

The new keyword complicates your code and produces nasty side effects

How to Recognize an Array?

A common question is: How do I know if a variable is an array?

The problem is that the JavaScript operator typeof returns "object"

---05:26pm停頓休息來玩Dash---

Dash 

Project 2.2

<article>
margin 邊
margin: 0 auto;  // set margin to "0 auto", it has 0 margin on the top and bottom, and "auto" margin on left and right.

media query
@media (條件){
     發生的事
}

hex color，example: #F00，都會有hash"#"這符號
在CSS裡控制color可以用hex color或是rgba()，example:  background: rgba(0, 0, 0, 0.5);
rgba(R, G, B, transparency)，transparency透明度


題外話
Inside the function, the arguments are used as local variables.

2014/9/25 今日學習

Dash

HTML element
display

• default value for display usually "block" and "inline"
• margin creates space on the outside of an element, padding creates space on the inside.

[進度] 從一開始到現在

我究竟要做什麼?

一開始我也不知道自己究竟對什麼有興趣，於是我花了碩二一整年"稍微"了解影像處理在幹嘛

天涯何處尋題目

後來發現我缺乏太多專業知識，如果想補足專業並且在影像處理的領域做出自己滿意的東西，不花個兩三年恐怕難以對自己交待。

從OpenGL到WebGL

碩二下時題目還是沒著落，那時我想起了大學曾問過學長OpenGL是什麼，學長那時也不是真正懂，印象中我只記得，學長說那是比OpenCV更高階的東西，於是我在碩二下的尾端開始估狗他的資料，簡單來說OpenGL就像這樣

這應該不用我解釋吧

於是我開始拼命估狗去建OpenGL的環境，印象中我搞了兩三個禮拜才架好環境

• [環境] OpenGL環境配置

在某年某月某一天，我估狗OpenGL時發現一個我沒看過的詞：WebGL

jellyfish

於是我就開始估狗各種WebGL相關資料，才知道原來WebGL是在瀏覽器上畫3D model

後來我想起曾看過台大電機的葉丙成老師，曾分享把遊戲融入教育的學習方式

• 修課如遊戲？台大電機這麼教！

BJ-Online

葉丙成老師也在全球知名的線上開放式課程Coursera導入遊戲結合教學的概念

• 讓唸書跟打電動一樣——專訪台大PaGamO幕後團隊！ | PanSci 泛科學

PaGamO 

我自己也有在教書，於是我決定透過WebGL自己寫一個網頁 3D game當作畢業題目

這個題目我需要些什麼?

Big Data海量資料正夯，我也常覺得每天都在大海撈針

在茫茫網海中，不知花了多少時間搜尋我才找到一篇較適合初學者的網站

• WebGL中文网

稍微研究後我發現，還有一點很重要，電動遊戲最需要的3D model沒有人可以幫我做，我必須要自己做，一樣又在網海中苦苦尋覓撈針，我才決定用Blender這免費軟體

Blender的學習素材來自於

• Blender 動畫設計 - 陳鍾誠的網站
• Blender 3D 教程 - YouTube
• 各種其他英文教學影片  

暑假大部分的時間我也都拿來練習建模

暑假差不多過完2/3，我開始思考一個問題，我要做MMO Game，我需要讓使用者創建遊戲帳號，那麼這一個創建帳號的動作該如何達到? 難道是去用SQL嗎?

• Building a 3D MMO Using WebSockets

後來我找到這篇後才稍微理解，可以透過Node.js與Socket.IO來實作，就可達成MMO game的多個帳號同時連線遊玩的效果

• Node入門 » 一本全面的Node.js教學課程

整體實作架構

一波三折的學習歷程

一開始時我估狗關鍵字總是鍵入：WebGL tutorial，找到的教學都是很舊的，直到我找到WebGL中文网，那時驚為天人，甚至不惜付費購買高級會員，付了錢才發現我實在太高估中國人的道德與良知了，進階課程的字超小，而且是用圖片貼上去的，有些字還被砍掉，圖片還東缺西缺，只能說自己好傻好天真，決定以後不要跟中國人做生意。

於是我開始重回估狗的懷抱強迫自己讀英文資料，一邊看文章一邊看code，同時我也極度需要學習HTML + CSS + JavaScript這些前端工程師的基礎，剛開始的時候我都是看JavaScript 标准参考教程（alpha）這個大陸人寫的教學，看了11天左右，覺得滿疲乏的就跑去看看英文教學網站，一看再度驚為天人，對於基礎知識的學習現在我使用下面這兩個網站

• w3schools
• Dash

現在大都是透過blogger每天記錄讀了些什麼，這樣以後要回頭找資料也方便

到目前為止感想與結論