哀家发现一个游戏如果不记录(复习)一下的话,不算真正记在脑子里了,也可以理解为我是一个手写记忆型。
我目前的水平,对cocos2d-x有了一些了解,对cocos2d-js没有接触过,看了一下泡泡龙的视频。但是两者是一个妈妈生的,很多东西都是相同的,就好理解的许多,我仅对cocos2d-js的内容多做一些记录。
开始。
一。加载游戏场景
打开刚刚下载的cocos2d-js的时候里面的东西少得可怜,HelloWorld.png,还有一个json文件,一个index文件,一个coco2d-js的js,第一步就copy到我的编译器上了。
cut掉index文件里关于js的代码,建立一个main.js文件,copy进去。
现在的index文件
<!DOCTYPE html> <html> <head> <title>Hello Cocos2d-JS</title> <script type="text/javascript" src="js/cocos2d-js-v3.3-lite.js" charset="UTF-8"></script> </head> <body> <canvas id="gameCanvas" width="360px" height="640px"></canvas> <script type="text/javascript" src="js/main.js"></script> </body> </html>
main.js文件
window.onload = function(){ cc.game.onStart = function(){ //load resources cc.LoaderScene.preload(["HelloWorld.png"],function () { var MyScene = cc.Scene.extend({ onEnter:function () { this._super(); var size = cc.director.getWinSize(); var sprite = cc.Sprite.create("HelloWorld.png"); sprite.setPosition(size.width / 2,size.height / 2); sprite.setScale(0.8); this.addChild(sprite,0); var label = cc.LabelTTF.create("Hello World","Arial",40); label.setPosition(size.width / 2,size.height / 2); this.addChild(label,1); } }); cc.director.runScene(new MyScene()); },this); }; cc.game.run("gameCanvas"); };
cc.LoaderScene.preload(["HelloWorld.png"] 是指在场景加载之前预加载游戏资源,这里的资源就只有一张HelloWorld.png图片。
extend函数是干嘛的。我一如了cocos2d文件夹到工程里,ctrl+鼠标左键点进去看了看:它其中一项内容是把prototype封装在里面了,没有框架的时候,prototype是对象实例化的过程,那么这个extend就是创建Node的入口函数吧。
onEnter:function () { this._super(); var size = director.getWinSize(); sprite = Sprite.create("HelloWorld.png"); sprite.setPosition(size.width / 2,height / 2); setScale(0.8); this.addChild(sprite,0); label = LabelTTF.create("Hello World",0)">"Arial",255)">40); label.2); label,255)">1); }这个函数是cocos2d-x中移植来的吧,没什么区别,this._super();对象的父级对象初始化。cc.getWinSize();获取屏幕宽高。"HelloWorld.png"); 建立一个精灵图片 2);设置位置 0.8); 设置大小0); 添加到层中LabelTTF.create(1); 创建文本,大小,添加。
后来建立了一个StartScene类,把extend直接cut过去。在main.js里extend位置放一句话cc.director.runScene(new StartScene()); 创建一个场景把它在main.js中运行。这样就拥有了游戏场景类。为了资源管理问题。自己写了一个recourse.js类,模版代码如下var res={ Start_BG:"res/StartScene.jpg",Play_BG:"res/background4.jpg",Bubble_0:"res/bubble_0.png",Bubble_1:"res/bubble_1.png",Bubble_2:"res/bubble_2.png",Bubble_3:"res/bubble_3.png",Bubble_4:"res/bubble_4.png",Bubble_5:"res/bubble_5.png",Bubble_6:"res/bubble_6.png",Bubble_7:"res/bubble_7.png",Start_Btn:"res/rate_app_button.png",Shooter:"res/bubble_shooter.png" }; //把所有的图片push到数组里一起加载 var g_resources=[]; for(var i in res){ g_resources.push(res[i]); }目的就是在预加载游戏资源的时候直接加载这个resources类里的资源,避免游戏过程中因为家在资源而出现卡顿的问题,影响用户的游戏体验。
在StartScene类中就直接加载res中的Start_BG 图片啦。
//开始页面 var StartScene = cc.Scene.extend({ onEnter: function () { this._super(); var size = cc.director.getWinSize(); var sprite = cc.Sprite.create(res.Start_BG); sprite.setPosition(size.width / 2,size.height / 2); sprite.setScale(0.8); this.addChild(sprite,0); });
后来在最后又加了一个按钮:
var startItem = new cc.MenuItemImage( res.Start_Btn,res.Start_Btn,function () { cc.log("click"); cc.director.runScene( new BubbleScene()); } ); startItem.attr( { x:size.width/2,y:size.height/2-100,anchorX:0.5,anchorY:0.5 } ); var menu = new cc.Menu(startItem); menu.x=0; menu.y=0; this.addChild(menu);
与cocos2d-x的代码基本一致,MenuItemImage一个小按钮先。Menu(startItem);在加到menu里面统一管理。呈现的结果就是