闲得无聊 之 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引擎 显示一个菜单

上次显示了一张图片作为背景, 现在在背景之上添加一个菜单start, options, about, ext之类的。 先ps一张图片,里面放置菜单文字,如下 每个菜单项给设定两种状态,即 ...
  • dyyaries
  • dyyaries
  • 2013年01月16日 12:07
  • 1794

cocos2d-x游戏引擎基础知识介绍(一)

cocos2d-x基础概念 cocos2d-x是一个跨平台的游戏引擎。游戏引擎是由一些提供常见的功能的软件组成。你可能通常把它称为API或者框架,但是在本教程中,我们称之为游戏引擎。游戏引擎包含很多...
  • Letme_Carry_you
  • Letme_Carry_you
  • 2017年07月27日 10:34
  • 365

HTML5 FileReader详解与实例---读取并显示图像文件

我们曾经在《HTML5 中 File 对象初探》中,使用到了FileReader,在那篇文章中,它被用来将一个文件读取为二进制字符串,并通过 xhr 发送到后端形成交互。作为 File API 的...
  • sure_viola
  • sure_viola
  • 2013年08月13日 15:06
  • 2453

基于HTML5的轻量级图像处理引擎Demo

前几天看了看腾讯Web前端Alloy Team的基于HTML5的专业级开源图像处理引擎,非常喜欢,毕竟这样的项目本身在国内就不多,更别说做得好的。我说的所谓这样的项目,指的是基于HTML5和javas...
  • ph_wuwuwu
  • ph_wuwuwu
  • 2013年04月24日 18:33
  • 1573

html5系列:利用html5 file api读取本地文件(如图片、PDF等)

在html4的年代,我们如果要在网页上呈现一张用户本地的图片,需要用户先把图片上传到服务器,再根据服务器提供的图片地址把图片下载下来,才能把图片在网页上呈现出来。这一来二往,起码已经费了两倍于这张图片...
  • array_huang
  • array_huang
  • 2015年12月03日 16:16
  • 462

【Cocos2d-HTML5 开发之一】新建HTML5项目及简单阐述与cocos2d/x引擎关系

本站文章均为 李华明Himi 原创,转载务必在明显处注明:(作者新浪微博: @李华明Himi ) 转载自【黑米GameDev街区】 原文链接: http://www.himigame.com/coco...
  • xiaominghimi
  • xiaominghimi
  • 2013年08月21日 17:05
  • 14131

html5.超链接标签,图片标签

超链接标签    a标签常用的属性:   href  : 用于指定链接的资源     target: 设置打开新资源的目标。    _Blank 在独立的窗口上打开新资源   _self 在当...
  • androidforme
  • androidforme
  • 2016年04月06日 17:43
  • 2239

Android设备上一张图片的显示过程

转自:http://blog.csdn.net/jxt1234and2010/article/details/50524213 Android设备上一张图片的显示过程 应用示例 假如...
  • dddd0216
  • dddd0216
  • 2017年07月20日 18:16
  • 758

android ImageView实现图片浏览器(点击左侧显示上一张,点击右侧显示下一张)

1.实现代码如下: public class MainActivity extends Activity { private int[] mImages = { R.drawable.juxie...
  • sp1336542268
  • sp1336542268
  • 2015年01月18日 15:39
  • 902

cocos2d-x 改变精灵图片的2种方法。

cocos2d-x 改变精灵图片的2种方法。   1。 // 首先载入贴图集 CCSpriteBatchNode *spriteBatch=CCSpriteBatchNode::batc...
  • hitwhylz
  • hitwhylz
  • 2013年07月24日 09:24
  • 12594
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:闲得无聊 之 Cocos2d html5引擎 显示一张图片
举报原因:
原因补充:

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