cocos-js web开发泡泡龙游戏【一 加载游戏场景】
发布时间:2020-12-14 20:34:13 所属栏目:百科 来源:网络整理
导读:哀家发现一个游戏如果不记录(复习)一下的话,不算真正记在脑子里了,也可以理解为我是一个手写记忆型。 我目前的水平,对cocos2d-x有了一些了解,对cocos2d-js没有接触过,看了一下泡泡龙的视频。但是两者是一个妈妈生的,很多东西都是相同的,就好理解的
哀家发现一个游戏如果不记录(复习)一下的话,不算真正记在脑子里了,也可以理解为我是一个手写记忆型。
我目前的水平,对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图片。
后来建立了一个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一个小按钮先。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容