LimeJS - Node 與繼承

Google Closure Library 提供了繼承的功能。

Round.js

goog.provide('HelloLimeJS.Round');

goog.require('lime.Circle');

/** Constructor */
HelloLimeJS.Round = function(r) {
  // call parents constructor
  goog.base(this);
  
  this.setRadius(r);
};

/** 繼承*/
goog.inherits(HelloLimeJS.Round, lime.Circle);

/** 新增 function */
HelloLimeJS.Round.prototype.setRadius = function(r) {    
  this.setSize(r*2, r*2);
};

定義完 Round.js，記得要執行下列指令將 HelloLimeJS.Round 註冊到 deps.js。

python bin/lime.py update

HelloLimeJS.js

goog.provide('HelloLimeJS');

goog.require('lime.Director');
goog.require('lime.Scene');
goog.require('lime.Layer');
goog.require('HelloLimeJS.Round');

HelloLimeJS.gameW = 600;
HelloLimeJS.gameH = 400;

/** 程式進入點 */
HelloLimeJS.start = function() {
  HelloLimeJS.director = new lime.Director(document.getElementById('game'), HelloLimeJS.gameW, HelloLimeJS.gameH);
  HelloLimeJS.director.makeMobileWebAppCapable();
  HelloLimeJS.mainScene();
};

/** 主場景 */
HelloLimeJS.mainScene = function() {
  
  var scene = new lime.Scene();
  
  var layer = new lime.Layer().setPosition(0,0);
  scene.appendChild(layer);
  
  var sprite = new lime.Sprite().setAnchorPoint(0,0).setPosition(0,0).setFill('#ff9').setSize(HelloLimeJS.gameW, HelloLimeJS.gameH);
  layer.appendChild(sprite);

  // 自訂 class
  var circle = new HelloLimeJS.Round(25).setFill('#06f').setAnchorPoint(0,0).setPosition(0,50);
  layer.appendChild(circle);
  
  var leftStep = 5;
  // 間隔一定時間呼叫
  lime.scheduleManager.scheduleWithDelay(function(){
    var p = this.getPosition();
    if (p.x > 550 || p.x < 0) {
      leftStep = -leftStep;
    }
    if (p.x >= 550) {
      circle.setRadius(15);
    }
    else if (p.x <= 0) {
      circle.setRadius(25);
    }
    p.x += leftStep;
    this.setPosition(p);
  }, circle, 10);
  
  HelloLimeJS.director.replaceScene(scene);
};

goog.exportSymbol('HelloLimeJS.start', HelloLimeJS.start);

lime.Node

在 LimeJS，lime.Node 是所有顯示物件的根物件，也就是可以在畫面顯示的物件都是繼承自 lime.Node，例如 lime.Circle 或 lime.Sprite，甚至 lime.Director、lime.Scene 或 lime.Layer 也都是 lime.Node 子類別，所以大部分與顯示相關的 API 都是定義在 lime.Node 裡。

// 上下層
var parent = new lime.Node();
var child = new lime.Node();
parent.appendChild(child);

// 尺寸
var node = new lime.Node().setSize(50,50);
var size = node.getSize(); 
size.width += 100;
node.setSize(size);
node.setSize(new goog.math.Size(100,50));
// 有趣的是，圖片會依 size 縮放，可以搭配下面的畫質 API 使用
node.setFill('images/a.png').setSize(200,150);

// 位置，與下面的錨定點 API 很有關系
var node = new lime.Node().setPosition(200,100);
var pos = node.getPosition(); // return object
pos.y = 150;
node.setPosition(pos);
node.setPosition(new goog.math.Coordinate(50,50));

// 比例，以錨定點為中心
var node = new lime.Node().setScale(1,2);
node.setScale(0.7);  // 雙向
node.setScale(new goog.math.Vec2(1,2));

// 旋轉，以描定點為中心
var node = new lime.Node().setRotation(90);

// 畫質
// 用於圖片以小於原尺寸顯示時，降低畫質可以提昇效能
// 接受 0 到 1 的數值，大於 1 視為 1
var node = new lime.Node().setQuality(0.5);

// 錨定點，影響位置與旋轉 API
var node = new lime.Node().setAnchorPoint(0,0);

有關於錨定點與位置請看 LimeJS 的 setAnchorPoint() 與 setPosition()。
---
---
---