mirror of https://github.com/axmolengine/axmol.git
323 lines
8.8 KiB
JavaScript
323 lines
8.8 KiB
JavaScript
//
|
|
// http://www.cocos2d-iphone.org
|
|
// http://www.cocos2d-html5.org
|
|
// http://www.cocos2d-x.org
|
|
//
|
|
// Javascript + cocos2d actions tests
|
|
//
|
|
|
|
require("js/helper.js");
|
|
|
|
director = cc.Director.getInstance();
|
|
winSize = director.getWinSize();
|
|
centerPos = cc.p( winSize.width/2, winSize.height/2 );
|
|
|
|
var scenes = []
|
|
var currentScene = 0;
|
|
|
|
var nextScene = function () {
|
|
currentScene = currentScene + 1;
|
|
if( currentScene >= scenes.length )
|
|
currentScene = 0;
|
|
|
|
withTransition = true;
|
|
loadScene(currentScene);
|
|
};
|
|
|
|
var previousScene = function () {
|
|
currentScene = currentScene -1;
|
|
if( currentScene < 0 )
|
|
currentScene = scenes.length -1;
|
|
|
|
withTransition = true;
|
|
loadScene(currentScene);
|
|
};
|
|
|
|
var restartScene = function () {
|
|
loadScene( currentScene );
|
|
};
|
|
|
|
var loadScene = function (sceneIdx)
|
|
{
|
|
winSize = director.getWinSize();
|
|
centerPos = cc.p( winSize.width/2, winSize.height/2 );
|
|
|
|
var scene = new cc.Scene();
|
|
scene.init();
|
|
var layer = new scenes[ sceneIdx ]();
|
|
|
|
scene.addChild( layer );
|
|
|
|
// scene.walkSceneGraph(0);
|
|
|
|
director.replaceScene( scene );
|
|
// __jsc__.garbageCollect();
|
|
}
|
|
|
|
var TAG_NODE = 100;
|
|
|
|
|
|
//
|
|
// Base Layer
|
|
//
|
|
|
|
var BaseLayer = cc.LayerGradient.extend({
|
|
|
|
ctor:function () {
|
|
|
|
var parent = new cc.LayerGradient();
|
|
__associateObjWithNative(this, parent);
|
|
this.init(cc.c4b(0, 0, 0, 255), cc.c4b(0, 128, 255, 255));
|
|
},
|
|
|
|
title:function () {
|
|
return "No Title";
|
|
},
|
|
|
|
subtitle:function () {
|
|
return "";
|
|
},
|
|
|
|
code:function () {
|
|
return "";
|
|
},
|
|
|
|
restartCallback:function (sender) {
|
|
restartScene();
|
|
},
|
|
|
|
nextCallback:function (sender) {
|
|
nextScene();
|
|
},
|
|
|
|
backCallback:function (sender) {
|
|
previousScene();
|
|
},
|
|
|
|
onEnter:function () {
|
|
// DO NOT CALL this._super()
|
|
// this._super();
|
|
|
|
// add title and subtitle
|
|
var label = cc.LabelTTF.create(this.title(), "Arial", 28);
|
|
this.addChild(label, 1);
|
|
label.setPosition( cc.p(winSize.width / 2, winSize.height - 40));
|
|
|
|
var strSubtitle = this.subtitle();
|
|
if (strSubtitle != "") {
|
|
var l = cc.LabelTTF.create(strSubtitle, "Thonburi", 16);
|
|
this.addChild(l, 1);
|
|
l.setPosition( cc.p(winSize.width / 2, winSize.height - 70));
|
|
}
|
|
|
|
var strCode = this.code();
|
|
if( strCode !="" ) {
|
|
var label = cc.LabelTTF.create(strCode, 'CourierNewPSMT', 16);
|
|
label.setPosition( cc.p( winSize.width/2, winSize.height-120) );
|
|
this.addChild( label,10 );
|
|
|
|
var labelbg = cc.LabelTTF.create(strCode, 'CourierNewPSMT', 16);
|
|
labelbg.setColor( cc.c3b(10,10,255) );
|
|
labelbg.setPosition( cc.p( winSize.width/2 +1, winSize.height-120 -1) );
|
|
this.addChild( labelbg,9);
|
|
}
|
|
|
|
// Menu
|
|
var item1 = cc.MenuItemImage.create("Images/b1.png", "Images/b2.png", this, this.backCallback);
|
|
var item2 = cc.MenuItemImage.create("Images/r1.png", "Images/r2.png", this, this.restartCallback);
|
|
var item3 = cc.MenuItemImage.create("Images/f1.png", "Images/f2.png", this, this.nextCallback);
|
|
var item4 = cc.MenuItemFont.create("back", this, function() { require("js/main.js"); } );
|
|
item4.setFontSize( 22 );
|
|
|
|
var menu = cc.Menu.create(item1, item2, item3, item4 );
|
|
|
|
menu.setPosition( cc.p(0,0) );
|
|
item1.setPosition( cc.p(winSize.width / 2 - 100, 30));
|
|
item2.setPosition( cc.p(winSize.width / 2, 30));
|
|
item3.setPosition( cc.p(winSize.width / 2 + 100, 30));
|
|
item4.setPosition( cc.p(winSize.width - 60, winSize.height - 30 ) );
|
|
|
|
this.addChild(menu, 1);
|
|
|
|
|
|
// back menu
|
|
}
|
|
});
|
|
|
|
//
|
|
// Parallax 1
|
|
//
|
|
ParallaxTest1 = BaseLayer.extend({
|
|
|
|
_root:null,
|
|
_target:null,
|
|
_streak:null,
|
|
|
|
|
|
ctor:function () {
|
|
this._super();
|
|
|
|
// Top Layer, a simple image
|
|
var cocosImage = cc.Sprite.create("Images/powered.png");
|
|
// scale the image (optional)
|
|
cocosImage.setScale(1.5);
|
|
// change the transform anchor point to 0,0 (optional)
|
|
cocosImage.setAnchorPoint(cc.p(0, 0));
|
|
|
|
// Middle layer: a Tile map atlas
|
|
// var tilemap = cc.TMXTiledMap.create("TileMaps/orthogonal-test2.tmx");
|
|
var tilemap = cc.TileMapAtlas.create("TileMaps/tiles.png", "TileMaps/levelmap.tga", 16, 16);
|
|
|
|
// change the transform anchor to 0,0 (optional)
|
|
tilemap.setAnchorPoint(cc.p(0, 0));
|
|
|
|
// Anti Aliased images
|
|
tilemap.getTexture().setAntiAliasTexParameters();
|
|
|
|
// background layer: another image
|
|
var background = cc.Sprite.create("Images/background.png");
|
|
// scale the image (optional)
|
|
background.setScale(1.5);
|
|
// change the transform anchor point (optional)
|
|
background.setAnchorPoint(cc.p(0, 0));
|
|
|
|
|
|
// create a void node, a parent node
|
|
var voidNode = cc.ParallaxNode.create();
|
|
|
|
// NOW add the 3 layers to the 'void' node
|
|
|
|
// background image is moved at a ratio of 0.4x, 0.5y
|
|
voidNode.addChild(background, -1, cc.p(0.4, 0.5), cc.p(0,0));
|
|
|
|
// tiles are moved at a ratio of 2.2x, 1.0y
|
|
voidNode.addChild(tilemap, 1, cc.p(2.2, 1.0), cc.p(0, -200));
|
|
|
|
// top image is moved at a ratio of 3.0x, 2.5y
|
|
voidNode.addChild(cocosImage, 2, cc.p(3.0, 2.5), cc.p(200, 800));
|
|
|
|
|
|
// now create some actions that will move the 'void' node
|
|
// and the children of the 'void' node will move at different
|
|
// speed, thus, simulation the 3D environment
|
|
var goUp = cc.MoveBy.create(4, cc.p(0, -500));
|
|
var goDown = goUp.reverse();
|
|
var go = cc.MoveBy.create(8, cc.p(-1000, 0));
|
|
var goBack = go.reverse();
|
|
var seq = cc.Sequence.create(goUp, go, goDown, goBack );
|
|
voidNode.runAction((cc.RepeatForever.create(seq) ));
|
|
|
|
this.addChild(voidNode);
|
|
},
|
|
|
|
title:function () {
|
|
return "Parallax: parent and 3 children";
|
|
}
|
|
});
|
|
|
|
|
|
//
|
|
// Parallax 2
|
|
//
|
|
ParallaxTest2 = BaseLayer.extend({
|
|
|
|
_root:null,
|
|
_target:null,
|
|
_streak:null,
|
|
|
|
|
|
ctor:function () {
|
|
this._super();
|
|
|
|
var platform = __getPlatform();
|
|
if( platform.substring(0,7) == 'desktop' )
|
|
this.setMouseEnabled( true );
|
|
else if( platform.substring(0,6) == 'mobile' )
|
|
this.setTouchEnabled( true );
|
|
|
|
// Top Layer, a simple image
|
|
var cocosImage = cc.Sprite.create("Images/powered.png");
|
|
// scale the image (optional)
|
|
cocosImage.setScale(1.5);
|
|
// change the transform anchor point to 0,0 (optional)
|
|
cocosImage.setAnchorPoint(cc.p(0, 0));
|
|
|
|
|
|
// Middle layer: a Tile map atlas
|
|
var tilemap = cc.TileMapAtlas.create("TileMaps/tiles.png", "TileMaps/levelmap.tga", 16, 16);
|
|
|
|
// change the transform anchor to 0,0 (optional)
|
|
tilemap.setAnchorPoint( cc.p(0, 0) );
|
|
|
|
// Anti Aliased images
|
|
tilemap.getTexture().setAntiAliasTexParameters();
|
|
|
|
|
|
// background layer: another image
|
|
var background = cc.Sprite.create("Images/background.png");
|
|
// scale the image (optional)
|
|
background.setScale(1.5);
|
|
// change the transform anchor point (optional)
|
|
background.setAnchorPoint(cc.p(0, 0));
|
|
|
|
// create a void node, a parent node
|
|
var voidNode = cc.ParallaxNode.create();
|
|
|
|
// NOW add the 3 layers to the 'void' node
|
|
|
|
// background image is moved at a ratio of 0.4x, 0.5y
|
|
voidNode.addChild(background, -1, cc.p(0.4, 0.5), cc.p(0,0));
|
|
|
|
// tiles are moved at a ratio of 2.2x, 1.0y
|
|
voidNode.addChild(tilemap, 1, cc.p(2.2, 1.0), cc.p(0, -200));
|
|
|
|
// top image is moved at a ratio of 3.0x, 2.5y
|
|
voidNode.addChild(cocosImage, 2, cc.p(3.0, 2.5), cc.p(200, 800));
|
|
this.addChild(voidNode, 0, TAG_NODE);
|
|
|
|
},
|
|
|
|
onTouchesMoved:function (touches, event) {
|
|
var node = this.getChildByTag(TAG_NODE);
|
|
var currentPos = node.getPosition();
|
|
node.setPosition( cc.pAdd( currentPos, touches[0].getDelta() ) );
|
|
},
|
|
|
|
onMouseDragged : function( event ) {
|
|
var node = this.getChildByTag(TAG_NODE);
|
|
var currentPos = node.getPosition();
|
|
node.setPosition( cc.pAdd( currentPos, event.getDelta() ) );
|
|
},
|
|
|
|
title:function () {
|
|
return "Parallax: drag screen";
|
|
}
|
|
});
|
|
|
|
//
|
|
// Order of tests
|
|
//
|
|
scenes.push( ParallaxTest1 );
|
|
scenes.push( ParallaxTest2 );
|
|
|
|
//------------------------------------------------------------------
|
|
//
|
|
// Main entry point
|
|
//
|
|
//------------------------------------------------------------------
|
|
function run()
|
|
{
|
|
var scene = cc.Scene.create();
|
|
var layer = new scenes[currentScene]();
|
|
scene.addChild( layer );
|
|
|
|
var runningScene = director.getRunningScene();
|
|
if( runningScene == null )
|
|
director.runWithScene( scene );
|
|
else
|
|
director.replaceScene( cc.TransitionFade.create(0.5, scene ) );
|
|
}
|
|
|
|
run();
|
|
|