Support for single Canvas rendering (OpenGL Canvas accelerators)

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

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$"
+}
+}

lime/demos/roundball/board.js

@@ -182,7 +182,7 @@ rb.Board.prototype.checkSolutions = function() {
  * @return {Array.<lime.Gem>} 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
 

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,24 +23,20 @@ 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;
 };
 
 /**
  * @inheritDoc
  */
 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);

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

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;

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);

lime/demos/roundball/rb2.html

@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+
+<html>
+<head>
+	<title>RoundBall</title>
+	<script type="text/javascript" src="../../../closure/closure/goog/base.js"></script>
+	<script type="text/javascript" src="rb.js"></script>
+	<style>
+	body {
+	background: #1c6aa1;
+	background:-webkit-gradient(radial, 50% 50%, 10, 50% 50%, 850, from(#1eb1d8), to(#1b345e), color-stop(.4,#1c6aa1));
+	background: -moz-radial-gradient(center 45deg, circle farthest-side, #1eb1d8 0%, #1c6aa1 40%, #1b345e 100%);
+	}
+	</style>
+</head>
+
+<body onload="rb.start(document.getElementById('mycanvas'))">
+
+  <canvas id="mycanvas" width="700" height="500" style="border: 3px solid #c00"></canvas>
+
+</body>
+
+</html>

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),

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;

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;

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();