CVP认证学习笔记--(何小成)002--在场景中加入图片层

本节加入图片层与上一节加入文字层大同小异，上节说到cc.LabelTTF继承自cc.Sprite，而加入图片层直接添加cc.Sprite即可。

添加图片到resource.js，使之在启动时预加载图片

var res = {
    HelloWorld_png : "res/HelloWorld.png",
    logo_png:"res/logo.png",//图片预加载数组
    CVPlogo_png:"CVPlog.png"
};

格式为json格式，key为图片引用的名字，val为图片在项目中的路径

创建cc.Sprite对象，

1	var logopng = new cc.Sprite(logo_png);

为cc.Sprite设置属性

1 2	logopng.x=logopng.width; logopng.y=size.height-logopng.height;

作业要求是要讲图片放置在左上角，那么横纵坐标各式多少呢？实践为准，于是我试了(0,0),(0,size.height),(size.width,0),(size,width,size,height),结果发现，当坐标为(0,size.height)的时候，图片的中恰好在屏幕左上角，也就是说，如果按照坐标系来说的话，手机屏幕应该是处于坐标系的第二象限，这样就好理解多了。但还有一个问题，就是为什么图片只有四分之一漏了出来呢？其实这就是Sprite的锚点了，它的锚点默认是处于图片的正中心位置的，估计后面的课程如果讲到精灵的旋转变换等，一定会用到这个锚点的。

最后一步依然是讲图片层加入背景图层

1	this.addChilde(logopng);

总结

总的来说，免费体验的两节课程讲了如何在背景层中添加自己的文字层或图片层，它们的原理机制是一样的，两节课虽然内容不多，但这其中的内容，如果要去深挖，还是有很多东西的，比如像构造函数，属性设置，锚点，坐标系，资源加载等，不过体验课更多的是让我们了解cocos2djs开发的一个流程，项目结构等。相信真正有意思的课程都在后边，很是期待！

运行效果

http://www.cocoscvp.com/usercode/2016_04_05/16a648e2762f9b75fdd8be57202678aa511d20b4/