标签：cocos2d cocos2d-x c++ 游戏 开发人员
我们的编写的第一个Cocos2d-JS程序，命名为HelloJS，从该工程开始学习其它的内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cocos2d-html5 Hello World test</title>
<link rel="icon" type="image/GIF" href="res/favicon.ico"/>
<meta name="apple-mobile-web-app-capable" content="yes"/> ①
<meta name="full-screen" content="yes"/>
<meta name="screen-orientation" content="portrait"/>
<meta name="x5-fullscreen" content="true"/>
<meta name="360-fullscreen" content="true"/> ②
<style>
body, canvas, div {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
</style>
</head>
<body style="padding:0; margin: 0; background: #000;">
<canvas id="gameCanvas" width="800" height="450"></canvas> ③
<script src="frameworks/cocos2d-html5/CCBoot.js"></script> ④
<script src="main.js"></script> ⑤
</body>
</html>上述代码第①~②行是设置网页的meta信息，meta信息是网页基本信息，这些设置能够使得index.html网页很好地在移动设备上显示。c.game.onStart = function(){ ①
cc.view.adjustViewPort(true); ②
cc.view.setDesignResolutionSize(800, 450, cc.ResolutionPolicy.SHOW_ALL); ③
cc.view.resizeWithBrowserSize(true); ④
//load resources
cc.LoaderScene.preload(g_resources, function () { ⑤
cc.director.runScene(new HelloWorldScene()); ⑥
}, this);
};
cc.game.run(); ⑦上述代码第①行是启动游戏，cc.game是一个游戏启动对象。代码第②~④行是设置游戏视图属性，其中第③行是设置游戏视图大小，它涉及到屏幕适配问题，cc.ResolutionPolicy.SHOW_ALL是屏幕适配策略。{
"project_type": "javascript",
"debugMode" : 1,
"showFPS" : true, ①
"frameRate" : 60, ②
"id" : "gameCanvas",
"renderMode" : 0,
"engineDir":"frameworks/cocos2d-html5",
"modules" : ["cocos2d"], ③
"jsList" : [ ④
"src/resource.js", ⑤
"src/app.js" ⑥
]
}project.json文件采用JSON字符串表示，我们重点关注有标号的语句，其中第①行代码是设置是否显示帧率调试信息，帧率调试就是显示在左下角文字信息。第②行代码是设置帧率为60，即屏幕1/60秒刷新一次。第③行代码是加载游戏引擎的模块，Cocos2d-JS引擎有很多模块，模块的定义是在HelloJS\frameworks\cocos2d-html5\moduleConfig.json，我们在资源管理器中才能看到该文件，这些模块在场景启动的时候加载，因此一定要根据需要导入，否则造成资源的浪费。例如我们再添加一个chipmunk物理引擎模块，代码第③可以修改如下形式：{
"init_cfg": { ①
"isLandscape": true, ②
"name": "HelloJS", ③
"width": 960, ④
"height": 640, ⑤
"entry": "main.js", ⑥
"consolePort": 6050,
"debugPort": 5086,
"forwardConsolePort": 10088,
"forwardUploadPort": 10090,
"forwardDebugPort": 10086
},
"simulator_screen_size": [
{
"title": "iPhone 3Gs (480x320)",
"width": 480,
"height": 320
},
… …
]
}上述代码第①行是初始配置信息，其中第②行是设置横屏显示还是竖屏显示，第③行代码name属性是设置模拟器上显示的标题，第④和⑤行是设置屏幕的宽和高，第⑥行代码是设置入口文件。var res = { ①
HelloWorld_png : "res/HelloWorld.png",
CloseNormal_png : "res/CloseNormal.png",
CloseSelected_png : "res/CloseSelected.png"
};
var g_resources = []; ②
for (var i in res) {
g_resources.push(res[i]); ③
}上述代码第①行是定义JSON变量res，它为每一个资源文件定义一个别名，在程序中访问资源，资源名不要“写死[ 写死被称为硬编码（英语：Hard Code或Hard Coding），硬编码指的是在软件实作上，把输出或输入的相关参数（例如：路径、输出的形式或格式）直接以常量的方式书写在源代码中，而非在运行时期由外界指定的设置、资源、数据或格式做出适当回应。——引自于维基百科 http://zh.wikipedia.org/zh-cn/%E5%AF%AB%E6%AD%BBvar g_resources = [
//image
res.HelloWorld_png,
res.CloseNormal_png,
"res/CloseSelected.png"
];放在g_resources变量这的资源，会在场景其中的时候加载的，在Web浏览器下运行如果加载的资源找不到会报出404错误。var HelloWorldLayer = cc.Layer.extend({ ①
sprite:null, //定义一个精灵属性
ctor:function () { //构造方法
this._super(); //初始化父类
var size = cc.winSize; //获得屏幕大小
var closeItem = new cc.MenuItemImage( ②
res.CloseNormal_png,
res.CloseSelected_png,
function () {
cc.log("Menu is clicked!");
}, this);
closeItem.attr({
x: size.width - 20,
y: 20,
anchorX: 0.5,
anchorY: 0.5
}); ③
var menu = new cc.Menu(closeItem); //通过closeItem菜单项创建菜单对象
menu.x = 0; ④
menu.y = 0; ⑤
this.addChild(menu, 1); //把菜单添加到当前层上
var helloLabel = new cc.LabelTTF("Hello World", "Arial", 38); //创建标签对象
helloLabel.x = size.width / 2;
helloLabel.y = 0;
this.addChild(helloLabel, 5);
this.sprite = new cc.Sprite(res.HelloWorld_png); //创建精灵对象
this.sprite.attr({
x: size.width / 2,
y: size.height / 2,
scale: 0.5,
rotation: 180
}); ⑥
this.addChild(this.sprite, 0);
this.sprite.runAction(
cc.sequence(
cc.rotateTo(2, 0),
cc.scaleTo(2, 1, 1)
)
); //在精灵对象上执行一个动画
helloLabel.runAction(
cc.spawn(
cc.moveBy(2.5, cc.p(0, size.height - 40)),
cc.tintTo(2.5,255,125,0)
)
); //在标签对象上执行一个动画
return true;
}
});
var HelloWorldScene = cc.Scene.extend({ ⑦
onEnter:function () { ⑧
this._super(); ⑨
var layer = new HelloWorldLayer(); ⑩
this.addChild(layer); //把HelloWorldLayer层放到HelloWorldScene场景中
}
}); 还有上述代码第⑧行是声明onEnter方法，它是在进入HelloWorldScene场景时候回调的。onEnter方法是从重写父类的方法，我们必需通过this._super()语句调用父类的onEnter方法，见代码第⑨行所示。
《Cocos2d-x实战 JS卷》现已上线，各大商店均已开售：
京东：http://item.
标签：cocos2d cocos2d-x c++ 游戏 开发人员
原文地址：http://blog.csdn.net/tonny_guan/article/details/44462165
