docs: added comments

re #60

README.md

@@ -17,8 +17,6 @@
 
 # hexo-helper-live2d
 
-# Important! 3.0 is under developement, informations below CANNOT WORK PROPERLY. Please visit https://www.npmjs.com/package/hexo-helper-live2d for USEABLE VERSION.
-
 [简体中文文档](./README.zh-CN.md)
 
 <br>

README.zh-CN.md

@@ -17,8 +17,6 @@
 
 # hexo-helper-live2d
 
-# 3.0 正在开发，以下内容无法使用，请访问 https://www.npmjs.com/package/hexo-helper-live2d 获取来可用版本。
-
 [English README](./README.md) by [@gwzz](https://github.com/gwzz) & [@xiazeyu](https://github.com/xiazeyu)
 
 <br>

src/L2DMatrix44Study.txt

@@ -0,0 +1,17 @@
+[tr]
+0:ScaleX
+1:
+2:scale
+3:
+4:
+5:ScaleY
+6:
+7:
+8:
+9:
+10:
+11:
+12:shiftX(translateX)
+13:shiftY(translateY)
+14:
+15:

src/cDefine.js

@@ -5,41 +5,41 @@
 */
 
 var cDefine = {
-
-    DEBUG_LOG : false,
-    DEBUG_MOUSE_LOG : false,
-    // DEBUG_DRAW_HIT_AREA : false,
-    // DEBUG_DRAW_ALPHA_MODEL : false,
-
-
-    VIEW_MAX_SCALE : 2, // 2
-    VIEW_MIN_SCALE : 0.8, // 0.8
-
-    VIEW_LOGICAL_LEFT : -1, // -1
-    VIEW_LOGICAL_RIGHT : 1, // 1
-
-    VIEW_LOGICAL_MAX_LEFT : -2, // -2
-    VIEW_LOGICAL_MAX_RIGHT : 2, // 2
-    VIEW_LOGICAL_MAX_BOTTOM : -2, // -2
-    VIEW_LOGICAL_MAX_TOP : 2, // 2
-
-
-    PRIORITY_NONE : 0, // 0
-    PRIORITY_IDLE : 1, // 1
-    PRIORITY_NORMAL : 2, // 2
-    PRIORITY_FORCE : 3, // 3
-
-    MOTION_GROUP_IDLE : "idle",
-    MOTION_GROUP_TAP_BODY : "tap_body",
-    MOTION_GROUP_FLICK_HEAD : "flick_head",
-    MOTION_GROUP_PINCH_IN : "pinch_in",
-    MOTION_GROUP_PINCH_OUT : "pinch_out",
-    MOTION_GROUP_SHAKE : "shake",
-
-
-    HIT_AREA_HEAD : "head",
-    HIT_AREA_BODY : "body"
-
+  // above are output log settings
+  DEBUG_LOG : false, // false, output events
+  DEBUG_MOUSE_LOG : false, // false, output mouse tracking
+  // These two commented definitions havn't been achieved yet.
+  //
+  // DEBUG_DRAW_HIT_AREA : false, // # 63
+  // DEBUG_DRAW_ALPHA_MODEL : false, // #63
+
+  // above are viewMatrix value settings
+  VIEW_LOGICAL_LEFT : -1, // -1, the left abscissa of viewMatrix
+  VIEW_LOGICAL_RIGHT : 1, // 1, the right abscissa of viewMatrix
+  VIEW_LOGICAL_MAX_LEFT : -2, // -2, the max left abscissa of viewMatrix
+  VIEW_LOGICAL_MAX_RIGHT : 2, // 2, the max right abscissa of viewMatrix
+  VIEW_LOGICAL_MAX_BOTTOM : -2, // -2, the max bottom abscissa of viewMatrix
+  VIEW_LOGICAL_MAX_TOP : 2, // 2, the max top abscissa of viewMatrix
+
+  // above are the motions priority settings.
+  PRIORITY_NONE : 0, // 0，do nothing
+  PRIORITY_IDLE : 1, // 1, idle motions
+  PRIORITY_NORMAL : 2, // 2, normal motions
+  PRIORITY_FORCE : 3, // 3, force to show motion
+
+  // above are the index to the motions in model.json
+  // #43
+  MOTION_GROUP_IDLE : "idle",
+  MOTION_GROUP_TAP_BODY : "tap_body",
+  MOTION_GROUP_FLICK_HEAD : "flick_head", // unused
+  MOTION_GROUP_PINCH_IN : "pinch_in", // unused
+  MOTION_GROUP_PINCH_OUT : "pinch_out", // unused
+  MOTION_GROUP_SHAKE : "shake", // unused
+
+  // above are the index to the hit areas in model.json
+  // #43
+  HIT_AREA_HEAD : "head",
+  HIT_AREA_BODY : "body"
 };
 
 module.exports = cDefine;

src/cLive2DApp.js

@@ -22,7 +22,7 @@ let headPos = 0.5;
 let opacityDefault = 0.7;
 let opacityHover = 1;
 
-export function loadlive2d(iID, iModelUrl, iHeadPos, iOpacityDefault, iOpacityHover) {
+export function loadlive2d(settings) {
     headPos = typeof iHeadPos === 'undefined' ? 0.5 : iHeadPos;
     opacityDefault = typeof iOpacityDefault === 'undefined' ? 0.7 : iOpacityDefault;
     opacityHover = typeof iOpacityHover === 'undefined' ? 1 : iOpacityHover;
@@ -39,15 +39,15 @@ function init(modelUrl) {
   let width = canvas.width;
   let height = canvas.height;
   // 以下为实际显示大小
-  // let sWidth = parseInt(canvas.style.width);
-  // let sHeight = parseInt(canvas.style.height);
+  // #32
+  let sWidth = parseInt(canvas.style.width);
+  let sHeight = parseInt(canvas.style.height);
 
   dragMgr = new L2DTargetPoint();
-  // 绘图相关..暂时看不懂
   let ratio = height / width;
   let left = cDefine.VIEW_LOGICAL_LEFT;
   let right = cDefine.VIEW_LOGICAL_RIGHT;
-  let bottom = -ratio;
+  let bottom = -(ratio);
   let top = ratio;
 
   viewMatrix = new L2DViewMatrix();
@@ -58,20 +58,19 @@ function init(modelUrl) {
     cDefine.VIEW_LOGICAL_MAX_RIGHT,
     cDefine.VIEW_LOGICAL_MAX_BOTTOM,
     cDefine.VIEW_LOGICAL_MAX_TOP);
-  // 这2行可能没用
-  viewMatrix.setMaxScale(cDefine.VIEW_MAX_SCALE);
-  viewMatrix.setMinScale(cDefine.VIEW_MIN_SCALE);
 
   projMatrix = new L2DMatrix44();
   projMatrix.multScale(1, (width / height));
 
   deviceToScreen = new L2DMatrix44();
-  deviceToScreen.multTranslate(-width / 2.0, -height / 2.0);
-  deviceToScreen.multScale(2 / width, -2 / width);
+  // deviceToScreen.multTranslate(-width / 2.0, -height / 2.0); // old codes
+  // deviceToScreen.multScale(2 / width, -2 / width); // old codes
+  deviceToScreen.multTranslate(-sWidth / 2.0, -sHeight / 2.0);  // #32
+  deviceToScreen.multScale(2 / sWidth, -2 / sHeight);  // #32
 
   gl = getWebGLContext();
   setContext(gl);
-  if (!gl) { // 检测是否成功创造WebGL元素
+  if (!gl) { // Check if WebGL element is created successfully.
     console.error("Failed to create WebGL context.");
     if(!window.WebGLRenderingContext){
       console.error("Your browser don't support WebGL, check https://get.webgl.org/ for futher information.");
@@ -134,31 +133,11 @@ function changeModel(modelurl) // 更换模型
     live2DMgr.count++; // 现在仍有多模型支持，稍后可以精简
     live2DMgr.changeModel(gl, modelurl);
 }
-/*
-function modelScaling(scale)
-{
-    let isMaxScale = viewMatrix.isMaxScale();
-    let isMinScale = viewMatrix.isMinScale();
 
-    viewMatrix.adjustScale(0, 0, scale);
-
-    if (!isMaxScale)
-    {
-        if (viewMatrix.isMaxScale())
-        {
-            live2DMgr.maxScaleEvent();
-        }
-    }
-
-    if (!isMinScale)
-    {
-        if (viewMatrix.isMinScale())
-        {
-            live2DMgr.minScaleEvent();
-        }
-    }
+function modelScaling(scale) {
+  viewMatrix.adjustScale(0, 0, scale);
 }
-*//*
+/*
 function transformRange(center, transform, range)
 {
     let a = {

src/cManager.js

@@ -73,30 +73,6 @@ cManager.prototype.setDrag = function (x, y) {
   }
 }
 
-
-
-cManager.prototype.maxScaleEvent = function () {
-  if (cDefine.DEBUG_LOG)
-    console.log("Max scale event.");
-  for (var i = 0; i < this.models.length; i++) {
-    this.models[i].startRandomMotion(cDefine.MOTION_GROUP_PINCH_IN,
-      cDefine.PRIORITY_NORMAL);
-  }
-}
-
-
-
-cManager.prototype.minScaleEvent = function () {
-  if (cDefine.DEBUG_LOG)
-    console.log("Min scale event.");
-  for (var i = 0; i < this.models.length; i++) {
-    this.models[i].startRandomMotion(cDefine.MOTION_GROUP_PINCH_OUT,
-      cDefine.PRIORITY_NORMAL);
-  }
-}
-
-
-
 cManager.prototype.tapEvent = function (x, y) {
   if (cDefine.DEBUG_LOG)
     console.log("tapEvent view x:" + x + " y:" + y);