闲得无聊 之 Cocos2d html5引擎 显示一张图片

原创 2013年01月15日 17:53:21

http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Download 下载cocos2d html5发布包,

在Demo目录中按照HelloDomMenu例子建立相同文件结构的helloworld目录,cocos2d.js和main.js就直接复制好了,之后再做修改。

准备一张图片mogu_bg.jpg复制到res中,图片大小无所谓

在src中创建MenuLayer.js

var MenuLayer = cc.Layer.extend({
	init:function(){
		var self = this;
		var bRet = false;
        if (this._super()) {
			var winSize = cc.Director.getInstance().getWinSize();
			
			//create background
			var bg = cc.Sprite.create(s_begin_bg);
			bg.setPosition(cc.p(winSize.width/2, winSize.height/2));
			bg.setVisible(true);
			self.addChild(bg, 0);
			
			bRet = true;
		}
		return bRet;
	}
});

var MenuScene = cc.Scene.extend({
	onEnter:function(){
		var self = this;
		self._super();
		var layer = new MenuLayer();
		layer.init();
		self.addChild(layer);
	}
});
首先从s_begin_bg(图片)创建一个sprite,然后把sprite添加到创建的layer中, 图片资源可以在资源文件中配置好,

在src中创建Resources.js

var dirImg = "res/";
//image
var s_begin_bg = dirImg + "mogu_bg.jpg";

//sound

var g_resources = [
	{type:"image", src:s_begin_bg}
];
创建完简单的layer之后, 在cocos2d.js和main.js中做相关的修改

cocos2d.js中修改appFiles 的值,把Resources.js和MenuLayer.js都加进去

main.js中修改 var myApp = new cocos2dApp(MenuScene); MenuScene是MenuLayer.js中创建的Scene


一切就绪之后把cocos2d html5整个目录拷贝到任意的apache服务器,http://localhost/cocos2d-html5/Demo/helloworld/ 就会出现这张图片了。^ ^


相关文章推荐

【Cocos2d-html5游戏引擎学习笔记(11)】运动中速度效果

在我们使用Action系统动作的时候,比如MoveTo,在进行运动的时候总是在规定的时间内进行匀速运动,有时候可能会想添加一些加速度的效果,cocos2d-html5就依然和cocos2dx一样为我们...

【Cocos2d-html5游戏引擎学习笔记(9)】Action系统动作

在游戏制作的过程中,动作也是很重要的一个部分,比如角色的跳跃,移动等等 cocos2d-html5提供了很多动作,调用起来十分方便,喜欢用cocos2d这套引擎就是觉得在场景跳转和动作方面省了很多...

【Cocos2d-html5游戏引擎学习笔记(12)】Schedule定时器

Schedule,从翻译的角度上来说就是”时间表“,差不多就是一个定时规划,在cocos2d里面使用的场景一般就是比如你想让一个精灵间隔多少次执行什么动画,或者一个场景想延迟多久进行跳转,ok,那么就...

【Cocos2d-html5游戏引擎学习笔记(7)】CCLayer创建及场景跳转

前些时间太忙了,终于可以再继续把自己学习经历分享一下。 游戏在制作的过程中,一定不仅仅是一个场景,总得来说应该有主菜单界面,游戏界面,如果游戏功能丰富,可能还会有帮助界面,设置界面等等,可能你会想...

【Cocos2d-html5游戏引擎学习笔记(3)】渲染文字

在介绍之前先介绍一点cocos2d-html5的一些语法特点,在cocos2d-x里面的一些类都是CCLabelTTF::create(),以CC开头,再使用工厂方法create出来,而cocos2d...

【Cocos2d-html5游戏引擎学习笔记(13)】ProgressAction进度计时器

我们在玩大型RPG游戏中,经常可以看到每个人物会有很多的技能,技能在施放的时候,可能需要吟唱一段时间,此时屏幕上会有个水平的时间条计时,当技能施放过后,又有CD时间,即所谓的冷却,这个时候技能槽就会呈...

【Cocos2d-html5游戏引擎学习笔记(4)】菜单按钮

本节就介绍一下cocos-html5的菜单类,总得来说菜单一共分为3大类,共5种显示菜单的方式。 第一类:文字类菜单 1. cc.MenuItemLabel var label1 =...

【Cocos2d-html5游戏引擎学习笔记(10)】自定义精灵动画

上篇说到在这次要把自定义动画补上来,所以这篇就介绍这个了,由于Cocos2d-html5这个引擎我在之前把以前的游戏重新覆写了一遍之后就没继续深究了,不过基本的常用类都用到了,所以现在回头来写学习笔记...

[入门教程]使用Cocos2d-html5游戏引擎编写一个简单的游戏 第一回合: 搭建开发环境

[入门教程]使用Cocos2d-html5游戏引擎编写一个简单的游戏 第一回合: 搭建开发环境    搭建开发环境 1.下载Cocos2d-html5 ...
  • hawkzen
  • hawkzen
  • 2014年08月02日 08:12
  • 409

【Cocos2d-html5游戏引擎学习笔记(8)】音乐及音效

cocos2d-html5同样为我们做好的音乐文件的播放功能,其实我们完全可以用cocos2d-html5来做一款音乐播放器,它为我们提供好了播放,暂停,回放,循环播放等等方法,只需要简单的调用即可。...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:闲得无聊 之 Cocos2d html5引擎 显示一张图片
举报原因:
原因补充:

(最多只允许输入30个字)