本节我们会通过一个实例介绍纹理对象创建Sprite对象使用,这个实例如图5-2所示,其中地面上的草是放在背景(如下图所示)中的,场景中的两棵树是从后图所示的“树”纹理图片中截取出来的,图5-5所示是树的纹理坐标,注意它的坐标原点在左上角。
创建Sprite对象实例
场景背景图片
“树”纹理图片
“树”纹理图片
下面我们看看app.js 中HelloWorldLayer中初始化代码如下:
- var HelloWorldLayer = cc.Layer.extend({
- ctor:function () {
- this._super();
- var size = cc.director.getWinSize();
- var bg = new cc.Sprite(res.background_png); ①
- bg.x = size.width/2;
- bg.y = size.height/2;
- this.addChild(bg);
- var tree1 = new cc.Sprite(res.tree_png,cc.rect(604, 38, 302, 295)); ②
- tree1.x = 200;
- tree1.y = 230;
- this.addChild(tree1);
- var texture = cc.textureCache.addImage(res.tree_png); ③
- var tree2 = new cc.Sprite(texture, cc.rect(73, 72,182,270)); ④
- tree2.x = 500;
- tree2.y = 200;
- this.addChild(tree2);
- }
- });
在上面代码第①行通过图片创建精灵,变量res.background_png是图片的完整路径,它是在resource.js文件中定义的,它代表的图片是background.png,background.png图片如图5-3所示。第②行代码是通过tree1.png图片(res.tree_png变量保存的内容)和矩形裁剪区域创建精灵,矩形裁剪区域为(604, 38, 302, 295),如图所示。
rect类可以创建矩形裁剪区,rect构造函数如下:
rect (x, y, width, height)
其中x,y是UI坐标,坐标原点在左上角,width是裁剪矩形的宽度,height是裁剪矩形的高度。
第③行代码把tree1.png图片添加到纹理缓存中,第④行代码是通过指定纹理和裁剪的矩形区域来创建精灵。
更多内容请关注最新Cocos图书《Cocos2d-x实战:JS卷——Cocos2d-JS开发》
本书交流讨论网站:http://www.cocoagame.net
欢迎加入Cocos2d-x技术讨论群:257760386
更多精彩视频课程请关注智捷课堂Cocos课程:http://v.51work6.com
智捷课堂现推出Cocos会员,敬请关注:http://v.51work6.com/courseInfoRedirect.do?action=netDetialInfo&courseId=844465&categoryId=0
《Cocos2d-x实战 JS卷》现已上线,各大商店均已开售:
京东:http://item.jd.com/11659698.html
欢迎关注智捷iOS课堂微信公共平台,了解最新技术文章、图书、教程信息
相关推荐
资源名称:Cocos2d-x实战:JS卷——Cocos2d-JS开发内容简介:本书是介绍Cocos2d-x游戏编程和开发技术书籍,介绍了使用Cocos2d-JS中核心类、瓦片地图、物理引擎、音乐音效、数据持久化、网络通信、性能优化、多平台...
Cocos2d-x实战
《Cocos2D-X游戏开发技术精解》详细介绍如何使用Cocos2D-X引擎开发自己的移动平台游戏。全书共15章,主要内容包括:Cocos2D-X引擎简介;如 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。
一线资深游戏开发工程师根据Cocos2D-X 最新版本撰写,Cocos2D-X创始人王哲、CSDN创始人蒋涛联袂推荐 完全通过真实游戏案例驱动,不仅将Cocos2D-X的各种功能、原理、技巧融入其中,而且还详细讲解了空战类、塔防类、...
引擎版本:cocos2d-js-v3.6.1 js代码开发工具:Cocos Code IDE 1.2.0 xcode版本:Xcode-6.3.1 MAC:OS XYosemite 10.10.2 == 该游戏已经成功通过AppStore的审核上线并开始获得广告收入! == 除了源码之外,还附带...
Cocos2d-JS中使用Cocos Studio资源03:设置界面
Cocos2d-x实战 JS卷 Cocos2d-JS开发 PDF 电子书完整版本
Cocos2d-JS中使用Cocos Studio资源05:帧动画 动画资源,代码
《Cocos2D-X游戏开发技术精解》详细介绍如何使用Cocos2D-X引擎开发自己的移动平台游戏。全书共15章,主要内容包括:Cocos2D-X引擎简介;如何建立跨平台的开发环境;引擎的核心模块——渲染框架;如何实现动态画面和...
本光盘是《Cocos2d-x游戏开发实战精解》一书的配书光盘,内容介绍如下。 (1)本书教学视频:该文件夹收录了本书的配套多媒体教学视频,可用暴风影音等视频播放器播放。 (2)本书源文件:该文件夹收录了本书涉及...
Cocos2d-JS中使用Cocos Studio资源02:登录界面 cocos studio 界面图片资源
这些内容融汇了作者多年的工作经验和Cocos2d-JS 的亲身使用教训,有助于读者快速掌握游戏开发的方法和避开不必要的麻烦。 《Cocos2d-JS开发之旅——从HTML 5到原生手机游戏》以两个游戏为线索,每一章的学习都为...
Rapid Game Development Using Cocos2d-JS An end-to-end guide to 2D game development using JavaScript 英文无水印原版pdf pdf所有页面使用FoxitReader、PDF-XChangeViewer、SumatraPDF和Firefox测试都可以打开...
【麦可网】Cocos2d-X跨平台游戏开发学习笔记
本指南适用于 Cocos2d-JS 单文件引擎的使用,可从检索。 您可能已经下载了以下三个版本之一: 完整版:完整版引擎包含 Cocos2d-JS 的所有功能和所有扩展,它可以帮助您探索其巨大的可能性。 可以参考的功能列表 ...
Cocos2d-x的基本架构及渲染机制、纹理相关的知识、OpenGL ES 2.0渲染管线、计算机字体的绘制、多分辨率支持、事件分发、碰撞与物理引擎、游戏对象模型架构、Genius-x开源框架、脚本在游戏引擎中的架构等。...
该书作者是《保卫萝卜》核心开发人员,该书手把手教会大家如何使用Cocos2d-js开发一款《保卫萝卜》手游,cocos2d创始人 王哲 亲自为本书作序!是一部非常优秀的开发书籍!
cocos2d-x-2.1.5
Get a gentle introduction to the Cocos2d-JS framework to begin working with sprite manipulations, animations, and other 2d game development topics. This book covers environment setup and getting ...
Cocos2d-JS---demo 放在服务器上就可以直接预览了,本地打开是黑屏,Cocos2d-JS的方法及效果的演示