顯示具有 遊戲構想 標籤的文章。 顯示所有文章
顯示具有 遊戲構想 標籤的文章。 顯示所有文章

2014年12月30日 星期二

20141228 寒假project 訊號與系統教學網站構想

構思寒假要做訊號與系統的教學網站的內容，跑去看練習 | 均一教育平台的網站，看到以估狗的星像圖來當作學習步驟與學習章節的構想，這點子真的太正了
而且按滾輪放大後，可以看到每一章裡面的小節

看到角度的測量 | 均一教育平台這一頁，我喜歡它的可以拉動拖曳互動的解題方式


觀看這網站時又看到，可以用臉書帳號登入，於是facebook api 教學 - Google 搜尋發現有很多資源可以學習，非常興奮
張貼者： 於 沒有留言:
標籤： ,

2014年11月25日 星期二

20141125 今日學習

終於，我們可以回來學習CSS相關知識了，根據20141120 今日學習要繼續學習get/set，繼續補充20141117 今日學習的內容，所以讓我們開始吧 (15:30)。
22:00結束今天這回合，確定學習完get/set以及descriptor，明天要從Custom Elements: defining new elements in HTML的How elements are upgraded這節開始。

看了V作戰的設計理念，居然是一位整型醫師(女生喔)設計UI遊戲界面的，真的太正點了，有許多可以參考當作遊戲點子的

從中啟發去估狗progress bar CSS，看到這DEMO真的太正了，下載下來學習了

玩一個心理測驗，好準 QQ
非常有趣的作品，太迷人了
看了很動人的一篇文章，年薪百萬的資訊人參與柯P的團隊，而且他也是寫JavaScript的王景弘先生，真的很優秀很棒，自己的城市(程式)自己救。


張貼者： 於 沒有留言:
標籤： ,

2014年11月14日 星期五

20141114 今日學習

滿有趣的一篇文章，老實說我比較喜歡法國人對性的態度
最近看到魔戒：魔多之影這遊戲時，偶然想到一個遊戲構想。一直以來我都把遊戲構想設定在戰鬥時切換畫面，但是這有一個問題，loading scene與model很花時間，若是遊走地圖與戰鬥在同一個scene呢，這樣就解決了畫面各自切換時loading time過長的問題


更新昨天20141113 今日學習的進度，學習DOM，尚未更新完畢，11/15繼續。

學習完DOM後，要繼續學習自定義的pseudo classes
張貼者： 於 沒有留言:
標籤： ,

2014年11月5日 星期三

20141105 MathJax

今天看到一則轉貼椅子設計師的文章，記得以前看GQ時曾看過他，我滿喜歡他曾說過的一段話
  • “We must play-but must play in serious way.” 要玩，但要玩得嚴謹。
  • 關於創意， 漢斯.韋格納 曾說出上述名言，可看得出他的設計並非純然天馬行空，而是將最自由的意念灌注在最精準的執行上
發現一個滿實用的訓練玩意
看到黃雅信今天貼給我她熱騰騰的新文章，滿喜歡估狗台灣區總經理說的這句話
  • 我們，不是活在海島，而是活在海洋。
去看mike-map的code時，發現我對CSS幾乎沒什麼概念，該開始學習CSS了，估狗找到這篇文章，覺得不錯，開始學習
看到conprehensive這單字，覺得眼熟，在查單字時突然想知道它的字根，於是估狗時發現一個有趣的部落格
讀英文習慣去學字根是受以前補飛哥英文的影響，這比只是背單字有更多的畫面 ^_^
另外這網站的展開收放選單的構想我滿喜歡的


剛剛發現從Jerome Etienne的Twitter看到一篇感覺很厲害的文章，沒詳讀但依舊感覺到非常厲害，讀到文章末看到他的reference少說有10篇以上，就決定把這部落格收藏起來了，這部落格裡有各種遊戲構想，非常適合閒暇時閱讀之
先前構思許久，要如何在遊戲中顯示數學式，取自mike-map的文字是透過CSS購成，於是就從CSS著手估狗，發現有一個用JavaScript寫的Library：MathJax

估狗找到雄: MathJax : 在網頁中顯示數學式子這篇時，發現它的數學式真漂亮，不過在開網頁時需要再前端運算，滿花時間的

運算完結果


看到另一篇文章，說"這種耗時的處理腳本的放到頁面後面加載更合理"，恩....很有道理，這作者用Hexo來弄，估狗到一些資料知道，Hexo可以結合GitHub架獨立部落格，但這種事就等以後再說了

估狗良久找到一個還算詳細的用MathJax在部落格貼數學式教學
發現一個youtube影片教學

找到一個很齊全的各種公式整理
找了幾篇中文的文章讀，關於MathJax設定，幾乎都出自這兩篇文章

並在此備份MathJax的設定出自

非常有趣，這次沒辦法再bloger的HTML裡用<pre></pre>來紀錄code，因為遇到<script></script>這段keyword，該繼續找辦法處理，畢竟我不太喜歡用外面網站的外掛來紀錄code

還在edit blogger，用預覽模式時就可以看到在載入MathJax
我們測試雄: MathJax : 在網頁中顯示數學式子
input： (兩個錢字號暫時用全形字代替，以免被 MathJax 轉譯了)
＄＄\frac{1}{5}+\frac{2}{5}=\frac{3}{5}＄＄

output：
$$\frac{1}{5}+\frac{2}{5}=\frac{3}{5}$$
經測試後，確實可以如期顯示我要的

發現一個有趣的事，現在用Chrome開MathJax的首頁，首頁右上角的數學式會變亂碼，但是一開始我第一次看這網頁時都沒發生這種事
為了要驗正，是chrome本身的問題，所以我用FireFox再開一次MathJax的首頁，結果就正常了
想了老半天，哪裡有問題，後來想起來，我在讀過後段班聯合戰線: MathJax這文章最末端裡，用了它推薦的chrome外掛：Daum Equation Editor ，想起後曾試圖把它移除，但是徹底失敗 =..=

既來之則安之，於是就開始測試Daum Equation Editor，真的滿好用，但輸出然後呢，我還是要轉成MathJax的code才能在我的broswer上顯示math equation啊，後來發現，我在主視窗弄好數學式後，下面的較狹長的視窗就會自動生成MathJax的code，這點真的是太正了，以後我只需要在這網站弄好math equation就自動生出code，而不用一一去查表
測試從Daum Equation Editor視覺編譯好數學方程式後，輸出的結果
$$\frac { 2 }{ 3 } \times \sin { 60 } $$
先去看漫畫，晚點測試把它包入Require.js，實作在我要做的遊戲上面

(以下2014/12/07新增)
使用Math Jax test | CodePen來測試，已成功。已成功在對話窗裡顯示方程式，實作於Retractable Dialog with MathJax | CodePen。
(以上2014/12/07新增)
張貼者： 於 沒有留言:
標籤： , ,

2014年10月21日 星期二

20141021 今日學習

看了那麼久，終於找到去偏鄉教小朋友的一絲曙光了
同場加映，Teach for Taiwan的臉書
看了一篇漂浮板的文章，非常有趣，它的靈感來自於建築
讀了第二篇文章，這女孩是如此聰慧勇敢，勇於築夢與造福人群
讀了第三篇文章，裡頭提到一個點子"尋找當地的非營利組織，提供免費設計服務"，我喜歡這點子，可以提供自己不錯的練等機會
讀了第四篇好文章，我喜歡他親自走入田野，理解老人的需求然後設計出優異的餐飲工具給失智老人
讀了第五篇文章，幸福丹麥，希望有生之年能看到台灣也能如此
讀了第六篇文章，依舊令人感動，窮人需要的不是施捨，而是自己自足與尊嚴

今天報備了一下進度，有了一些討論，來紀錄一下，首先，我們的目標設定為兩階段。

第一階段


在第一階段裡，我自己按照章節設計基礎題目，如下圖所示


我們的學生以三人為一組，每組有一個Micraft的小人可以操控，在一個世界中走動，在這世界之中會遇到怪物，每個怪物代表一個章節裡面的基本觀念，他會出文字題目讓學生去解，每個怪物涵蓋有6~8題題目，戰鬥的構想如先前討論過的，採用血條與各種招式，而我們需要的畫面選單、畫面切換、下拉選單，在以前有找到一些demo，可以去看他們的原始碼，來構思如何寫 (此圖從mike-map去改的)
程式碼位置
  • D:/work/WebGL%20Learning/slides-master/howtomakeagame-nextgamefrontier-2014/demos/mike-map/index.html
怪物取自2014/9/30的"各種動物的動作效果與現成的model"

第二階段


在第一階段我自己設計題目，讓他們可以揣摩與思考自己需要哪些知識，到了第二階段，讓他們互相出題目給對方，但是有一些麻煩的問題，最重要的一點：我要如何讓他們上傳題目。在第一階段，設計題目上傳題目，解題觀念寫條與答案血條都可以我自己設定，但是要如何寫一個外部授權，讓他們來input他們的題目，與學生自己所設計的觀念與題目答案，目前對於這問題還無解，先搞定第一階段吧。

開始coding


今天開始決定自己coding，為了要測試遊戲的戰鬥畫面，其概念以前有紀錄過，寫出一整個畫面，採用自己想要的動作與camera視角 (由上往下斜視角)

寫程式時看到一個沒看過的CSS要素，overflow: hidden

開始仿效D:\work\WebGL Learning\threex.cubecamera-master\examples\demo.html來進行coding，一開頭就遇到require.js相關的問題


上圖中有看到，我用紅圈圈出逗號，後來就去想require()，後面的")"在哪裡，怎麼我用Sublime Text2 找老半天找不到，後來改用WebStorm去查才發現


居然把所有程式碼都寫在require()裡面，恩.....頗扯 XD   所以我們先來研究一下require.js吧

以前曾找到這份資料，不過內容不夠扎實

這篇太正了，寫得真好!!!
  • 初探 RequireJS - 網站製作學習誌
  • require(dependencies, callback);
  • dependencies 的格式必須為陣列， callback 則為函式，於是我頓悟剛剛上面那個超長的程式碼為何要這樣寫的用意了 XD
  • dependencies 表示我們要載入的 js，而且不需要寫副檔名，讀到這有趣了，怎麼我印象中看到的demo有副檔名???
  • 仔細一看發現他是用package.require.js這js檔，於是我去開了D:\work\WebGL Learning\threex.wgworld\bower_components\threex.minecraft裡面的package.require.js把它打開來看
  • Wooooooo，酷。的確不用寫.js副檔名
  • 這篇文章還有提到，模組化、順序問題、路徑別名、Namespace...etc的用法，不過目前我們還沒用到，所以先放著納涼 ^_<

這作者的教學太正，然後我想說先前有找過如何如何讓blogger顯示的code更加漂亮美觀，沒想到他也有寫，真的太感激了
恩.....進度有點弱，剩下的明天再弄好了 XD
張貼者： 於 沒有留言:
標籤： ,

2014年10月20日 星期一

20141020 今日學習

今天讀了一篇中國作家寫的文章，他所感動的事卻讓我覺得如呼吸喝水般自然，且理所當然，現在的中國充斥著狼性，失去了人性，難怪我總是對中國不感興趣

今天看了Learning Three.js的twitter裡面的一篇技術文章
裡頭有個小視窗，上面寫著"Click to explore" 點了之後就可以看到它的效果，但是網頁的操作會變得很慢，這讓我想起昨天在天馬行空畫面的構思，是否畫面要考慮用框框，框框裡頭跑WebGL，外面做其他的事，用了這網頁後，我決定暫時擱置這念頭 XD

晚上看了葉丙成老師分享的文章，裡頭談到如何用微信督促學生，覺得滿不錯的，在台灣可以用LINE或Facebook的社團來弄

今天又回去看昨天找到的How To Make Games in THREE.js，這slide的p55有個demo：mike-map，我想是我要的，於是我去GitHub把他載了下來，它的路徑如下
程式碼位置
  • file:///D:/work/WebGL%20Learning/slides-master/howtomakeagame-nextgamefrontier-2014/demos/mike-map/index.html
今天下午開始看了threex.cubecamera-master\examples\demo.html

可以從上面截圖看到，人物模型繞著中間的金球旋轉走動，前陣子一直在構思要如何讓人物走直線，因為我需要走直線的動作，後來去讀demo.html，發現他並不是用自己寫的方法，而是採用three.js提供的Object3D裡面的rotateY這method，於是我想，是否我也可以用裡面的Up這方法或其他方法來達到我要的走直線動作
  • up - Up direction.

發現一些有趣的東西


這demo裡有黃色小鴨的model，也許可以拿來用
  • D:\work\WebGL Learning\three.js-master\examples\webgl_loader_gltf.html

這demo裡有loading與Start的選項，可以參考他是怎麼做的
  • D:/work/WebGL%20Learning/three.js-master/examples/webgl_loader_scene.html
  • D:\work\WebGL Learning\three.js-master\examples\webgl_loader_scene_blender

這demo裡有教下拉選單，老實說我滿想用個下拉選單，然後用什麼邏輯讓學生自己選
  • D:/work/WebGL%20Learning/three.js-master/examples/webgl_morphtargets_md2.html

這demo裡有我要的向前走的動作
  • D:\work\WebGL Learning\three.js-master\examples\webgl_shadowmap
  • D:\work\WebGL Learning\three.js-master\examples\webgldeferred_animation

這demo可有趣囉，可以做出火影忍者裡頭的多重影分身之術 XD
  • D:\work\WebGL Learning\three.js-master\examples\webgl_shadowmap_performance
另外附上一些以前找到的可以用的參考資料：2014/9/30 今日學習

回頭估狗，鍵入：three.js move object forward，發現可以用Object3D.translateZ( distance )來達到前進的效果
不過測試時一直失敗，看到demo.html裡的code有delta，讓我想起以前曾去找過相關資料
onRenderFcts.push(function(delta, now){
 var delta = -0.15 * Math.PI*2*delta
 angle += delta
 position.x = Math.cos(angle)*radius
 position.z = Math.sin(angle)*radius
 object3d.rotateY(-delta)
})
關於delta請見
經過反覆測試終於有一點小成果，進到demo.html，搜尋comment區塊的code

如截圖，裡面有一段註解：一直轉一直轉一直轉，那就是讓我們的人一直繞圈圈轉的關鍵，當我們把他們都用註解，如下

則我們就能看到我們的人都集中在中心點


若我加入object3d.translateZ(1)


就能看到人物向我們移動一步


若我改寫成object3d.translateZ(-1)，則人物就會向後移一步


而我們剛剛註解掉的那段code
onRenderFcts.push(function(delta, now){
 var delta = -0.15 * Math.PI*2*delta
 angle += delta
 position.x = Math.cos(angle)*radius
 position.z = Math.sin(angle)*radius
 object3d.rotateY(-delta)
})
就是人物會一直轉的關鍵，他其實是在說，你的動畫是用一個array去呈現，所以你每次push一張畫面進來，所以我要改應該是要改這段，但是我覺得明天自己重頭寫一個html檔會比較妥當，因為理想狀況我希望我的camera是用側拍，這樣才看得清楚我要的移動動作
張貼者： 於 沒有留言:
標籤： ,

2014年10月19日 星期日

20141019 今日學習

蘇文鈺老師推薦的文章

程式碼解析


在threex.godrays\examples\basic.html裡看到一個奇怪的寫法
var mesh = new THREE.Mesh(geometry, material)
mesh.userData.domClasses += 'godRays'

用WebStorm去查發現居然找不到出處，估狗才發現是IE專屬的寫法 (不喜歡)
下面這篇感覺滿詳細的
  • js本地存储解决方案(localStorage与userData) - BeiYuu - 博客园
  • WEB應用的快速發展，是的本地存儲一些數據也成為一種重要的需求，實現的方案也有很多，最普通的就是cookie了，大家也經常都用，但是cookie的缺點是顯而易見的，其他的方案比如：IE6以上的userData，Firefox下面的globalStorage
讀這篇時，裡頭說有一個object .addBehavior ("#default#userData")，但是我回去看basic.html時發現找不到這玩意，於是估狗了另一個關鍵字：mesh.userData，發現
於是我回去找Three.js的documentation，在Object3D()裡找到userData
不過讀了一下大都是採用object3D.userData，而不是範例裡的mesh.userData

找了老半天終於給我找到原因了
Object3D裡的userData
  • An object that can be used to store custom data about the Object3d.

看到basic.html裡有
mesh.scale.set(1,1,1).multiplyScalar(1)
回去documentation找，發現scale會跑去Vector3，裡面有set() 這method，也有multiplyScalar()這method

看到basic.html裡有
mesh.userData.domClasses
奇怪，這個domClasses是什麼??? 估狗一下發現那似乎是自定義的，估狗一下發現兩篇
他們的userData後面也接不同的東西，目前已看過接了domClasses、id、URL，跑去three.js-master\src\core\Object3D.js看原始碼，也沒看到類似的東西，所以應該要回到JavaScript的本質去找了


水!!!我找到了，辜狗鍵入：JavaScript 建構式，在下面這篇文章的範例code裡找到
白天時在hree.js-master\src\core\Object3D.js裡看過userData的定義，就如同這篇文章的範例一樣，只有給個 userData = {}; 感謝估狗大神，從這篇可以知道mesh.userData.domClasses，是給userData一個屬性domClasses


疲勞了，今晚來看有什麼能用

各種火焰與控制火焰教學，還有聲音可用
  • threex-master\src\threex.flamethrower
有點疲勞，跑去THREEx的網頁看了一個如何製作遊戲的投影片
這個如何製作雲端遊戲的GitHub
裡面還提到一個管理前端的工具Bower，改天研究一下這能幹嘛用
沒靈感來看Jerome Etienne的Learning Three.js blogger，讀到這篇
這篇提供的demo，threex.cubecamera-master\examples\basic.html裡面有我要的元素，場景，人物自動移動，其他物體，所以明天來研究他的code





張貼者： 於 沒有留言:
標籤： ,

2014年10月16日 星期四

20141016 今日學習

今天讀了"交大首辦線上課程、實體認證考試"這篇文章後，找了交大的開放式課程
另外還有
最近一點感想，對教育沒熱忱的人真的不適合教書 XD

Try and get it 


今日目標，就玩出各種動作，然後把他們保留下來就可了

做出升龍拳的動作，但是只有手臂，身體還沒有旋轉
var angleRange = Math.PI/2-Math.PI/10;
animations.add('clothEsline', THREEx.createAnimation().pushKeyframe(0.5, {        armLRotationZ : 0,
 armRRotationZ : Math.PI,  
 armRRotationY : Math.PI+2*Math.PI/5    
}).pushKeyframe(0.3, {
 armLRotationZ : 0,
 armRRotationZ : Math.PI, 
 armRRotationY : Math.PI+Math.PI/5  
}).propertyTweens(propTweens).onCapture(onCapture).onUpdate(onUpdate));

一個小技巧，如果要看位置在哪，可以前後兩張frame，相同的座標軸設一樣的參數 

var angleRange = Math.PI/2-Math.PI/10;
animations.add('clothEsline', THREEx.createAnimation().pushKeyframe(0.5, {    armLRotationZ: 0,
    armRRotationZ: Math.PI-Math.PI/5,  
    armRRotationY: Math.PI+Math.PI/5   //設一樣的參數 
}).pushKeyframe(0.3, {
    armLRotationZ: 0,
    armRRotationZ: Math.PI-Math.PI/5, 
    armRRotationY: Math.PI+Math.PI/5   //設一樣的參數 
}).propertyTweens(propTweens).onCapture(onCapture).onUpdate(onUpdate));


Math.PI = 180度，+theta 向外轉， -theta向內轉，(theta角度)

var angleRange = Math.PI/2-Math.PI/10;
animations.add('clothEsline', THREEx.createAnimation().pushKeyframe(0.5, { armLRotationZ: 0,
    armRRotationZ: -Math.PI,  //-Math.PI = 手臂向外轉180度
}).pushKeyframe(0.3, {
    armLRotationZ: 0,
    armRRotationZ: -Math.PI, 
}).propertyTweens(propTweens).onCapture(onCapture).onUpdate(onUpdate));

歷史性的一刻
  • armRRotationZ : -Math.PI/2

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

測試code時發現一些不太一樣的地方

  • armRotationX，armRotationX它是兩手一起動
---
var angleRange = Math.PI/2-Math.PI/10;
animations.add('clothEsline', THREEx.createAnimation().pushKeyframe(0.5, {    armLRotationZ: 0,
    armRotationX: 0
}).pushKeyframe(0.3, {
    armLRotationZ: 0,
    armRotationX: +Math.PI/2   //兩手一起動
}).propertyTweens(propTweens).onCapture(onCapture).onUpdate(onUpdate));

基於此概念，我測試了legRotationX，legRotationX也是兩腳前後擺動

先前自定義了bodyRotationY，今天終於來測試，結果就悲劇了
可以從上面的圖看到，只有身體轉動，手臂、腳都沒有轉 QAQ

當初身體旋轉的程式碼設定如下：

var onUpdate = function(position){
  ...
  character.body.rotation.y
            = position.bodyRotationY ?  position.bodyRotationY : 0; 
  character.body.rotation.y
            = position.bodyRotationY ? -position.bodyRotationY : 0;
  ...
}


var onCapture = function(position){
   ...
   position.bodyRotationY  = character.body.rotation.y;
   ...
}


var propTweens = {
   ...
   bodyRotationY : tweenAngle,
   ...
}

有必要重新修改這段code，可參考player.html裡，靠鍵盤按鈕就讓身體整個旋轉
  • player.html，按"A"或是"arrow left"
用WebStorm查code之後，身體的控制是透過threex.minecraftcontrols.js

必須要找出player.html與animation.html兩者update frame的差異

需要查一下threex.minecraftplayer.js裡頭update()是怎麼寫的

THREEx.MinecraftPlayer = function(){
 var updateFcts= [];
 this.update = function(delta, now){
   updateFcts.forEach(function(updateFct){ 
     updateFct(delta, now)
   })
 }.bind(this)
   ...
   ...
}

必須要寫一個判斷機制，還有搞清楚下面每一個功能後，去改寫player.html
  • armRRotationZ   // 右手左右擺動，+theta向右，-theta向左
  • armLRotationZ
  • armRotationX   // 手同時前後擺動
  • legRRotationZ  // 右腳左右擺動，+theta向右，-theta向左
  • legLRotationZ
  • legRotationX   // 腳同時向左右擺動
  • bodyRotationY  // 自定義，只有身體旋轉 (fail)
  • armRRotationY // 自定義，手臂靠緊身體，螺旋轉
  • armLRotationY // 自定義

目標


改寫player.html的code，試著做到前進五步，身體旋轉


有必要好好研究一下threex.minecraftplayer.js裡頭前進後退的code是怎麼寫的，剛剛測試按鍵不要一直按住，改用點點點點點去點按鍵，看看效果如何，結果改用此方法，則手腳擺動的幅度不大

研究threex.minecraftplayer.js裡面定義了

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

所以我回頭去看threex.minecraftcontrols.js的code

THREEx.MinecraftControls = function(object3d, input){
  input = input || {}
  this.speed = 2;
  this.angularSpeed = 0.2 * Math.PI * 2;
  this.input = input;
  this.object3d = object3d;

  // user control
  this.update = function(delta, now){
     ...
     ...
     ...
     // up/down
     var distance = 0;
     if( input.up ) distance = +this.speed * delta;  //向前
     if( input.down ) distance = -this.speed * delta;  //向後
     if( distance ){
        var velocity = new THREE.Vector3(0, 0, distance);
        var matrix = new THREE.Matrix4()
                         .makeRotationY(object3d.rotation.y);
        velocity.applyMatrix4( matrix );
        object3d.position.add(velocity);
     }
  }
}

於是乎，查了一下mrdoob給的three.js library

現在我們在回來看一次上面的code吧


紅色框框裡的那幾行都只是為了產生我要移動到的"位置"  ，也就是下面這條
  • object3d.position.add(velocity);
剛剛無聊把裡面的code改成3倍速，結果看起來會有殘影的效果 XD

  • if( input.up ) distance = +3*this.speed * delta;  //向前
  • if( input.down ) distance= -3*this.speed * delta;  //向後

測試了幾種寫法，想到剛剛開給Bosh看各種效果時，舊文裡頭
threex-master\src\threex.godrays\examples，它的雷射光就是固定路徑巡迴

而我遊戲戰鬥中的設計，應該是走上前攻擊，在原路徑回來，換句話說我該去改變我camera的視角，camera在斜上方，由上往下側拍，紀錄戰鬥畫面

恩....看來該去研究一下threex-master\src\threex.godrays裡的code，看看他是怎麼寫的，以及如何在一個畫面放入兩個東西，圓環與雷射光



張貼者： 於 沒有留言:
標籤： ,

2014年10月14日 星期二

20141014 今日學習

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




閱讀昨晚找到的資料，學習了一些新東西，紀錄在昨天的筆記裡：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，就改用它吧!!!


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


 參考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裡，註解的快捷鍵
按住 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的排版變好看，實在醜到我快受不了了
張貼者： 於 沒有留言:
標籤： ,

2014年10月8日 星期三

20141008 今日學習

昨天去代班機率，這班畢竟只有兩節課的時間可以相處，並不太熟，中間有下去稍微了解一下部分同學的學習狀況，大都是說學期才剛開始三個禮拜，還沒開始念書，帶了三個我自己想的比較需要思考的例題：全機率定理、貝氏定理、圖解繁複機率。在過去的紀錄曾提到，用血條的方式來訓練同學每一步的邏輯
在與同學聊的過程中我覺得，除了做好遊戲之外，有必要再為每個觀念設計基本題目來引導同學做練習，就像打電動遊戲都會有個新手村，來訓練同學，畢竟以前沒有過這樣的方式，還是需要引導才對。

2014/10/7代班，經由題目訓練引導思考的投影片

條件機率：



圖解繁複機率




一開始並沒有想到這點，想說就只要教同學如何設計題目，接著讓他們互相出題考對方就好了，後來回想葉丙成老師的BJOnline與PaGamO，在台大實施遊戲教學時，BJOnline是只有讓同學互相設計題目互相出，而PaGamO則是用了台大同學出過的題目與一位研究生不斷生題目出來給全球的華人修課學生做。

現在我當然是無法採用PaGamO的模式，沒時間拼命生題目出來給同學玩，畢竟每天都還是要研究code構思遊戲，先前準備周二教材浪費了不少時間，現在該補回來，但是如果只做到要求自己每天花半小時複習機率，一個禮拜出個一題兩題題目，那麼還是有機會達成的，基本上我是不打算要求兩個碩一學弟去做出題目這種事，如果他們有興趣再讓他們練習出題目吧，畢竟每天寫張元翔的作業應該就花不少時間了。

程式碼解析


學習threex.animation.js，頓時有種好久不見的感覺 XD 。看了一下紀錄，回想起過去在為this._keyframes這種寫法苦惱


看了這幾篇後才想起以前曾看過
在閱讀threex.animation.js裡面的code時發現一件有趣的事

THREEx.Animation.prototype.pushKeyframe = function(duration, position){
this._keyframes.push({  
duration : duration,
position : position
});
return this; // for chained API
};

為什麼push()裡面是傳{ duration: duration,   position: position }
回頭去看W3School
回頭看在Array裡面element的定義
  • JavaScript Arrays
  • You Can Have Different Objects in One Array
  • JavaScript variables can be objects. Arrays are special kinds of objects.
  • Because of this, you can have variables of different types in the same Array.
  • You can have objects in an Array. You can have functions in an Array. You can have arrays in an Array.

有趣了，再來讓我們看看Javascript裡大括號"curly braces或curly bracket，{"的意義吧
小括號讀做"parenthesis，( )"，中括號讀做"square brackets [ ]"，大括號讀做"braces { }"

這篇的解釋恰好是我要的
閱讀threex.animation.js發現一個有趣的名詞 chained API


在threex.animation.js這裡定義的method幾乎都用在threex.minecraftcharheadanim.js與threex.minecraftcharbodyanim.js裡面，來進行method chaining

稍微思考一下，我並不需要去另外寫一個像threex.animation.js的底層code，只需要寫像是threex.minecraftcharheadanim.js與threex.minecraftcharbodyanim.js的.js檔，在這.js檔裡寫我要的code來實作出連續技的動作即可


張貼者： 於 沒有留言:
標籤： ,

2014年10月2日 星期四

2014/10/2 今日學習

讀了幾篇好文章
令人振奮的新聞
走路前進與走路的動作
  • 發現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:



估狗血條製作相關的資訊



程式碼解析


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


Three.js

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

在threex.minecraftcharheadanim.js裡看到一個奇怪的寫法
  • THREEx.createAnimation().pushKeyframe
估狗一下發現最早在ThreeX的作者發佈的tQuery出現(在此頁面搜尋pushKeyframe)
後來去找原本tQuery的API
在此頁面搜尋pushKeyframe，就可以找到
  • pushKeyframe(duration, position)
  • duration：the duration of this keyframe validity in seconds
  • position：list of properties involved in the animations


張貼者： 於 沒有留言:
標籤： ,

2014年10月1日 星期三

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上面的教學設定的
下了一道關鍵字
發現一段教學影片，先備份一下

程式碼學習 (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月29日 星期一

2014/9/30 今日學習

遊戲名字就取名為
  • 「電子二甲大亂鬥 」與 「電子二丙大亂鬥」
  • 突然想到一件事，每解五題可以獲得一個新的人物或武器，這樣應該能大大地促進學習動機
發現一個免費model的好地方
稍微看一下後，這網站裡面裡面的3D model格式大多是obj，估狗發現可以用blender轉乘three.js的格式
回去看了一下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???)


搜尋資料

今天早上無聊看了一下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()
The length property provides an easy way to append a new element to an array
array的length屬性，返回array的成員數量。

Math.floor
Math.random()
Math.floor() and Math.random() can be used together to return a random number between 0 and 10
遇到一個奇怪的寫法
setInterval(函數, 參數);   而裡面的那個函數，函數的內容物有許多行卻未使用";"程式可run，測試過為他們加上分號，程式依舊可以run


搜尋資料


剛剛疲勞時去看一下THREEx - Game Extensions for Three.js，看了第一排右手邊的threex.md2character，這真的太正了，有各種動作與武器變換，於是我就去了他的GitHub上面載下來
  • 研究看看他的CODE，預計可以從這段CODE理學到如何幫我的人物model裝備武器
今天看了一個有趣的東西，下次來慫恿我的理髮師陪我發神經好了 XD



張貼者： 於 沒有留言:
標籤： ,
訂閱： 意見 (Atom)