2012-10-02

LimeJS - Director, Scene, and scheduleManager

演練 Director、Scene 與 scheduleManager。
HelloLimeJS.html

加入 jQuery 幫忙在迴圈裡傳參數。
<!DOCTYPE HTML>

<html>
<head>
<title>HelloLimeJS</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="../closure/closure/goog/base.js"></script>
<script type="text/javascript" src="HelloLimeJS.js"></script>
<style type="text/css">
#game {
    width: 600px;
    height: 400px;
    margin: 0 auto;
    border: 1px solid #eee;
}
</style>
</head>

<body onload="HelloLimeJS.start()">
<div id="game"></div>
</body>

</html>


HelloLimeJS.js

除了 replaceScene，還有 pushScene 可以用，甚至可以加入 lime.transitions 的過場效果。

Director 的 setPaused 也很重要。

 lime.scheduleManager 當然一定要會。
//set main namespace
goog.provide('HelloLimeJS');

// get requirements
goog.require('lime.Director');
goog.require('lime.Scene');
goog.require('lime.Layer');
goog.require('lime.Circle');
goog.require('lime.Label');
goog.require('lime.animation.Spawn');
goog.require('lime.animation.FadeTo');
goog.require('lime.animation.ScaleTo');
goog.require('lime.animation.MoveTo');
goog.require('lime.transitions.Dissolve');
goog.require('lime.transitions.MoveInDown');
goog.require('lime.transitions.MoveInLeft');
goog.require('lime.transitions.MoveInRight');
goog.require('lime.transitions.MoveInUp');
goog.require('lime.transitions.SlideIn');
goog.require('lime.transitions.SlideInDown');
goog.require('lime.transitions.SlideInRight');
goog.require('lime.transitions.SlideInUp');

HelloLimeJS.transitions = new Array();
// 不能放在這裡，因為這時 goog.require 還沒發揮作用，所以 lime.transitions.* 這些 library 還不能用
//HelloLimeJS.transitions.push(lime.transitions.Dissolve);
//HelloLimeJS.transitions.push(lime.transitions.MoveInDown);
//HelloLimeJS.transitions.push(lime.transitions.MoveInLeft);
//HelloLimeJS.transitions.push(lime.transitions.MoveInRight);
//HelloLimeJS.transitions.push(lime.transitions.MoveInUp);
//HelloLimeJS.transitions.push(lime.transitions.SlideIn);
//HelloLimeJS.transitions.push(lime.transitions.SlideInDown);
//HelloLimeJS.transitions.push(lime.transitions.SlideInRight);
//HelloLimeJS.transitions.push(lime.transitions.SlideInUp);

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

/**
 * 程式進入點
 */
HelloLimeJS.start = function() {
  // initialize
  HelloLimeJS.transitions.push(lime.transitions.Dissolve);
  HelloLimeJS.transitions.push(lime.transitions.MoveInDown);
  HelloLimeJS.transitions.push(lime.transitions.MoveInLeft);
  HelloLimeJS.transitions.push(lime.transitions.MoveInRight);
  HelloLimeJS.transitions.push(lime.transitions.MoveInUp);
  HelloLimeJS.transitions.push(lime.transitions.SlideIn);
  HelloLimeJS.transitions.push(lime.transitions.SlideInDown);
  HelloLimeJS.transitions.push(lime.transitions.SlideInRight);
  HelloLimeJS.transitions.push(lime.transitions.SlideInUp);
  
  // 每個遊戲只會有一個導演 director，所以要 keep 起來
  HelloLimeJS.director = new lime.Director(document.getElementById('game'), HelloLimeJS.gameW, HelloLimeJS.gameH);
  HelloLimeJS.director.makeMobileWebAppCapable();
  // 切入主場景
  HelloLimeJS.mainScene();
};

/**
 * 主場景
 */
HelloLimeJS.mainScene = function() {
  
  // 同時間只會有一個有效的場景 scene
  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);

  // 條列功能 - 標題
  var top = 0;
  var topStep = 20;
  var labelE = new lime.Label().setText('This is the Main Scene').setAnchorPoint(0,0).setPosition(100,top+=topStep);
  layer.appendChild(labelE);

  // 條列功能 - 置換場景
  var labelA = new lime.Label().setText('> Replace Scene').setAnchorPoint(0,0).setPosition(100,top+=topStep);
  layer.appendChild(labelA);
  goog.events.listen(labelA, 'click', function(){
    HelloLimeJS.replaceScene();
  });

  // 條列功能 - 堆疊場景
  var labelB = new lime.Label().setText('> Push Scene').setAnchorPoint(0,0).setPosition(100,top+=topStep);
  layer.appendChild(labelB);
  goog.events.listen(labelB, 'click', function(){
    HelloLimeJS.pushScene();
  });

  // 條列功能 - 使用過場效果堆疊場景
  for (var t in HelloLimeJS.transitions) {
    var labelF = new lime.Label().setText('> Push Scene with Transition ' + t).setAnchorPoint(0,0).setPosition(100,top+=topStep);
    labelF.createDomElement();
    layer.appendChild(labelF);
    // 在迴圈裡傳參數，搭配 jQuery 使用
    $(labelF).attr('t', t);
    goog.events.listen(labelF, 'click', function(){
      var t = $(this).attr('t');
      HelloLimeJS.pushSceneWithTransition(t);
    });
  }

  // 條列功能 - 遊戲暫停
  var labelD = new lime.Label().setText('> Pause director and resume in 3 seconds').setAnchorPoint(0,0).setPosition(100,top+=topStep);
  layer.appendChild(labelD);
  goog.events.listen(labelD, 'click', function(){
    // 可以暫停所有動畫與 scheduleManager 啟動的 function
    HelloLimeJS.director.setPaused(true);
    // 只呼叫一次
    lime.scheduleManager.callAfter(function(){
      this.setPaused(false);
    }, HelloLimeJS.director, 3000);
  });

  // 計數器，用來證明堆疊場景與暫停的效果 
  var cnt = 0;
  var labelC = new lime.Label().setText('Counting').setAnchorPoint(0,0).setPosition(100,top+=topStep);
  layer.appendChild(labelC);
  // 間隔一定時間呼叫，LimeJS 不建議使用 setTimeout 與 setInterval
  lime.scheduleManager.scheduleWithDelay(function(){
    this.setText('Counting - ' + cnt++);
  }, labelC, 1000);
  HelloLimeJS.director.replaceScene(scene);
  
  // 動畫，用來證明暫停的效果
  var circle = new lime.Circle().setSize(50,50).setFill('#06f').setAnchorPoint(0,0).setPosition(0,top+=topStep);
  layer.appendChild(circle);
  var leftStep = 5;
  // 間隔一定時間呼叫
  lime.scheduleManager.scheduleWithDelay(function(){
    var p = this.getPosition();
    if (p.x > 550 || p.x < 0) {
      leftStep = -leftStep;
    }
    p.x += leftStep;
    this.setPosition(p);
  }, circle, 10);
  
};

/**
 * 置換場景
 */
HelloLimeJS.replaceScene = 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('#f9f').setSize(HelloLimeJS.gameW, HelloLimeJS.gameH);
  layer.appendChild(sprite);
  
  var labelA = new lime.Label().setText('This is a Replaced Scene').setAnchorPoint(0,0).setPosition(100,0);
  layer.appendChild(labelA);
  
  var labelB = new lime.Label().setText('> Return to the main scene').setAnchorPoint(0,0).setPosition(100,50);
  layer.appendChild(labelB);
  goog.events.listen(labelB, 'click', function(){
    HelloLimeJS.mainScene();
  });

  // 取代原來的場景，銷毀原來的場景
  HelloLimeJS.director.replaceScene(scene);
};

/**
 * 使用堆疊方式更換場景
 */
HelloLimeJS.pushScene = 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('#9ff').setSize(HelloLimeJS.gameW, HelloLimeJS.gameH);
  layer.appendChild(sprite);
  
  var labelA = new lime.Label().setText('This is a Pushed Scene').setAnchorPoint(0,0).setPosition(100,0);
  layer.appendChild(labelA);
  
  var labelB = new lime.Label().setText('> Pop Scene and return to the main scene').setAnchorPoint(0,0).setPosition(100,50);
  layer.appendChild(labelB);
  goog.events.listen(labelB, 'click', function(){
    // 銷毀目前的場景，露出原來的場景
    HelloLimeJS.director.popScene();
  });
  
  // 在原來的場景上堆疊新的場景，原來的場景只是暫時看不見
  HelloLimeJS.director.pushScene(scene);
};

/**
 * 使用過場特效更換場景
 */
HelloLimeJS.pushSceneWithTransition = function(t) {
  // 取得過場特效
  var t2 = HelloLimeJS.transitions[t];
  
  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('#9ff').setSize(HelloLimeJS.gameW, HelloLimeJS.gameH);
  layer.appendChild(sprite);
  
  var labelA = new lime.Label().setText('This is a Pushed Scene').setAnchorPoint(0,0).setPosition(100,0);
  layer.appendChild(labelA);
  
  var labelB = new lime.Label().setText('> Pop Scene and return to the main scene').setAnchorPoint(0,0).setPosition(100,50);
  layer.appendChild(labelB);
  
  goog.events.listen(labelB, 'click', function(){
    HelloLimeJS.director.popScene();
  });

  // 加入過場特效
  HelloLimeJS.director.pushScene(scene, t2, 2);
};

// this is required for outside access after code is compiled in ADVANCED_COMPILATIONS mode
goog.exportSymbol('HelloLimeJS.start', HelloLimeJS.start);
---
---
---
張貼者： Unknown 於 10:54
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)