Hi Ive tested some of your sample but it does not work with cocoonjs ? when I touch the button , cocoonjs will return error touchstart node.ownerdocument [undefined].
This is my codes. (basically I just use ur demo and mixed it up with actor as button). When click with mouse it is working but when I zip it and put into cocoonjs it wont work....
window.addEventListener('load', function(){
CAAT.Module.Initialization.Template.init(800,500,"_c1",
[ {id:"botones",url:"images/botones.png"}
],_scene1
);
}, false);
function createNumber(director, n, color) {
var actor = new CAAT.Foundation.UI.TextActor().
setFont("140px Lucida-sans").
setText("Scene " + n).
calcTextSize(director).
setAlign("center").
setTextFillStyle(color).
setOutline(true).
cacheAsBitmap().
enableEvents(false).
addBehavior(
new CAAT.Behavior.RotateBehavior().
setFrameTime(0, 20000).
setValues(0, 2 * Math.PI).
setCycle(true));
actor.centerAt(director.width / 2, director.height / 2);
return actor;
}
function createButton(director, rotated) {
var actor = new CAAT.Foundation.Actor().
setSize(60, 60).
centerAt(director.width - 40, director.height - 40);
actor.paint = function (director, time) {
var ctx = director.ctx;
ctx.save();
if (rotated) {
ctx.translate(this.width, 0);
ctx.scale(-1, 1);
}
ctx.fillStyle = this.pointed ? 'orange' : '#f3f';
ctx.fillRect(0, 0, this.width, this.height);
ctx.strokeStyle = this.pointed ? 'red' : 'black';
ctx.strokeRect(0, 0, this.width, this.height);
ctx.strokeStyle = 'white';
ctx.beginPath();
ctx.moveTo(5, 10);
ctx.lineTo(20, 10);
ctx.lineTo(15, 5);
ctx.moveTo(20, 10);
ctx.lineTo(15, 15);
ctx.lineWidth = 2;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.stroke();
ctx.restore();
ctx.font = '10px sans-serif';
ctx.fillStyle = 'black';
ctx.fillText(
rotated ? 'Prev Scene' : 'Next Scene',
3,
45);
};
return actor;
}
function createPattern(director, color) {
var actor = new CAAT.Foundation.Actor().
setSize(director.width, director.height).
enableEvents(false);
actor.paint = function (director, time) {
var i, j, ctx;
ctx = director.ctx;
ctx.beginPath();
for (j = 0.5; j < director.width; j += 20) {
ctx.moveTo(j, 0);
ctx.lineTo(j, director.height);
}
for (i = 0.5; i < director.height; i += 20) {
ctx.moveTo(0, i);
ctx.lineTo(director.width, i);
}
ctx.strokeStyle = color;
ctx.stroke();
};
return actor;
}
function _scene1(director) {
var ci= new CAAT.Foundation.SpriteImage().initialize(
director.getImage('botones'), 7, 3 );
var scene1 = director.createScene();
scene1.addChild(createPattern(director, '#33f'));
scene1.addChild(createNumber(director, 1, '#33f'));
var button = createButton(director, false);
button.mouseClick = function (e) {
director.switchToNextScene(
2000,
false,
true
)
}
var b1 = new CAAT.Foundation.Actor().setAsButton(ci.getRef(), 0, 1, 2, 0, function (button) {
director.switchToNextScene(
2000,
false,
true
)
}).setLocation(0, 30);
var container1 = new CAAT.ActorContainer().setBounds(0, 0, director.width, director.height);
container1.addChild(b1);
container1.addChild(button);
scene1.addChild(container1);
var scene2 = director.createScene();
scene2.addChild(createPattern(director, '#f33'));
scene2.addChild(createNumber(director, 2, '#f33'));
var button2 = createButton(director, true);
button2.mouseClick = function (e) {
director.switchToPrevScene(
2000,
false,
true
)
}
var b2 = new CAAT.Foundation.Actor().setAsButton(ci.getRef(), 0, 1, 2, 0, function (button) {
director.switchToPrevScene(
2000,
false,
true
)
}).setLocation(0, 30);
var container2 = new CAAT.ActorContainer().setBounds(0, 0, director.width, director.height);
container2.addChild(b2);
container2.addChild(button2);
scene2.addChild(container2);
CAAT.loop(60);
}
Hi Ive tested some of your sample but it does not work with cocoonjs ? when I touch the button , cocoonjs will return error touchstart node.ownerdocument [undefined].
This is my codes. (basically I just use ur demo and mixed it up with actor as button). When click with mouse it is working but when I zip it and put into cocoonjs it wont work....
window.addEventListener('load', function(){
CAAT.Module.Initialization.Template.init(800,500,"_c1",
[ {id:"botones",url:"images/botones.png"}
],_scene1
);
}, false);
function createNumber(director, n, color) {
var actor = new CAAT.Foundation.UI.TextActor().
setFont("140px Lucida-sans").
setText("Scene " + n).
calcTextSize(director).
setAlign("center").
setTextFillStyle(color).
setOutline(true).
cacheAsBitmap().
enableEvents(false).
addBehavior(
new CAAT.Behavior.RotateBehavior().
setFrameTime(0, 20000).
setValues(0, 2 * Math.PI).
setCycle(true));
}
function createButton(director, rotated) {
var actor = new CAAT.Foundation.Actor().
setSize(60, 60).
centerAt(director.width - 40, director.height - 40);
}
function createPattern(director, color) {
var actor = new CAAT.Foundation.Actor().
setSize(director.width, director.height).
enableEvents(false);
actor.paint = function (director, time) {
}
function _scene1(director) {
var ci= new CAAT.Foundation.SpriteImage().initialize(
director.getImage('botones'), 7, 3 );
}