文档章节

《Cocos2d-x游戏开发实战精解》学习笔记1--在Cocos2d中显示图像

爱琴海之女妖
 爱琴海之女妖
发布于 2016/02/16 20:52
字数 1188
阅读 26
收藏 0

         Cocos2d-x中的图像是通过精灵类来显示的。在Cocos2d-x中游戏中的每一个角色、怪物、道具都可以理解成是一个精灵,游戏背景作为一种特殊的单位将其理解成是一个精灵也没有什么不妥。在源文件本章目录下的项目ChapterThree03就展示了使用Cocos2d-x实现简单游戏开始界面的方法,主要就是通过精灵类来显示图像,其关键代码如范例3-5所示。

【范例3-5 Cocos2d-x中显示图像】

Size size = Director::getInstance()->getVisibleSize();      //获取屏幕尺寸
//背景图像
auto* background = Sprite::create("background.jpg");        //创建精灵类,背景图片为background.jpg
background->setPosition(size.width/2,size.height/2);        //让背景图像居中显示
background->setScale(0.7f);                                 //让背景图片缩小尺寸
addChild(background,0);                                     //将背景图片加入到场景中
//屏幕右侧的三个按钮
auto* button1 = Sprite::create("button.png");               //按钮的素材图片为button.png
button1->setPosition(550, size.height / 2);                 //第一个按钮的位置
button1->setScale(0.6f);                                    //设置按钮大小
addChild(button1,1);                                        //将第一个按钮加入到场景中
auto* button2 = Sprite::create("button.png");               //第二个按钮
button2->setPosition(550, size.height / 2-60);
button2->setScale(0.6f);
addChild(button2,1);                                        //将第二个按钮加入到场景中
auto* button3 = Sprite::create("button.png");               //第三个按钮
button3->setPosition(550, size.height / 2 - 120);
button3->setScale(0.6f);
addChild(button3,1);                                        //将第三个按钮加入到场景中
//左侧的古风人物
auto* renwu = Sprite::create("renwu.png");                   //创建精灵类,人物素材存放在renwu.png中
renwu->setPosition(0,0);                                     //设置人物位置
renwu->setAnchorPoint(Vec2(0,0));                           //设置精灵锚点
renwu->setScale(0.5f);
addChild(renwu,2);                                           //将人物加入到场景中

运行之后的效果如图3-5所示。

3-5 利用精灵类实现的游戏开始界面

     可以到该项目的Resources目录下查看该范例所使用的素材如图3-6所示。一共有3张图片分别是用来作为背景图片的background.jpg、按钮图片button.png和左侧人物图片renwu.png。可以看出图3-5所示的界面实际上就是这3张素材以一定的规律叠放在一起的结果。而范例3-5所实现的正是这样的一个功能。

3-6 范例3-5中用到的素材

    在范例3-5的第01行首先获取了当前屏幕的尺寸存放在变量size中,然后创建了一个精灵类的对象background,其中create方法的参数就是所需要素材的文件名,如范例第02行所示。接下来要做的就是使用addChild方法将该精灵对象加入到场景中去,如范例第06行所示。

    但是在本范例除了要将图片显示出来,还要实现图片位置的变化,以及缩放等功能,因此还要看看第0405行处的内容。第04行中使用setPosition方法设置了背景图片所在的位置,在默认情况下,Cocos2d-x中元素的锚点位于图片最中央的部分,因此setPosition中的参数表示图片的中点与屏幕的左下角在xy两个方向的位移。

    至于第05行中使用的setScale则是直接使用一个float类型的小数来设置图片缩放的倍数,由于本范例中背景图片的大小是可以知道的,而窗口宽度(屏幕宽度)则被设置为了640*360,因此可以保证整个屏幕都被背景图像占满,而在实际开发中自然还会遇到屏幕适配的问题,这将在本章后续的内容中进行讲解。

    第08~19行则是使用了类似的方法将3个按钮加入到场景中,并设置了一定的位移和缩放。第21~25行的作用是将人物图像加入到场景中,不难看到相对之前所使用的代码,该部分新使用了一个setAnchorPoint方法。该方法的作用是设置当前对象的锚点,如第23行所示。它将人物图像的锚点设置在了其最左下角的位置,此后再使用setPosition方法时,其中的参数就变成了图像的左下角与屏幕左下角的相对位置。

推荐一本学Cocos2d-x最新版的新书《Cocos2d-x游戏开发实战精解》,清华出版,必属精品!

© 著作权归作者所有

共有 人打赏支持
爱琴海之女妖
粉丝 1
博文 10
码字总数 6939
作品 0
东城
私信 提问
OSC 第 115 期高手问答 -- 移动手游 Cocos2d-x 开发大家谈

OSCHINA 本期高手问答(4月5日-4月13日)我们请来了 @isapanda (欧桐桐)为大家解答关于移动手游Cocos2dx和移动跨平台游戏前景方面的问题。 @isapanda ,毕业于大连海事大学信息管理与信息系统...

开源中国股侠
2016/04/05
3.5K
37
Cocos2dx游戏开发系列笔记8:开搞一个射击游戏《战神传说》//就个打飞机的

又是一个愉快的夜晚 还是那张长长的工作桌 哲哲在左边做一个香云纱手包 骨头在这里噼里啪啦的解刨 pad里放着《赢在中国》 桌子中间各种饮料、奶、水果... 进击吧~骨头~ 首先感谢Android技术...

懒骨头
2013/12/09
0
0
移动应用和游戏开发两个阶段在线视频培训的未来计划

在51CTO学院开线上视频课程已经3个多月了,也上了不少课。不过发现还有很多课没有开。现在就将未来的开课计划公布一下。计划分为两个阶段。第一阶段主要是Cocos2d-x和Cocos2d-js的游戏开发培...

androidguy
2018/06/29
0
0
关东升老师双十一大回馈!购课送书啦~~~

关东升老师的大名想必各位都听说过吧~~~ 【关东升老师的简介】 精通多种IT技术,参与设计和开发北京市公交一卡通百亿级大型项目,开发国家农产品追溯系统、金融系统微博等移动客户端项目,...

51CTO学院
2017/11/08
0
0
cocos2d-x支持c++、js、lua开发

作者:左文 链接:https://www.zhihu.com/question/21130385/answer/21789568 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 纯属个人观点 1 Unity3d支...

壹峰
2017/10/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

大数据教程(13.6)sqoop使用教程

上一章节,介绍了sqoop数据迁移工具安装以及简单导入实例的相关知识;本篇博客,博主将继续为小伙伴们分享sqoop的使用。 一、sqoop数据导入 (1)、导入关系表到HIVE ./sqoop import --connect...

em_aaron
18分钟前
0
0
Git cherry-pick 使用总结

应用背景:假设现在有两个分支:dev_01, dev_02. 如果我想把dev_01分支上的某几个commit合并到dev_02分支, 那么怎么办呢? 这就是cherry-pick的工作了。cherry-pick会捡选某些commit, 即把某...

天王盖地虎626
47分钟前
7
0
css动态设置宽高

css 中可以使用 calc() 来动态设置宽高,但是,在表达式中运算符的前后必须要有空格 height:calc(100vh - 80px)

林梓阳
59分钟前
2
0
Git忽略提交规则 - .gitignore配置运维总结

在使用Git的过程中,我们喜欢有的文件比如日志,临时文件,编译的中间文件等不要提交到代码仓库,这时就要设置相应的忽略规则,来忽略这些文件的提交。简单来说一个场景:在你使用git add ....

二团长的迫击炮
59分钟前
6
0
记录一次用VB合并数据,确实很好用

Sub 合并()Dim row, col, val As DoubleFor row = 1 To 710 Step 1 For col = 1 To 15 Step 1 If IsNumeric(sheet2.Cells(row, col)) And IsNumeric(Sheet3.Cells(row, ......

蓝栩液枫
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部