cocos2d-js-3.0-final 笔记(一)
环境搭建教程视频
官网的大神已经出了环境搭建视频了，不赘述，直接到入手阶段。
首先创建一个项目之后，看看我们的入口文件index.html
<!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>
简单易懂，就是一个html5页面，里面多了个canvas，没错，基于我目前的理解，基于html5真的只是基于了html5的canvas,我们的游戏画面就在这个上面渲染完成。
细心的人已经发现这个canvas有width和height，这个我们稍后再提。
接下来我们看看读取我们程序的入口文件app.js
var HelloWorldLayer = cc.Layer.extend({
sprite:null,
ctor:function () {
//////////////////////////////
// 1. super init first
this._super();
/////////////////////////////
// 2. add a menu item with "X" image, which is clicked to quit the program
// you may modify it.
// ask the window size
var size = cc.winSize;
// add a "close" icon to exit the progress. it's an autorelease object
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);
menu.x = 0;
menu.y = 0;
this.addChild(menu, 1);
/////////////////////////////
// 3. add your codes below...
// add a label shows "Hello World"
// create and initialize a label
var helloLabel = new cc.LabelTTF("Hello World", "Arial", 38);
// position the label on the center of the screen
helloLabel.x = size.width / 2;
helloLabel.y = 0;
// add the label as a child to this layer
this.addChild(helloLabel, 5);
// add "HelloWorld" splash screen"
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.fadeOut(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);
}
});
里面写满了英文注释。。
这个页面就涉及了cocos2d-js的几个基本概念 场景scence,层layer,精灵sprite。
我们要在canvas中显示东西就要先去读取场景
HelloWorldScene 这个场景 这个场景里加载了层 var layer = new HelloWorldLayer(); 然后把层显示出来 this.addChild(layer);
OK搞定，我们就要去读取场景里层的内容，层中能加载精灵，精灵能做啥呢。。
this.sprite = new cc.Sprite(res.HelloWorld_png); 精灵能加载我们在resouce.js里预定义好的资源文件 这里加载了一张图。
未完，我才发现要写的这么多。。待续