diff --git a/Makefile b/Makefile index 01b26fd7..69fdcabe 100644 --- a/Makefile +++ b/Makefile @@ -40,5 +40,78 @@ lime/demos/pong/compiled/pong.js: $(DEMO_GAMES_DEPS) lime/demos/pong/*.js sed -i "" -e "s/\(# Updated on: \).*/\1$$(date '+%Y-%m-%d %H:%M:%S')/" $@ .FORCE: + +ROUNDBALL_ASSETS = $(shell find lime/demos/roundball/assets -type f) +ZLIZER_ASSETS = $(shell find lime/demos/zlizer/assets -type f) + +ifdef EJECTA_ROUNDBALL + +ejecta-roundball: $(EJECTA_ROUNDBALL)/App/index.js | ejecta-roundball-assets + +$(EJECTA_ROUNDBALL)/App/index.js: $(DEMO_GAMES_DEPS) lime/demos/roundball/*.js + $(LIMEPY) build rb -m -o $@ + echo "\nrb.start(document.getElementById('canvas'));" >> $@ + cd $(EJECTA_ROUNDBALL); \ + xcodebuild VALID_ARCHS=i386 -configuration Debug clean build -sdk iphonesimulator -scheme Ejecta + +ejecta-roundball-assets: $(patsubst lime/demos/roundball/%, $(EJECTA_ROUNDBALL)/App/%, $(ROUNDBALL_ASSETS)) + +$(EJECTA_ROUNDBALL)/App/assets/%: lime/demos/roundball/assets/% + mkdir -p $(EJECTA_ROUNDBALL)/App/assets + cp $< $@ + +endif + +ifdef EJECTA_ZLIZER + +ejecta-zlizer: $(EJECTA_ZLIZER)/App/index.js | ejecta-zlizer-assets + +$(EJECTA_ZLIZER)/App/index.js: $(DEMO_GAMES_DEPS) lime/demos/zlizer/*.js + $(LIMEPY) build zlizer -m -o $@ + echo "\nzlizer.start(document.getElementById('canvas'));" >> $@ + cd $(EJECTA_ZLIZER); \ + xcodebuild VALID_ARCHS=i386 -configuration Debug clean build -sdk iphonesimulator -scheme Ejecta + +ejecta-zlizer-assets: $(patsubst lime/demos/zlizer/%, $(EJECTA_ZLIZER)/App/%, $(ZLIZER_ASSETRS)) + +$(EJECTA_ZLIZER)/App/assets/%: lime/demos/zlizer/assets/% + mkdir -p $(EJECTA_ZLIZER)/App/assets + cp $< $@ + +endif + +ifdef COCOON_ROUNDBALL + +TEMPDIR:=$(shell mktemp -u -d -t roundball-cocoonjs) + +cocoon-roundball: $(COCOON_ROUNDBALL) + +$(COCOON_ROUNDBALL): $(DEMO_GAMES_DEPS) lime/demos/roundball/*.js $(ROUNDBALL_ASSSETS) lime/templates/cocoonjs/index.html + mkdir $(TEMPDIR) + $(LIMEPY) build rb -m -o $(TEMPDIR)/index.js + cp lime/templates/cocoonjs/index.html $(TEMPDIR) + sed -i "" -e "s/{init}/rb.start(canvas);/" $(TEMPDIR)/index.html + cp -rf lime/demos/roundball/assets $(TEMPDIR) + cd $(TEMPDIR); zip -r roundball.zip . -x ".*" + cp -rf $(TEMPDIR)/roundball.zip $(COCOON_ROUNDBALL) + rm -r $(TEMPDIR) + +endif + +ifdef COCOON_ZLIZER + +TEMPDIR:=$(shell mktemp -u -d -t zlizer-cocoonjs) + +cocoon-zlizer: $(COCOON_ZLIZER) +$(COCOON_ZLIZER): $(DEMO_GAMES_DEPS) lime/demos/zlizer/*.js $(ZLIZER_ASSSETS) lime/templates/cocoonjs/index.html + mkdir $(TEMPDIR) + $(LIMEPY) build zlizer -m -o $(TEMPDIR)/index.js + cp lime/templates/cocoonjs/index.html $(TEMPDIR) + sed -i "" -e "s/{init}/zlizer.start(canvas);/" $(TEMPDIR)/index.html + cp -rf lime/demos/zlizer/assets $(TEMPDIR) + cd $(TEMPDIR); zip -r zlizer.zip . -x ".*" + cp -rf $(TEMPDIR)/zlizer.zip $(COCOON_ZLIZER) + rm -r $(TEMPDIR) +endif \ No newline at end of file diff --git a/lime/demos/roundball/assets/roundball.json b/lime/demos/roundball/assets/roundball.json new file mode 100644 index 00000000..10b5fd31 --- /dev/null +++ b/lime/demos/roundball/assets/roundball.json @@ -0,0 +1,76 @@ +{"frames": { + +"ball_0.png": +{ + "frame": {"x":134,"y":134,"w":61,"h":61}, + "rotated": false, + "trimmed": false, + "spriteSourceSize": {"x":0,"y":0,"w":61,"h":61}, + "sourceSize": {"w":61,"h":61} +}, +"ball_1.png": +{ + "frame": {"x":149,"y":68,"w":61,"h":61}, + "rotated": false, + "trimmed": false, + "spriteSourceSize": {"x":0,"y":0,"w":61,"h":61}, + "sourceSize": {"w":61,"h":61} +}, +"ball_2.png": +{ + "frame": {"x":83,"y":68,"w":61,"h":61}, + "rotated": false, + "trimmed": false, + "spriteSourceSize": {"x":0,"y":0,"w":61,"h":61}, + "sourceSize": {"w":61,"h":61} +}, +"ball_3.png": +{ + "frame": {"x":134,"y":2,"w":61,"h":61}, + "rotated": false, + "trimmed": false, + "spriteSourceSize": {"x":0,"y":0,"w":61,"h":61}, + "sourceSize": {"w":61,"h":61} +}, +"ball_4.png": +{ + "frame": {"x":68,"y":166,"w":61,"h":61}, + "rotated": false, + "trimmed": false, + "spriteSourceSize": {"x":0,"y":0,"w":61,"h":61}, + "sourceSize": {"w":61,"h":61} +}, +"ball_5.png": +{ + "frame": {"x":2,"y":166,"w":61,"h":61}, + "rotated": false, + "trimmed": false, + "spriteSourceSize": {"x":0,"y":0,"w":61,"h":61}, + "sourceSize": {"w":61,"h":61} +}, +"selection.png": +{ + "frame": {"x":2,"y":85,"w":76,"h":76}, + "rotated": false, + "trimmed": false, + "spriteSourceSize": {"x":0,"y":0,"w":76,"h":76}, + "sourceSize": {"w":76,"h":76} +}, +"shadow.png": +{ + "frame": {"x":2,"y":2,"w":76,"h":78}, + "rotated": false, + "trimmed": false, + "spriteSourceSize": {"x":0,"y":0,"w":76,"h":78}, + "sourceSize": {"w":76,"h":78} +}}, +"meta": { + "app": "http://www.texturepacker.com", + "version": "1.0", + "image": "roundball.png", + "format": "RGBA8888", + "size": {"w":256,"h":256}, + "scale": "1", + "smartupdate": "$TexturePacker:SmartUpdate:89901ac97cb2eae3221b3ed315bc5e53$" +} +} diff --git a/lime/demos/roundball/assets/roundball.json.js b/lime/demos/roundball/assets/roundball.json.js new file mode 100644 index 00000000..9f305367 --- /dev/null +++ b/lime/demos/roundball/assets/roundball.json.js @@ -0,0 +1,6 @@ +goog.provide('lime.ASSETS.roundball.json'); +goog.require('soy'); + +lime.ASSETS.roundball.json.data = function(opt_data) { +return JSON.parse("{\"frames\":{\"ball_3.png\":{\"trimmed\":false,\"frame\":{\"y\":2,\"x\":134,\"w\":61,\"h\":61},\"rotated\":false,\"sourceSize\":{\"h\":61,\"w\":61},\"spriteSourceSize\":{\"y\":0,\"x\":0,\"w\":61,\"h\":61}},\"ball_2.png\":{\"trimmed\":false,\"frame\":{\"y\":68,\"x\":83,\"w\":61,\"h\":61},\"rotated\":false,\"sourceSize\":{\"h\":61,\"w\":61},\"spriteSourceSize\":{\"y\":0,\"x\":0,\"w\":61,\"h\":61}},\"ball_1.png\":{\"trimmed\":false,\"frame\":{\"y\":68,\"x\":149,\"w\":61,\"h\":61},\"rotated\":false,\"sourceSize\":{\"h\":61,\"w\":61},\"spriteSourceSize\":{\"y\":0,\"x\":0,\"w\":61,\"h\":61}},\"ball_0.png\":{\"trimmed\":false,\"frame\":{\"y\":134,\"x\":134,\"w\":61,\"h\":61},\"rotated\":false,\"sourceSize\":{\"h\":61,\"w\":61},\"spriteSourceSize\":{\"y\":0,\"x\":0,\"w\":61,\"h\":61}},\"ball_5.png\":{\"trimmed\":false,\"frame\":{\"y\":166,\"x\":2,\"w\":61,\"h\":61},\"rotated\":false,\"sourceSize\":{\"h\":61,\"w\":61},\"spriteSourceSize\":{\"y\":0,\"x\":0,\"w\":61,\"h\":61}},\"ball_4.png\":{\"trimmed\":false,\"frame\":{\"y\":166,\"x\":68,\"w\":61,\"h\":61},\"rotated\":false,\"sourceSize\":{\"h\":61,\"w\":61},\"spriteSourceSize\":{\"y\":0,\"x\":0,\"w\":61,\"h\":61}},\"shadow.png\":{\"trimmed\":false,\"frame\":{\"y\":2,\"x\":2,\"w\":76,\"h\":78},\"rotated\":false,\"sourceSize\":{\"h\":78,\"w\":76},\"spriteSourceSize\":{\"y\":0,\"x\":0,\"w\":76,\"h\":78}},\"selection.png\":{\"trimmed\":false,\"frame\":{\"y\":85,\"x\":2,\"w\":76,\"h\":76},\"rotated\":false,\"sourceSize\":{\"h\":76,\"w\":76},\"spriteSourceSize\":{\"y\":0,\"x\":0,\"w\":76,\"h\":76}}},\"meta\":{\"scale\":\"1\",\"format\":\"RGBA8888\",\"app\":\"http://www.texturepacker.com\",\"version\":\"1.0\",\"smartupdate\":\"$TexturePacker:SmartUpdate:89901ac97cb2eae3221b3ed315bc5e53$\",\"image\":\"roundball.png\",\"size\":{\"h\":256,\"w\":256}}}"); +} \ No newline at end of file diff --git a/lime/demos/roundball/assets/roundball.png b/lime/demos/roundball/assets/roundball.png new file mode 100644 index 00000000..c55c5fb9 Binary files /dev/null and b/lime/demos/roundball/assets/roundball.png differ diff --git a/lime/demos/roundball/board.js b/lime/demos/roundball/board.js index 409e1b17..5c332142 100644 --- a/lime/demos/roundball/board.js +++ b/lime/demos/roundball/board.js @@ -182,7 +182,7 @@ rb.Board.prototype.checkSolutions = function() { * @return {Array.} Array of solutions. */ rb.Board.prototype.getSolutions = function() { - var r, c, g, group, res = []; + var r, c, g, group, res = [], i; //todo: this can be done with one loop diff --git a/lime/demos/roundball/button.js b/lime/demos/roundball/button.js index 4ac51766..7c5b5e77 100644 --- a/lime/demos/roundball/button.js +++ b/lime/demos/roundball/button.js @@ -12,6 +12,9 @@ goog.require('lime.GlossyButton'); rb.Button = function(txt) { lime.GlossyButton.call(this, txt); + this.updateState(this.upstate_); + this.updateState(this.downstate_); + this.borderWidth = 4; this.setColor('#000'); }; @@ -20,15 +23,11 @@ goog.inherits(rb.Button, lime.GlossyButton); /** * @inheritDoc */ -rb.Button.prototype.makeState_ = function() { - var state = new lime.RoundedRect().setFill('#fff').setRadius(10); - state.inner = new lime.RoundedRect().setRadius(10); - state.label = new lime.Label().setAlign('center'). +rb.Button.prototype.updateState = function(s) { + s.rect.setFill('#fff').setRadius(10); + s.inner.setRadius(10); + s.label.setAlign('center'). setFontFamily('"Trebuchet MS"').setFontColor('#eef').setFontSize(28); - - state.appendChild(state.inner); - state.inner.appendChild(state.label); - return state; }; /** @@ -36,8 +35,8 @@ rb.Button.prototype.makeState_ = function() { */ rb.Button.prototype.setColor = function(clr) { clr = lime.fill.parse(clr); - goog.array.forEach([this.upstate, this.downstate], function(s) { - var c = s == this.downstate ? clr.clone().addBrightness(.1) : clr; + goog.array.forEach([this.upstate_, this.downstate_], function(s) { + var c = s == this.downstate_ ? clr.clone().addBrightness(.1) : clr; //s.setFill(c); var c2 = c.clone().addBrightness(.3); var grad = new lime.fill.LinearGradient().setDirection(0, 0, 0, 1); diff --git a/lime/demos/roundball/game.js b/lime/demos/roundball/game.js index 20a2e3f8..9b6b492a 100644 --- a/lime/demos/roundball/game.js +++ b/lime/demos/roundball/game.js @@ -9,7 +9,6 @@ goog.require('rb.Progress'); */ rb.Game = function(size) { lime.Scene.call(this); - this.points = 0; //empty layer for contents @@ -18,14 +17,14 @@ rb.Game = function(size) { //make board this.board = new rb.Board(size, size, this).setPosition(25, 174); - + if(rb.isBrokenChrome()) this.board.setRenderer(lime.Renderer.CANVAS); // static background bubbles for baord. try dfkit.Renderer.CANVAS for this one as it is quite static var back = new lime.RoundedRect().setSize(690, 690).setAnchorPoint(0, 0).setPosition(17, 166).setRadius(30); for (var c = 0; c < this.board.cols; c++) { for (var r = 0; r < this.board.rows; r++) { - var b = new lime.Sprite().setFill('assets/shadow.png').setAnchorPoint(0, 0). + var b = new lime.Sprite().setFill(rb.ss.getFrame('shadow.png')).setAnchorPoint(0, 0). setSize(this.board.GAP * .94, this.board.GAP * .94). setPosition(11 + c * this.board.GAP, 11 + r * this.board.GAP); b.qualityRenderer = true; // no jagged edges on moz for this one diff --git a/lime/demos/roundball/gem.js b/lime/demos/roundball/gem.js index 5e19b082..2879e1fc 100644 --- a/lime/demos/roundball/gem.js +++ b/lime/demos/roundball/gem.js @@ -35,7 +35,7 @@ rb.Gem.random = function() { //var color = rb.Gem.colors[id]; var gem = new rb.Gem(); gem.index = id; - gem.circle.setFill('assets/ball_' + id + '.png'); + gem.circle.setFill(rb.ss.getFrame('ball_' + id + '.png')); return gem; }; @@ -45,7 +45,7 @@ rb.Gem.random = function() { rb.Gem.prototype.select = function() { if (this.selected_) return; var size = this.getSize().clone(); - this.highlight = new lime.Sprite().setSize(size).setFill('assets/selection.png'); + this.highlight = new lime.Sprite().setSize(size).setFill(rb.ss.getFrame('selection.png')); this.appendChild(this.highlight, 0); this.selected_ = true; diff --git a/lime/demos/roundball/rb.js b/lime/demos/roundball/rb.js index d4558e0f..80a0dada 100644 --- a/lime/demos/roundball/rb.js +++ b/lime/demos/roundball/rb.js @@ -12,24 +12,34 @@ goog.require('rb.Board'); goog.require('rb.Button'); goog.require('rb.Game'); goog.require('rb.Help'); +goog.require('lime.dom'); +goog.require('lime.SpriteSheet'); +goog.require('lime.ASSETS.roundball.json'); +goog.require('lime.parser.JSON'); //constant iPad size rb.WIDTH = 720; rb.HEIGHT = 1004; + + // entrypoint -rb.start = function() { +rb.start = function(parent) { + + lime.Renderer.CANVAS.CLEAR_COLOR = '#1c6aa1'; /* //enable for non-seeded random. useful for debugging var pseudoRandom = new goog.testing.PseudoRandom(109); pseudoRandom.install(); */ - - rb.director = new lime.Director(document.body, rb.WIDTH, rb.HEIGHT); + rb.director = new lime.Director(parent || document.body, rb.WIDTH, rb.HEIGHT); rb.director.makeMobileWebAppCapable(); - rb.loadMenu(); + rb.ss = new lime.SpriteSheet('assets/roundball.png',lime.ASSETS.roundball.json, lime.parser.JSON); + + + rb.loadMenu(); }; @@ -46,10 +56,8 @@ rb.Mode = { rb.loadMenu = function() { var scene = new lime.Scene(), layer = new lime.Layer().setPosition(rb.WIDTH / 2, 0); - if(rb.isBrokenChrome()) layer.setRenderer(lime.Renderer.CANVAS); - var title = new lime.Sprite().setFill('assets/main_title.png').setPosition(0, 290); title.qualityRenderer = true; layer.appendChild(title); diff --git a/lime/demos/roundball/rb2.html b/lime/demos/roundball/rb2.html new file mode 100644 index 00000000..cf925a1f --- /dev/null +++ b/lime/demos/roundball/rb2.html @@ -0,0 +1,23 @@ + + + + + RoundBall + + + + + + + + + + + + \ No newline at end of file diff --git a/lime/demos/tests/anim1.js b/lime/demos/tests/anim1.js index 8b1b4995..31a2b5eb 100644 --- a/lime/demos/tests/anim1.js +++ b/lime/demos/tests/anim1.js @@ -24,10 +24,10 @@ test.WIDTH = 600; test.HEIGHT = 400; -test.start = function() { +test.start = function(parent) { //director - test.director = new lime.Director(document.body, test.WIDTH, test.HEIGHT); + test.director = new lime.Director(parent || document.body, test.WIDTH, test.HEIGHT); test.director.makeMobileWebAppCapable(); @@ -44,7 +44,7 @@ test.start = function() { new lime.animation.MoveBy(200, 0).setDuration(1.5), new lime.animation.ScaleBy(2), new lime.animation.ColorTo(0,200,0) - + ), new lime.animation.Spawn( new lime.animation.MoveBy(-200, 0).setDuration(1.5), new lime.animation.ScaleBy(.5), diff --git a/lime/demos/tests/anim2.js b/lime/demos/tests/anim2.js index 82e7e0cc..07504e28 100644 --- a/lime/demos/tests/anim2.js +++ b/lime/demos/tests/anim2.js @@ -22,10 +22,10 @@ test.WIDTH = 600; test.HEIGHT = 400; -test.start = function() { +test.start = function(parent) { //director - test.director = new lime.Director(document.body, test.WIDTH, test.HEIGHT); + test.director = new lime.Director(parent || document.body, test.WIDTH, test.HEIGHT); test.director.makeMobileWebAppCapable(); var gamescene = new lime.Scene; diff --git a/lime/demos/tests/anim3.js b/lime/demos/tests/anim3.js index ec544968..e65e8aeb 100644 --- a/lime/demos/tests/anim3.js +++ b/lime/demos/tests/anim3.js @@ -21,10 +21,10 @@ test.WIDTH = 800; test.HEIGHT = 400; -test.start = function() { +test.start = function(parent) { //director - test.director = new lime.Director(document.body, test.WIDTH, test.HEIGHT); + test.director = new lime.Director(parent || document.body, test.WIDTH, test.HEIGHT); test.director.makeMobileWebAppCapable(); var gamescene = new lime.Scene; diff --git a/lime/demos/tests/anim4.js b/lime/demos/tests/anim4.js index 3f927921..2b7fad7d 100644 --- a/lime/demos/tests/anim4.js +++ b/lime/demos/tests/anim4.js @@ -19,10 +19,10 @@ test.WIDTH = 800; test.HEIGHT = 400; -test.start = function() { +test.start = function(parent) { //director - test.director = new lime.Director(document.body,1024, 768); + test.director = new lime.Director(parent || document.body,1024, 768); test.director.makeMobileWebAppCapable(); var scene = new lime.Scene(); diff --git a/lime/demos/tests/audio.js b/lime/demos/tests/audio.js index ad7b9f8c..266165ca 100644 --- a/lime/demos/tests/audio.js +++ b/lime/demos/tests/audio.js @@ -23,10 +23,10 @@ test.WIDTH = 600; test.HEIGHT = 400; -test.start = function() { +test.start = function(parent) { //director - test.director = new lime.Director(document.body, test.WIDTH, test.HEIGHT); + test.director = new lime.Director(parent || document.body, test.WIDTH, test.HEIGHT); test.director.makeMobileWebAppCapable(); diff --git a/lime/demos/tests/autoresize.js b/lime/demos/tests/autoresize.js index c34d5a42..3c6889f0 100644 --- a/lime/demos/tests/autoresize.js +++ b/lime/demos/tests/autoresize.js @@ -22,10 +22,10 @@ test.WIDTH = 800; test.HEIGHT = 600; -test.start = function() { +test.start = function(parent) { //director - test.director = new lime.Director(document.body, test.WIDTH, test.HEIGHT); + test.director = new lime.Director(parent || document.body, test.WIDTH, test.HEIGHT); test.director.makeMobileWebAppCapable(); var gamescene = new lime.Scene; diff --git a/lime/demos/tests/box2d.js b/lime/demos/tests/box2d.js index 09c56e8b..8ab9a0fa 100644 --- a/lime/demos/tests/box2d.js +++ b/lime/demos/tests/box2d.js @@ -23,7 +23,7 @@ test.WIDTH = 600; test.HEIGHT = 400; -test.start = function() { +test.start = function(parent) { /* @@ -33,7 +33,7 @@ test.start = function() { */ //director - test.director = new lime.Director(document.body, test.WIDTH, test.HEIGHT); + test.director = new lime.Director(parent || document.body, test.WIDTH, test.HEIGHT); test.director.makeMobileWebAppCapable(); var gamescene = new lime.Scene(); diff --git a/lime/demos/tests/box2d_2.js b/lime/demos/tests/box2d_2.js index cd075901..6cda663a 100644 --- a/lime/demos/tests/box2d_2.js +++ b/lime/demos/tests/box2d_2.js @@ -23,7 +23,7 @@ test.WIDTH = 600; test.HEIGHT = 400; -test.start = function() { +test.start = function(parent) { /* @@ -33,7 +33,7 @@ test.start = function() { */ //director - test.director = new lime.Director(document.body, test.WIDTH, test.HEIGHT); + test.director = new lime.Director(parent || document.body, test.WIDTH, test.HEIGHT); test.director.makeMobileWebAppCapable(); var gamescene = new lime.Scene(); diff --git a/lime/demos/tests/button1.js b/lime/demos/tests/button1.js index 12aca40f..f12b1fd9 100644 --- a/lime/demos/tests/button1.js +++ b/lime/demos/tests/button1.js @@ -17,10 +17,10 @@ test.WIDTH = 600; test.HEIGHT = 400; -test.start = function() { +test.start = function(parent) { //director - test.director = new lime.Director(document.body, test.WIDTH, test.HEIGHT); + test.director = new lime.Director(parent || document.body, test.WIDTH, test.HEIGHT); test.director.makeMobileWebAppCapable(); diff --git a/lime/demos/tests/button2.js b/lime/demos/tests/button2.js index badefd93..88958e52 100644 --- a/lime/demos/tests/button2.js +++ b/lime/demos/tests/button2.js @@ -19,10 +19,10 @@ test.WIDTH = 600; test.HEIGHT = 400; -test.start = function() { +test.start = function(parent) { //director - test.director = new lime.Director(document.body, test.WIDTH, test.HEIGHT); + test.director = new lime.Director(parent || document.body, test.WIDTH, test.HEIGHT); test.director.makeMobileWebAppCapable(); diff --git a/lime/demos/tests/canvas.js b/lime/demos/tests/canvas.js index a47f4b34..01a9688d 100644 --- a/lime/demos/tests/canvas.js +++ b/lime/demos/tests/canvas.js @@ -15,10 +15,10 @@ test.WIDTH = 600; test.HEIGHT = 400; -test.start = function() { +test.start = function(parent) { //director - test.director = new lime.Director(document.body, test.WIDTH, test.HEIGHT); + test.director = new lime.Director(parent || document.body, test.WIDTH, test.HEIGHT); test.director.makeMobileWebAppCapable(); var gamescene = new lime.Scene; diff --git a/lime/demos/tests/canvas2.js b/lime/demos/tests/canvas2.js index 06e6443a..86f37a73 100644 --- a/lime/demos/tests/canvas2.js +++ b/lime/demos/tests/canvas2.js @@ -21,9 +21,9 @@ test.WIDTH = 500; test.HEIGHT = 350; -test.start = function() { +test.start = function(parent) { - var director = new lime.Director(document.body, test.WIDTH, test.HEIGHT); + var director = new lime.Director(parent || document.body, test.WIDTH, test.HEIGHT); director.makeMobileWebAppCapable(); var scene = new lime.Scene; diff --git a/lime/demos/tests/canvascontext.js b/lime/demos/tests/canvascontext.js index e9380cd3..5fb87e3a 100644 --- a/lime/demos/tests/canvascontext.js +++ b/lime/demos/tests/canvascontext.js @@ -19,10 +19,10 @@ test.WIDTH = 600; test.HEIGHT = 400; -test.start = function() { +test.start = function(parent) { //director - test.director = new lime.Director(document.body, test.WIDTH, test.HEIGHT); + test.director = new lime.Director(parent || document.body, test.WIDTH, test.HEIGHT); test.director.makeMobileWebAppCapable(); var gamescene = new lime.Scene; diff --git a/lime/demos/tests/drag1.js b/lime/demos/tests/drag1.js index 1a65fabf..c377b4c9 100644 --- a/lime/demos/tests/drag1.js +++ b/lime/demos/tests/drag1.js @@ -18,10 +18,10 @@ test.WIDTH = 600; test.HEIGHT = 400; -test.start = function() { +test.start = function(parent) { //director - test.director = new lime.Director(document.body, test.WIDTH, test.HEIGHT); + test.director = new lime.Director(parent || document.body, test.WIDTH, test.HEIGHT); test.director.makeMobileWebAppCapable(); diff --git a/lime/demos/tests/events1.js b/lime/demos/tests/events1.js index bee2885e..2539025c 100644 --- a/lime/demos/tests/events1.js +++ b/lime/demos/tests/events1.js @@ -19,10 +19,10 @@ test.WIDTH = 600; test.HEIGHT = 400; -test.start = function() { +test.start = function(parent) { //director - test.director = new lime.Director(document.body, test.WIDTH, test.HEIGHT); + test.director = new lime.Director(parent || document.body, test.WIDTH, test.HEIGHT); test.director.makeMobileWebAppCapable(); diff --git a/lime/demos/tests/events2.js b/lime/demos/tests/events2.js index f241a026..eaaa7531 100644 --- a/lime/demos/tests/events2.js +++ b/lime/demos/tests/events2.js @@ -16,10 +16,10 @@ test.WIDTH = 600; test.HEIGHT = 400; -test.start = function() { +test.start = function(parent) { //director - test.director = new lime.Director(document.body, test.WIDTH, test.HEIGHT); + test.director = new lime.Director(parent || document.body, test.WIDTH, test.HEIGHT); test.director.makeMobileWebAppCapable(); diff --git a/lime/demos/tests/events3.js b/lime/demos/tests/events3.js index f5c38ec3..8d34610c 100644 --- a/lime/demos/tests/events3.js +++ b/lime/demos/tests/events3.js @@ -18,10 +18,10 @@ test.WIDTH = 600; test.HEIGHT = 400; -test.start = function() { +test.start = function(parent) { //director - test.director = new lime.Director(document.body, test.WIDTH, test.HEIGHT); + test.director = new lime.Director(parent || document.body, test.WIDTH, test.HEIGHT); test.director.makeMobileWebAppCapable(); diff --git a/lime/demos/tests/events4.js b/lime/demos/tests/events4.js index 2c7d7794..23dadd0a 100644 --- a/lime/demos/tests/events4.js +++ b/lime/demos/tests/events4.js @@ -17,10 +17,10 @@ test.WIDTH = 600; test.HEIGHT = 400; -test.start = function() { +test.start = function(parent) { //director - test.director = new lime.Director(document.body, test.WIDTH, test.HEIGHT); + test.director = new lime.Director(parent || document.body, test.WIDTH, test.HEIGHT); test.director.makeMobileWebAppCapable(); diff --git a/lime/demos/tests/events5.js b/lime/demos/tests/events5.js index f2fd10f7..456291b7 100644 --- a/lime/demos/tests/events5.js +++ b/lime/demos/tests/events5.js @@ -17,10 +17,10 @@ test.WIDTH = 600; test.HEIGHT = 400; -test.start = function() { +test.start = function(parent) { //director - test.director = new lime.Director(document.body, test.WIDTH, test.HEIGHT); + test.director = new lime.Director(parent || document.body, test.WIDTH, test.HEIGHT); test.director.makeMobileWebAppCapable(); diff --git a/lime/demos/tests/frame1.js b/lime/demos/tests/frame1.js index 3216e23d..c231d30b 100644 --- a/lime/demos/tests/frame1.js +++ b/lime/demos/tests/frame1.js @@ -15,10 +15,10 @@ test.WIDTH = 600; test.HEIGHT = 400; -test.start = function() { +test.start = function(parent) { //director - test.director = new lime.Director(document.body, test.WIDTH, test.HEIGHT); + test.director = new lime.Director(parent || document.body, test.WIDTH, test.HEIGHT); test.director.makeMobileWebAppCapable(); var gamescene = new lime.Scene; diff --git a/lime/demos/tests/frame2.js b/lime/demos/tests/frame2.js index 249de478..538b117a 100644 --- a/lime/demos/tests/frame2.js +++ b/lime/demos/tests/frame2.js @@ -14,10 +14,10 @@ test.WIDTH = 600; test.HEIGHT = 400; -test.start = function() { +test.start = function(parent) { //director - test.director = new lime.Director(document.body, test.WIDTH, test.HEIGHT); + test.director = new lime.Director(parent || document.body, test.WIDTH, test.HEIGHT); test.director.makeMobileWebAppCapable(); var gamescene = new lime.Scene; diff --git a/lime/demos/tests/frame3.js b/lime/demos/tests/frame3.js index 8ebfa296..e23ae1fe 100644 --- a/lime/demos/tests/frame3.js +++ b/lime/demos/tests/frame3.js @@ -16,10 +16,10 @@ test.WIDTH = 600; test.HEIGHT = 400; -test.start = function() { +test.start = function(parent) { //director - test.director = new lime.Director(document.body, test.WIDTH, test.HEIGHT); + test.director = new lime.Director(parent || document.body, test.WIDTH, test.HEIGHT); test.director.makeMobileWebAppCapable(); var gamescene = new lime.Scene; diff --git a/lime/demos/tests/frame4.js b/lime/demos/tests/frame4.js index a3dd1d0d..46f50c0a 100644 --- a/lime/demos/tests/frame4.js +++ b/lime/demos/tests/frame4.js @@ -17,10 +17,10 @@ test.WIDTH = 600; test.HEIGHT = 400; -test.start = function() { +test.start = function(parent) { //director - test.director = new lime.Director(document.body, test.WIDTH, test.HEIGHT); + test.director = new lime.Director(parent || document.body, test.WIDTH, test.HEIGHT); test.director.makeMobileWebAppCapable(); var gamescene = new lime.Scene; diff --git a/lime/demos/tests/keyframe.js b/lime/demos/tests/keyframe.js index 58878f2e..52ebe903 100644 --- a/lime/demos/tests/keyframe.js +++ b/lime/demos/tests/keyframe.js @@ -13,10 +13,10 @@ test.WIDTH = 600; test.HEIGHT = 400; -test.start = function() { +test.start = function(parent) { //director - test.director = new lime.Director(document.body, test.WIDTH, test.HEIGHT); + test.director = new lime.Director(parent || document.body, test.WIDTH, test.HEIGHT); test.director.makeMobileWebAppCapable(); var gamescene = new lime.Scene; diff --git a/lime/demos/tests/keyframe2.js b/lime/demos/tests/keyframe2.js index 897cc63e..d2f9aac8 100644 --- a/lime/demos/tests/keyframe2.js +++ b/lime/demos/tests/keyframe2.js @@ -19,10 +19,10 @@ test.WIDTH = 600; test.HEIGHT = 400; -test.start = function() { +test.start = function(parent) { //director - test.director = new lime.Director(document.body, test.WIDTH, test.HEIGHT); + test.director = new lime.Director(parent || document.body, test.WIDTH, test.HEIGHT); test.director.makeMobileWebAppCapable(); var gamescene = new lime.Scene; diff --git a/lime/demos/tests/labels1.js b/lime/demos/tests/labels1.js index aee4b719..ed57e7b7 100644 --- a/lime/demos/tests/labels1.js +++ b/lime/demos/tests/labels1.js @@ -13,10 +13,10 @@ test.WIDTH = 600; test.HEIGHT = 400; -test.start = function() { +test.start = function(parent) { //director - test.director = new lime.Director(document.body, test.WIDTH, test.HEIGHT); + test.director = new lime.Director(parent || document.body, test.WIDTH, test.HEIGHT); test.director.makeMobileWebAppCapable(); var gamescene = new lime.Scene; diff --git a/lime/demos/tests/labels2.js b/lime/demos/tests/labels2.js index 1034a7c0..d4868315 100644 --- a/lime/demos/tests/labels2.js +++ b/lime/demos/tests/labels2.js @@ -15,10 +15,10 @@ test.WIDTH = 600; test.HEIGHT = 400; -test.start = function() { +test.start = function(parent) { //director - test.director = new lime.Director(document.body, test.WIDTH, test.HEIGHT); + test.director = new lime.Director(parent || document.body, test.WIDTH, test.HEIGHT); test.director.makeMobileWebAppCapable(); var gamescene = new lime.Scene; diff --git a/lime/demos/tests/mask.js b/lime/demos/tests/mask.js index 88ebc9c5..03bb266b 100644 --- a/lime/demos/tests/mask.js +++ b/lime/demos/tests/mask.js @@ -15,10 +15,10 @@ test.WIDTH = 600; test.HEIGHT = 400; -test.start = function() { +test.start = function(parent) { //director - test.director = new lime.Director(document.body, test.WIDTH, test.HEIGHT); + test.director = new lime.Director(parent || document.body, test.WIDTH, test.HEIGHT); test.director.makeMobileWebAppCapable(); var gamescene = new lime.Scene; diff --git a/lime/demos/tests/mask2.js b/lime/demos/tests/mask2.js index f4246963..2c09193c 100644 --- a/lime/demos/tests/mask2.js +++ b/lime/demos/tests/mask2.js @@ -15,10 +15,10 @@ test.WIDTH = 600; test.HEIGHT = 400; -test.start = function() { +test.start = function(parent) { //director - test.director = new lime.Director(document.body, test.WIDTH, test.HEIGHT); + test.director = new lime.Director(parent || document.body, test.WIDTH, test.HEIGHT); test.director.makeMobileWebAppCapable(); var gamescene = new lime.Scene; diff --git a/lime/demos/tests/opacity.js b/lime/demos/tests/opacity.js index 4fd010da..f5d804c2 100644 --- a/lime/demos/tests/opacity.js +++ b/lime/demos/tests/opacity.js @@ -17,10 +17,10 @@ test.WIDTH = 600; test.HEIGHT = 400; -test.start = function() { +test.start = function(parent) { //director - test.director = new lime.Director(document.body, test.WIDTH, test.HEIGHT); + test.director = new lime.Director(parent || document.body, test.WIDTH, test.HEIGHT); test.director.makeMobileWebAppCapable(); var gamescene = new lime.Scene; diff --git a/lime/demos/tests/poly1.js b/lime/demos/tests/poly1.js index 8d2a883d..b47358e7 100644 --- a/lime/demos/tests/poly1.js +++ b/lime/demos/tests/poly1.js @@ -15,10 +15,10 @@ test.WIDTH = 600; test.HEIGHT = 400; -test.start = function() { +test.start = function(parent) { //director - test.director = new lime.Director(document.body, test.WIDTH, test.HEIGHT); + test.director = new lime.Director(parent || document.body, test.WIDTH, test.HEIGHT); test.director.makeMobileWebAppCapable(); var gamescene = new lime.Scene; diff --git a/lime/demos/tests/run_canvasonly.htm b/lime/demos/tests/run_canvasonly.htm new file mode 100644 index 00000000..8a2cb7d4 --- /dev/null +++ b/lime/demos/tests/run_canvasonly.htm @@ -0,0 +1,65 @@ + + + + +Run demos + + + + + + + + + + + + + + diff --git a/lime/demos/tests/scroll.js b/lime/demos/tests/scroll.js index 8afcf1de..891eea73 100644 --- a/lime/demos/tests/scroll.js +++ b/lime/demos/tests/scroll.js @@ -15,10 +15,10 @@ test.WIDTH = 800; test.HEIGHT = 600; -test.start = function() { +test.start = function(parent) { //director - test.director = new lime.Director(document.body, test.WIDTH, test.HEIGHT); + test.director = new lime.Director(parent || document.body, test.WIDTH, test.HEIGHT); test.director.makeMobileWebAppCapable(); var gamescene = new lime.Scene; diff --git a/lime/demos/tests/shapes1.js b/lime/demos/tests/shapes1.js index 35631e11..bc399bb0 100644 --- a/lime/demos/tests/shapes1.js +++ b/lime/demos/tests/shapes1.js @@ -13,10 +13,10 @@ test.WIDTH = 600; test.HEIGHT = 400; -test.start = function() { +test.start = function(parent) { //director - test.director = new lime.Director(document.body, test.WIDTH, test.HEIGHT); + test.director = new lime.Director(parent || document.body, test.WIDTH, test.HEIGHT); test.director.makeMobileWebAppCapable(); var gamescene = new lime.Scene; diff --git a/lime/demos/tests/shapes2.js b/lime/demos/tests/shapes2.js index d2405fee..77f995e4 100644 --- a/lime/demos/tests/shapes2.js +++ b/lime/demos/tests/shapes2.js @@ -14,10 +14,10 @@ test.WIDTH = 600; test.HEIGHT = 400; -test.start = function() { +test.start = function(parent) { //director - test.director = new lime.Director(document.body, test.WIDTH, test.HEIGHT); + test.director = new lime.Director(parent || document.body, test.WIDTH, test.HEIGHT); test.director.makeMobileWebAppCapable(); var gamescene = new lime.Scene; diff --git a/lime/demos/tests/shapes3.js b/lime/demos/tests/shapes3.js index 79512faf..01b8f92e 100644 --- a/lime/demos/tests/shapes3.js +++ b/lime/demos/tests/shapes3.js @@ -15,10 +15,10 @@ test.WIDTH = 600; test.HEIGHT = 400; -test.start = function() { +test.start = function(parent) { //director - test.director = new lime.Director(document.body, test.WIDTH, test.HEIGHT); + test.director = new lime.Director(parent || document.body, test.WIDTH, test.HEIGHT); test.director.makeMobileWebAppCapable(); var gamescene = new lime.Scene; diff --git a/lime/demos/tests/stroke.js b/lime/demos/tests/stroke.js index b5f83e16..0fd7195b 100644 --- a/lime/demos/tests/stroke.js +++ b/lime/demos/tests/stroke.js @@ -15,45 +15,45 @@ test.WIDTH = 500; test.HEIGHT = 350; -test.start = function() { +test.start = function(parent) { - var director = new lime.Director(document.body, test.WIDTH, test.HEIGHT); + var director = new lime.Director(parent || document.body, test.WIDTH, test.HEIGHT); director.makeMobileWebAppCapable(); var scene = new lime.Scene; - + var layer = new lime.Layer().setPosition(70,170); scene.appendChild(layer); - + var sprite = new lime.Sprite().setSize(90,90).setFill('#c00'); layer.appendChild(sprite); - + var circle = new lime.Circle().setSize(90,90).setFill('assets/html5_badge.png').setPosition(80,0); layer.appendChild(circle); - + var rrect = new lime.RoundedRect().setSize(70,90).setRadius(15).setRotation(-20).setFill( new lime.fill.LinearGradient().setDirection(0,0,1,1). addColorStop(0,0,0,100,.9).addColorStop(1,0,0,100,0) ).setPosition(160,0); layer.appendChild(rrect); - + var tri = new lime.Polygon().setPoints(0,-70 ,40,0, -40,0).setFill( new lime.fill.LinearGradient().setDirection(0,0,0,1). addColorStop(0.4,200,0,0).addColorStop(1,0,200,0) ).setPosition(220,20); layer.appendChild(tri); - + var sprite2 = new lime.Label().setText('Hi').setFontColor('#fff').setFontSize(32). setPadding(15,10).setRotation(10).setFill('#0a0').setPosition(280,0); layer.appendChild(sprite2); - + var circle2 = new lime.Circle().setSize(100,70).setRotation(5).setPosition(350,0); layer.appendChild(circle2); - + var index = 0; lime.scheduleManager.scheduleWithDelay(function(){ var child = layer.getChildAt(index); - + child.setStroke( Math.floor(Math.random()*6)*2+4, Math.floor(Math.random()*255), @@ -61,11 +61,11 @@ test.start = function() { Math.floor(Math.random()*255), Math.random()*.5+.5 ); - + index++; if(index>=layer.getNumberOfChildren()) index=0; },this,500); - + // set active scene director.replaceScene(scene); }; diff --git a/lime/demos/tests/tiled1.js b/lime/demos/tests/tiled1.js index bece3dd5..49fd87d0 100644 --- a/lime/demos/tests/tiled1.js +++ b/lime/demos/tests/tiled1.js @@ -13,17 +13,17 @@ goog.require('lime.parser.TMX'); test.WIDTH = 800; test.HEIGHT = 600; -test.start = function(){ +test.start = function(parent){ - test.director = new lime.Director(document.body, test.WIDTH, test.HEIGHT); + test.director = new lime.Director(parent || document.body, test.WIDTH, test.HEIGHT); test.director.makeMobileWebAppCapable(); var gamescene = new lime.Scene; - + layer = new lime.Layer().setRenderer(lime.Renderer.CANVAS); //canvas renderer is recommended for tiled maps. much faster in most cases gamescene.appendChild(layer); - + var tmx = new lime.parser.TMX('assets/desert.tmx'); for(var j = 0; j < tmx.layers.length; j++) { @@ -37,5 +37,5 @@ test.start = function(){ } // set active scene test.director.replaceScene(gamescene); - + } \ No newline at end of file diff --git a/lime/demos/tests/tiled2.js b/lime/demos/tests/tiled2.js index b8b238d2..2b42d2d2 100644 --- a/lime/demos/tests/tiled2.js +++ b/lime/demos/tests/tiled2.js @@ -13,13 +13,13 @@ goog.require('lime.parser.TMX'); test.WIDTH = 800; test.HEIGHT = 600; -test.start = function(){ +test.start = function(parent){ - test.director = new lime.Director(document.body, test.WIDTH, test.HEIGHT); + test.director = new lime.Director(parent || document.body, test.WIDTH, test.HEIGHT); test.director.makeMobileWebAppCapable(); var gamescene = new lime.Scene; - + var tmx = new lime.parser.TMX('assets/sewers.tmx'); //canvas renderer is recommended for tiled maps. much faster in most cases layer = new lime.Layer().setRenderer(lime.Renderer.CANVAS); @@ -34,12 +34,12 @@ test.start = function(){ layer.appendChild(sprite); } } - + goog.events.listen(layer, ['mousedown', 'touchstart'], function(e) { e.startDrag(); }); - + // set active scene test.director.replaceScene(gamescene); - + } \ No newline at end of file diff --git a/lime/demos/tests/tiled3.js b/lime/demos/tests/tiled3.js index 98502c87..17ce796f 100644 --- a/lime/demos/tests/tiled3.js +++ b/lime/demos/tests/tiled3.js @@ -13,13 +13,13 @@ goog.require('lime.parser.TMX'); test.WIDTH = 800; test.HEIGHT = 600; -test.start = function(){ +test.start = function(parent){ - test.director = new lime.Director(document.body, test.WIDTH, test.HEIGHT); + test.director = new lime.Director(parent || document.body, test.WIDTH, test.HEIGHT); test.director.makeMobileWebAppCapable(); var gamescene = new lime.Scene; - + var tmx = new lime.parser.TMX('assets/isometric_grass_and_water.tmx'); layer = new lime.Layer().setRenderer(lime.Renderer.CANVAS).setPosition(400,0); //canvas renderer is recommended for tiled maps. much faster in most cases @@ -34,12 +34,12 @@ test.start = function(){ layer.appendChild(sprite); } } - + goog.events.listen(layer, ['mousedown', 'touchstart'], function(e) { e.startDrag(); }); - + // set active scene test.director.replaceScene(gamescene); - + } \ No newline at end of file diff --git a/lime/demos/tests/transitions1.js b/lime/demos/tests/transitions1.js index e6e20937..bfaf6df2 100644 --- a/lime/demos/tests/transitions1.js +++ b/lime/demos/tests/transitions1.js @@ -14,9 +14,9 @@ goog.require('lime.transitions.SlideIn'); test.WIDTH = 800; test.HEIGHT = 600; -test.start = function() { +test.start = function(parent) { - test.director = new lime.Director(document.body, test.WIDTH, test.HEIGHT); + test.director = new lime.Director(parent || document.body, test.WIDTH, test.HEIGHT); test.director.makeMobileWebAppCapable(); var scene1 = test.createScene('#666'); @@ -42,11 +42,11 @@ test.start = function() { scene2.appendChild(button1); scene2.appendChild(button2); - + goog.events.listenOnce(button1, 'click', function() { test.director.popScene(); }, false, this); - + goog.events.listenOnce(button2, 'click', function() { test.director.popScene(lime.transitions.SlideIn); }, false, this); diff --git a/lime/demos/zlizer/button.js b/lime/demos/zlizer/button.js index d45dac22..c962ce3a 100644 --- a/lime/demos/zlizer/button.js +++ b/lime/demos/zlizer/button.js @@ -12,24 +12,23 @@ goog.require('lime.GlossyButton'); zlizer.Button = function(txt) { lime.GlossyButton.call(this, txt); + this.updateState(this.upstate_); + this.updateState(this.downstate_); + this.borderWidth = 4; this.setColor('#000'); }; goog.inherits(zlizer.Button, lime.GlossyButton); + /** - * Make state for a button. - * @private - * @return {lime.RoundedRect} state. + * @inheritDoc */ -zlizer.Button.prototype.makeState_ = function() { - var state = new lime.RoundedRect().setFill('#fff').setRadius(15); - state.inner = new lime.RoundedRect().setRadius(15); - state.label = new lime.Label().setAlign('center').setFontColor('#eef').setFontSize(35).setSize(250, 35); - - state.appendChild(state.inner); - state.inner.appendChild(state.label); - return state; +zlizer.Button.prototype.updateState = function(s) { + s.rect.setFill('#fff').setRadius(15); + s.inner.setRadius(15); + s.label.setAlign('center'). + setFontColor('#eef').setFontSize(35).setSize(250, 35); }; /** @@ -39,8 +38,8 @@ zlizer.Button.prototype.makeState_ = function() { */ zlizer.Button.prototype.setColor = function(clr) { clr = lime.fill.parse(clr); - goog.array.forEach([this.upstate, this.downstate], function(s) { - var c = s == this.downstate ? clr.clone().addBrightness(.1) : clr; + goog.array.forEach([this.upstate_, this.downstate_], function(s) { + var c = s == this.downstate_ ? clr.clone().addBrightness(.1) : clr; //s.setFill(c); var c2 = c.clone().addBrightness(.3); var grad = new lime.fill.LinearGradient().setDirection(0, 0, 0, 1); diff --git a/lime/demos/zlizer/game.js b/lime/demos/zlizer/game.js index 81deb82f..be8dd3f4 100644 --- a/lime/demos/zlizer/game.js +++ b/lime/demos/zlizer/game.js @@ -70,11 +70,11 @@ zlizer.Game = function(level) { goog.events.listen(btn, 'click', function() {zlizer.loadMenuScene(lime.transitions.MoveInUp);}); this.startup(); - + //only needed to use pointInPath() function. no actual drawing. var canvas = goog.dom.createDom('canvas'); this.ctx = canvas.getContext('2d'); - + //lime logo zlizer.builtWithLime(this); }; @@ -112,12 +112,12 @@ zlizer.Game.prototype.start = function() { this.touches = []; this.layer.runAction(new lime.animation.FadeTo(1)); - - this.graphics = new lime.CanvasContext().setSize(zlizer.director.getSize().clone()).setAnchorPoint(0,0).setQuality(.5); + + this.graphics = new lime.CanvasContext().setSize(zlizer.director.getSize().clone()).setAnchorPoint(0,0); this.appendChild(this.graphics); this.graphics.draw = goog.bind(this.drawTouches_,this); - + this.isdown = false; goog.events.listen(this, ['mousedown', 'touchstart', 'keydown'], @@ -129,7 +129,6 @@ zlizer.Game.prototype.start = function() { }; zlizer.Game.prototype.drawTouches_ = function(ctx) { - var now = goog.now(); if(!this.lastRun_) this.lastRun_ = now; var dt = now-this.lastRun_, @@ -140,19 +139,21 @@ zlizer.Game.prototype.drawTouches_ = function(ctx) { t, i, p, particles; this.lastRun_ = now; - + + + /* if(goog.userAgent.MOBILE) this.ctx.globalCompositeOperation = 'copy'; - else + else ctx.clearRect(0,0,zlizer.director.getSize().width,zlizer.director.getSize().height); - + */ // style for clear. clearRect is very slow on ios ctx.strokeStyle = 'rgba(0,0,0,0)'; ctx.lineCap = 'round'; ctx.lineWidth = 17; ctx.shadowBlur = 0; ctx.shadowColor = '#fff'; - + var t = this.touches.length; while (--t >= 0) { @@ -203,6 +204,8 @@ zlizer.Game.prototype.drawTouches_ = function(ctx) { } } + + }; zlizer.Game.prototype.downHandler_ = function(e) { @@ -218,7 +221,7 @@ zlizer.Game.prototype.downHandler_ = function(e) { e.swallow(['mousemove', 'touchmove'], goog.partial(this.moveHandler_, touch)); e.swallow(['mouseup', 'touchend', 'touchcancel', 'keyup'], goog.partial(this.upHandler_, touch)); - + }; zlizer.Game.prototype.moveHandler_ = function(touch,e) { if (!goog.isDef(touch.pos)) { @@ -235,7 +238,7 @@ zlizer.Game.prototype.moveHandler_ = function(touch,e) { if (dx > 0) if (dy > 0) touch.quaters[0] = 1; else touch.quaters[1] = 1; - else; + else if (dy > 0) touch.quaters[2] = 1; else touch.quaters[3] = 1; diff --git a/lime/demos/zlizer/zlizer.js b/lime/demos/zlizer/zlizer.js index 8bbbe11e..f481a833 100644 --- a/lime/demos/zlizer/zlizer.js +++ b/lime/demos/zlizer/zlizer.js @@ -22,9 +22,10 @@ zlizer.WIDTH = 768; zlizer.HEIGHT = 1004; // entrypoint -zlizer.start = function() { +zlizer.start = function(parent) { + lime.Renderer.CANVAS.CLEAR_COLOR = '#5ea71d'; - zlizer.director = new lime.Director(document.body, zlizer.WIDTH, zlizer.HEIGHT); + zlizer.director = new lime.Director(parent || document.body, zlizer.WIDTH, zlizer.HEIGHT); zlizer.director.makeMobileWebAppCapable(); lime.Label.defaultFont = 'Impact'; @@ -81,7 +82,7 @@ zlizer.loadMenuScene = function(opt_transition) { var btns_layer = new lime.Layer().setPosition(-250, 110); levels.appendChild(btns_layer); - + var r = 0; for (r = 0; r < 4; r++) { for (var c = 0; c < 5; c++) { @@ -95,12 +96,12 @@ zlizer.loadMenuScene = function(opt_transition) { } //Creates a button to go back to the main menu - var btn_main = new zlizer.Button('Back to Menu').setSize(400, 80).setPosition(250, r * 90); + var btn_main = new zlizer.Button('Back to Menu').setSize(400, 80).setPosition(250, r * 90); btns_layer.appendChild(btn_main); goog.events.listen(btn_main, lime.Button.Event.CLICK, function() { contents.runAction(new lime.animation.MoveTo(0, 280).enableOptimizations()); },false, num); - + }; diff --git a/lime/demos/zlizer/zlizer2.html b/lime/demos/zlizer/zlizer2.html new file mode 100644 index 00000000..e2163338 --- /dev/null +++ b/lime/demos/zlizer/zlizer2.html @@ -0,0 +1,26 @@ + + + + + zlizer + + + + + + + + + + + + + + diff --git a/lime/lib/jukebox/Manager.js b/lime/lib/jukebox/Manager.js index 6278af92..f028b8ed 100644 --- a/lime/lib/jukebox/Manager.js +++ b/lime/lib/jukebox/Manager.js @@ -164,7 +164,7 @@ jukebox.Manager.prototype = { * Flash Audio Support * Hint: All Android devices support Flash, even Android 1.6 ones */ - this.features.flashaudio = !!navigator.mimeTypes['application/x-shockwave-flash'] || !!navigator.plugins['Shockwave Flash'] || false; + this.features.flashaudio = !!navigator.mimeTypes && (!!navigator.mimeTypes['application/x-shockwave-flash'] || !!navigator.plugins['Shockwave Flash'] || false); // Internet Explorer if (window.ActiveXObject){ diff --git a/lime/src/animation/animation.js b/lime/src/animation/animation.js index 79075d67..e5b1fcd2 100644 --- a/lime/src/animation/animation.js +++ b/lime/src/animation/animation.js @@ -41,6 +41,16 @@ lime.animation.Animation = function() { this.status_ = 0; + this.optimizations_ = null; + + this.playTime_ = 0; + + this.firstFrame_ = 1; + + this.dt_ = 0; + + goog.getUid(this); + }; goog.inherits(lime.animation.Animation, goog.events.EventTarget); diff --git a/lime/src/animation/moveby.js b/lime/src/animation/moveby.js index aa42b1b3..f2eed0d9 100644 --- a/lime/src/animation/moveby.js +++ b/lime/src/animation/moveby.js @@ -25,6 +25,9 @@ lime.animation.MoveBy = function(delta, opt_y) { this.delta_ = /** @type {!goog.math.Coordinate} */ (delta); } + this.speed_ = 0; + this.speedCalcDone_ = 0; + }; goog.inherits(lime.animation.MoveBy, lime.animation.Animation); @@ -64,10 +67,10 @@ lime.animation.MoveBy.prototype.makeTargetProp = function(target) { */ lime.animation.MoveBy.prototype.calcDurationFromSpeed_ = function(){ if(!this.speed_) return; - + this.setDuration(this.speed_ * goog.math.Coordinate.distance( this.delta_, new goog.math.Coordinate(0, 0)) / 100); - + this.speedCalcDone_ = 1; } diff --git a/lime/src/animation/sequence.js b/lime/src/animation/sequence.js index e1379309..b03a534b 100644 --- a/lime/src/animation/sequence.js +++ b/lime/src/animation/sequence.js @@ -31,6 +31,9 @@ lime.animation.Sequence = function(one) { this.setDuration(this.actions[0].duration_ + this.actions[1].duration_); + this.split_ = null; + this.last_ = 0; + }; goog.inherits(lime.animation.Sequence, lime.animation.Animation); diff --git a/lime/src/audio/audiomap.js b/lime/src/audio/audiomap.js index 9e98593e..57ca1cf5 100644 --- a/lime/src/audio/audiomap.js +++ b/lime/src/audio/audiomap.js @@ -88,7 +88,7 @@ lime.audio.AudioMap.prototype.play = function(sprite, opt_loop, opt_after) { else if (this.player && this.config['spritemap'][sprite] && !lime.audio.getMute()) { this.player.play(sprite, true); var ctx = (this.player.context); - if (!ctx.duration || ctx.buffered.end(0) | 0 < ctx.duration | 0) return; + if (!ctx.duration || (ctx.buffered && (ctx.buffered.end(0) | 0 < ctx.duration | 0))) return; if (lime.audio._playQueue.indexOf(this) == -1) { lime.audio._playQueue.push(this); } diff --git a/lime/src/director.js b/lime/src/director.js index 798b54d5..0c7ea5d6 100644 --- a/lime/src/director.js +++ b/lime/src/director.js @@ -14,8 +14,10 @@ goog.require('goog.math.Vec2'); goog.require('goog.style'); goog.require('lime'); goog.require('lime.Node'); +goog.require('lime.dom'); goog.require('lime.events.EventDispatcher'); goog.require('lime.helper.PauseScene'); +goog.require('lime.Renderer.CANVAS'); goog.require('lime.scheduleManager'); goog.require('lime.transitions.Transition'); @@ -31,6 +33,8 @@ goog.require('lime.transitions.Transition'); lime.Director = function(parentElement, opt_width, opt_height) { lime.Node.call(this); + this.container = parentElement; + // Unlike other nodes Director is always in the DOM as // it requires parentNode in the constructor this.inTree_ = true; @@ -54,10 +58,20 @@ lime.Director = function(parentElement, opt_width, opt_height) { this.coverStack_ = []; this.domClassName = goog.getCssName('lime-director'); - this.createDomElement(); - parentElement.appendChild(this.domElement); + if (parentElement.getContext) { + if (!this.container.tagName) { + this.container.tagName = 'CANVAS'; // Ejecta hack. + } + this.setRenderer(lime.Renderer.CANVAS); + this.domElement = this.container; + } + this.updateDomElement(); + + if (this.domElement && this.domElement !== this.container) { + parentElement.appendChild(this.domElement); + } if (goog.userAgent.WEBKIT && goog.userAgent.MOBILE) { //todo: Not pretty solution. Cover layers may not be needed at all. @@ -90,8 +104,8 @@ lime.Director = function(parentElement, opt_width, opt_height) { meta.content = content; document.getElementsByTagName('head').item(0).appendChild(meta); - - + + //todo: look for a less hacky solution if(goog.userAgent.MOBILE && !goog.global['navigator'].standalone){ var that = this; @@ -112,16 +126,23 @@ lime.Director = function(parentElement, opt_width, opt_height) { this.setDisplayFPS(goog.DEBUG); this.setPaused(false); - var vsm = new goog.dom.ViewportSizeMonitor(); goog.events.listen(vsm, goog.events.EventType.RESIZE, this.invalidateSize_, false, this); goog.events.listen(goog.global, 'orientationchange', this.invalidateSize_, false, this); - lime.scheduleManager.schedule(this.step_, this); + if (this.container === this.domElement) + lime.scheduleManager.schedule(function() { + var size = goog.style.getSize(parentElement); + if (size.width !== parentSize.width || size.height !== parentSize.height) { + this.invalidateSize_(); + parentSize = size; + } + }, this); + this.eventDispatcher = new lime.events.EventDispatcher(this); @@ -135,7 +156,7 @@ lime.Director = function(parentElement, opt_width, opt_height) { this.invalidateSize_(); - + if(goog.DEBUG){ goog.events.listen(goog.global,'keyup',this.keyUpHandler_,false,this); } @@ -143,6 +164,11 @@ lime.Director = function(parentElement, opt_width, opt_height) { }; goog.inherits(lime.Director, lime.Node); +/* +lime.Director.prototype.needsDomElement = function() { + return this.container.tagName !== 'CANVAS' +}; +*/ /** * Milliseconds between recalculating FPS value @@ -221,6 +247,8 @@ lime.Director.prototype.setDisplayFPS = function(value) { this.frames_ = 0; this.accumDt_ = 0; + if (!lime.dom.isDOMSupported()) return; + this.fpsElement_ = goog.dom.createDom('div'); goog.dom.classes.add(this.fpsElement_, goog.getCssName('lime-fps')); this.domElement.parentNode.appendChild(this.fpsElement_); @@ -293,27 +321,31 @@ lime.Director.prototype.replaceScene = function(scene, opt_transition, var removelist = []; var i = this.sceneStack_.length; while (--i >= 0) { - this.sceneStack_[i].wasRemovedFromTree(); - removelist.push(this.sceneStack_[i].domElement); - this.sceneStack_[i].parent_ = null; + //this.sceneStack_[i].wasRemovedFromTree(); + removelist.push(this.sceneStack_[i]); + //this.sceneStack_[i].parent_ = null; } this.sceneStack_.length = 0; this.sceneStack_.push(scene); - scene.domElement.style['display']='none'; - this.domElement.appendChild(scene.domElement); - scene.parent_ = this; - scene.wasAddedToTree(); + /*if (scene.domElement) { + // scene.domElement.style['display']='none'; + // this.domElement.appendChild(scene.domElement); + }*/ + this.appendChild(scene); + + //scene.parent_ = this; + //scene.wasAddedToTree(); var transition = new transitionclass(outgoing, scene); - + goog.events.listenOnce(transition,'end',function() { var i = removelist.length; while (--i >= 0) { - goog.dom.removeNode(removelist[i]); + this.removeChild(removelist[i]); } removelist.length = 0; - + },false,this); if (goog.isDef(opt_duration)) { @@ -326,11 +358,11 @@ lime.Director.prototype.replaceScene = function(scene, opt_transition, }; /** @inheritDoc */ -lime.Director.prototype.updateLayout = function() { +/*lime.Director.prototype.updateLayout = function() { // debugger; this.dirty_ &= ~lime.Dirty.LAYOUT; }; - +*/ /** * Push scene to the top of scene stack * @param {lime.Scene} scene New scene. @@ -353,9 +385,10 @@ lime.Director.prototype.pushScene = function(scene, opt_transition, opt_duration scene.domElement.style['display'] = 'none'; } this.sceneStack_.push(scene); - this.domElement.appendChild(scene.domElement); - scene.parent_ = this; - scene.wasAddedToTree(); + this.appendChild(scene); + //this.domElement.appendChild(scene.domElement); + //scene.parent_ = this; + //scene.wasAddedToTree(); if (transition) { transition.start(); @@ -371,22 +404,23 @@ lime.Director.prototype.pushScene = function(scene, opt_transition, opt_duration * @return Transition object if opt_transition is defined */ lime.Director.prototype.popScene = function(opt_transition, opt_duration) { - var transition, + var transition, outgoing = this.getCurrentScene(); - + if (goog.isNull(outgoing)) return; - + var popOutgoing = function() { - outgoing.wasRemovedFromTree(); - outgoing.parent_ = null; - goog.dom.removeNode(outgoing.domElement); + //outgoing.wasRemovedFromTree(); + //outgoing.parent_ = null; + this.removeChild(outgoing); + //goog.dom.removeNode(outgoing.domElement); this.sceneStack_.pop(); outgoing = null; // GC }; // Transitions require an existing incoming scene if (goog.isDef(opt_transition) && (this.sceneStack_.length > 1)) { transition = new opt_transition(outgoing, this.sceneStack_[this.sceneStack_.length - 2]); - + if (goog.isDef(opt_duration)) { transition.setDuration(opt_duration); } @@ -483,12 +517,17 @@ lime.Director.prototype.localToScreen = function(c) { return coord; }; +lime.Director.prototype.measureContents = function() { + + return this.getFrame(); + +}; /** * @inheritDoc */ lime.Director.prototype.update = function() { - lime.Node.prototype.update.call(this); + lime.Node.prototype.update.apply(this, arguments); var i = this.coverStack_.length; while (--i >= 0) { @@ -503,9 +542,9 @@ lime.Director.prototype.update = function() { */ lime.Director.prototype.invalidateSize_ = function() { - var stageSize = goog.style.getSize(this.domElement.parentNode); + var stageSize = goog.style.getSize(this.container); - if (this.domElement.parentNode == document.body) { + if (this.container == document.body) { window.scrollTo(0, 0); if (goog.isNumber(window.innerHeight)) { stageSize.height = window.innerHeight; @@ -525,7 +564,7 @@ lime.Director.prototype.invalidateSize_ = function() { } this.updateDomOffset_(); - + // overflow hidden is for hiding away unused edges of document // height addition is because scroll(0,0) doesn't work any more if the // document has no edge @tonis todo:look for less hacky solution(iframe?). @@ -542,6 +581,7 @@ lime.Director.prototype.invalidateSize_ = function() { * web application on iOS devices */ lime.Director.prototype.makeMobileWebAppCapable = function() { + if (!lime.dom.isDOMSupported()) return; var meta = document.createElement('meta'); meta.name = 'apple-mobile-web-app-capable'; @@ -574,7 +614,7 @@ lime.Director.prototype.makeMobileWebAppCapable = function() { * @private */ lime.Director.prototype.updateDomOffset_ = function() { - this.domOffset = goog.style.getPageOffset(this.domElement.parentNode); + this.domOffset = goog.style.getPageOffset(this.container); }; /** diff --git a/lime/src/events/eventdispatcher.js b/lime/src/events/eventdispatcher.js index 455223c4..a83bc691 100644 --- a/lime/src/events/eventdispatcher.js +++ b/lime/src/events/eventdispatcher.js @@ -27,7 +27,7 @@ lime.events.EventDispatcher.prototype.register = function(node, eventType) { //dom tree changes otherwise goog.events.listen(eventType.substring(0, 5) == 'touch' && node!=this.director ? document : (eventType.substring(0, 3) == 'key' ? - window : this.director.domElement.parentNode), eventType, + window : this.director.container), eventType, this, false, this); } else { @@ -47,7 +47,7 @@ lime.events.EventDispatcher.prototype.release = function(node, eventType) { if (goog.isDef(this.handlers[eventType])) { goog.array.remove(this.handlers[eventType], node); if (!this.handlers[eventType].length) { - goog.events.unlisten(this.director.domElement.parentNode, + goog.events.unlisten(this.director.container, eventType, this, false, this); delete this.handlers[eventType]; } diff --git a/lime/src/fill/frame.js b/lime/src/fill/frame.js index 855e8208..ff2bf5ad 100644 --- a/lime/src/fill/frame.js +++ b/lime/src/fill/frame.js @@ -9,6 +9,7 @@ goog.require('goog.dom.classes'); goog.require('goog.dom'); goog.require('goog.math.Vec2'); goog.require('goog.math.Size'); +goog.require('lime.dom'); /** * Image fill. @@ -22,19 +23,19 @@ goog.require('goog.math.Size'); */ lime.fill.Frame = function(img, rect, opt_offset, opt_size, opt_rotated) { lime.fill.Image.call(this,img); - + if(goog.isNumber(rect)){ rect = new goog.math.Rect(arguments[1],arguments[2],arguments[3],arguments[4]); opt_offset = new goog.math.Vec2(0,0); opt_size = new goog.math.Size(rect.width,rect.height); opt_rotated = false; } - + this.rect_ = rect; this.coffset_ = opt_offset; this.csize_ = opt_size; this.rotated_ = opt_rotated; - + var r = this.rect_,key = [this.url_,r.width,r.height,r.left,r.top,this.coffset_.x,this.coffset_.y].join('_'); if(goog.isDef(this.dataCache_[key])){ this.data_ = this.dataCache_[key]; @@ -50,15 +51,14 @@ lime.fill.Frame = function(img, rect, opt_offset, opt_size, opt_rotated) { this.data_.initializer = this; this.data_.classname = this.getNextCssClass_(); this.dataCache_[key] = this.data_; - + if(this.USE_CSS_CANVAS){ this.ctx = document.getCSSCanvasContext('2d', this.data_.classname, this.csize_.width, this.csize_.height); } else { //todo: FF4 has support for element backgrounds. probably faster than this png url. - this.ctx = this.makeCanvas(); + //this.ctx = this.makeCanvas(); } - if(this.isLoaded()){ this.makeFrameData_(); } @@ -89,20 +89,20 @@ lime.fill.Frame.prototype.USE_CSS_CANVAS = goog.isFunction(document.getCSSCanvas * @inheritDoc */ lime.fill.Frame.prototype.initForSprite = function(sprite){ - + var size = sprite.getSize(); if(size.width==0 && size.height==0){ sprite.setSize(this.csize_.width,this.csize_.height); } - + lime.fill.Image.prototype.initForSprite.call(this,sprite); - + if(!this.isProcessed()){ goog.events.listen(this,'processed',function(){ sprite.setDirty(lime.Dirty.CONTENT); },false,this); } - + //switch to canvas if no support }; @@ -126,31 +126,32 @@ lime.fill.Frame.prototype.getNextCssClass_ = function(){ * @private */ lime.fill.Frame.prototype.makeFrameData_ = function(){ - this.writeToCanvas(this.ctx); - - if(!this.USE_CSS_CANVAS){ - - var contents = this.cvs.toDataURL("image/png"), - rule = '.'+this.data_.classname+'{background-image:url('+contents+') !important}'; - if(!styleSheet){ - goog.style.installStyles(rule); - styleSheet = document.styleSheets[document.styleSheets.length-1]; - } - else { - // why doesn't addCssRule work in IE9??? - if(goog.userAgent.IE) styleSheet.cssText+=rule; - else goog.cssom.addCssRule(styleSheet,rule); + if (this.ctx) { + this.writeToCanvas(this.ctx); } - - // laoding into image to avoid flickery onf firefox firat load - this.data_.img = goog.dom.createDom('img'); - this.data_.img.src = contents; + if(!this.USE_CSS_CANVAS && lime.dom.isDOMSupported()){ + + var contents = this.cvs.toDataURL("image/png"), + rule = '.'+this.data_.classname+'{background-image:url('+contents+') !important}'; + if (!styleSheet) { + goog.style.installStyles(rule); + styleSheet = document.styleSheets[document.styleSheets.length-1]; + } + else { + // why doesn't addCssRule work in IE9??? + if(goog.userAgent.IE) styleSheet.cssText+=rule; + else goog.cssom.addCssRule(styleSheet,rule); + } + + // loading into image to avoid flickery on firefox first load + this.data_.img = goog.dom.createDom('img'); + this.data_.img.src = contents; } - this.data_.processed = true; this.dispatchEvent(new goog.events.Event('processed')); - + this.getImageElement().complete = true; + }; })(); @@ -167,6 +168,8 @@ lime.fill.Frame.prototype.getImageElement = function(){ if(!this.cvs){ var ctx = this.makeCanvas(); this.writeToCanvas(ctx); + this.ctx = ctx; + this.cvs._pattern = false; } this.frameImgCache_ = this.cvs; } @@ -204,15 +207,14 @@ lime.fill.Frame.prototype.writeToCanvas = function(ctx){ ox = this.coffset_.x; oy = this.coffset_.y; } - ctx.drawImage(this.image_,l,t,w,h,ox,oy,w,h); }; /** @inheritDoc */ lime.fill.Frame.prototype.setDOMStyle = function(domEl,shape) { if(this.USE_CSS_CANVAS){ - domEl.style['background'] = '-webkit-canvas('+this.data_.classname+')'; - } + domEl.style['background'] = '-webkit-canvas('+this.data_.classname+')'; + } else if(this.data_.classname!=shape.cvs_background_class_){ goog.dom.classes.add(domEl,this.data_.classname); domEl.style['background'] = ''; @@ -220,7 +222,7 @@ lime.fill.Frame.prototype.setDOMStyle = function(domEl,shape) { goog.dom.classes.remove(domEl,shape.cvs_background_class_); shape.cvs_background_class_ = this.data_.classname; } - + this.setDOMBackgroundProp_(domEl,shape); }; diff --git a/lime/src/fill/image.js b/lime/src/fill/image.js index 2569cd6e..c7035bb3 100644 --- a/lime/src/fill/image.js +++ b/lime/src/fill/image.js @@ -78,7 +78,6 @@ lime.fill.Image.prototype.initForSprite = function(sprite){ var size = sprite.getSize(),that = this; if(!size.width && !size.height){ if(!this.isLoaded()){ - goog.events.listen(this,goog.events.EventType.LOAD,function(){ var size = this.getSize(); if(!size.width && !size.height){ @@ -112,7 +111,7 @@ lime.fill.Image.prototype.addLoadHandler_ = function(){ * @private */ lime.fill.Image.prototype.imageLoadedHandler_ = function(e) { - this.dispatchEvent(e); + this.dispatchEvent({type:'load'}); }; /** @@ -226,21 +225,53 @@ lime.fill.Image.prototype.setDOMStyle = function(domEl,shape) { lime.fill.Image.prototype.setCanvasStyle = function(context,shape) { var size = shape.getSize(),frame = shape.getFrame(); - if (!size.width || !size.height) { - return; - } - try { + + if (!size.width || !size.height) return; + + var so = this.getPixelSizeAndOffset(shape),s=so[0],offset=so[1]; + var pat = offset.x < 0 || offset.y < 0 || size.width > s.width - offset.x || size.height > s.height - offset.y; + if (pat || !this.writeToCanvas || this.rotated_) { var img = this.getImageElement(); - var so = this.getPixelSizeAndOffset(shape),s=so[0],offset=so[1]; - /* todo: No idea if drawimage() with loops is faster or if the - pattern object needs to be cached. Needs to be tested! */ - var ptrn = context.createPattern(img,'repeat'); + + if (!img._pattern && img.complete) { + // todo: different context? memory leak? + img._pattern = context.createPattern(img,'repeat'); + } var aspx = s.width/img.width, aspy =s.height/img.height; context.save(); context.translate(frame.left+offset.x,frame.top+offset.y); context.scale(aspx,aspy); - context.fillStyle = ptrn; + context.fillStyle = img._pattern || 'none'; context.fillRect(-offset.x/aspx,-offset.y/aspy,size.width/aspx, size.height/aspy); context.restore(); - }catch(e){} + } + else { + img = this.image_; + if (!img._pattern && img.complete) { + // todo: different context? memory leak? + img._pattern = context.createPattern(img,'repeat'); + } + aspx = s.width/this.csize_.width, aspy =s.height/this.csize_.height; + context.save(); + context.translate(frame.left+offset.x,frame.top+offset.y); + context.scale(aspx,aspy); + + context.fillStyle = img._pattern || 'none'; + // todo: negative offsets? + var l = this.rect_.left; + var t = this.rect_.top; + + context.translate(this.coffset_.x - l, this.coffset_.y - t); + var rr = goog.math.Rect.intersection(this.rect_, + new goog.math.Rect( + l - offset.x/aspx - this.coffset_.x, + t - offset.y/aspy - this.coffset_.y, + size.width/aspx, + size.height/aspy + ) + ) + context.fillRect(rr.left, rr.top, rr.width, rr.height); + context.restore(); + } + }; diff --git a/lime/src/fill/lineargradient.js b/lime/src/fill/lineargradient.js index 279075da..6c771b18 100644 --- a/lime/src/fill/lineargradient.js +++ b/lime/src/fill/lineargradient.js @@ -139,15 +139,19 @@ lime.fill.LinearGradient.prototype.setCanvasStyle = function(context, shape) { width = frame.right - frame.left, height = frame.bottom - frame.top; - var grad = context.createLinearGradient( - frame.left + width * p[0], - frame.top + height * p[1], - frame.left + width * p[2], - frame.top + height * p[3] - ); - - for (var i = 0; i < this.colors_.length; i++) { - grad.addColorStop(this.colors_[i][0], this.colors_[i][1].str); + if (!this._grad) { + // todo: this does not work when gradient changes. need to also store the frame. + var grad = context.createLinearGradient( + frame.left + width * p[0], + frame.top + height * p[1], + frame.left + width * p[2], + frame.top + height * p[3] + ); + + for (var i = 0; i < this.colors_.length; i++) { + grad.addColorStop(this.colors_[i][0], this.colors_[i][1].str); + } + this._grad = grad; } - context.fillStyle = grad; + context.fillStyle = this._grad; }; diff --git a/lime/src/helper/dom.js b/lime/src/helper/dom.js new file mode 100644 index 00000000..93b1a176 --- /dev/null +++ b/lime/src/helper/dom.js @@ -0,0 +1,13 @@ +goog.provide('lime.dom'); +goog.require('goog.dom'); + +lime.dom.isDOMSupported = function() { + if (goog.global['CocoonJS_ENV'] === true) return false; + // This works for Ejecta. Probably not for others. Pull request! + return !!document.head.parentNode; +} + +var old = goog.dom.getOwnerDocument; +goog.dom.getOwnerDocument = function() { + return old.apply(goog.dom, arguments) || document; +} \ No newline at end of file diff --git a/lime/src/helper/glossybutton.js b/lime/src/helper/glossybutton.js index 2e9f927f..8ddaeb83 100644 --- a/lime/src/helper/glossybutton.js +++ b/lime/src/helper/glossybutton.js @@ -13,7 +13,12 @@ goog.require('lime.fill.LinearGradient'); * @extends lime.Button */ lime.GlossyButton = function(txt) { - lime.Button.call(this, this.makeState_(txt), this.makeState_(txt)); + var upstate = this.makeState_(txt); + var downstate = this.makeState_(txt); + lime.Button.call(this, upstate.rect, downstate.rect); + + this.upstate_ = upstate; + this.downstate_ = downstate; this.borderWidth = 2; @@ -30,12 +35,14 @@ goog.inherits(lime.GlossyButton, lime.Button); * @return {lime.RoundedRect} state. */ lime.GlossyButton.prototype.makeState_ = function(txt) { - var state = new lime.RoundedRect(); + var state = new lime.GlossyButton.State(); + + state.rect = new lime.RoundedRect(); state.inner = new lime.RoundedRect(); state.label = new lime.Label(txt).setAlign('center'). setFontFamily('"Trebuchet MS"').setFontColor('#010101').setFontSize(17); - state.appendChild(state.inner); + state.rect.appendChild(state.inner); state.inner.appendChild(state.label); return state; }; @@ -47,9 +54,9 @@ lime.GlossyButton.prototype.makeState_ = function(txt) { */ lime.GlossyButton.prototype.setColor = function(clr) { clr = lime.fill.parse(clr); - goog.array.forEach([this.upstate, this.downstate], function(s) { - var c = s == this.downstate ? clr.clone().addSaturation(-.2) : clr; - s.setFill(c); + goog.array.forEach([this.upstate_, this.downstate_], function(s) { + var c = s == this.downstate_ ? clr.clone().addSaturation(-.2) : clr; + s.rect.setFill(c); var grad = new lime.fill.LinearGradient().setDirection(0, 0, 0, 1); grad.addColorStop(0, c.clone().addBrightness(.13)); grad.addColorStop(.5, c.clone().addBrightness(.05)); @@ -66,8 +73,8 @@ lime.GlossyButton.prototype.setColor = function(clr) { * @return {lime.GlossyButton} object itself. */ lime.GlossyButton.prototype.setText = function(txt) { - this.upstate.label.setText(txt); - this.downstate.label.setText(txt); + this.upstate_.label.setText(txt); + this.downstate_.label.setText(txt); return this; }; @@ -98,9 +105,9 @@ lime.GlossyButton.prototype.setFontFamily = function(font) { lime.GlossyButton.prototype.setSize = function(value, opt_height) { if (this.upstate) { this.upstate.setSize.apply(this.upstate, arguments); - var size = this.upstate.getSize(); - goog.array.forEach([this.upstate, this.downstate], function(s) { - s.setSize(size); + var size = this.upstate_.rect.getSize(); + goog.array.forEach([this.upstate_, this.downstate_], function(s) { + s.rect.setSize(size); var innerSize = size.clone(); innerSize.width -= this.borderWidth; innerSize.height -= this.borderWidth; @@ -114,3 +121,5 @@ lime.GlossyButton.prototype.setSize = function(value, opt_height) { lime.GlossyButton.prototype.getSize = function() { return this.upstate.getSize(); }; + +lime.GlossyButton.State = function() {}; diff --git a/lime/src/lime.js b/lime/src/lime.js index fd905f60..d4abe5fd 100644 --- a/lime/src/lime.js +++ b/lime/src/lime.js @@ -2,6 +2,7 @@ goog.provide('lime'); goog.require('goog.style'); goog.require('lime.css'); +goog.require('lime.dom'); goog.require('lime.userAgent'); (function() { @@ -107,6 +108,7 @@ lime.Transition = { OPACITY: 5 }; - -goog.style.installStyles(lime.css.css(null, null)); +if (lime.dom.isDOMSupported()) { + goog.style.installStyles(lime.css.css(null, null)); +} diff --git a/lime/src/node.js b/lime/src/node.js index 715a2a41..7976ff8e 100644 --- a/lime/src/node.js +++ b/lime/src/node.js @@ -75,6 +75,22 @@ lime.Node = function() { this.setRenderer(this.supportedRenderers[0].getType()); this.setDirty(lime.Dirty.LAYOUT); + + this.activeMask_ = null; + this.isMask = null; + this.targetNode = null; + this.mWidth = null; + this.mHeight = null; + this.mPos = null; + this.mSet = null; + this.mX = null; + this.mY = null; + this.mRot = null; + this.relativeQuality_ = null; + this.hidden_ = null; + this.autoHide_ = null; + this.dependencySet_ = null; + this.maskTarget_ = null; }; goog.inherits(lime.Node, goog.events.EventTarget); @@ -714,11 +730,15 @@ lime.Node.prototype.updateLayout = function() { * @param {number=} opt_pass Pass number. */ lime.Node.prototype.update = function(opt_pass) { - // if (!this.renderer) return; - var property, + // if (!this.renderer) return; + var property, value; var pass = opt_pass || 0; + if (!this.inTree_) { + return this.setDirty(0, pass); + } + var uid = goog.getUid(this); if (this.dirty_ & lime.Dirty.LAYOUT) { this.updateLayout(); @@ -863,7 +883,7 @@ lime.Node.getPropertyForTransition = function(transition) { * @return {lime.Node} Parent node. */ lime.Node.prototype.getParent = function() { - return this.parent_ ? this.parent_ : null; + return this.parent_ || null; }; /** diff --git a/lime/src/renderer/canvas.js b/lime/src/renderer/canvas.js index 8086da8a..68485c6c 100644 --- a/lime/src/renderer/canvas.js +++ b/lime/src/renderer/canvas.js @@ -18,6 +18,8 @@ lime.Renderer.CANVAS = new lime.Renderer(); */ lime.Renderer.CANVAS.updateLayout = function() {}; +lime.Renderer.CANVAS.CLEAR_COLOR = null; + /** * Initalize canvas element and start the drawing process * @this {lime.Node} @@ -38,7 +40,7 @@ lime.Renderer.CANVAS.drawCanvas = function() { } else { if (this.staticCanvas != 1 && this.children_.length != 0) { - if(!(this instanceof lime.Scene)){ + if(!(this instanceof lime.Scene) && !(this instanceof lime.Director)){ bounds.expand(PADDING, PADDING, PADDING, PADDING); } } @@ -72,12 +74,15 @@ lime.Renderer.CANVAS.drawCanvas = function() { var bsize = bounds.size(); var pxsize = bsize.clone().ceil(); + + if (this.domElement.width != pxsize.width || this.domElement.height != pxsize.height) { - this.domElement.width = pxsize.width; - this.domElement.height = pxsize.height; + if (this.domElement !== this.container) { + this.domElement.width = pxsize.width; + this.domElement.height = pxsize.height; + } this.redraw_ = 1; - // console.log('redraw'); } @@ -119,16 +124,39 @@ lime.Renderer.CANVAS.drawCanvas = function() { if (goog.isDef(this.transitionsActive_[lime.Transition.ROTATION])) { rotation = -this.transitionsActive_[lime.Transition.ROTATION]; } - lime.style.setTransform(this.domElement, - new lime.style.Transform().setPrecision(.1).translate(pos.x, pos.y). - scale(realScale.x, realScale.y).rotate(rotation)); + if (this.domElement !== this.container) { + lime.style.setTransform(this.domElement, + new lime.style.Transform().setPrecision(.1).translate(pos.x, pos.y). + scale(realScale.x, realScale.y).rotate(rotation)); + } } + + if (this.redraw_) { var context = this.domElement.getContext('2d'); + if (lime.Renderer.CANVAS.CLEAR_COLOR) { + context.fillStyle = lime.Renderer.CANVAS.CLEAR_COLOR; + context.fillRect(0, 0, this.domElement.width, this.domElement.height); + } + else { + context.clearRect(0, 0, this.domElement.width, this.domElement.height); + } - context.clearRect(0, 0, pxsize.width, pxsize.height); context.save(); + if (this.domElement === this.container) { + context.translate(pos.x, pos.y); + context.scale(realScale.x, realScale.y); + context.save(); + context.beginPath(); + context.moveTo(0, 0); + context.lineTo(pxsize.width, 0); + context.lineTo(pxsize.width, pxsize.height); + context.lineTo(0, pxsize.height); + context.closePath(); + context.restore(); + context.clip(); + } context.translate(this.ax, this.ay); var size = this.getSize(), anchor = this.getAnchorPoint(); @@ -208,7 +236,7 @@ lime.Renderer.CANVAS.drawCanvasObject = function(context) { var zero = new goog.math.Coordinate(0, 0); for (var i = 0, child; child = this.children_[i]; i++) { - var pos = child.localToParent(zero).clone(), rot = child.getRotation(), scale = child.getScale(); + var pos = child.localToParent(zero), rot = child.getRotation(), scale = child.getScale(); context.save(); context.translate(pos.x, pos.y); context.scale(scale.x,scale.y); diff --git a/lime/src/scene.js b/lime/src/scene.js index 2ee7dcee..30afe54f 100644 --- a/lime/src/scene.js +++ b/lime/src/scene.js @@ -15,7 +15,8 @@ lime.Scene = function() { this.setAnchorPoint(0, 0); this.domClassName = goog.getCssName('lime-scene'); - this.createDomElement(); + + //this.updateDomElement(); }; goog.inherits(lime.Scene, lime.Node); diff --git a/lime/src/schedulemanager.js b/lime/src/schedulemanager.js index bfc831b5..e85510ce 100644 --- a/lime/src/schedulemanager.js +++ b/lime/src/schedulemanager.js @@ -48,6 +48,8 @@ lime.scheduleManager = new (function() { */ this.lastRunTime_ = 0; + this.animationFrameHandlerBinded_ = null; + })(); /** @@ -246,7 +248,7 @@ lime.scheduleManager.disable_ = function() { lime.scheduleManager.animationFrameHandler_ = function(time){ var performance = goog.global['performance'], now; - if (performance && (now = performance['now'] || performance['webkitNow'])) { + if (performance && performance['timing'] && (now = performance['now'] || performance['webkitNow'])) { time = performance['timing']['navigationStart'] + now.call(performance); } else if (!time) { diff --git a/lime/src/shape/label.js b/lime/src/shape/label.js index 67f86766..ff27263f 100644 --- a/lime/src/shape/label.js +++ b/lime/src/shape/label.js @@ -2,7 +2,7 @@ goog.provide('lime.Label'); goog.provide('lime.Renderer.CANVAS.LABEL'); goog.provide('lime.Renderer.DOM.LABEL'); - +goog.require('lime.dom'); goog.require('lime.Renderer.CANVAS.SPRITE'); goog.require('lime.Renderer.DOM.SPRITE'); goog.require('lime.Sprite'); @@ -36,6 +36,11 @@ lime.Label = function(txt) { this.setStyle("normal"); + this.lastDrawnWidth_ = null; + this.sizeCache_ = null; + this.words_ = null; + this.lines_ = null; + }; goog.inherits(lime.Label, lime.Sprite); @@ -75,7 +80,8 @@ lime.Label.prototype.measureText = function() { if (this.getMultiline()) { lh *= goog.string.trim(this.text_).split('\n').length } - mContext.font = this.getStyle() + ' ' + this.getFontWeight() + ' ' + this.getFontSize() + 'px ' + this.getFontFamily(); + + mContext.font = this.getFontSize() + 'px Helvetica' //+ ' ' + this.getFontWeight() + ' ' + this.getFontSize() + 'px ' + this.getFontFamily(); var metrics = mContext.measureText(this.text_); var w = goog.userAgent.WEBKIT ? metrics.width : metrics.width + 1; @@ -84,7 +90,7 @@ lime.Label.prototype.measureText = function() { w += 1; var stroke = this.stroke_?this.stroke_.width_:0; - return new goog.math.Size( + return this.sizeCache_ = new goog.math.Size( this.padding_[1] + this.padding_[3] + w + stroke*2, this.padding_[0] + this.padding_[2] + lh + stroke*2 ); @@ -95,7 +101,7 @@ lime.Label.prototype.measureText = function() { lime.Label.prototype.getSize = function() { var size = lime.Node.prototype.getSize.call(this); if (!size || (!size.width && !size.height)) { - return this.measureText(); + return this.sizeCache_ || this.measureText(); } return size; }; @@ -116,7 +122,7 @@ lime.Label.prototype.getText = function() { lime.Label.prototype.setText = function(txt) { this.text_ = txt + ''; this.setDirty(lime.Dirty.CONTENT); - delete this.words_; + this.words_ = null; return this; }; @@ -472,8 +478,12 @@ lime.Label.prototype.wrapText = function(context, width) { /** @inheritDoc */ lime.Label.prototype.update = function(){ - if(this.getDirty() & lime.Dirty.CONTENT) - delete this.lastDrawnWidth_; + var dirty = this.getDirty(); + + if (dirty & lime.Dirty.CONTENT) this.lastDrawnWidth_ = null; + if (dirty) { + this.sizeCache_ = null; + } lime.Node.prototype.update.apply(this,arguments); }; @@ -545,8 +555,10 @@ lime.Renderer.CANVAS.LABEL.draw = function(context) { var lh = this.getLineHeight(); context.fillStyle = this.getFontColor(); - context.font = this.getStyle() + ' '+ this.getFontWeight() + ' ' + this.getFontSize() + - 'px/' + lh + ' ' + this.getFontFamily(); + + context.font = this.getFontSize() + 'px Helvetica'/*this.getFontWeight() + ' ' + this.getFontSize() + + 'px/' + lh + ' ' + this.getFontFamily();*/ + context.textAlign = align; context.textBaseline = 'top'; @@ -584,6 +596,7 @@ lime.Renderer.CANVAS.LABEL.draw = function(context) { * @param {string=} opt_format Font format. */ lime.Label.installFont = function(name, fileurl, opt_format) { + if (!lime.dom.isDOMSupported()) return; var format = opt_format || 'truetype'; goog.style.installStyles('@font-face{font-family: "' + name + '";src: url(' + fileurl + ') format("' + format + '");})'); diff --git a/lime/templates/cocoonjs/index.html b/lime/templates/cocoonjs/index.html new file mode 100644 index 00000000..b110fc25 --- /dev/null +++ b/lime/templates/cocoonjs/index.html @@ -0,0 +1,17 @@ + + + + + + \ No newline at end of file